简说 优化关键渲染路径

回顾 关键渲染路径

简说浏览器渲染－－关键渲染路径

渲染性能优化须要关注的关键点

1. 减小资源请求的字节数

2. 减小关键资源的数量

3. 缩短关键呈现路径的长度

减小资源请求的字节数

三个主要的方法：

1. 代码瘦身，如：去注释

2. 压缩

3. 缓存

减小关键资源的数量

什么是关键资源？

会阻塞页面渲染的资源，这些资源会应用在关键呈现路径中。

html是第一个关键资源，style.css会应用于CSSOM的构建，是第二个关键资源，app.js会阻塞DOM的构建，也属于关键资源

这里，由于js是异步的，不会阻塞关键呈现路径，不属于关键资源，因此共有2个关键资源

如何减小关键资源的数量

css会阻塞呈现，而且会阻止之行js,若是CSSOM不构建，就没法构建Render Tree.

• 其实内联样式对渲染性能很友好，可是为了样式的重用，和读写分离，每每不予采用，场景适合，能用内联便用内联。

• 把媒介查询放在html的媒体元素中，能够根据状况加载样式资源，避免了没必要要的资源的加载。好比：小屏只加载小屏资源，横屏资源 @media all and (orientation : landscape) { h2{color:red;}/横屏时字体红色/｝，能够为更须要的资源腾出空间...

js会阻塞DOM的构建，
咱们一半会推迟js，或者使用异步js.

缩短关键呈现路径的长度

什么是键呈现路径长度？

关键呈现路径长度就是取资源的次数

这里关键路径长度和关键资源数一致，都为2.

浏览器有很智能的欲加载器，他会在接收到文档后偷瞄文档中须要哪些资源，若是发现了要加载的资源，当解析被阻塞时，他就会尽量多地去加载这些资源。当解析被阻止时，这里，css和js会同时下载，因此关键路径长度仍为2

如何缩短关键呈现路径长度？

浏览器会有并行加载资源数的限制，若是网页很大，会须要来回屡次获取资源。
因此要根据状况合理控制文件资源大小

参考

优达的网站性能优化