回顾关键渲染路径浏览器渲染简介——关键渲染路径渲染性能优化需要关注的重点减少资源请求字节数减少关键资源数量缩短长度关键渲染路径的减少关键渲染路径的长度资源请求的字节数三种主要方法:代码瘦身,例如:解压和压缩缓存以减少关键资源的数量什么是关键资源?会阻塞页面渲染的资源,这些资源会应用在关键的渲染路径中。html是第一个关键资源,style.css会应用到CSSOM的构建,是第二个关键资源,app.js会阻塞DOM的构建,这里也是关键资源,因为js是异步的,会notblockkey呈现路径不是关键资源,所以一共有2个关键资源。如何减少关键资源的数量?CSS会阻塞渲染,阻塞js。如果不构建CSSOM,则无法构建RenderTree。事实上,内联样式对渲染性能的影响非常友好,但是对于样式的复用和读写分离,往往不用。场景合适,可以使用inline。将媒体查询放在html的媒体元素中,可以根据情况加载样式资源,避免不必要的资源加载。例如:小屏只加载小屏资源,横屏资源@mediaalland(orientation:landscape){h2{color:red;}/横屏时字体为红色/},可以为更多需要的资源腾出空间。。。js会阻塞DOM的构建,我们中有一半人会延迟js,或者使用异步js。缩短关键渲染路径的长度什么是关键渲染路径长度?keypresentationpath的长度就是获取资源的数量。这里关键路径的长度和关键资源的个数一样,都是2。浏览器有一个智能加载器,在收到文档后会偷看文档中需要的资源。如果找到要加载的资源,当解析被阻塞时,他会加载尽可能多的资源。解析阻塞时,这里css和js是同时下载的,所以关键路径长度还是2如何缩短关键渲染路径长度?浏览器对并行加载的资源数量有限制。如果网页较大,则需要多次来回获取资源。因此,需要根据情况合理控制文件资源的大小。参考Uda的网站性能优化
