浏览器渲染页面的过程

╰+攻爆jí腚メ 2023-01-01 10:58 218阅读 0赞

## 上网浏览网页对普通人来讲是非常简单的操作，而对于程序员来说，这件事的背后发生了什么事情呢？ ##

输入的网址在通过DNS解析后得到服务器地址，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70][]

浏览器向服务器发起http请求，经过TCP三次握手确认链接后，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 1][]

服务器将需要的代码发回给浏览器，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 2][]

浏览器接收到代码后进行解析，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 3][]

经过三大步骤：DOM构造、布局以及绘制页面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 4][]

最终展现为人人都能看懂的网页。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 5][]

### **第一步：DOM构造。** ###

浏览器首先将收到的html代码，通过html解析器解析构建为一颗DOM树。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 6][]

数据结构中有许多的树，而DOM树就像是一颗倒着长的大树，这样的对象模型决定了节点之间都有一定的关联，它们关系可能有父子有兄弟，我们可以顺着这棵树做出许多操作。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 7][]

接着将接收到的css代码，通过css解析器构建出样式表规则。将这些规则分别放到对应的DOM树节点上，得到一颗带有样式属性的DOM树。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 8][]

### **第二步：布局。** ###

浏览器按从上到下、从左到右的顺序，读取DOM树的文档节点，顺序存放到一条虚拟的传送带上，传送带上的盒子就是节点，而这条流动的传送带就是文档流。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 9][]

如果我们读取到的节点是属于另一个节点下的子节点，那么在放入传送带的时候，就应该按顺序放到该节点盒子的内部。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 10][]

如果子节点下还有子节点，在传送带上的时候就继续套到子一级的盒子内部，根据它在DOM树上的结构，可以嵌套的层级没有限制的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 11][]

文档流排完之后，开始获取计算节点的坐标和大小等css属性，作为盒子的包装说明，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 12][]

然后把盒子在仓库里一一摆放，这就将节点布局到了页面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 13][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 14][]

### **第三步：绘制页面。** ###

布局完成之后，我们在页面上其实是看不到任何内容的，浏览器只是计算出了每一个节点对象，应该被放到页面的哪个位置上，但并没有可视化，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 15][]

因此最后一步就是将所有内容绘制出来，完成整个页面的渲染。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 16][]

## 举个栗子 ##

浏览器获得一些代码，它们最终会渲染成这样。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 17][]

第一步是将代码解析为一颗DOM树。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 18][]

第二步是按照从上到下、从左到右的顺序，将树上的节点压入文档流。我们看看从body节点开始，然后是body节点下的input节点label节点，一个接一个的被压入文档流。第三步是布局。布局的时候因为是行内元素无法占满一行，会在同一行里挨个排列，如果调整页面宽度让它变窄，行内元素会因为一行放不下而换行。第四步是渲染。最后将它们渲染就完成了这个页面。可见文档流与网页之间的关系，其实就是将一维节点映射到二维空间的关系。（备注：块级元素，每个盒子都会独占一行。遇到图片只需把它当作设置了宽高的普通行内元素处理。）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 19][]

原文视频连接：[https://www.iqiyi.com/w\_19sad9379l.html][https_www.iqiyi.com_w_19sad9379l.html]

好文：[https://www.jianshu.com/p/b22ff1771225][https_www.jianshu.com_p_b22ff1771225]

[https://blog.csdn.net/Liu\_yunzhao/article/details/91550704?utm\_medium=distribute.pc\_relevant.none-task-blog-BlogCommendFromBaidu-2.not\_use\_machine\_learn\_pai&depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-BlogCommendFromBaidu-2.not\_use\_machine\_learn\_pai][https_blog.csdn.net_Liu_yunzhao_article_details_91550704_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.not_use_machine_learn_pai_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.not_use_machine_learn_pai]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70]: /images/20221120/76ffda1b9bae4dceacbf109b97d74013.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/958c3119dc5e49b7bba3f8008a088512.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 2]: /images/20221120/459287c6957c4832bf8cdc03b78a37a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 3]: /images/20221120/663e21fd1a8c45e2a4c4a0dff0bd83b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 4]: /images/20221120/ff684f50b18a43bf8d5a3850d640494d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 5]: /images/20221120/3a011ded69e64da4aaa71c6d8e9cd137.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 6]: /images/20221120/90fcc473e4824d2fb7bb38b977753fd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 7]: /images/20221120/dc9002344b564a5eb7e79ee523f6e142.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 8]: /images/20221120/cb1bfcd07e704106a0af7480fbc8bbfc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 9]: /images/20221120/6eeba86a722743589832dfd281c982d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 10]: /images/20221120/ad3a62c293f54adab8039533b46f7006.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 11]: /images/20221120/0cca7ee9c4e141cfa68016cf0e291b95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 12]: /images/20221120/d76ea6db5d05487880427fd26e4daf77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 13]: /images/20221120/3458ad3d1a9b4476b41c701a991f14e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 14]: /images/20221120/64db2dcd47874ad681290c82c8c804b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 15]: /images/20221120/dfb487b426244f3a910b0ea084768e0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 16]: /images/20221120/9627fbb5bfd9455a859ebd9782037753.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 17]: /images/20221120/c15893e1499345a1aeb87691c7583507.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 18]: /images/20221120/710bc234920d48178cec0db86070e06a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 19]: /images/20221120/b42e3459f68446139e83359733f7a9e9.png
[https_www.iqiyi.com_w_19sad9379l.html]: https://www.iqiyi.com/w_19sad9379l.html
[https_www.jianshu.com_p_b22ff1771225]: https://www.jianshu.com/p/b22ff1771225
[https_blog.csdn.net_Liu_yunzhao_article_details_91550704_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.not_use_machine_learn_pai_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.not_use_machine_learn_pai]: https://blog.csdn.net/Liu_yunzhao/article/details/91550704?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.not_use_machine_learn_pai&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.not_use_machine_learn_pai