🚀 性能优化·加载加速
📚 30章 实战目录
第01章
性能优化总览
⭐
为什么需要性能优化？核心指标（FCP、LCP、CLS、TTI）与RAIL模型。
第02章
浏览器渲染原理
⚙️
关键渲染路径（CRP）、DOM树与CSSOM树构建、布局与绘制。
第03章
网络优化基础
🌐
HTTP/1.1 vs HTTP/2 vs HTTP/3、TCP与TLS握手优化、DNS预解析。
第04章
资源压缩与合并
📦
Gzip/Brotli压缩、JS/CSS/HTML压缩、代码合并与Tree Shaking。
第05章
图片优化策略
🖼️
图片格式选择（WebP/AVIF）、响应式图片、懒加载与渐进式加载。
第06章
CSS性能优化
🎨
选择器优化、避免重排重绘、will-change与contain属性、关键CSS内联。
第07章
JavaScript加载与执行
⚡
async/defer区别、脚本位置优化、长任务拆分与requestIdleCallback。
第08章
代码分割与按需加载
✂️
Webpack/Vite代码分割、动态import、路由懒加载、组件懒加载。
第09章
缓存策略
💾
强缓存与协商缓存、Service Worker缓存策略、CDN缓存配置。
第10章
预加载技术
🔮
preload、prefetch、preconnect、dns-prefetch、prerender的使用场景。
第11章
字体优化
🔤
字体加载策略（font-display）、字体子集化、可变字体与WOFF2。
第12章
动画与交互性能
✨
requestAnimationFrame、GPU加速、防抖与节流、被动事件监听。
第13章
虚拟滚动与大数据渲染
📜
虚拟列表原理、时间分片、Web Worker处理大数据。
第14章
Web Worker与多线程
🧵
Dedicated Worker、Shared Worker、Service Worker应用场景。
第15章
骨架屏与加载状态
🦴
骨架屏实现方案、Skeleton组件、加载进度条与Suspense。
第16章
首屏加载优化
🏁
SSR/SSG/ISR对比、流式渲染、关键资源优先级。
第17章
移动端性能优化
📱
触控延迟优化、点击穿透、300ms延迟、视口与缩放。
第18章
性能监控与指标采集
📊
Performance API、PerformanceObserver、Lighthouse与Web Vitals。
第19章
构建工具优化
🛠️
Webpack配置优化、Vite生产构建、ESBuild与SWC加速。
第20章
CDN与边缘计算
🌍
CDN工作原理、边缘函数（Edge Functions）、全球加速策略。
第21章
数据库与API优化
🗄️
GraphQL vs REST、数据预取、缓存API响应、BFF层设计。
第22章
内存管理与垃圾回收
🧠
内存泄漏排查、闭包与DOM引用、Chrome DevTools Memory面板。
第23章
渲染帧率优化
🎞️
60fps原理、帧预算、避免强制同步布局、图层管理。
第24章
PWA与离线体验
📡
Manifest配置、Service Worker离线缓存、Background Sync。
第25章
性能预算与自动化
📉
设定性能预算、Lighthouse CI集成、性能回归检测。
第26章
微前端性能挑战
🧩
微前端加载策略、共享依赖、沙箱隔离与通信开销。
第27章
WebAssembly性能
⚙️
Wasm使用场景、与JS交互开销、Rust编译Wasm实践。
第28章
网络拥塞与弱网优化
📶
弱网模拟、自适应加载、离线降级策略。
第29章
性能优化案例分析
🏆
淘宝首屏优化、Twitter PWA改造、YouTube加载策略。
第30章
性能优化未来趋势
🔭
HTTP/3普及、WebGPU、边缘AI推理、容器化前端。