3.5 向 60 fps 进发（一）：JavaScript 优化、Styles 优化 及 Layout 优化

[EthanLin-TWer]

⚠不管 JS 还是 CSS 的部分，决定优化措施之前，先 profile 代码性能，找出瓶颈。这些东西是变化的，以实际性能分析数据说话。要养成「优化前先 profile」的意识。

It’s important to use “tools not rules!” because architectures change and bugs get fixed. Memorizing rules isn’t going to cut it when that happens. - Paul Lewis

JavaScript

• 因为有 JIT 的存在，你写的代码并不一定就是执行的代码。你是猜不到的，所以尽量不要做 micro-optimizations，效率很低

• 尽快运行 JS。它可能会导致整个渲染流程重新开始，必须在最开始尽早跑完。animation 阶段只有16ms，除去浏览器的调度开支，你所能用的只有10ms，留给 JS 的只有3-4ms 左右
  

• 使用 WebWorker 多线程进行无论如何需要很长耗时的工作。它与主渲染线程不会互相影响，仅通过消息来通信，类似于订阅者模式

  

  • The basis of WebWorkers: https://www.html5rocks.com/en/tutorials/workers/basics/
  • Mozilla WebWorker Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

• 垃圾回收♻️（GC）的东西。没讲太深，听不太懂，忽略不计

  • http://buildnewgames.com/garbage-collector-friendly-code/
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management
  • https://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient-javascript/

• requestAnimationFrame()。这个东西具体是个什么不太清楚，但大概是讲，每帧时间是16ms，但如果你的 JS 在帧中间再开始，可能整个渲染流程还没结束这帧就跑完了。这个函数就是确保浏览器调度的时候，能在帧的最开始运行 JS。但我还是不懂
  

  • https://css-tricks.com/using-requestanimationframe/
  • https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

Styles 优化

下面的原则，涉及大量元素的改动、选择时才尤为明显。数据量小的应用随便玩都不会遇到性能瓶颈的，就可以随意点

• 元素样式的改变，对性能的影响基本来说是线性的。也就是说，减少改动的元素，对性能有线性的改善作用
  
• 有的「样式改变」对性能影响较大，有些较小，这是可以理解的，有轻重
• 选择同一个元素，不同选择器性能也不同，越简单越直接性能越好。一般来说，绝对定位（id/class）> 相对定位（nth:child） & 逻辑关系定位（not:empty）
  • BEM 方案 https://en.bem.info/methodology/key-concepts/
  • 其他方案，记录尤雨溪有个 Live 有提到。可试分析对比 其会对性能造成的影响

最佳实践

总结起来就两点：

• 减少改动的元素
• 降低选择器的复杂度

Layout 优化

本来自然顺序就是先 JS 再 styles 再 layout。如果你在 JS 中执行一些触发 layout 的动作然后又执行了一些触发 styles 的动作，会导致什么呢？这次 layout 被无效化了。一两次可能无所谓，不过如果你是在循环中做这个事情，那就是不好的实践了。

• 每一个 CSS 样式变化会触发哪些阶段：https://csstriggers.com/
• Paul Irish: What forces a layout / reflow: https://gist.github.com/paulirish/5d52fb081b3570c81e3a
• 如何避免 layout 阶段的无效触发：http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
• http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

最佳实践

• 不要在循环中 同时 触发 Styles 和 Layout 流程