这是我参与「第四届青训营 」笔记创作活动的第7天

浏览器渲染

渲染器进程的核心任务是把HTML、CSS和JavaScript转换成用户可以交互的网页

解析HTML

• 构建DOM：渲染器在接收到导航提交的信息的时候，就开始解析HTML的文本字符串，并将它转化成DOM树。
• 加载子资源：网站会用图片，CSS，JavaScript等外部的资源，Chorme这时候就会在解析的同时并发运行“预加载扫描器”，当发现有外部资源的时候，预加载扫描器会将请求发送到网络进程。
• JavaScript可能堵塞解析：当HTML解析碰到<script>标签的时候会停止解析，并开始运行加载JS代码。defer或async属性会让JS代码进行异步运行。

计算样式

解析完HTML之后，开始解析CSS并且计算每一个元素的样式值，若CSS中未标明元素的样式，则会使用继承属性或者初始值。

布局

得到计算样式之后，还要找到元素间的几何位置信息，通过遍历DOM树及其计算样式构造布局树，布局树中包括元素的坐标以及大小信息。但如果元素中含有display:none，则不会包含在布局树中

绘制

接下来就是确定绘制顺序的问题，因此，主线程遍历布局树开始创建绘制记录。

这就意味着，如果布局树发生改变，绘制记录也要重新生成

合成

有了布局树以及绘制记录，就可以开始绘制页面。就有一个名词的出现，栅格化，就是把上述的信息转换成屏幕上的像素。

现代浏览器会将页面的不同部分先分层然后分别栅格化，再通过独立的合成器线程合成页面。这个过程就是合成

• 主线程会根据布局树创建分层树，由分层数进行分层
• 创建分成树之后，主线程会将其交给合成器线程，合成器线程负责将他们栅格化，一层可能有页面那么大，合成器线程会将它切成小片，在进行栅格化，栅格化线程结束任务之后将它们保存在GPU中
• 所有小片都进行栅格化之后，合成器会收集叫做“绘制方块”的小片信息，合成合成器帧
• 创建好的合成器帧通过进程间通信IPC提交给浏览器进程

浏览器交互

浏览器的交互主要包括，滚动鼠标，鼠标悬停，触摸屏幕等等都属于浏览器交互。

当发生交互事件的时候，浏览器进程接收到这个手势，但是只知道这个手势在哪个位置，因为标签页的内容是由渲染器进程处理。所以浏览器会将事件类型以及手势位置发送给渲染器进程。渲染器进程会根据事件目标来运行注册的监听程序。

准确来说，是渲染器进程中的合成器线程来处理的，页面合成的时候，合成器线程会把附加了事件处理程序的页面打上“非快速滚动区”（non-fast scrollable region）的记号，有了这个记号之后，合成器线程就会在该区域事件发生的时候把事件发生给主线程。但是如果是在该区域外发生的事件，合成器会继续合成新的合成器帧而不会等待主线程

总结

浏览器的架构，导航，渲染，交互都已整理完，消化了久了一点，所以笔记也分开写了，写前端，总要理解浏览器是如何组成和运作的，就像开挖掘机，总要深入了解挖掘机。才能达到人体合一的境界

• 推荐文章： github.com/75team/w3c/…