javascript - 解决 Google Chrome 29 中 Canvas 崩溃的问题

Question

有人知道防止 HTML5 Canvas 在 Google Chrome 29 中崩溃的解决方法吗？

经过多次重绘后， Canvas 在 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

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

Answer 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 接近最短事件循环时间，因此这应该适用于大多数浏览器。