性能优化

• 减少 HTTP 请求
• 使用内容发布网络（CDN）
• 添加本地缓存
• 压缩资源文件
• 将 CSS 样式表放在顶部，把 javascript 放在底部（浏览器的运行机制决定）
• 避免使用 CSS 表达式
• 减少 DNS 查询
• 使用外部 javascript 和 CSS
• 避免重定向
• 图片 lazyLoad

进阶优化补充：

• 减少重排（Reflow）和重绘（Repaint）：合并 DOM 操作、使用 transform/opacity 触发独立图层、避免频繁读取触发布局的属性。
• 节流（throttle）与防抖（debounce）：对 scroll、resize、input 等高频事件进行限制。
• 虚拟列表：长列表渲染只渲染可视区域内的元素，避免一次性渲染大量 DOM。
• 代码分割（Code Splitting）与按需加载：结合 import() 动态导入、路由懒加载，减小首屏体积。
• Tree Shaking：依赖 ES Module 静态分析，剔除未使用的代码。
• 预加载与预取：<link rel="preload"> 加载关键资源，<link rel="prefetch"> 空闲时加载未来需要的资源。
• HTTP/2 多路复用与资源压缩：启用 gzip/brotli 压缩，使用更高效的图片格式（webp、avif）。
• Service Worker 缓存：离线可用并加速二次访问。