使用谷歌控制台分析应用性能

[pengkobe]

https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/

其实很简单，直接使用谷歌开发者工具中的 Performance Tab 就可以完成任务，只是有几个

注意事项

• 最好开启 incognito-mode（无痕浏览模式），可以屏蔽你安装的一些谷歌插件影响，在下拉菜单中即可选择，更多关于无痕模式的特性介绍，可以参考这个: https://www.lifewire.com/incognito-mode-google-chrome-4103635
• 在设置里配置好 CPU 的降速倍率，可以更直观的看到性能变化效果
• 要学会放大内存效果，比如你可以将字符串的大小增大 10000 倍或者将刷新频率提交 10 倍等方法
• 获取快照是浏览器首先会先回收垃圾

内存回收

一个要明白的是点时引用计数，还有一个就是标记和清除算法(从 root 节点开始追溯)，使得类似这种代码

var div;
window.onload = function() {
  div = document.getElementById('myDivElement');
  div.circularReference = div;
  div.lotsOfData = new Array(10000).join('*');
};

也能被回收

性能优化技巧

• 使用可以由合成器单独处理的属性。目前只有两个属性符合条件：transforms 和 opacity，参考链接

• 使用 RAIL 模型评估性能，参考链接

• 优化 JavaScript 执行效率，参考链接

  • 对于动画效果的实现，避免使用 setTimeout 或 setInterval，请使用 requestAnimationFrame。
  • 将长时间运行的 JavaScript 从主线程移到 Web Worker。
  • 使用微任务来执行对多个帧的 DOM 更改。
  • 使用 Chrome DevTools 的 Timeline 和 JavaScript 分析器来评估 JavaScript 的影响。

• 缩小样式计算的范围并降低其复杂性，参考链接

  • 降低选择器的复杂性；使用以类为中心的方法，例如 BEM。（就是写法有点拗）
  • 减少必须计算其样式的元素数量。

• 避免大型、复杂的布局和布局抖动, 参考链接

  • 布局的作用范围一般为整个文档。
  • DOM 元素的数量将影响性能；应尽可能避免触发布局。
  • 评估布局模型的性能；新版 Flexbox 一般比旧版 Flexbox 或基于浮动的布局模型更快。
  • 避免强制同步布局(先设置再读取是不对的，读取属性值如:offsetWidth )和布局抖动；先读取样式值，然后进行样式更改

• 简化绘制的复杂度、减小绘制区域, 参考链接

  • 除 transform 或 opacity 属性之外，更改任何属性始终都会触发绘制。
  • 绘制通常是像素管道中开销最大的部分；应尽可能避免绘制。
  • 通过层的提升和动画的编排来减少绘制区域。
  • 使用 Chrome DevTools 绘制分析器来评估绘制的复杂性和开销；应尽可能降低复杂性并减少开销。