前端性能优化大纲

性能指标

FP (First Paint) 首次绘制 FCP (First Contentful Paint) 首次内容绘制 FMP（First Meaningful Paint）首次绘制页面主要内容 LCP (Largest Contentful Paint) 最大内容渲染 TTI (Time to Interactive) 可交互时间 DCL (DomContentloaded) L（load) performance.now()

加载时优化

• 网络：DNS 优化，减少 HTTP 请求，减少重定向，使用 HTTP2，CDN，Gzip，设置缓存(三级)，
• 加载：延迟（async），异步（defer），预加载（preload，prefetch），懒加载（IntersectionObserver），CSS 放头部，JS 放尾部，骨架屏，动态 Polyfill
• 图片：预加载，懒加载，iconfont，webp 嗅探
• webpack：base64，压缩，Tree shaking，动态 Import，拆包 chunk，Dll1
• 服务端渲染（SSR），客户端预渲染（Prerendering）
• 数据预取，包括接口数据，和加载详情页图片

运行时优化

• 减少回流重绘2
• 变量保存属性，使用事件委托，节流，防抖
• 减少组件层级，首页不加载不可视组件
• Web Workers
• 合并接口请求
• 避免页面卡顿 (16ms 内完成操作并渲染）requestAnimationFrame，requestIdleCallback，IntersectionObserver，MutationObserver，ResizeObserver，PostMessage。