回顾 关键渲染路径

关键渲染路径

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

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

  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

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

浏览器会有并行加载资源数的限制,如果网页很大,会需要来回多次获取资源。
所以要根据情况合理控制文件资源大小

参考

优达的网站性能优化


爱睡觉的小猫咪
310 声望22 粉丝

勤奋的小前端