<返回更多

Chrome的First Paint

2019-09-10    
加入收藏

前言

First paint 直译过来的意思就是浏览器第一次渲染(paint),在First paint之前是白屏,在这个时间点之后用户就能看到(部分)页面内容。

所以研究这个First Paint的触发时机对于优化浏览器页面的首屏渲染时间有很重要的作用。

在正题开始之前,先说下浏览器的页面的加载流程(大体过程是这样,并不精确,只是为了帮助理解后面内容):

  1. 浏览器输入url,浏览器发送请求到服务器,服务器将请求的html返回给浏览器。
  2. 浏览器下载完成HTML(Finish Loading HTML)之后,便开始从上到下解析。
  3. 解析的过程中碰到css和js外链(其实HTML的下载也是这个流程)都会执行以下过程:
  4. Send Request:表示给这个外链对应的服务器发送请求
  5. Receive Response: 表示接收响应,这里是表示告诉浏览器可以开始从网络接收数据了
  6. Receive Data:表示开始接收数据
  7. Finish Loading: 表示已经完成下载数据。
  8. Parse Stylesheet/Evaluate(默认情况下js下载完成之后执行Evaluate,css下载完成后会进行Parse Stylesheet)
  9. 所有的css下载完成后Parse Stylesheet然后开始构建CSSOM
  10. DOM(文档对象模型)和 CSSOM(CSS对象模型)会合并生成一个渲染树(Render Tree)
  11. 根据渲染树的内容计算处各个节点在网页中的大小和位置(Layout,可以理解为“刻章”)
  12. 根据Layout绘制内容在浏览器上(Paint,可以理解为“盖章”)。
Chrome的First Paint

 

正题开始

在最新版的Chrome的perfomance中是能直接看到First Paint这个时间点的,为了方便大家测试,我就直接拿谷歌这个示例页面来做演示:

测试页面

用chrome打开上面链接,最好是隐身模式,防止插件乱入影响判断,按F12或者右键检查元素打开控制台先切换到Network选项,勾选禁用缓存(缓存也会影响到判断):

Chrome的First Paint

 

切换到Perfomance,勾选Screenshots并点击红框进行页面分析(会自动停止的,不用点stop):

Chrome的First Paint

 

分析完后可以看到如下结果:

Chrome的First Paint

 

上图中的绿色的线就是当前页面第一次出现内容的时间点,可以将鼠标放到Main上面的Network中绿色的线附近可以看到在他之前页面空白,在他之后就有内容。 除了绿色的线还有蓝色以及红色的线,这里也解释一下:

Chrome的First Paint

 

简单讲一下DOMContentLoaded、load的区别:

  1. DOMContentLoaded是HTML文档(包括CSS、JS)被加载以及解析完成之后触发(即 HTML->DOM的过程完成 )
  2. load则是在页面的其他资源如图片、字体、音频、视频加载完成之后触发
  3. load事件一般在DOMContentLoaded之后才触发(也有可能在它之前哦)

这个时候发现绿色虚线之前有一个浅绿色方块,相应的解释如下:

Chrome的First Paint

 


Chrome的First Paint

 

由图可以得出“浅绿色”代表的是根据CSSOM计算样式并进行布局绘制的过程,这段时间内浏览器做了一下事情:

  1. Recalculate Style:重新计算样式,确定DOM元素的样式规则(定规则)
  2. Layout:根据计算结果进行布局,确定元素的大小和位置(刻章)
  3. Update Layer Tree: 更新渲染层树
  4. Paint: 绘制,根据前面的Layer Tree绘制页面(位置、大小、颜色、边框、阴影等)(盖章)
  5. Composite Layers: 形成层,浏览器按照合理的顺序合并成一个图层然后输出到屏幕(给别人看)
Chrome的First Paint

 

那什么时候开始First paint呢?在浅绿色方块最前面的虚线往前看,发现在灰色虚线之前都会有一个步骤:就是Parse Stylesheet(调研了很多页面都是如此)

Chrome的First Paint

 

所以,First Paint的加载流程应该是这样:

  1. 所有的CSS加载完成
  2. Parse Stylesheet:构建出CSSOM
  3. Recalculate Style:重新计算样式,确定DOM元素的样式规则(定规则)
  4. Layout:根据计算结果进行布局,确定元素的大小和位置(刻章)
  5. Update Layer Tree:更新渲染层树
  6. Paint:绘制,根据前面的Layer Tree绘制页面(位置、大小、颜色、边框、阴影等)(盖章)
  7. Composite Layers:形成层,浏览器按照合理的顺序合并成一个图层然后输出到屏幕(给别人看)

但是现在还只是确定了First Paint的加载流程,也确定了他是在所有CSS执行完Parse Stylesheet之后才会触发,但是这还是不够准确啊,所以我找了一些CSS和JS的外链来测试,模板如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
 <link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
 <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
 <script src="https://cdn.bootcss.com/react/16.4.0-alpha.0911da3/cjs/react.development.js"></script>
 <script src="https://cdn.bootcss.com/angular.js/2.0.0-beta.17/angular2.js"></script>
