Vue服务器端渲染性能问题

Question

我遇到一个奇怪的问题。这是我呈现vue页面的代码。在我的本地计算机中，此页面的渲染时间约为50〜80ms，但是，如果我并行访问该页面，有时可能约为120ms（可能是200个请求的5倍），但是大多数情况下，它仍然是50〜80毫秒。

但是，当我将代码部署到我们的生产docker时，这些偷看时间变得越来越糟，有时甚至可以达到1秒，并且很多时候达到500ms，性能很差。这没有任何意义，请求负载并不重，我们也有负载平衡。对于我们使用EJS进行渲染的类似页面，我们看不到这种偷看的机会。用于EJS和Vue的后端逻辑和服务都相同。

客户端渲染也相同，症状相似。

任何机构都知道导致这种问题的原因是什么？

Answer 1

首先要做两件事：

1-尽可能使用灯塔进行快速测试，这将有助于查明问题所在。

2-检查控制台中是否有任何错误和警告。

没有关于您的代码的更多信息，我认为不可能说出是什么导致了问题。 但是，经过一段时间的搜索，我发现article的作者也遇到了同样的性能问题。

This是他的灯塔检查的结果。如您所见，他的网站在索引编制和内容丰富方面存在不足之处；长话短说，他有一个无限循环和无键的v-for循环。

以下是一些有关如何更好地优化vue应用程序的提示：

1. 应用Vue样式指南和ESLint

Vue文档中有一个样式指南：https://vuejs.org/v2/style-guide/。 您可以在那里找到四个规则类别。我们真的很关心其中的三个：

Essential规则可防止我们出错， Recommended和strongly recommended的规则，用于保持最佳实践–提高代码的质量和可读性。 您可以使用ESLint为您处理这些规则。您只需要在ESLint配置文件中正确设置所有内容即可。

1. 请勿使用多个v-if

2. 不要在组件中编写api调用处理程序

只需执行组件逻辑中本地必需的操作。每个可能在外部的方法都应该分开，并且只能在组件中调用，例如业务逻辑。

1. 使用老虎机代替大量道具

5。延迟加载路线

1. 使用带有即时选项的监视程序，而不是一起使用创建的钩子和监视程序。

在another article处介绍如何改进您的vue应用。

祝你好运！