Web性能优化

1. 核心概念
   Web性能优化指通过技术手段改善网页加载速度、响应效率和用户体验的综合过程。其核心指标包括首次内容绘制（FCP）、最大内容绘制（LCP）、交互响应延迟（FID）等。例如用户访问电商网站时，页面加载每延迟1秒可能导致转化率下降7%。

2. 网络传输层优化

• 压缩资源：使用Gzip/Brotli算法压缩文本文件（CSS/JS），通常可减少60-80%体积
• 缓存控制：通过HTTP缓存头（Cache-Control/ETag）设置静态资源缓存策略，如设置max-age=31536000实现长期缓存
• 连接复用：建立HTTP/2连接实现多路复用，避免浏览器对同一域名并发6个TCP连接的限制

3. 渲染流程优化

• 关键渲染路径：优化HTML/CSS的解析顺序，通过内联关键CSS、异步加载非关键JS避免渲染阻塞
• 代码分割：使用Webpack等工具实现按需加载，将首屏不需要的组件拆分为独立chunk
• 图片优化：WebP格式替代传统格式，配合loading="lazy"实现图片懒加载

4. 浏览器运行时优化

• 事件循环管理：将长时间任务拆分为微任务（Microtask），避免阻塞主线程
• 内存管理：及时解除事件监听、移除DOM引用防止内存泄漏
• 预加载技术：使用rel=preload提前获取关键资源，rel=preconnect提前建立DNS查询/TLS握手

5. 性能监控体系

• 真实用户监控（RUM）：通过Performance API采集LCP等核心指标
• 实验室测试：使用Lighthouse自动化检测优化机会
• 持续跟踪：建立性能基线警报，监控CDN响应时间、JS异常率等关联指标