当前位置：首页 > news >正文

【浏览器的渲染原理】

news 来源：原创 2025/5/18 1:26:03

浏览器的渲染原理

渲染时间点

在浏览器输入 URL 并回车后，开启网络线程，拿到 HTML 文档后，会产生一个渲染任务，并将其传递给 渲染主线程 的消息队列
在事件循环机制的作用下，渲染主线程会取出消息队列中的渲染任务，开启渲染流程

渲染流水线

HTML 字符串 → 解析 HTML → 样式计算 → 布局 → 分层 → 绘制 → 分块 → 光栅化 → 画 → 像素信息 → 最终图像

解析 HTML
- 将 HTML 转为 DOM 树，DOM 树下的所有节点都是对象，这个对象是进行包装的 C++ 对象，便于 JS 操作
- 将 CSS 转为 CSSOM 树（包括内部样式，外部样式，内联样式，浏览器默认样式），每个叶子包括选择器名和规则描述

[!NOTE]

HTML 解析过程遇到 CSS 时：CSS 的下载和解析不会阻塞 HTML 的解析。这是因为下载和解析 CSS 的工作是在 预解析线程 中进行，而 渲染主线程 并不会等待 CSS 的解析工作，而是会继续解析后续的 HTML。

HTML 解析过程遇到 JS 时：停止解析后续 HTML，转而下载 JS 并运行后，才继续 HTML 的解析。这是因为 HTML 解析的过程可能会改变当前 DOM 树的结构，所以后续 DOM 树的生成必须暂停。

注：渲染进程包含渲染主线程、合成线程等。

样式计算
- 主线程会遍历 DOM 树，结合 CSSOM 树，为每个节点计算出最终样式（Computed Style）。这个过程会得到带有样式的 DOM 树。
- 比如：会将样式的绝对值计算为绝对值，相对单位rem变为绝对单位px，red会变为rgb(255,0,0)
布局（Layout）
- 主线程会遍历 DOM 树，计算每个节点的几何信息，包括宽高、相对包含块的位置。
- 注意：DOM 树和布局树不一一对应。比如 display:none 节点没有几何信息，因此不会生成到布局树；又比如伪元素选择器虽然不会出现在 DOM 树中，但他们又几何信息所以会出现在布局树中
分层（Layer）
- 主线程会对整个布局树进行分层，目的是将来某个层改变时，只会对该层进行处理，从而提升效率
- 可能会引起分层的元素：滚动条、transform、z-index、opacity、以及使用 will-change 属性（当你发现某个节点需要频繁变化时，可以设置此属性，把它放到一个新的层，从而当他变化时不会影响到其他层）
绘制（Paint）
- 这一步只是由主线程将每个层单独残生一系列的绘制指令，用于描述这一层的内容该怎么画出来
分块（Tiling）
- 以上的工作都是渲染主线程做的，那么绘制之后的工作由 合成线程 来完成。
- 合成线程将每个图层进行分块，将其划分为更小的区域（会从线程池中取多个线程来完成工作），这块里包含如何绘制元素位置，样式等指令信息
- 线程池：管理该进程中所有线程的调度工作
光栅化（Raster）
- 合成线程将块信息交给 GPU 进程，GPU 进程开启多个线程来完成光栅化（生成位图），并且优先处理靠近视口的块
- 光栅化的结果是生成一块一块的位图，相当于一块一块图片
- 这一步使用 GPU 的原因：GPU 专门用于处理计算画面的任务，更快，术业有专攻，但是 CPU 功能更强大。
画（Draw）
- 合成线程拿到位图后生成指引信息然后把各个位图的指引信息交给 GPU，GPU 去调用显卡硬件，最终完成屏幕渲染
- 并且变形、动画发生只影响该 Draw 阶段，发生在合成线程，与渲染主线程无关，故效率高。