长沙机械网站建设搜索引擎优化与关键词的关系
浏览器的渲染原理
渲染时间点
- 在浏览器输入 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 阶段，发生在合成线程，与渲染主线程无关，故效率高。
[!NOTE]
因为渲染进程（包含合成线程）是使用沙盒与其他硬件隔离开的，它提供了安全的策略，但是导致它不能去调用其他硬件，所以第八步在合成线程生成位图的指引信息后要交给 GPU 去调用显卡。
浏览器采用何种策略来平衡 reflow repaint 的性能开销
reflow：从布局（layout）阶段开始重新计算
repaint：从绘制（Paint）阶段开始重新计算
故 reflow 必然会引起 repaint
重排策略：
- 为避免多次连续的重新布局计算，浏览器会合并这些操作，当 JS 代码完全执行完后再进行统一操作，因此改变属性导致 reflow 是异步进行的。
- But：当 JS 获取布局属性时，可能导致无法获取最新的布局信息
- 最终权衡：获取属性时立即 Reflow