浏览器渲染原理

浏览器是怎么渲染页面的

1 当浏览器网络线程收到html文档中 产生一个渲染任务 传递给主线程的消息队列
2 在事件循环机制下 渲染主线程取出消息队列的渲染任务开始渲染流程

渲染原理的步骤

HTML解析

解析的过程中遇到css解析css,遇到js执行js，为了提高解析效率会在开始解析前，启动一个预解析线程，率先下载HTML中外部css文件和js文件，如果主线程遇到link，主线程不会等待 所以css不会阻塞HTML
如果主线程遇到script 会停止解析HTML 等待js文件下载好，并将全局代码解析完成后才会解析HTML。因为js执行过程中可能会修改当前dom树。
这一步完成后会生成DOM树和CSSOM树。


遇到css

遇到js

样式计算

主线程会遍历得到的DOM树，依次为树中节点计算出他最终样式
生成computedStyle

布局

布局完成之后会得到布局树，遍历每个节点获取到每个节点的集合信息dom树和布局树不一定对应 比如像为元素不在DOM树中，但他存在几何信息所以也会生成到布局树中

分层

主线程会采用一套复杂的策略对整个布局树进行分层
可以借助控制台看到分层的结果 。分层的好处在于如果只改变一层的画只会对该层进行后续处理 可以使用will-change属性相当于给浏览器一个提示 让他分层

绘制

先生成绘制指令 主线程解析html生成两个树 交给样式计算 生成布局树 在生成几何信息最后分层再对每层进行绘制。
渲染主线程工作到这里结束了

分块

完成绘制后，主线程将每个图层的绘制信息提交给合成线程，剩余工作将由合成线程完成。
合成线程首先对每个图层进行分块，将其划分为更多的小区域。
它会从线程池中拿取多个线程来完成分块工作。

光栅化

每个块变成位图 优先处理靠近视口的块

绘画

最后会交给gpu呈现 生成一个个像素点

总结

本周没学啥新东西 开始写项目了 感觉这个项目应该能学到挺多的。而且下周还有讲，下周应该比较忙碌。