阅读 194

web性能优化 —— 关键渲染路径

关键渲染路径

提到页面渲染,有几个相关度非常高的概念,最重要的是关键渲染路径,其他几个概念都可以从它展开,下面稍作说明。

关键渲染路径(CriticalRenderingPath)是指与当前用户操作有关的内容。例如用户刚刚打开一个页面,首屏的显示就是当前用户操作相关的内容,具体就是浏览器收到HTML、CSS和JavaScript等资源并对其进行处理从而渲染出Web页面。

了解浏览器渲染的过程与原理,很大程度上是为了优化关键渲染路径,但优化应该是针对具体问题的解决方案,所以优化没有一定之规。例如为了保障首屏内容的最快速显示,通常会提到渐进式页面渲染,但是为了渐进式页面渲染,就需要做资源的拆分,那么以什么粒度拆分、要不要拆分,不同页面、不同场景策略不同。具体方案的确定既要考虑体验问题,也要考虑工程问题。

浏览器渲染页面的过程

从耗时的角度,浏览器请求、加载、渲染一个页面,时间花在下面五件事情上:

1.DNS查询

2.TCP连接

3.HTTP请求即响应

4.服务器响应

5.客户端渲染

本文讨论第五个部分,即浏览器对内容的渲染,这一部分(渲染树构建、布局及绘制),又可以分为下面五个步骤:

1.处理HTML标记并构建DOM树。

2.处理CSS标记并构建CSSOM树。

3.将DOM与CSSOM合并成一个渲染树。

4.根据渲染树来布局,以计算每个节点的几何信息。

5.将各个节点绘制到屏幕上。

需要明白,这五个步骤并不一定一次性顺序完成。如果DOM或CSSOM被修改,以上过程需要重复执行,这样才能计算出哪些像素需要在屏幕上进行重新渲染。实际页面中,CSS与JavaScript往往会多次修改DOM和CSSOM,下面就来看看它们的影响方式。

阻塞渲染:CSS与JavaScript

谈论资源的阻塞时,我们要清楚,现代浏览器总是并行加载资源。例如,当HTML解析器(HTMLParser)被脚本阻塞时,解析器虽然会停止构建DOM,但仍会识别该脚本后面的资源,并进行预加载。

同时,由于下面两点:

1.默认情况下,CSS被视为阻塞渲染的资源,这意味着浏览器将不会渲染任何已处理的内容,直至CSSOM构建完毕。

2.JavaScript不仅可以读取和修改DOM属性,还可以读取和修改CSSOM属性。

存在阻塞的CSS资源时,浏览器会延迟JavaScript的执行和DOM构建。另外:

1.当浏览器遇到一个script标记时,DOM构建将暂停,直至脚本完成执行。

2.JavaScript可以查询和修改DOM与CSSOM。

3.CSSOM构建时,JavaScript执行将暂停,直至CSSOM就绪。

所以,script标签的位置很重要。实际使用时,可以遵循下面两个原则:

1.CSS优先:引入顺序上,CSS资源先于JavaScript资源。

2.JavaScript应尽量少影响DOM的构建。

浏览器的发展日益加快(目前的Chrome官方稳定版是61),具体的渲染策略会不断进化,但了解这些原理后,就能想通它进化的逻辑。


陈佳良

芦苇科技web前端开发工程师

芦苇科技-广州专业软件外包服务公司

提供微信小程序、APP应用研发、UI设计等专业服务,专注于互联网产品咨询、品牌设计、技术研发等领域

点击 阅读原文 访问 www.talkmoney.cn 了解更多

万能说明书 | 早起日记Lite | 凹凸壁纸 | 言财



文章分类
阅读
文章标签