在 html 页面渲染过程中，哪些因素可能会影响页面的渲染性能？如何优化？

参考答案：

在 HTML 页面渲染过程中，性能瓶颈主要出现在 浏览器的渲染流水线上，包括 解析 HTML/CSS/JS、构建 DOM/CSSOM、布局（Layout）、绘制（Paint）、合成（Composite） 等阶段。

一、影响渲染性能的主要因素

DOM 结构复杂度

节点过多、层级过深会增加浏览器的 DOM 构建时间 和 布局计算成本。
表现：页面渲染慢，回流（reflow）和重绘（repaint）频繁。

CSS 复杂度

复杂选择器（如通配符 *、嵌套选择器）会增加匹配成本。
使用大量动画、阴影、滤镜（filter）也会增加绘制开销。

JavaScript 阻塞

<script> 默认阻塞 HTML 解析，影响 DOM 构建。
JS 操作 DOM、频繁修改样式，会触发回流和重绘。

图片和资源大小

大图、未压缩资源会延长页面加载时间。
网络请求阻塞 CSS/JS 渲染也会延迟首屏显示。

布局抖动与频繁回流

通过 JS 修改 DOM 或样式属性（如 offsetWidth, scrollTop）会触发同步回流，频繁操作会严重拖慢渲染。

浏览器重绘与合成成本

CSS 动画使用会触发重绘或合成，复杂的 DOM 树和层叠关系会增加 GPU 开销。

二、优化策略

优化 DOM 结构

减少节点数量、避免过深层级。
使用文档碎片（DocumentFragment）或虚拟 DOM 批量更新。

优化 CSS

避免低效选择器，尽量使用类选择器；
CSS 动画优先使用 transform 和 opacity，利用 GPU 加速；
减少不必要的样式属性，避免触发回流。

优化 JavaScript

将 <script> 放在 <body> 底部，或使用 defer / async 属性；
批量修改 DOM，减少频繁的读取/写入混合操作；
使用防抖/节流优化滚动、resize 等频繁触发的事件。

资源优化

图片压缩、使用 WebP 格式；
CSS/JS 文件压缩、按需加载、使用 HTTP/2 或 CDN；
图片懒加载，减少首屏阻塞。

减少回流和重绘

使用 class 批量修改样式而不是逐条修改；
避免在循环中频繁读取 layout 信息；
对动画使用 transform、opacity，避免改变布局属性。

使用浏览器优化技术

CSS will-change 提前告知浏览器将要变化的属性；
合理使用硬件加速（GPU layer）处理动画；
对长列表使用虚拟滚动（Virtual Scroll）或分页加载。

题目要点：

渲染性能瓶颈：DOM 复杂度、CSS 复杂度、JS 阻塞、资源加载慢、回流重绘频繁。
优化思路：减少 DOM/样式复杂度，避免阻塞 JS，压缩和懒加载资源，优化动画和频繁操作。
原则：减少浏览器计算量，合理使用 GPU 加速，提升首屏渲染速度和流畅度。