性能优化

性能监测

1. 监测一段js执行时常

• 可以用高阶函数在函数运行前和运行结束以后，进行埋点分析

性能衡量

google页面性能检测工具

• 首屏时间
• 首屏可交互时间
• 首次有意义内容渲染时间

优化手段

1. 只请求当前需要的资源

• 异步加载(路由懒加载)
• 图片懒加载
• polyfill拆包优化
  • 这里有一种新的思路，将所有的polyfill通过外链引入，在运行时环境做环境检查，自动添加polyfill，但是这样对运行时并不够优化啊，需要保证这个包先执行：polyfill.io

1. 压缩资源体积

• webpack打包压缩混淆
• gzip
  • nginx动态gzip：gzip on;
  • nginx静态gzip：gzip_static on;
• 图片压缩，根据不同分辨率适配图片，image assets；使用webp格式(webp在safria兼容性不好)
• 控制cookie大小及使用，防止cookie滥用，每次请求都携带cookie会有性能浪费

延伸，判断当前浏览器是否支持webp格式

function checkWebp() {
  try {
    // 如果支持webp时，转换的Base64数据，是已webp的声明开头的
    return document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0
  } catch(e) {
    return false
  }
}

1. 时序优化

• 使用promise.all进行并发请求，promise.allSettle
• SSR解决首屏呈现问题
• prefetch，prerender，preload
  • <link rel="dns-prefetch" href="examplea.com" />
  • <link rel="dns-prefetch" href="exampleb.com" />
  • <link rel="preconnect" href="example.com" />
  • <link rel="preload" as="image" href="https://example.com/images/1.png" />

1. 合理利用缓存

• CDN分发
  • CDN预热：提前将内容自动分发到各个节点，防止第一次访问CDN没有缓存，请求打到源站造成并发压力问题
  • CDN刷新：内容更新以后，使各CDN节点从源站读取/缓存最新数据
  • 结合cookie问题，使静态资源类的CDN域名和业务域名区分开

[1]