【一句话概述】前端性能优化从页面加载到展示

【一句话概述】前端性能优化从页面加载到展示

一句话总结：

优化本质是做减法（减请求、减体积、减计算）和做缓存（存起来下次直接用）。

可选方案

网络层面：

• 减少请求数：合并文件、雪碧图 → 减少TCP连接开销
• 预连接：preconnect→ 提前完成TCP握手+TLS协商
• CDN：边缘节点就近分发 → 缩短网络距离

资源层面：

• 压缩：移除代码空白/注释、算法压缩 → 减少传输字节数
• 缓存策略：强缓存（直接复用本地）、协商缓存（304验证）→ 避免重复传输
• 懒加载：滚动到视口再加载 → 减少初始负载量

渲染层面：

• 关键CSS内联：首屏样式直接嵌入HTML → 避免阻塞渲染的请求
• 脚本异步：defer/async→ 不阻塞HTML解析
• SSR：服务端生成完整HTML → 缩短浏览器渲染链路

执行层面：

• 防抖节流：合并高频触发为单次执行 → 减少函数调用次数
• 虚拟列表：仅渲染可视区域DOM → 减少节点数量
• Web Worker：复杂计算移出主线程 → 避免阻塞UI渲染

缓存层面：

• Service Worker：拦截请求返回缓存 → 实现离线可用和瞬时加载