前端技巧第二期浏览器渲染

浏览器线程进程

浏览器包含5个主要进程

浏览器进程：负责页面显示、用户交互、子进程管理、提供存储等

渲染进程：每个浏览器页签有单独的渲染进程（进程通信是IPC），核心用于渲染页面

网络进程：主要处理网络资源加载（HTML、CSS、JS等）

GPU进程：3D绘制，提高性能

插件进程：chrome中安装的一些插件

其中渲染进程是我们最需要了解的，每个浏览器页签有单独的渲染进程（进程通信是IPC），核心用于渲染页面。

渲染进程包含多个线程

渲染线程合成线程

负责渲染浏览器界面HTML元素，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。当界面需要重绘(Repaint)或由于某种操作引发回流(重排)(reflow)时,该线程就会执行

JavaScript引擎线程

JavaScript引擎，也可以称为JS内核，主要负责处理Javascript脚本程序，例如V8引擎。JS引擎一直等待着任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中无论什么时候都只有一个JS线程在运行JS程序（单线程）。

注意⚠️：GUI渲染线程和JavaScript引擎线程互斥！由于JavaScript是可操纵DOM的，如果在修改这些元素属性同时渲染界面（即JavaScript线程和UI线程同时运行），那么渲染线程前后获得的元素数据就可能不一致了。

事件触发线程

当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理

定时触发器线程

setInterval与setTimeout所在线程 浏览器定时计数器并不是由JavaScript引擎计数的, 因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确。通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）

异步http请求线程

在XMLHttpRequest在连接后是通过浏览器新开一个线程请求。将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中，再由JavaScript引擎执行。

输入URL后发生了什么

1、用户输入url地址（关键字会将关键字根据默认的引擎生成地址）会开始导航，浏览器进程里面做

先去查找缓存，检测缓存是否过期，直接返回缓存中内容

如果是首次访问，看域名是否被解析过，DNS协议将域名解析成ip地址（基于UDP），ip+端口号 host

如果请求是https，会进行SSL协商，保证传输的安全性

根据ip地址进行寻址，排队等待，同一时间最多能发送6个请求

tcp创建连接，三次握手传输。利用tcp传输数据（拆分成数据包，有序、可靠），服务器会按照顺序接收

http1.1中http请求，用keep-alive下次传输数据时，可以复用上次创建的连接

服务器接收到数据后（响应式 响应头 响应体）

服务器返回301 302浏览器会进行重定向操作

服务器304去查询浏览器缓存

2、浏览器进程会准备一个渲染进程用于渲染页面

3、网络进程加载资源，最终将加载的资源来交给渲染进程来处理

4、渲染完毕显示

渲染过程

整个渲染流程分为多个阶段，分别是：HTML解析、样式计算、布局、分层、绘制、分块、光栅化

解析HTML得到DOM树和CSS树

解析过程中遇到 CSS 解析 CSS，遇到 JS 执行 JS。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载HTML中的外部CSS文件和外部的JS文件。

如果主线程解析到link位置，此时外部的CSS文件还没有下载解析好，主线程不会等待，继续解析后续的HTML。这是因为下载和解析CSS的工作是在预解析线程中进行的。这就是CSS不会阻塞HTML解析的根本原因。

如果主线程解析到script位置，会停止解析HTML，转而等待 JS 文件下载好，并将全局代码解析执行完成后，才能继续解析HTML。这是因为 JS 代码的执行过程可能会修改当前的 DOM 树，所以 DOM 树的生成必须暂停。这就是 JS 会阻塞 HTML 解析的根本原因。

第一步完成后，会得到 DOM 树和 CSSOM 树，浏览器的默认样式、内部样式、外部样式、行内样式均会包含在 CSSOM 树中

样式计算

主线程会遍历得到的 DOM 树，依次为树中的每个节点计算出它最终的样式。这一步完成后，会得到一棵带有样式的 DOM 树。

布局

布局阶段会依次遍历 DOM 树的每一个节点，计算每个节点的几何信息。例如节点的宽高、相对包含块的位置。

大部分时候，DOM 树和布局树并非一一对应。

比如display:none的节点没有几何信息，因此不会生成到布局树；又比如使用了伪元素选择器，虽然 DOM 树中不存在这些伪元素节点，但它们拥有几何信息，所以会生成到布局树中。还有匿名行盒、匿名块盒等等都会导致 DOM 树和布局树无法一一对应

分层

