认识达内从这里开始

用户能够看到的网页内容都是需要浏览器进行渲染之后才会呈现出来的一个东西，而本文我们就通过案例分析来简单了解一下，浏览器渲染性能优化都有哪些方法。

1.减少要传输的数据量

移除所有未使用的部分，例如JavaScript中无法访问的函数、带有从不匹配任何元素的选择器的样式以及被CSS永远隐藏的HTML标签。

删除所有重复项。

我建议建立一个自动压缩过程。例如，它应该从你的后端服务中删除所有注释(但不是源代码)以及每个不包含附加信息的字符(例如JS中的空白字符)。

完成后，我们剩下的可以是文本字符串。这意味着我们可以安全地应用诸如GZIP(大多数浏览器都理解)之类的压缩算法。

还有缓存。浏览器一次呈现页面时它不会有帮助，但它会在以后的访问中节省很多。但是，记住两点至关重要：

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

与其等待资源的到期，不如将文件的“指纹”嵌入到其URL中，以使本地缓存无效。

当然，应该为每个资源定义缓存策略。有些可能很少改变或根本不会改变，有的则是变化的很快，还有些文件包含敏感的信息(可以使用“private”防止CDN缓存私有数据)。

2.减少关键资源的总数

“关键”仅指网页正确呈现所需的资源。因此，我们可以直接跳过所有流程中没有涉及的样式以及脚本文件。

样式

为了告诉浏览器不需要特定的CSS文件，我们应该为所有引用样式表的链接设置媒体属性。使用这种方法，浏览器将只根据需要处理与当前媒体(设备类型、屏幕尺寸)匹配的资源，同时降低所有其他样式表的优先级。例如，如果你将media=“print”属性添加到引用样式以打印页面的样式标记，则这些样式不会在不打印媒体时干扰你的关键渲染路径。

为了进一步改进该过程，你还可以将一些样式内联，这可以为我们节省了至少一次到服务器的往返行程。

脚本

如上所述，脚本会阻塞解析，因为它们可以改变DOM和CSSOM。为了避免这一点，所有脚本标签都必须用属性标记——异步或延迟。

标有async的脚本不会阻塞DOM构建或CSSOM，因为它们可以在CSSOM构建之前执行。但请记住，内联脚本无论如何都会阻止CSSOM，除非你将它们放在CSS之上。相比之下，标有defer的脚本将在页面加载结束时进行执行。

换句话说，使用defer，脚本直到页面加载事件被触发后才会执行，而async让脚本在文档被解析时就会在后台运行。

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

作为样式标签属性的媒体查询将减少必须下载的资源总数。script标签属性defer和async将防止相应的脚本阻塞解析。

使用GZIP压缩、压缩和归档资源将减少传输数据的大小(从而也减少数据传输时间)。

内联一些样式和脚本也可以减少浏览器和服务器之间的往返次数。

按照新的佳性能实践理念，一个网站应该做的快的一件事就是展示ATF内容。ATF代表屏。这是立即可见的区域，无需滚动。因此，好以先加载所需样式和脚本的方式重新排列与渲染相关的所有内容，而其他所有内容都停止(既不解析也不渲染)。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。