页面的渲染有以下特点：
- 单线程事件轮询
- 定义明确、连续、操作有序（HTML5）
- 分词和构建DOM树
- 请求资源并预加载
- 构建渲染树并绘制页面
具体来说：
当我们从网络上得到HTML的相应字节时，DOM树就开始构建了。由浏览器更新UI的线程负责。当遇到以下情况时，DOM树的构建会被阻塞：
- HTML的响应流被阻塞在了网络中
- 有未加载完的脚本
- 遇到了script节点，但是此时还有未加载完的样式文件
渲染树构建自DOM树，并且会被样式文件阻塞。
由于是基于单线程的事件轮询，即使没有脚本和样式的阻塞，当这些脚本或样式被解析、执行并且应用的时候，也会阻塞页面的渲染。
一些不会阻塞页面渲染的情况：
- 定义的defer属性和async属性的
- 没有匹配的媒体类型的样式文件
- 没有通过解析器插入script节点或样式节点
下面，通过一个例子来说明一下（完整的代码）：
1 <html>
2 <body>
3 <link rel="stylesheet" href="example.css">
4 <div>Hi there!</div>
5 <script>
6 document.write('<script src="other.js"></scr' + 'ipt>');
7 </script>
8 <div>Hi again!&
最低0.47元/天 解锁文章
965
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
