浏览器原理——渲染过程（一）

最新推荐文章于 2022-03-02 01:30:28 发布

原创最新推荐文章于 2022-03-02 01:30:28 发布 · 690 阅读

CC 4.0 BY-SA版权

本文详细解析了浏览器如何将用户输入的URL转换为可见图像的过程，包括URL到构建DOM树、DOM树到构建绘图上下文、以及最终生成图像的三个阶段。通过分析HTML文档的加载和解析过程，揭示了渲染引擎与JavaScript、CSS等模块的交互，以及动态网页渲染的复杂性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用户在浏览器的地址栏输入URL，期待的结果就是可见的图像，包含了用户想得到的信息。那么从URL到图像，需要经过哪些步骤呢？浏览器是如何获取、解析、呈现这些信息的？

通过前面的分析可以知道，在渲染过程中会产生DOM树，内部表示，RenderObject和RenderLayer树，虚拟的绘制上下文，最终得到图像。用到的模块包括HTML解释器、CSS解释器、JS引擎以及布局和绘制模块。

对数据的流向分析，然后这一渲染过程分成三个阶段，阶段之间的界限并不是那么清晰，对动态网页往往需要重复渲染。第一阶段是从网页的URL到构建DOM树，第二阶段是DOM树到构建完WebKit的绘图上下文，第三阶段是从绘图上下文到生成最终图像。

第一阶段具体过程：

1、用户输入URL，浏览器调用资源加载模块加载URL对应的网页文档；
2、加载模块依赖网络模块建立与服务器的连接，发送请求并接受答复；
3、WebKit接收到各种网页或者资源的数据，有些资源需要同步或者异步获取；
4、将接收到的网页交给HTML解释器解析，解析成一系列的Token；
5、HTML解释将这些Token建立节点，构建DOM树；
6、如果节点是JavaScript代码的话，交给JS引擎处理；
7、JS有可能修改已经建立的DOM树；
8、解析过程中可能会需要加载其他资源，如CSS样式表、图片、视频等，就会调用加载器再次加载这些资源。

在这个过程中，渲染引擎会发出两个事件“DOMContentLoaded”和“load”，它们分别是在构建好DOM树后，以及构建好DOM树并网页所依赖资源都加载完成后发出。

验证这一个过程，建立如下html文档：

<html>
   <head>
     <style type="text/css">
        img {width: 200px;}
     </style>
     <title> This is a simple case.</title>
   </head>
   <body>
      <img src="qq.jpg"></img>
      <div> Hello World! </div>
      <script type="text/javascript">
           window.onload = function(){
                  console.log("window.onload()");
           }
           console.log("It's me.");
      </script>
   </body>
       
</html>

此html文档包含一个<img>，在解析过程中遇到图像资源，需要调用加载器加载，但是不影响DOM树的建立。
用chrome浏览器打开上述网页，然后点右键，选择审查元素，再点击NetWork，可以看到发出事件的时间。

上面的图清晰的表明触发的事件，以及触发的时间。最下面一行文字表明有两个请求，分别是DOMContentLoaded在68ms和load在88ms。和分析的一样，这个文档包含两个资源，一个是html文档一个是图片资源，它们的加载时间不同，导致触发的两个事件的时间有间隔。右侧的竖线表明资源加载全部结束，DOM构建完成，渲染的第一阶段也结束了。