一、资源加载优化体系（对应2-3章）

1. HTTP请求优化

• 资源合并策略（CSS Sprite实现）

• Gzip压缩算法（Accept-Encoding检测）

• 半自动化构建流程（Gulp任务链）

2. 图片优化方案

• WebP渐进式加载（兼容性处理）

• SVG矢量图压缩（删除冗余元数据）

• 响应式图片处理（srcset属性配置）

二、渲染引擎优化（对应4-6章）

1. 关键渲染路径

• CSSOM构建阻塞分析（media查询优化）

• JS执行时机控制（async/defer差异）

• 首屏FCP指标优化（Critical CSS提取）

2. 重绘回流控制

• GPU加速触发条件（transform层级）

• 读写分离原则（批量DOM操作）

• Layout边界计算（getBoundingClientRect）

三、缓存机制进阶（对应7-8章）

1. 浏览器存储方案

• LocalStorage容量预警（配额管理）

• Service Worker生命周期（更新策略）

• Cache API动态缓存（网络优先策略）

2. CDN优化实践

• 边缘节点选择算法（GeoDNS解析）

• 缓存失效机制（版本哈希策略）

• HTTP/2协议优势（多路复用/头部压缩）

四、高阶优化技术（对应9章）

1. 服务端渲染方案

• Vue SSR水合过程（hydration）

• 流式渲染实现（renderToNodeStream）

• 性能对比指标（TTI/TBT）

2. 预渲染策略

• Prerender SPA插件配置

• 预取链接声明（）

• 浏览器空闲期调度（requestIdleCallback）

五、性能监控体系

1. 核心指标解读

• LCP（最大内容渲染）

• CLS（累计布局偏移）

• FID（首次输入延迟）

2. 工具链应用

• Lighthouse评分机制

• WebPageTest瀑布流分析

• Chrome Performance面板

六、实战优化案例

1. 电商平台优化

• 商品图片懒加载阈值

• 结算页JS按需加载

• CDN静态资源预热

2. 内容型网站优化

• 字体加载FOIT/FOUT控制

• 广告资源异步加载

• 第三方脚本沙箱隔离