前端性能优化最佳实践

• 优化的思路：4W

  • Why 为什么要优化（优化的目的）？
  • When 什么时候优化（优化的基本原则）？
  • Where 哪方面需要优化（明确瓶颈所在）？
  • What 怎样优化（针对性能瓶颈对症下药）？

• 为什么要做性能优化？

  1. 加快页面展示和运行速度
  2. 节约服务器带宽流量
  3. 减少服务器压力

• 什么时候做性能优化？

  • 基本原则：避免过早优化
    • 首先，保证基本功能完成，再考虑优化
    • 其次，在没有找到性能瓶颈之前，不要优化

• 哪方面需要做性能优化？

  • 分析一个页面从发起请求到展示到用户大概流程
    • DNS 查询
    • 发送 HTTP 请求
    • 等待服务器响应
    • 下载服务器响应内容
    • 解析 HTML、CSS、JS
    • 渲染 HTML、CSS、JS 和图片
    • 响应用户事件
  • 使用性能评级工具（PageSpeed 或 YSlow）进行定位
• 怎么做性能优化（对应从发起请求到展示到用户的各环节优化）？
  • 针对 DNS 查询优化
    • 减少网站所用的域名个数（现代浏览器基本都具备并行下载能），减少 DNS 查询时间
    • 建议一个网站使用至少 2 个域，但不多于 4 个域来提供资源
  • 针对发送请求优化
    • localStorage（本地存储）
    • 静态资源打包，开启 Gzip 压缩（节省响应流量）
    • Cookie 隔离（节省请求流量）
    • 使用 CDN 加速（访问最近服务器）
  • 针对等待服务器响应优化
    • 合理设置 HTTP 缓存：Etag 与 Cache-control
    • 启用 HTTP/2（多路复用，并行加载）
    • 优化数据库查询
    • 部署负载均衡
  • 针对下载服务器响应内容优化
    • 用 CSS3 实现图片，对小图标进行 base64（降低请求数）
    • 延迟(defer)加载/异步(async)加载依赖
  • 针对解析 HTML、CSS、JS优化
    • 去掉无用的 HTML、CSS 和 JS
    • 优化首屏时间：脚本后位置、图片压缩、懒加载
  • 针对渲染 HTML、CSS、JS 和图片优化
    • 最小化重绘(repaint)和回流(reflow)：批量修改元素样式、避免 table 布局等
  • 针对响应用户事件优化
    • 尽量不在前端做复杂的运算