浏览器的渲染原理是一个复杂而精细的过程，涉及多个步骤和技术，旨在将HTML、CSS和JavaScript等代码转换为用户界面上的可视网页。
渲染流程
整个渲染流程可以分为：HTML解析、样式计算、布局、分层、生成绘制指令、分块、光栅化、GPU绘制
-
解析HTML
- 解析HTML构建DOM树 当用户在浏览器中输入网址或点击链接时，浏览器会向服务器发送请求，获取网页的HTML文件。 浏览器开始解析HTML文件，构建DOM（文档对象模型）树。DOM树是由HTML标签和它们的层级关系组成的树状结构，表示了网页的结构和内容。
- 解析CSS构建CSSOM树 在解析HTML的过程中，浏览器会遇到CSS样式表（无论是内联样式、内部样式表还是外部样式表）。 浏览器会根据CSS样式表计算出每个元素的样式，这个过程称为计算CSS样式。CSSOM（CSS对象模型）树由此构建，它包含了所有元素的最终样式信息。
-
样式计算
- 浏览器会根据DOM树和CSSOM树生成渲染树。渲染树是一个只包含需要显示的节点和这些节点的样式信息的树状结构，它表示了网页的布局和外观。
-
布局
在生成渲染树的过程中，浏览器会计算每个元素的几何属性（如位置、大小等），这个过程称为布局（Layout）。
-
分层
- 为了确定哪些元素需要放置在哪一层，主线程需要遍历整棵布局树来创建一棵层次树（Layer Tree）
-
生成绘制指令
- 分层工作结束后，接下来就是生成绘制指令。
-
分块
- 浏览器会将图层进行分块，将其划分为更多的小区域
-
光栅化
- 分块完成后，进入光栅化阶段。所谓光栅化，就是将每个块变成位图。更简单的理解就是确认每一个像素点的 rgb 信息
-
绘制
- 最后一步，当所有的图块都被栅格化后，合成线程会拿到每个层、每个块的位图，从而生成一个个「指引（quad）」信息，然后交给GPU进行绘制。
回流与重绘
当DOM结构发生变化或元素的样式发生变化时，可能需要重新进行布局和绘制过程。
- 如果只是元素的样式发生了变化（如颜色、边框等），而不影响布局，则只需要进行重绘（Repaint）。
- 如果元素的尺寸、位置等发生了变化，影响了布局，则需要重新进行布局和绘制，这个过程称为回流（Reflow）。
总结来说，浏览器的渲染原理是一个涉及多个步骤和技术的复杂过程，包括解析HTML构建DOM树、解析CSS构建CSSOM树、生成渲染树、绘制页面以及使用优化技术提高渲染性能。
