从输入URL后浏览器的渲染逻辑

从输入URL到浏览器渲染页面需要经过很多过程，本文简单说明下各个环节的内容

主要渲染节点如下：

一、浏览器进程说明

出于安全考虑，打开一个浏览器的Tab页签，会生成1个浏览器主进程、1个网络进程、1个GPU进程以及多个渲染进程和多个插件进程，所以不同页签数据无法相互访问，

多个进程也可以提高渲染的速度，最直接的现象就是打开浏览器后，任务管理器会出现多个Google页面的进程但是渲染进程与其他的进程有些区别，可见下文

1. 浏览器主进程：中控系统，主要复杂与用户交互、子进程管理和文件存储的功能

2. 网络进程：面向渲染进程和浏览器主进程提供网络下载功能。

3. 渲染进程：把下载到的HTML、css、JavaScript、图片等资源解析为可以显示和交互的页面，由于下载的代码可能存在恶意代码，所以渲染进程在安全沙箱允许，提供系统的安全性；

　　　　　　还有一个注意点，如果多个页签打开同一个网站，则这几个网站共用一个渲染进程，提高渲染效率，最直观现象：比如某个页签卡死了，则其他页签同网站的代码也卡死了，但是不同域的网站却可以正常操作。

　　　　　　新开一个页签一般只有一个渲染进程，但是如果页面中包含iframe时会存在多个渲染进程

4. GPU进程：最初用于渲染3D效果，后来也被用于渲染UI

5. 插件进程：负责浏览器插件的运行，因为插件崩溃机率较大，所以运行在沙箱环境中

 

二、页面渲染的主要步骤

 

1. 输入URL，，组装完整的URL

2. 检查本地是否有IP地址缓存(如果没有则进行DNS查询)，主进程通过IPC把URL发送给网络进程

3. 查找本地资源，资源是否在有效期内

3. 进入TCP队列，然后创建TCP连接(三次握手)

4. 发送HTTP请求，包含cookie，请求体等信息

5. 网络进程接受请求，判断请求体状态(200: 根据响应头的Content-type决定如何响应； 301/302：重定向；304：资源有缓存)

6. 准备渲染进程，判断是否是同域站点，决定是否复用渲染进程

7. 浏览器主进程收到网络进程的响应头数据，像渲染进程发送【提交文档】消息

8. 渲染进程收到【提交文档】消息后，与网络进程建立传输通道

9. 主进程收到【确认提交】消息后，移除就文档、更新界面和地址栏等内容(期间浏览器加载中的小圆圈状态会从请求时的逆时针变为渲染阶段的顺时针旋转)

10.  收到页面，解析HTML标签，构建DOM树

11. 遇到CSS则进行CSS下载和解析生成CSS树(CSSOM，使用window.getComputedStyle可以获取查看)，每个节点具体的样式，然后继续解析HTML;如果标签中有defer和async属性，则解析DOM和下载资源同步执行

12. 接下来则是进行页面布局，DOM和CSSOM结合生成渲染树，计算每个节点的位置和样式

13. 每个节点生成专用图层，包含位置属性，颜色值和透明度等

14. 渲染引擎对图层树进行渲染，如果期间DOM的颜色有变化则会触发重绘功能，如果位置有变化或者出现DOM增删则会触发重排功能