Web 性能优化大纲

重点： 使用 Chrome 进行开发时，与性能相关的数据，基本都可以在 Performance 面板中找到

与性能相关的因素

像素渲染管道

性能分析图表

加载优化

网页加载：将资源在一定时间内从服务器传送到客户端。关键：资源大小，资源数量，通道效率（连接数量），传输速度等因素

• 资源
  • 静态资源（js, icons, images, fonts）
    • 文本类型
      • 代码minify
      • gzip
    • 图片资源
    • 文件大小：图片压缩，代码压缩， gzip
  • 动态资源（API 数据）
• 服务器
  • 线路/路由
    • CDN
    • 服务器线路
  • 缓存策略
  • 负载均衡

JS性能优化

内存泄漏

如果你的分析图表出现在了，JS Heap 的大小不断增加，Dom节点不断增加的情况，那么很有可能是发生了内存泄漏。

处理办法：检查未被回收的数据：游离的Dom节点、临时变量的引用

内存膨胀

随着数据不断加载，页面使用的内存不断提升。

处理办法：尝试减少真实DOM的创建，如 virtualized

长任务分割

渲染优化

动画渲染

避免重排reflow，减少重绘repaint，尽可能使用 reComposite

参考资料

• Loading Performance
• Rendering Performance
• Get Started With Analyzing Runtime Performance
• Fix Memory Problems