1. 启用GPU加速：在 `chrome://settings/system` 页面勾选“使用硬件加速” → 由显卡处理图形渲染 → 减少CPU负载。
2. 关闭无关扩展：在 `chrome://extensions/` 禁用非必要插件 → 阻止第三方脚本干扰渲染流程 → 加快页面初始化速度。
3. 调整缓存策略：通过命令行参数 `--disk-cache-size=65536` → 扩大内存缓存容量 → 减少重复加载资源。
二、CSS优化技巧
1. 提取关键CSS：将上方视口所需的样式写入 head 内的内联样式 → 优先加载核心渲染规则 → 缩短首屏空白时间。
2. 合并样式文件：使用工具将多个CSS文件合并为一个 → 减少HTTP请求次数 → 提升样式应用效率。
3. 移除未用样式：通过 `Ctrl+Shift+C`（Mac用 `Cmd+Shift+C`）检查元素 → 删除页面中未使用的CSS规则 → 减小样式表体积。
三、JavaScript执行优化
1. 延迟脚本加载：将非关键JS文件设置为 `defer` 或 `async` 属性 → 避免阻塞DOM构建 → 加快初始渲染。
2. 减少DOM操作：合并多次文档修改操作 → 一次性更新页面结构 → 降低重排重绘频率。
3. 使用Web Workers：通过 `new Worker()` 创建独立线程 → 处理复杂计算任务 → 防止阻塞主渲染流程。
四、图片与多媒体优化
1. 启用图片懒加载：在 img 标签添加 `loading="lazy"` 属性 → 仅加载视口内图片 → 减少初始资源请求。
2. 压缩媒体文件：使用 `av1` 编码格式替代传统视频格式 → 降低比特率 → 加快流媒体加载速度。
3. 设置合理尺寸：通过 `srcset` 属性指定多分辨率图片 → 根据设备屏幕匹配最佳尺寸 → 避免过度缩放渲染。
五、高级渲染控制
1. 强制合成层：在关键动画元素添加 `translateZ(0)` 样式 → 触发GPU单独渲染 → 提升动画流畅度。
2. 使用CSS变量：定义全局颜色/字体等变量 → 统一管理样式参数 → 减少样式计算时间。
3. 优化字体加载：在 link 标签设置 `font-display: swap` → 优先使用系统字体 → 缩短文字内容空白期。
