了解html页面的渲染过程以备学习前端的性能优化

最近在学习前端的性能优化，有必要了解一下页面的渲染流程，以便对症下药，找出性能的瓶颈所在。以下是我看到的一些东西，分享给大家。
参考：Understanding the renderer
页面的渲染有以下特点：
•单线程事件轮询
•定义明确、连续、操作有序（HTML5）
•分词和构建DOM树
•请求资源并预加载
•构建渲染树并绘制页面
具体来说：
当我们从网络上得到HTML的相应字节时，DOM树就开始构建了。由浏览器更新UI的线程负责。当遇到以下情况时，DOM树的构建会被阻塞：
•HTML的响应流被阻塞在了网络中
•有未加载完的脚本
•遇到了script节点，但是此时还有未加载完的样式文件
渲染树构建自DOM树，并且会被样式文件阻塞。
由于是基于单线程的事件轮询，即使没有脚本和样式的阻塞，当这些脚本或样式被解析、执行并且应用的时候，也会阻塞页面的渲染。
一些不会阻塞页面渲染的情况：
•定义的defer属性和async属性的
•没有匹配的媒体类型的样式文件
•没有通过解析器插入script节点或样式节点
下面，通过一个例子来说明一下（完整的代码）：

复制代码

代码如下:
<html>
<body>
　　<link rel="stylesheet" href="example.css">
　　<div>Hi there!</div>
　　<script>
　　　　document.write('<script src="other.js"></scr' + 'ipt>');
　　</script>
　　<div>Hi again!</div>
　　<script src="last.js"></script>
</body>
</html>

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

复制代码

代码如下:
<html>
<body>
　　<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>...

首先，解析器遇到了example.css，并将它从网络中下载下来。下载样式表的过程是耗时的，但是解析器并没有被阻塞，继续往下解析。接下来，解析器遇到script标签，但是由于样式文件没有加载下来，阻塞了该脚本的执行。解析器被阻塞住，不能继续往下解析。

渲染树也会被样式文件阻塞，所以这时候没有浏览器不会去渲染页面，换句话说，如果example.css文件下载不下来，Hi there! 是显示不出来的。
接下来，继续。。。

复制代码

代码如下:
<html>
<body>
　　<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>
　　document.write('<script src="other.js"></scr' + 'ipt>');
</script>

上一篇：html4和html5区别之如何在一个input上添加焦点实现代码

下一篇：改变HTML下拉框SELECT选项的多种方法

发表评论

共有条评论