seolu于2022-01-23发布在性能优化是一个涉及许多技能的复杂主题。如何通过优化网页性能来提升用户体验？今天给大家介绍一些常用的方法。
1. 尽量减少要传输的数据量
首先，删除所有未使用的部分，例如 中不可访问的函数、带有从不匹配任何元素的选择器的样式以及始终隐藏在 CSS 中的 HTML 标记。其次，删除所有重复项。然后，我建议设置一个自动缩小过程。例如，它应该删除后端服务的所有注释（但不是源代码）以及每个不包含其他信息的字符（如 JS 中的空格）。一旦完成，我们剩下的就可以是文本了。这意味着我们可以安全地应用 GZIP 等压缩算法（大多数浏览器都能理解）。最后是缓存。这在浏览器第一次渲染页面时没有多大帮助seolu.com' target='_blank'>网站优化，但在后续访问时会节省很多。但关键是要记住两件事：
如果使用 CDN，请确保支持缓存并在那里正确设置。
从您的角度来看，您可能希望有一种方法可以更早地更新它，而不是等待资源的到期日期。将文件的“指纹”嵌入到 URL 中，使本地缓存无效。
当然网站优化，应该为每个资源定义一个缓存策略。有些可能变化很小，或者根本没有变化。其他国家的变化更快。其中一些包含敏感信息，其他可能被视为公共信息。使用 "" 指令防止 CDN 缓存私有数据。Web 图像也可以进行优化，尽管图像请求不会阻止解析或呈现。
2. 减少关键资源的总数
“关键”仅指网页正确呈现所需的资源。因此，我们可以跳过所有不直接参与流程的样式优化排名，以及所有脚本。
样式表
为了告诉浏览器不需要特定的 CSS 文件，我们应该为所有引用样式表的链接设置 属性。使用这种方法，浏览器将仅根据需要处理与当前媒体（设备类型、屏幕尺寸）匹配的资源，同时取消所有其他样式表的优先级（它们将被处理，但不作为关键呈现路径的一部分）。例如，如果您将 ="" 属性添加到引用打印页面样式的样式标签，则这些样式不会在不打印介质时（即在浏览器中显示页面时）干扰关键渲染路径.
为了进一步改进这个过程，一些样式也可以被内联。这为我们节省了至少一次往返服务器的时间，否则我们需要获取样式表。
脚本
如上所述，脚本是解析器阻塞的，因为它们可以更改 DOM 和 . 所以不改变它们的脚本不应该是块解析，节省我们的时间。为此，必须使用 or 属性标记所有脚本标记。
标记为的脚本不会阻止 DOM 构建优化排名，或者因为它们可以在构建之前执行。但请记住，内联脚本无论如何都会阻塞，除非您将它们放在 CSS 之上。相反，标记为“延迟”的脚本将在页面加载结束时进行评估。因此，它们不应该影响文档（否则会触发重新渲染）。
换句话说，在页面加载事件触发之前，脚本不会执行，而在解析文档时，脚本可以在后台运行。
3. 缩短关键渲染路径长度
最后，应将 CRP 长度缩短到尽可能小的值。在某种程度上，上述方法可以做到这一点。
作为样式标签属性的媒体查询将减少必须下载的资产总数。 标签属性 并会阻止相应的脚本阻塞解析。使用 GZIP 压缩、压缩和归档资源将减少传输数据的大小（从而减少数据传输时间）。内联某些样式和脚本可以减少浏览器和服务器之间的往返次数。
我们没有讨论的是在文件之间重新排列代码的选项。根据最新的最佳性能理念，网站应该做的第一件事是显示 ATF 内容，ATF 代表上折，即无需滚动即可立即看到的区域。因此，最好重新排列与渲染相关的所有内容，以便首先加载所需的样式和脚本，然后停止其他所有内容 - 既不解析也不渲染，并始终记住在进行更改之前和之后进行测量。
综上所述，网站性能优化涵盖了网站响应性的各个方面，例如缓存、设置 CDN、重构、资源优化等，但所有这些都可以增量完成。作为 Web 开发人员，您应该将本文作为参考，并始终记住在实验前后测量性能。
