单线程事件轮询
定义明确、连续、操作有序(HTML5)
分词和构建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
在渲染器使用它们之前将其下载下来
Hi there!
一旦example.css文件加载完成,渲染树也就完成了构建,内联的脚本也可以执行,之后解析器又被other.js阻塞住。解析器被阻塞住之后,浏览器会收到第一个渲染请求,“Hi there!” 会被显示在页面上。这个步骤和刚才那种情况是一致的。然后:
Hi there!
document.write('
Hi again!
解析器发现了last.js,但是由于预加载器刚才已经把它给加载下来了,放在了浏览器的缓存里,所以last.js会被立即执行。之后,浏览器会收到渲染请求“Hi again”也被显示在了页面上。
通过前后两种情况的对比,希望大家可以对页面的渲染有一定的了解,然后再有针对性的做一些优化。
宜昌市现代信息中等职业技术学校IT特色部
- 创造机遇 成就潜能 -
| 整编:杨 艺
| 审核:朱定伟
| 终审:阮 鹏
今日推荐
版权说明:部分内容来源于网络整合
若有侵权请联系删除