简说优化关键渲染路径

BenCHou 发布于2019-08-01 16:31 / 1889人阅读

摘要：当解析被阻止时，这里，和会同时下载，所以关键路径长度仍为如何缩短关键呈现路径长度浏览器会有并行加载资源数的限制，如果网页很大，会需要来回多次获取资源。所以要根据情况合理控制文件资源大小参考优达的网站性能优化

回顾关键渲染路径

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

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

减少资源请求的字节数

减少关键资源的数量

缩短关键呈现路径的长度

减少资源请求的字节数

三个主要的方法：

代码瘦身，如：去注释

压缩

缓存

减少关键资源的数量 什么是关键资源？

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

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

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

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

参考

优达的网站性能优化

GPU云服务器云服务器网站关键词优化网站关键字优化青岛网站关键词优化网站关键词优化软件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50578.html

简说优化关键渲染路径

摘要：当解析被阻止时，这里，和会同时下载，所以关键路径长度仍为如何缩短关键呈现路径长度浏览器会有并行加载资源数的限制，如果网页很大，会需要来回多次获取资源。所以要根据情况合理控制文件资源大小参考优达的网站性能优化回顾关键渲染路径 showImg(https://segmentfault.com/img/bVKDWG?w=319&h=599); 简说浏览器渲染－－关键渲染路径渲染性能优化...

ShevaKuilin 2019-08-29 12:14 评论0 收藏0
简说优化关键渲染路径

摘要：当解析被阻止时，这里，和会同时下载，所以关键路径长度仍为如何缩短关键呈现路径长度浏览器会有并行加载资源数的限制，如果网页很大，会需要来回多次获取资源。所以要根据情况合理控制文件资源大小参考优达的网站性能优化回顾关键渲染路径 showImg(https://segmentfault.com/img/bVKDWG?w=319&h=599); 简说浏览器渲染－－关键渲染路径渲染性能优化...

fjcgreat 2019-08-20 15:08 评论0 收藏0
简说浏览器渲染－－关键渲染路径

摘要：浏览器的整体渲染过程构建当拿到一个文件，它是如何构建出树的呢浏览器会根据尖括号识别出标签，每一个标签都有和，其中的文本也会被解析出来这些开始结束将会以栈的方式，进行规则匹配，构建出间的层级关系。浏览器的整体渲染过程 showImg(https://segmentfault.com/img/bVKDWG?w=319&h=599); 构建DOM 当拿到一个html文件，它是如何构建出do...

fancyLuo 2019-08-29 12:13 评论0 收藏0
简说浏览器渲染－－关键渲染路径

摘要：浏览器的整体渲染过程构建当拿到一个文件，它是如何构建出树的呢浏览器会根据尖括号识别出标签，每一个标签都有和，其中的文本也会被解析出来这些开始结束将会以栈的方式，进行规则匹配，构建出间的层级关系。浏览器的整体渲染过程 showImg(https://segmentfault.com/img/bVKDWG?w=319&h=599); 构建DOM 当拿到一个html文件，它是如何构建出do...

zhaochunqi 2019-08-20 15:06 评论0 收藏0
简说浏览器渲染－－关键渲染路径

摘要：浏览器的整体渲染过程构建当拿到一个文件，它是如何构建出树的呢浏览器会根据尖括号识别出标签，每一个标签都有和，其中的文本也会被解析出来这些开始结束将会以栈的方式，进行规则匹配，构建出间的层级关系。浏览器的整体渲染过程 showImg(https://segmentfault.com/img/bVKDWG?w=319&h=599); 构建DOM 当拿到一个html文件，它是如何构建出do...

xcold 2019-08-01 16:30 评论0 收藏0