为何Chrome 65运行我的JavaScript应用比其他浏览器慢6倍？

嘿，我之前碰到过类似的Chrome版本专属性能坑，结合你用EaselJS做动画的场景，给你几个实用的排查和解决方向：

一、先快速排除Chrome 65的基础设置问题 #

Chrome 65在Mac平台的渲染管线和硬件加速逻辑有不少更新，先做两个快速验证：

• 关掉硬件加速：去Chrome设置→系统，取消“使用硬件加速模式（如果可用）”，重启浏览器再测。有时候新的加速逻辑在特定Mac配置下会反向拖慢性能。
• 用无痕模式测试：排除插件扩展的干扰，有些后台运行的扩展会偷偷占用CPU/GPU，影响动画帧率。

二、针对EaselJS的专项优化 #

EaselJS的动画性能和渲染循环、元素管理直接相关，结合Chrome 65的特性，重点检查这几点：

• 确认Ticker的帧率模式：一定要用Ticker.RAF（基于requestAnimationFrame），别用旧的TIMEOUT模式。Chrome 65对RAF的调度更严格，旧模式很容易出现帧率骤降。代码这么写：

  createjs.Ticker.timingMode = createjs.Ticker.RAF; // 优先用这个模式
  

• 减少动态元素的渲染压力：如果舞台上有大量频繁更新的Sprite或Shape，把静态元素合并到同一个Container里，然后用cache()缓存起来——这样EaselJS就不用每次都重绘这些静态内容了：

  // 缓存静态容器
  myStaticContainer.cache(0, 0, containerWidth, containerHeight);
  // 只有当容器内容更新时，再更新缓存
  myStaticContainer.updateCache();
  

• 别在动画循环里碰DOM：EaselJS是基于Canvas的，但如果你的代码里在tick事件里操作DOM（比如改样式、加节点），Chrome 65的DOM渲染开销比旧版大很多，尽量把DOM操作移出动画循环。

三、用Chrome DevTools揪出性能瓶颈 #

打开Chrome的性能面板（Performance），录制一段动画过程，重点看这几个指标：

• CPU占用：如果某个JS函数占了大量时间，看看是不是EaselJS的Stage.update()里出了问题，或者你的自定义逻辑有循环冗余。
• GPU渲染情况：勾选性能面板里的“GPU”选项，看有没有频繁的帧丢失或者合成层闪烁。要是有，给Canvas加个will-change: transform样式，提示浏览器提前优化合成：

  canvas {
    will-change: transform;
  }
  

• 内存泄漏：检查有没有没清理的事件监听、残留的EaselJS元素引用。Chrome 65的GC机制有调整，内存泄漏会更快导致性能下滑。

四、验证版本差异，必要时反馈bug #

既然Chrome 63正常、65异常，你可以试试在Mac上装Chrome 64版本，确认是不是65的某个特定更新搞的鬼。如果确实是版本问题，你可以去Chrome的bug tracker提交反馈，附上一个最小的复现demo（比如一个简单的EaselJS动画示例），帮助官方定位修复。

内容的提问来源于stack exchange，提问作者john clarkson