|
性能优化是一个繁杂的专题，触及的技能非常多，怎样经过优化网页性能加强用户体验？今天给大众介绍有些平常的办法。
1. 尽可能减少要传输的数据量
首要，删除所有未运用的部分，例如JavaScript中不可拜访的函数、带有永远不匹配任何元素的选取器的样式，以及永远隐匿在CSS中的HTML标记。其次，删除所有重复项。而后，我意见设置一个自动缩小过程。例如，它应该删除后端服务的所有注释（但不是源代码）以及不包括其他信息的每一个字符（例如JS中的空白字符）。完成后，咱们剩下的能够是文本。这寓意着咱们能够安全地应用压缩算法，例如GZIP（大都数浏览器都能理解）。最后，还有缓存。当浏览器第1次呈现页面时，这不会有什么帮助，但会在以后的拜访中节省非常多。但关键是要记住两件事：
倘若运用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研发人员，您应该将本文做为参考，并始终记住在实验前后测绘性能。
认识更加多
| 
发表于 2024-7-27 12:18:16