解决 Canvas 在 Google Chrome 29 中崩溃的问题答案

【问题标题】：Work around for Canvas crashing in Google Chrome 29解决 Canvas 在 Google Chrome 29 中崩溃的问题
【发布时间】：2013-08-28 02:58:29
【问题描述】：

有谁知道防止 HTML5 画布在 Google Chrome 29 中崩溃的解决方法。

在 Windows Chrome 29（不是 28 或 30）上多次重绘后，画布始终崩溃。一种简单的重现方法： 1. 登陆Microsoft Windows机器（Linux/MAC OS X不会出现此问题） 2.转到：http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/ 3.点击刷新

我将此问题发布到 Google 的 Chromium 错误跟踪器： https://code.google.com/p/chromium/issues/detail?id=280153

但我正在寻找是否有人找到或可以想到解决此问题的方法。

【问题讨论】：

Chrome 29 和 Canary 31 (Windows) 对我来说都没有崩溃。
看起来 29.0.1547.62 m 现在已经通过了这个测试，我还有其他的测试仍然失败——我将不得不简化并发布这些
这个问题又出现在我的 Chrome 中。v40.0.2214.111（64 位）

标签： javascript html google-chrome canvas

【解决方案1】：

我无法让它在 Chrome 29 和 Canary 31 (Windows) 上崩溃。

但至于解决方法：

尝试通过将繁重且耗时的任务分成几部分来分割浏览器上的负载。每个部分都可以用setTimeout调用。

这将给浏览器一些时间来“呼吸”并执行事件队列中的其他事件，这让浏览器很高兴。

function heavyTask(callback) {

     var dataForTask;

     function segment1() {
         /* execute one part of heavy task - do something with dataForTask */

         setTimeout(segment2, 11);
     }

     function segment2() {
         /* execute one part of heavy task - do something with dataForTask */

         setTimeout(segment3, 11);
     }

     function segmentN() {
         /* execute one part of heavy task - do something with dataForTask */

         /// DONE!
         callback();
     }
}

理论上，您可以使用0 的值来延迟setTimeout，但这并不总是有效（取决于浏览器）。值 11 接近于最小事件循环时间，因此这应该适用于大多数浏览器。

【讨论】：