浏览器的渲染原理

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情

一、从进程与线程着眼来看

• 进程是操作系统操作系统资源分配的最小单位，进程中包含线程（我们的代码就跑在线程中）
• 线程是由进程所管理的。为了提升浏览器的稳定性和安全性，浏览器才用了多进程模型。

浏览器中的（5个）主要进程

• **浏览器进程：**负责界面显示、用户交互、子进程管理、提供存储等
• **渲染进程：**每个叶页卡都有单独的渲染进程，主要用于渲染页面
• **网络进程：**主要处理网络资源加载（HTML、CSS、JS等）
• GPU进程：3D绘制，提高性能
• 插件进程：chrome中安装的一些插件

二、从输入URL到浏览器显示页面发生了什么？

从进程层面看

1. 用户输入 url 地址后，会开始导航（在浏览器进程中）
   • 注意：如果用户输入的是关键字，则会根据默认的搜索引擎生成地址。
2. 浏览器进程会准备一个渲染进程，用于渲染页面
3. 网络进程加载资源，然后将加载的资源交给渲染进程来处理
4. 渲染完毕，页面显示

从网络层面看

1. 先去查找缓存，检测缓存是否过期。如果没有过期则直接返回缓存中内容
2. 看域名是否被解析过。（DNS协议，将域名解析成ip地址。域名只是方便我们记忆，IP地址才是服务器真正的地址）
   1. DNS是一个映射表，它只是将域名和IP之间做了一个映射（分布式的数据库）。
   2. DNS是基于UDP的。如果DNS是基于TCP的，则每经过一个域名都需要三次握手（二级域名可能很多，会消耗额外的时间）。
   3. UDP（一个包就传输了，不会分段）大多用于视频、直播等。TCP（会分段传输）则安全可靠
3. 如果请求是 https，则会进行 SSL 协商，保证数据的安全性
4. 通过IP地址来进行寻址，排队等待（在http1.1中，同一个域名只能建立6个TCP连接）
5. 等待完毕，开始发送请求。通过TCP创建连接，用于传输
   1. 三次握手
6. 利用TCP传输数据。因为数据可能很大，所以这里不是一口气直接传出数据的，会将其拆分成数据包（过程是有序、可靠的），丢包会重发。服务器会按照顺序来接收
7. http 请求：请求行、请求头、请求体
8. http请求默认是不会断开的。keep-alive 为了下次传输数据时，可以复用上次创建的连接（减少了建立连接的时间）
9. 服务器收到数据后，解析请求行、请求头、请求体，回发响应行、响应头、响应体
10. 服务器如果返回301、302（重定向了），则会重新走上面的流程。所以我们应该尽量用重定向后的地址
11. 服务器如果返回304，则会去查询浏览器缓存，进行返回

渲染流程：浏览器收到内容后，如何解析的

• 浏览器无法直接使用HTML，需要将HTML转化成DOM树。（document）
• 浏览器无法解析纯文本的 CSS样式，需要将 CSS 解析成 styleSheets（CSSOM）。（document.styleSeets）
• 计算出DOM树中每个节点的具体样式（Attachment）
• 创建渲染（布局）树，将DOM数中可见节点，添加到布局树中。并计算节点渲染到页面的坐标位置。（layout）
• 通过布局树，进行分层（根据定位属性、透明属性、transform属性、clip属性等）生成图层树
• 将不同图层进行绘制，转交给合成线程处理。最终生成页面，并显示到浏览器上（Painting，Display）