浏览器因为（太重？）JavaScript，画布渲染而冻结答案

【问题标题】：browser freezes because of (too heavy?) JavaScript, canvas rendering浏览器因为（太重？）JavaScript，画布渲染而冻结
【发布时间】：2011-04-23 13:54:50
【问题描述】：

我有一个草稿网站，其中包含由 Javascript 呈现的画布透视网格（window.onload 事件），但在任何最新浏览器上加载网站时 - 浏览器至少会冻结几秒钟，即使用户界面没有响应。该脚本由 6 个循环组成，总共超过 200 次迭代，每次绘制一条线。我怎样才能避免冻结？在每次迭代后或每次循环后设置超时？会不会是画布问题？

www.modwebsolutions.com/test（渲染时会锁定浏览器）

【问题讨论】：

嘿......背景画布上的“查看图像”使我的Firefox崩溃。
对于它的价值，我只看到这几秒钟在 Opera 中冻结。 Firefox、Safari 和 Chrome 会立即呈现它。
这里也没有任何延迟，除了在页面绘制前稍作停顿。
对我来说这花了几秒钟的时间，但我现在在 XP 上使用相当过时的浏览器。

标签： javascript html canvas

【解决方案1】：

对我来说效果很好。

您可以做的事情是将渲染委托给网络工作者，这样您的“主线程”就可以免费用于用户交互

【讨论】：

【解决方案2】：

嗯，是的，画布还没有优化。你的画布也很大;)

是的，您可以延迟进一步绘制，这样 cpu 就可以处理浏览器输入，从而减少冻结；）

见：http://pastehtml.com/view/1e7dan3.html（它没有画出所有的东西，但你可以明白这一点；））

【讨论】：

Canvas 在 Linux 上的 Firefox 中使用 GPU，至少带有一些驱动程序（肯定是 nvidia 二进制驱动程序）以及在 Windows Vista 和 Windows 7 上的 IE9 或 Firefox 4 中。

【解决方案3】：

JS 与浏览器在同一个线程中运行。所以这可能是因为绘图过于cpu密集。是的，使用超时/间隔让浏览器在绘图之间做一些其他的事情。

【讨论】：

【解决方案4】：

您需要使用 setTimeout() 或 setInterval() 来降低绘图速度并避免浏览器冻结 :)

【讨论】：