了解html页面的渲染过程

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

参考:Understanding the renderer

页面的渲染有以下特点:

  • 单线程事件轮询
  • 定义明确、连续、操作有序(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('
                    
                    

你可能感兴趣的:(ui,前端,javascript,ViewUI)