网站性能优化三大策略

性能优化是一个复杂的话题，涉及到很多技能。如何通过优化网页性能来提高用户体验？今天，我想介绍一些常见的方法。

1. 尽量减少要传输的数据量

首先，删除所有未使用的部分，如JavaScript不可访问的函数，永远不匹配任何元素的选择器风格，永远隐藏在CSS中的HTML标记。其次，删除所有重复的项目。然后，我建议设置一个自动缩小过程。例如，它应该删除后端服务的所有注释（但不是源代码）和不包含其他信息的每个字符（例如JS中间的空白字符)。完成后，我们可以留下文本。这意味着我们可以安全地应用压缩算法，例如GZIP（大多数浏览器都能理解）。最后，还有缓存。当浏览器第一次显示页面时，它没有帮助，但在未来的访问中节省了很多。但关键是要记住两件事：

如果使用CDN，请确保支持缓存并正确设置。

你可能希望有一种方法可以从你的角度更新它，而不是等待资源的过期日期。嵌入文件的指纹URL本地缓存失效。

当然，缓存策略应该定义为每个资源。有些可能很少改变，或者根本不改变。其他国家变化更快。其中一些包含敏感信息，另一些可能被视为公共信息。private”指令防止CDN私有数据缓存也可以优化。web图像，尽管图像请求不会阻止分析或呈现。

2. 减少关键资源总数

关键只是指网页正确呈现所需的资源。因此，我们可以跳过所有未直接涉及的风格和脚本。

样式表

为了告诉浏览器不需要特定的内容CSS在文件中，我们应该为引用样式表的所有链接设置媒体属性。通过这种方法，浏览器将只处理与当前媒体（设备类型和屏幕大小）相匹配的资源，并降低所有其他样式表的优先级（它们将被处理，但不会作为关键渲染路径的一部分）。例如，如果添加到引用打印页面样式的样式标记中media=“print”属性，则当介质未打印时（即在浏览器中显示页面时），这些样式不会干扰关键呈现路径。

为了进一步改进这个过程，还可以内联一些风格。这为我们节省了至少一次往返服务器，否则我们需要这样做才能获得样式表。

脚本

如上所述，脚本被分析器堵塞，因为它们可以改变DOM和CSSOM。因此，不改变他们的脚本不应该是块分析，以节省我们的时间。为了实现这一点，所有的脚本标记都必须标记为async或defer属性。

标记为async脚本不会停止DOM构造或CSSOM，因为它们可以建造CSSOM以前执行过。但请记住，内联脚本无论如何都会被阻止。CSSOM，除非你把它们放进去CSS上面。相比之下，标记为延迟的脚本将在页面加载结束时进行评估。因此，它们不应影响文档（否则会触发重现）。

换句话说，使用defer，脚本直到页面加载事件触发才执行，async在分析文档时，允许脚本在后台运行。

3. 缩短关键渲染路径长度

最后，CRP长度应缩短到可能的最小值。上述方法在一定程度上可以做到这一点。

媒体查询作为样式标记属性，将减少必须下载的资源总数。脚本标记属性defer和async防止相应的脚本分析。GZIP减少、压缩和归档资源将减少数据传输的大小（从而减少数据传输时间）。内部风格和脚本可以减少浏览器和服务器之间的往返次数。

我们没有讨论的是在文件之间重新安排代码的选项。根据最新的最佳性能概念，网站应该做的第一件事就是显示ATF内容，ATF代表折叠的顶部，这是一个立即可见的区域，不需要滚动。因此，最好先加载所需的样式和脚本，然后重新安排所有与渲染相关的内容。所有其他内容都停止了—既不分析也不渲染，并始终记住在更改前后进行测量。

总之，网站性能优化包含了网站响应的所有方面，如缓存、设置CDN、重建、资源优化等，但这些都可以逐步完成。作为一个人web开发人员，您应以本文为参考，并始终记住在实验前后测量性能。

了解更多