当前位置: 主页 > 网页制作 > HTML/Xhtml >

介绍html页面的渲染过程,以及学习前端的优化

时间:2023-12-27 16:21来源:ALiz 作者:网络 点击:
参考:Understanding the renderer 页面的渲染有以下特点: 单线程事件轮询 定义明确、连续、操作有序(HTML5) 分词和构建DOM树 请求资源并预加载 构建渲染树并绘制页面 具体来说: 当我们
参考: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> 
 
一旦example.css文件加载完成,渲染树也就被构建好了。 
内联的脚本执行完之后,解析器就会立即被other.js阻塞住。一旦解析器被阻塞,浏览器就会收到绘制请求,"Hi there!"也就显示在了页面上。 
当other.js加载完成之后,解析器继续向下解析。。。 
 
复制代码代码如下:
<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> 
 
解析器遇到last.js之后会被阻塞,然后浏览器收到了另一个绘制请求,"Hi again!"就显示在了页面上。最后last.js会被加载,并且会被执行。  (责任编辑:阿里技术)
织梦二维码生成器
顶一下
(2)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容