的图片加载会阻塞html码_厚溥资讯 | HTML页面的渲染过程

学习前端的性能优化，有必要了解一下页面的渲染流程，以便对症下药，找出性能的瓶颈所在。以下是我看到的一些东西，分享给大家。 页面的渲染有以下特点：  

• 单线程事件轮询

• 定义明确、连续、操作有序(HTML5)

• 分词和构建DOM树

• 请求资源并预加载

• 构建渲染树并绘制页面

具体来说：   当我们从网络上得到HTML的相应字节时，DOM树就开始构建了。由浏览器更新UI的线程负责。当遇到以下情况时，DOM树的构建会被阻塞：  

• HTML的响应流被阻塞在了网络中

• 有未加载完的脚本

• 遇到了script节点，但是此时还有未加载完的样式文件

• 渲染树构建自DOM树，并且会被样式文件阻塞。

由于是基于单线程的事件轮询，即使没有脚本和样式的阻塞，当这些脚本或样式被解析、执行并且应用的时候，也会阻塞页面的渲染。   一些不会阻塞页面渲染的情况：  

• 定义的defer属性和async属性的

• 没有匹配的媒体类型的样式文件

• 没有通过解析器插入script节点或样式节点

下面，通过一个例子来说明一下(完整的代码)：

　　

Hi there!

　　　　document.write('

　　

Hi again!

代码很容易看明白，如果放在浏览器中打开会立即显示出想要的页面。下面，让我们用慢镜头回放的方式来看看它究竟是怎么渲染的。  

Hi there!

一旦example.css文件加载完成，渲染树也就被构建好了。   内联的脚本执行完之后，解析器就会立即被other.js阻塞住。一旦解析器被阻塞，浏览器就会收到绘制请求，"Hi there!"也就显示在了页面上。   当other.js加载完成之后，解析器继续向下解析。。。  

　　

Hi there!

　　　　document.write('

　　

Hi again!

解析器遇到last.js之后会被阻塞，然后浏览器收到了另一个绘制请求，"Hi again!"就显示在了页面上。最后last.js会被加载，并且会被执行。   但是，为了减缓渲染被阻塞的情况，现代的浏览器都使用了猜测预加载(speculative loading)。   在上面这种情况下，脚本和样式文件会严重阻塞页面的渲染。猜测预加载的目的就是减少这种阻塞时间。当渲染被阻塞的时候，它会做以下一些事：  

• 轻量级的HTML(或CSS)扫描器(scanner)继续在文档中扫描

• 查找那些将来可能能够用到的资源文件的url

• 在渲染器使用它们之前将其下载下来

但是，猜测预加载不能发现通过javascript脚本来加载的资源文件(如，document.write())。   注：所有的“现代”浏览器都支持这种方式。这句话有待商榷，具体请看我下一篇随笔(正在整理中。。。)。   回过来再看上面的例子，通过猜测预加载这种方式是怎么工作的。  

Hi there!

一旦example.css文件加载完成，渲染树也就完成了构建，内联的脚本也可以执行，之后解析器又被other.js阻塞住。解析器被阻塞住之后，浏览器会收到第一个渲染请求，“Hi there!” 会被显示在页面上。这个步骤和刚才那种情况是一致的。然后：  

　　

Hi there!

　　　　document.write('

　　

Hi again!

解析器发现了last.js，但是由于预加载器刚才已经把它给加载下来了，放在了浏览器的缓存里，所以last.js会被立即执行。之后，浏览器会收到渲染请求“Hi again”也被显示在了页面上。   通过前后两种情况的对比，希望大家可以对页面的渲染有一定的了解，然后再有针对性的做一些优化。

宜昌市现代信息中等职业技术学校IT特色部

- 创造机遇 成就潜能 -

| 整编：杨   艺

| 审核：朱定伟

| 终审：阮   鹏

今日推荐

版权说明：部分内容来源于网络整合

若有侵权请联系删除