降低页面初次渲染CPU开销的关键是减少主线程负担：延迟非关键JS、避免强制同步布局、批量处理DOM与样式、谨慎启用GPU加速。
降低页面初次渲染的 CPU 开销，关键在于减少主线程在 HTML 解析、脚本执行、样式计算、布局和绘制阶段的负担。初次渲染（尤其是首屏内容）对用户感知影响最大，优化要聚焦“不做多余的事”和“把事做在合适时机”。
精简并延迟非关键 JS 执行
浏览器解析 HTML 时遇到 <script> 会暂停构建 DOM 树，同步下载并执行 JS，这直接阻塞渲染。尤其避免内联长脚本或未优化的第三方 SDK。
- 给
<script>添加defer属性：脚本并行下载，等 HTML 解析完成后再按顺序执行，不阻塞渲染 - 对纯功能型脚本（如统计、埋点）用
async：下载不阻塞，执行时机不可控，适合无依赖逻辑 - 将非首屏逻辑（如轮播图初始化、评论区加载）延迟到
DOMContentLoaded或requestIdleCallback中执行
避免强制同步布局（Forced Synchronous Layout）
初次渲染过程中，若 JS 主动读取元素几何属性（如 offsetHeight、getComputedStyle()），而此时样式尚未计算或布局未完成，浏览器会立即触发一次同步重排——这会打断当前渲染流程，显著抬高 CPU 峰值。
- 不要在 DOM 插入后立刻读取尺寸，例如：
el.appendChild(child); console.log(child.offsetHeight); - 如需读取，把所有读操作集中放在写操作之前（读写分离），或缓存结果复用
- 避免在循环中反复读写交替，比如“设置 class → 读 offsetTop → 再设置 margin”这类模式
批量处理 DOM 构建与样式注入
逐个创建并插入节点、逐条设置样式，会多次触发样式计算与布局，CPU 花费呈线性增长。初次渲染应尽量“一次性到位”。
立即学习“Java免费学习笔记（深入）”；
- 用
document.createDocumentFragment()暂存多个新节点，最后统一挂载 - 修改样式优先用
className或cssText，而非连续赋值style.width、style.color等 - 动态插入 CSS 规则时，用
sheet.insertRule()批量注入，比逐个添加<style>标签更轻量
启用图层提升与 GPU 加速（谨慎使用）
对需要动画或频繁更新的元素，提前让浏览器为其创建独立合成图层，可将部分渲染工作从 CPU 卸载到 GPU，降低主线程压力。
- 对确定会动画的元素，加
transform: translateZ(0)或will-change: transform（仅限必要元素，滥用会增加内存开销） - 避免混用触发布局的属性（如
width+transform），否则仍会触发重排 - 用
opacity替代visibility或display控制显隐，前者只走合成，不触发重绘重排