主线程会使用一套复杂的策略对整个布局树中进行分层。

分层的好处在于，将来某一个层改变后，仅会对该层进行后续处理，从而提升效率。

滚动条、堆叠上下文、transform、opacity 等样式都会或多或少的影响分层结果，也可以通过will-change属性更大程度的影响分层结果

绘制

主线程会为每个层单独产生绘制指令集，用于描述这一层的内容该如何画出来。完成绘制后，主线程将每个图层的绘制信息提交给合成线程，剩余工作将由合成线程完成。

分块、光栅化和最终画

1、合成线程首先对每个图层进行分块，将其划分为更多的小区域。

2、它会从线程池中拿取多个线程来完成分块工作。

3、分块完成后，进入光栅化阶段。

4、合成线程会将块信息交给 GPU 进程，以极高的速度完成光栅化。

5、GPU 进程会开启多个线程来完成光栅化，并且优先处理靠近视口区域的块。

6、光栅化的结果，就是一块一块的位图

7、最后一个阶段就是画了

8、合成线程拿到每个层、每个块的位图后，生成一个个指引信息

9、指引会标识出每个位图应该画到屏幕的哪个位置，以及会考虑到旋转、缩放等变形。

10、变形发生在合成线程，与渲染主线程无关，这就是transform效率高的本质原因。

11、合成线程会把 指引信息 提交给 GPU 进程，由 GPU 进程产生系统调用，提交给 GPU 硬件，完成最终的屏幕成像

为什么 transform 的效率高？

因为 transform 既不会影响布局也不会影响绘制指令，它影响的只是渲染流程的最后一个「draw」阶段

由于 draw 阶段在合成线程中，所以 transform 的变化几乎不会影响渲染主线程。反之，渲染主线程无论如何忙碌，也不会影响 transform 的变化

重排/回流

回流也叫重排，回流就是当render树中的一部分因为元素的尺寸、位置或内容的变化而需要重新构建

1、reflow 的本质就是重新计算 layout 树。

2、当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。

3、为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。

4、也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。

5、浏览器在反复权衡下，最终决定获取属性立即 reflow。

6、页面首页渲染

7、浏览器窗口大小变化

8、内容变化导致大小尺寸变化

9、添加或删除节点

10、激活css伪类

11、改变元素位置，例如：margin、padding、border等都会引起重排

重绘（repaint）

当render树中的一部分因为元素的样式变化而需要重新构建，但元素的位置和尺寸没有

1、repaint 的本质就是重新根据分层信息计算了绘制指令。

2、当改动了可见样式后，就需要重新计算，会引发 repaint。由于元素的布局信息也属于可见样式，所以 reflow 一定会引起 repaint。

3、 改变元素外观属性，例如：color、background-color、visibility、outline等都会引起重绘

重绘与重排的区别

重排必将引起重绘，而重绘不一定会引起重排。比如：只有颜色改变的时候就只会发生重绘而不会引起回流

当页面布局和几何属性改变时就需要重排。比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变。

性能影响

渲染速度变慢：回流和重绘操作都需要消耗一定的计算资源。尤其是回流，由于涉及到页面布局的重新计算，其开销相对较大。因此，当页面频繁触发回流和重绘时，会导致页面的渲染速度变慢，从而影响用户的体验。

页面闪烁和卡顿：当浏览器进行回流和重绘操作时，页面可能会出现闪烁或卡顿的现象。这是因为浏览器在重新渲染页面时，会先清空原有的内容，然后再重新绘制。这个过程可能导致用户看到页面的短暂变化或停顿，尤其是在性能较低的设备或复杂的页面上。

资源消耗：频繁的回流和重绘操作不仅会导致CPU和内存的消耗增加，还可能引发其他资源的过度使用，如电池续航时间的减少等。

优化策略

减少DOM操作：避免不必要的DOM读写操作，可以缓存常用DOM对象到变量中，以减少直接访问DOM的次数。

利用CSS优化：尽量使用CSS动画代替JavaScript动画，因为CSS动画在浏览器层面进行优化，通常比JavaScript动画性能更好。同时，通过优化CSS选择器的性能，减少样式计算的开销。

批量修改：如果需要对多个元素进行样式修改或DOM操作，尽量将其合并成一次操作，以减少回流和重绘的次数。

使用请求动画帧（requestAnimationFrame）：这个函数可以在浏览器的下一次重绘之前执行代码，从而确保动画的流畅性，并减少不必要的回流和重绘。