浏览器渲染原理的学习与总结
参考文章：浏览器渲染原理
浏览器渲染原理
1. 进程和线程
进程包涵线程,
微信是一个进程, 里面有很多诸如用户登录等线程.
a.线程共享内存, 进程独立内存:
进程与进程之间是相互独立的, 他们各自有各自的内存, 而线程之间是独立的, 但他们共享同一个内存空间.
b.线程依赖进程, 进程控制线程
没有进程, 线程就不存在, 需要进程来控制多个线程的执行.
c.「为了提升浏览器的稳定性和安全性，浏览器采取了多进程模型。」
如果一个页面有问题，不影响其他页面的运行。
2.浏览器进程架构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9583XeF9-1644134091925)(星期五.assets/image-20220204161822885.png)]
- 「浏览器进程。**「主要负责」**界面显示」、「用户交互」、「子进程管理」、同时提供**「存储」**等功能。
- 「渲染进程。」 核心任务是将
HTML、CSS和JavaScript转换为**「用户可以与之交互的网页」，排版引擎Blink和JavaScript引擎V8都运行在该进程中，默认情况下，Chrome为每一个Tab标签页创建一个渲染进程。出于安全考虑，渲染进程都是运行在「沙箱模式」**下的。 - **GPU进程。**GPU图形处理器（英语：graphics processing unit，缩写：GPU）,负责3D CSS效果，网页，Chrome ui的绘制。
- 「网络进程」。主要负责页面的**「网络资源加载」**，之前是作为一个模块运行在浏览器进程里面的，直至最近才独立处理，成为单独一个进程。
- 「插件进程」。主要负责**「插件的运行」**，因为插件易崩溃，所以通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。每一种类型的插件对应一个进程，仅当使用该插件时才创建。
所以我们开启一个页面，至少会启动4个进程。
3.浏览器的 Http 请求进程
3.1 工作步骤
-
构造请求
首先，浏览器构造请求行，构建好之后，浏览器准备发起网络请求
-
查找缓存
在发起请求前, 还要确认一下是否有缓存, 如果本来就有这个请求的缓存的话, 浏览器会拦截请求，返回该资源的副本，并直接结束请求。
这样可以**「缓解服务的压力，提升性能」**。如果缓存查找失败，则进入网络请求。
-
准备IP地址和端口
浏览器使用 HTTP 协议在应用层上封装请求的文本信息, 之后用 TCP/IP 协议作传输层协议传到网络上,
正因如此, 在 HTTP 开始工作前, 浏览器先要与服务器建立 TCP/IP 连接。也就是说HTTP的内容是通过TCP的传输数据阶段来实现的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RcUe3ryv-1644134091926)(星期五.assets/image-20220204162913595.png)]
数据包是通过 IP 地址传输给接收方的, 但是 IP 地址太难记了, 用域名来记更方便, 就出现了 DNS (域名系统) , 来为 ’ IP 地址 ’ 和 ’ 域名地址 ’ 做一次映射.
第一步浏览器会请求 DNS 返回域名对应的 IP。「当然浏览器还提供了 DNS 数据缓存服务」.
-
「等待TCP队列」
准备好 IP 和端口之后, 浏览器还有个检查机制, 因为浏览器规定一个域名的TCP链接不能超过六个, 如果少于六个, 就进入下一步, 建立tcp链接
- 「建立TCP连接」
排队等待结束后，建立TCP连接
- 「发送HTTP请求」
通常情况下，一旦服务器向客户端返回了请求数据，它就要关闭TCP连接Connection:Keep-Alive之后讲, 有了这个, 就不需要重复建立新的TCP连接。浏览器可以继续通过同一个TCP连接发送请求。不会关闭TCP链接
3.2 为什么网站第二次打开这么快
因为DNS和页面资源被缓存了: 「DNS缓存」和「页面资源缓存」
浏览器通过响应头的Cache-Control字段来设置是否缓存该资源。
Cache-Control:Max-age=2000 //缓存过期时间是2000
但如果缓存过期了，浏览器则会继续发送网络请求，并且在HTTP请求头中带上:
If-None-Match:"4f80f-13c-3a1xb12a"
简要来说，很多网站第二次访问能够秒开，是因为浏览器缓存直接使用本地副本来回应请求，而不会产生真实的网络请求，DNS 数据也被浏览器缓存了，这又省去了 DNS 查询环节。
4.输入url到浏览器显示页面发生了啥
名词解释：
**重定向：**重定向的意思就是说浏览器里面指定访问的一个url地址，去网站服务器里面访问后，
网站的服务器又指向浏览器中另外的一个地址，然后浏览器再去访问网站服务器的那个另外的地址。
提交文档：所谓提交文档，就是「浏览器主进程」，「将网络进程接收到的HTML数据提交给渲染进程」。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2hxQpJqi-1644134091927)(星期五.assets/image-20220206141216703.png)]
1、**「浏览器进程」接收到用户输入的URL请求，「浏览器进程」**便将URL转发给网络进程。
2、**「网络进程」**中发起真正的URL请求。
3、「网络进程」接收到响应头数据，便解析响应头数据，并将数据转发给「浏览器进程」。
4、「浏览器进程」接收到网络进程的响应头数据之后，发送"「提交文档」"消息到**「渲染进程」**。
5、「渲染进程」接收到"提交文档"的消息之后，便开始准备接收HTML数据，接收数据的方式是直接和「网络进程」建立「数据管道。」
6、等文档数据传输完成之后，「渲染进程」会返回“确认提交”的消息给「浏览器进程」。
7、「浏览器进程」接收到「渲染进程」"确认提交"的消息之后，便开始移除之前旧的文档，然后更新**「浏览器进程」**中的页面状态。
5.浏览器的渲染流程
HTML，DOM，样式计算，布局，图层，绘制，栅格化，合成和显示。
一个完整的渲染流程大致可总结如下:
-
渲染进程将HTML内容转换为浏览器能够读懂的**「DOM树」**结构。
-
渲染引擎将CSS样式表转化为浏览器能够理解的**「CSS树」**,计算出DOM节点的样式。分三步
-
将css文本转换为浏览器能理解的样式表
-
标准化样式表中的属性值（比如bule变成rgb值之类的）
-
根据
CSS的**「继承规则」和「层叠规则」**计算每个dom节点的样式 继承规则就是继承祖先节点的文本和字体样式之类的，比如
body { font-size: 20px } 层叠规则就是计算样式权重
-
-
DOM树 + CSS树创建布局树，并计算元素的布局信息。
所有不可见的节点都没有包含到布局树中。
计算布局树节点的坐标位置。即计算元素在视口上确切的位置和大小。
-
对布局树进行分层，并生成**「图层树」**。
因为页面中有很多复杂的效果，如一些**「复杂的3D转换」，「页面滚动」**，或者使用
z-index，为了更方便的实现这些效果，「渲染引擎还需要为特定的节点生成专门的图层，并生成一棵对应的图层树(LayerTree)」。不是所有节点都会有图层，这时候看满不满足两个要求
-
对每个**「图层」生成「绘制列表」**，并将其提交给合成线程。
渲染引擎把一个图层的绘制拆分为很多小的绘制指令，然后再把这些指令按照顺序组成一个待绘制列表并提交给合成线程
-
对每个图层进行单独的绘制
合并线程的主场：根据视图划分图层为图块，按照视口附近的图块来优先生成位图，也就是优先GPU栅格化，并保存在GPU中
-
合并图层。
一旦所有图块被栅格化，合成线程就会生成一个绘制图块的命令—“DrawQuad”，然后将该命令提交给浏览器进程。浏览器进程里的viz组件接收该指令并将页面内容绘制在内存中，最后显示在屏幕上
接下来我们从一个简单的html页面来谈浏览器的渲染流程：
5.1 构建 DOM 树
HTML内容转换为浏览器DOM树结构的过程：字节 → 字符 → 令牌 → 节点 → 对象模型。
- 转换: 浏览器从磁盘或网络读取 HTML 的原始字节，并根据文件的指定编码（例如 UTF-8）将它们转换成各个字符。
- 令牌化: 浏览器将字符串转换成 W3C HTML5 标准规定的各种令牌，例如，“”、“”，以及其他尖括号内的字符串。每个令牌都具有特殊含义和一组规则。
- 词法分析: 发出的令牌转换成定义其属性和规则的“对象”。
- DOM 构建: 最后，由于 HTML 标记定义不同标记之间的关系（一些标记包含在其他标记内），创建的对象链接在一个树数据结构内，此结构也会捕获原始标记中定义的父项-子项关系: HTML 对象是 body 对象的父项，body 是 paragraph 对象的父项，依此类推。
当解析器发现非阻塞资源，例如一张图片，浏览器会请求这些资源并且继续解析。当遇到一个CSS文件时，解析也可以继续进行，但是对于