十五张图带你彻底搞懂从 URL 到页面展示发生的故事
閱讀本文約花費: 2 (分鐘)
某一天小林去面试,面试官说问你一道经典面试题吧,从“输入一个URL到页面展示中间发生了什么?”,小林一听激动了,心里暗自高兴说这道题我背过呀,然后哗啦哗啦开启了背书模式。背完之后面试官不是很满意,思路并不是很清晰呀!!!(纯属个人杜撰的小故事,切勿当真。)
下面就让我们来唠一唠这个小问题,有不准确的地方还望各位大佬指正。对于这个问题将从浏览器包含的进程着手,然后用用一张图来展示整体流程,最后分别从导航阶段和*渲染阶段*两个方面详细阐述从输入一个URL到页面展示中间发生的过程。
一、浏览器进程
在聊上述话题之前要意识到目前浏览器处在多进程时代,包含浏览器进程、渲染进程、GPU进程、网络进程、插件进程
![](https://static001.geekbang.org/infoq/44/44387884a0c31c047befc9968a9301f4.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
二、整体流程
用一张图来表示整个流程,整个流程包含导航阶段和*渲染阶段*两大部分,其中每个具体细节所需要的进程如下图所示。
![](https://static001.geekbang.org/infoq/d8/d8d1ad3f9dbc87d2c69b6947e96d8c29.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
三、导航阶段
导航阶段主要包含用户输入、URL请求、准备渲染进程、提交文档四个部分
3.1 用户输入
![](https://static001.geekbang.org/infoq/f0/f07472007cdf1b41f1a0a180562ba43c.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
3.2 URL请求过程
![](https://static001.geekbang.org/infoq/93/933bf3cc3c47d7d89fc435837e8578d9.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
3.3 准备渲染进程
![](https://static001.geekbang.org/infoq/c5/c5c701f5b9f28efc1b704d5dc977e270.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
3.4 提交文档
![](https://static001.geekbang.org/infoq/d0/d0b50f1caaccd5201f05eebc1341dbd2.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
四、渲染阶段
当文档数据传输完成后将进入渲染阶段,渲染阶段主要包含构建DOM树、样式计算、布局阶段、分层、图层绘制、分块、栅格化操作、合成和显示。其整个渲染阶段流程如下图所示。
![](https://static001.geekbang.org/infoq/3a/3a149cee6c8d290765a25e1e3d148225.png)
4.1 构建DOM树
![](https://static001.geekbang.org/infoq/8d/8dcb68ebd1a29ee77c07ecfec360dd1e.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
4.2 样式计算
![](https://static001.geekbang.org/infoq/ee/eeff62c8a68b4e7c7318941e214447e2.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
4.3 布局阶段
![](https://static001.geekbang.org/infoq/14/1461ba1c4fc0f67e918c6a7c6f3314d9.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
4.4 分层
![](https://static001.geekbang.org/infoq/46/466938417edee4a039a3f957173422dd.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
4.5 图层绘制
![](https://static001.geekbang.org/infoq/44/445219307b318757cd9a547b5a9fc833.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
4.6 分块
![](https://static001.geekbang.org/infoq/cc/cc279709012845906cdcb83c25662fe5.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
4.7 栅格化操作
![](https://static001.geekbang.org/infoq/a6/a67b59be2b42cb019acd56d06044a52f.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
4.8 合成和显示
![](https://static001.geekbang.org/infoq/e0/e01d4d72e790aa5ddee6a8f05e49be09.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
参考内容 浏览器工作原理与实践_李兵
相关章节