DOM含大量元素时JS动画性能低下问题排查与优化咨询

• 有种观点认为，仅更新transform: translate这类** compositor-only CSS 属性**时，渲染性能会更优——因为浏览器引擎可以跳过样式计算，只执行图层合成。
• 我做了个测试：在页面上放置30000个彩色div，拖动红色方块时性能极差。
• 通过DevTools录制可见，大量时间消耗在"system"环节：
  
• 用chrome://tracing/分析后发现，大部分耗时集中在如下环节：
  
• 我在Chrome官方文档中看到这段说明：

  PaintArtifactCompositor::Update is expensive and can be avoided for simple paint changes where layerization is known to not change. For example, if the color of a display item changes in a way that does not affect layerization, we can just update the display items of the existing cc::Layers. This is implemented in UpdateRepaintedLayers.

• 看起来Chrome会逐个检查这30000个div，确认是否可以跳过绘制操作——最终确实跳过了绘制（绘制时间极短），但这个检查过程本身耗时太长。我想知道有没有办法让Chrome跳过这类检查？

内容的提问来源于stack exchange，提问作者Gabriel Machado