HTML to canvas 的性能问题，从哪里开始？

Posted 2023-03-05

【中文标题】HTML to canvas 的性能问题，从哪里开始？

【英文标题】：Performance issues with HTML to canvas, where to begin?

【发布时间】：2011-09-04 08:31:09

【问题描述】：

我一直在做一个实验，通过让 javascript 从加载的 DOM 中读取所有必要的信息，将 html 渲染到画布图像中。由于 canvas 缺少 CSS 的许多标准部分，尤其是在文本格式方面，因此需要完成大量工作和性能密集型流程（其中之一是letter-spacing）。目的是并且永远不会是制作一个万无一失的 HTML 渲染器，因为它根本不可能，而是尝试尽可能准确地制作。

对于示例页面，谷歌浏览器加载它们的速度通常比 FF 快得多。但是，对于某些页面（通常是较大的页面），Chrome 会完全冻结，而 Firefox 可以正常加载它们。现在，我一直在试图确定事情到底是哪里出了问题，但运气不佳，因为它最终不会在 Chrome 中输出任何内容。

Chrome 是否对在特定时间跨度内可以执行多少次画布绘制或页面可以使用多少系统资源有一些限制？如果我根本无法从页面获得任何类型的反馈（因为它只是挂断了），我该如何开始解决瓶颈？

示例（它应该做的是在页面顶部呈现画布图像，该图像应该看起来与实际的 HTML 页面大致相同。您可以通过单击来切换画布图像（显示/隐藏）。请如果您在浏览器中有未保存的工作，也不要打开它们，因为它可能最终也会挂起它们。）：

simple test, works fine in FF/Chrome

another simple test, works fine in FF/Chrome

Complete page, works fine in FF/Chrome

Complete page, only works in FF < 4, Chrome freezes

他们都使用相同的js，可以找到here。

我不是在寻找一个超快的脚本，因为它渲染图像的仿真类型，我认为它甚至无法完成。只是想办法让它可能稍微更有效率，同时又不会失去任何当前的功能。

【问题讨论】：

嗨 - 我会检查代码是否导致无限循环或 hertzen.com/experiments/html2canvas/tests/palmtrees 也锁定 FF4。

最后一个例子使我的 FF4 (4.0.1) 崩溃，首先是无响应的脚本警报，然后我必须终止进程并重新启动。该页面尝试在 Chrome 中加载，但从未加载。不过，我仍然可以继续使用 Chrome。 FF，不是（我猜）。

所以我想只有那时 Chrome 才不是问题。如果它是一个无限循环，那么它可能也会导致早期版本的 FF 崩溃？

早期版本的FF有canvas吗？

在 Firebug 中尝试一些断点，看看问题从哪里开始。 FF4 的底层 JS 引擎与早期版本有些不同，这可能会导致它出现问题。

【参考方案1】：

从哪里开始？

打破它。

使用相同的示例并将您执行的操作（您的渲染代码）减半。它仍然不起作用吗？再减半，等等。它有用吗？把你取出的一半放回去。

如中，摆脱所有尝试的文本渲染，或所有边框/填充代码。把它注释掉就行了。那么它会起作用吗？

或者尝试仅在第 199 行注释掉 ctx.drawImage(img,x,y);，仅此而已。那么它会起作用吗？

如果幸运的话，您将能够确定 Chrome 花费大量时间做某事的关键点。

【讨论】：

谢谢，提供一些警报帮助我查明它停止响应的位置。

【参考方案2】：

您是否尝试过使用 Chrome 的内置性能分析器？

【讨论】：

不，现在可能可以，因为它不再挂断了。但在此之前，甚至无法使用它，因为页面从未加载过。

【参考方案3】：

问题似乎出在 css 属性 background-repeat，特别是 repeat-x。注释掉

for(bgx=(x+background_position_left);bgx<=w;)
                            drawImage(image,bgx,(y+background_position_top));
                            bgx = bgx+image.width;
                        

至少修复了 chrome 的问题，并且看起来它很可能是 Kinlan 提议的无限循环，但为什么它只卡在较新版本的 FF 和 chrome 上是我需要更多了解的问题详细信息（很可能还没有可用的 image.width 或类似的东西）。