目的

对比两款功能相似的产品，我们如何才能说一个产品的性能优于另外一个产品呢，无外乎以下几种情况

  1. 页面打开的速度快，用户可以很快的看到期望的内容
  2. 页面流转流畅，不会出现卡顿的情况
  3. 页面不会出现非预期的错误，例如白屏

性能优化也即从技术的角度提升产品的用户体验。

原则

  1. 建立性能监控机制
    1. 打点记录pv/uv，首页进入占比
    2. 错误监控机制，记录JSError、http请求错误
    3. 记录白屏时间、首屏加载时间、用户可操作时间
  2. 进行性能分析
    1. 从性能数据进行分析
    2. 针对项目类型进行分析
    3. 从项目代码进行分析
  3. 采用性能优化手段
    1. 采用控制变量法评判性能优化的有效性
    2. 多次实验取平均值，减少误差
  4. 建立常态化的性能准入机制

方向

  1. 减少请求次数
  2. 减小请求体积
  3. 加快请求速度
  4. 缩短渲染时间

方法

减少请求次数

  1. 静态资源用单独域名，与后端数据请求域名隔离

  2. 合并请求，合理利用浏览器同域名并发请求限制

  3. 使用 css sprite，减少图片请求次数

  4. 避免空 image src

  5. 避免 301 重定向

  6. 缓存 ajax 数据

减小请求体积

  1. 减少HTTP请求内容，例如列表进行分页

  2. 外部引用 js & css 等静态资源而不是直接嵌入到 html 中

  3. 使用 gzip 压缩

  4. 对 JS,CSS 进行压缩混淆

  5. Tree shaking，删除未使用的代码

  6. 减少cookie大小

  7. 压缩图片，优化图片大小，减少缩放，采用渐进式jpeg

  8. 减少组件的复杂度，减小组件体积

  9. 减少 favicon.icon 体积

加快请求速度

  1. 使用cdn，减少资源物理上与用户的距离

  2. 添加 expires/cache-control/etag header 字段，利用浏览器的缓存策略

  3. 预加载组件

缩短渲染时间

  1. 将 css 放到 html 顶部加载，将 js 放到底部加载

  2. 减少 dom 元素个数

  3. 减少 dom 操作

  4. 减少 iframes

  5. 采用事件委托