大师课干货笔记 | 第二章：浏览器渲染原理（草稿）

#输入网址后浏览器会做什么#

通过网络线程获取链接内容，产生一个渲染任务，将任务放到渲染主线程消息队列中

在事件循环的作用下，渲染主线程会取出消息队列中的渲染任务并执行渲染

渲染阶段流水线：解析html--样式计算--布局--分层--绘制--分块--光珊瑚--画-像素画

1.解析html-parse HTML

parse HTML解析后 生成DOM树对象和CSSOM树对象.

ps:js对象是包装在C++对象上的通过包装访问对象

ps:js操作样式规则，即选择器规则，docment.stylesheet为规则列表

ps:css不会阻塞html解析，主线程解析过程中link没下载好不会等待会继续解析，link在预解析线程中被网络线程下载好会被处理并放到后面的html中被主线程解析

ps:js需要被等待下载好后执行完再继续解析，因为js可能会改变dom树，所以会造成阻塞

2.计算最终样式，关联dom

3.布局

ps：dom树和layout不是一一对应的，因为有点dom节点是display:none

ps:行盒和块盒是不能相连的，标签为块盒，内容为行盒

ps：布局阶段会一一计算dom树每个阶段信息，例如节点宽高，相对包含块的位置，display：none不会计算，所以dom树和layout树不是一一对应。

ps：布局树只包含几何信息，宽高位置等，display：none没有几何信息

ps：伪元素也会生成到布局树里。就算元素displaynone，伪元素不none就会计算几何信息到布局树

4.分层

老浏览器不存在，现在基本都存在。

为了不会一直重绘所有内容，产生了分成，只需要重回相应的层，但层数尽量少，会占内存，默认分层按浏览器自身来决定

5.绘制

首先给每个层生成绘制指令集。如将笔移动到某个位置，画一个xx，用红色填充

ps：渲染主线程任务结束，剩下的交给其他线程完成

完成绘制阶段后会将绘制信息交给合成线程，

6.分块

合成线程把页面绘制信息分成一小块一小块，分块进行绘制

分块线程会从线程池拿取多个线程，同时绘制

7.光栅化

光栅化是将每个块变成位图，优先处理靠近视口的块。

合成线程光栅化一般会用到GPU加速，会启动多个线程执行

8.画

合成线程在画节点会指引（quad）每个块相对于屏幕在哪里，

这个阶段会将指引信息交给GPU进程，GPU会交给显卡做

合成线程为浏览器线程不能直接调用硬件所以需要GPU进程中转

transform在这一步进行计算变换在渲染出来

指引通过计算后把信息交给GPU进程，因为不在主线程上面，所以效率会高

什么是reflow？

绘制完成后，js可能会修改cssom或者dom

重新计算样式布局分层生成指令分块光栅化，画的流程叫做reflow

本质就是重新计算layout树

在执行完js后在产生一个消息放到队列中