</head>
<body>
 <div id='root1'>
 1
 </div>
 <div id='root2'>
 2
 </div>
 <div id='root3'>
 3
 </div>
</body>
</html>

我们通过改变上面模板里的外链顺序来探究:

第一种情况:

Chrome的First Paint

 


Chrome的First Paint

 

发现FP发生在最后(实心的蓝色线是按shift出来的,不是DOMContentLoaded),现在还发现不了什么。

第二种情况:

调换head中CSS和JS外链位置

Chrome的First Paint

 


Chrome的First Paint

 

仍然发现不了什么

第三种情况

把CSS放head,JS放</body>前

Chrome的First Paint

 


Chrome的First Paint

 

发现FP竟然在蓝色和红色虚线前面出现,通过这点可以确定,FP还跟JS外链的位置有关,继续:

第四种情况:

JS外链放head,CSS放</body>前

Chrome的First Paint

 


Chrome的First Paint

 

发现又跟第一二种情况一样了,所以这种用法是不可取的。

第五种情况:

CSS和JS都放</body>前,且CSS紧贴在div后面,JS在CSS后面:

Chrome的First Paint

 


Chrome的First Paint

 

可以发现FP居然更快触发,但是我鼠标hover到绿色虚线后,仍然是白屏,只有等到CSS加载完成执行Parse Stylesheet之后才显示出内容(说明这种用法也不可取),难道body中的CSS也会影响?

第六种情况:

掉换一下上面CSS和JS的位置:

Chrome的First Paint

 


Chrome的First Paint

 

发现这次FP触发而且立马有内容,而等到CSS加载完成之后还会再重新渲染一次,嗯,看来body中的第一个JS脚本有猫腻,接下来的情况对他特殊照顾。

第七种情况:

CSS放head中,JS放在div节点中间:

Chrome的First Paint

 


Chrome的First Paint

 

哈哈,居然只渲染了12俩字,说明浏览器会渲染body中脚本之前的内容,那会是哪个脚本之前的内容呢?

第八种情况:

在div之间都插入脚本

Chrome的First Paint

 


Chrome的First Paint

 

看来浏览器会提前渲染body中第一个脚本前的内容(我们就把body中的第一个外链脚本叫做【第一脚本】吧),并且第一脚本还会在FP之后才执行。所以结合之前得出的结论,在CSSOM准备就绪之后,浏览器会提前渲染第一脚本前的内容,我们可以用第九种情况来验证:

第九种情况:

这种情况和上种没什么区别,只是增加了一个CSS,这个CSS中还会发出一个请求去加载其他CSS(通过@import url()的方式),所以CSS的加载时间很长。

Chrome的First Paint

 


Chrome的First Paint

 

通过结果可以看出,123在CSS下载完成之后才渲染,而不是单独渲染一个1,所以FP必须得等到CSSOM准备就绪之后才会触发,否则即使有第一脚本在也没用。 所以到这里,我们总算可以下结论了:

FP发生在body中第一个script脚本之前的CSS解析和JS执行完成之后。换句话说就是第一脚本之前的DOM和CSSOM准备就绪之后,便会着手渲染第一脚本前的内容。

但是...你以为到这里就结束了?其实没有。

第十种情况:

这种情况中,head中既有JS也有CSS,body中也有第一脚本存在:

Chrome的First Paint

 


Chrome的First Paint

 

注意上图中的vue.js是在head中的,而后面的JS文件都在body中,而且,vue.js加载完成之后,body中的JS还没下载完成,这个时候我们调换一下vue.js和angular2.js的位置:

Chrome的First Paint

 


Chrome的First Paint

 

看,这个时候又没有提前渲染了,123等到所有JS文件都执行完之后才渲染,这种情况除了验证了第九点的结论,还能补充我们的结论:

如果第一脚本前的JS和CSS加载完了,body中的脚本还未下载完成,那么浏览器就会利用构建好的局部CSSOM和DOM提前渲染第一脚本前的内容(触发FP);如果第一脚本前的JS和CSS都还没下载完成,body中的脚本就已经下载完了,那么浏览器就会在所有JS脚本都执行完之后才触发FP。

到这里本次探究就结束了,其实还有很多种情况,感兴趣的可以自己去试试。

建议:

科普一下

Chrome的First Paint

 


Chrome的First Paint

 

希望本文能帮助到您!

点赞+转发,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓-_-)

关注 {我},享受文章首发体验!

每周重点攻克一个前端技术难点。更多精彩前端内容私信 我 回复“教程”

原文链接:http://eux.baidu.com/blog/fe/Chrome%E7%9A%84First%20Paint

作者:洪闰辉

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>