渲染过程以及性能代价

这个是浏览器渲染工作流程的第二篇文档，请预先查看浏览器渲染工作流程一文，当前简单描述

浏览器渲染一个页面的过程分为多个阶段，从解析 HTML、CSS 到绘制最终的页面。关键流程如下：

解析 HTML 和 CSS：
- HTML 解析：浏览器解析 HTML 文档，生成 DOM（文档对象模型） 树，描述页面的结构和内容。
- CSS 解析：浏览器解析 CSS 文件，生成 CSSOM（CSS 对象模型） 树，描述页面的样式信息。
合成渲染树：
- DOM 和 CSSOM 合并，生成 渲染树（Render Tree），其中包含所有可见元素的信息（包括样式、位置、尺寸等）。
- 渲染树是浏览器进行 布局（Reflow） 和 绘制（Repaint） 的基础。

在这里执行 domContentLoaded 后面就是渲染过程了如果需要渲染就执行下面的渲染阶段

布局和绘制：
- 布局（Reflow）：浏览器计算每个元素的实际位置和尺寸。
- 绘制（Repaint）：浏览器绘制页面元素，包括颜色、边框、背景等样式。

DOM 操作：
- 添加、删除或修改 DOM 元素：这些操作会影响 渲染树 的更新，导致 重排（Reflow） 或 重绘（Repaint）。尤其是 添加或删除元素 时，代价较大，因为需要重新计算布局。
CSS 操作：
- 修改 CSS 样式：
  - 修改布局相关属性（如 width, height, margin, padding）：会触发 重排（Reflow），影响整个布局计算，代价中等。
  - 修改视觉样式（如 color, background-color, border）：只会触发 重绘（Repaint），代价最小，不涉及布局重新计算。

添加/删除元素：代价最大，浏览器需要 更新渲染树，并进行 重排（Reflow），可能影响整个页面的布局。
修改尺寸（如 width, height）：代价中等，触发 重排（Reflow），但通常仅影响部分元素，不会像添加/删除元素那样广泛影响页面布局。
修改颜色或视觉样式：代价最小，只有 重绘（Repaint），浏览器只会更新视觉效果，不影响布局。

初次渲染：
- 浏览器解析 DOM 和 CSSOM，生成 渲染树，执行 重排（Reflow） 和 重绘（Repaint）。
- 在 DOM 解析后，页面渲染之前 执行 JavaScript 修改 DOM 或 CSS，不会影响后续的渲染性能。这些修改会作为 首次渲染的一部分 处理。
后续修改：
- 对 DOM 或 CSS 的修改（如添加元素或修改样式）会触发 重排（Reflow） 或 重绘（Repaint），根据修改的内容不同，代价不同。
- DOM 修改 可能触发 重排（Reflow），CSS 修改 可能只触发 重绘（Repaint）。
补充说明：同步脚本对渲染的影响
- 浏览器解析 HTML 时遇到同步 JS 会暂停解析，直到脚本下载并执行完成。
- 解析被暂停意味着 DOM 尚未完全构建，DOMContentLoaded 事件也会被推迟。
- DOMContentLoaded 推迟就会延后首屏渲染时间，看起来像“渲染变慢”。
- 虽然这些脚本运行期间对 DOM/CSS 的修改最终仍算在首次渲染中，但由于解析被打断、可能重复计算布局，整体渲染速度仍会受影响。

批量操作 DOM：避免频繁的 DOM 操作，尤其是添加或删除元素。尽量将修改集中起来，一次性进行。
避免频繁触发重排：对布局相关的属性进行修改时，尽量避免多次修改。可以使用 requestAnimationFrame 或 setTimeout 来集中修改。
使用 transform 和 opacity 进行动画：这些属性不会引发 重排（Reflow），只会引发 重绘（Repaint），对性能影响较小。

初次渲染：浏览器解析 HTML 和 CSS，合成渲染树，进行布局和绘制。此时进行的 DOM 和 CSS 修改会被包括在首次渲染中，不会产生额外的性能代价。
后续修改：对 DOM 和 CSS 的修改会影响渲染树，并可能触发 重排（Reflow） 或 重绘（Repaint），修改布局相关属性的代价较大，修改样式的代价较小。
性能优化：减少 DOM 操作频次，集中修改 DOM 和 CSS，优先使用不会触发重排的 CSS 属性进行动画效果。