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