HTML到canvas的性能問題，從哪裏開始？

我一直在做一個實驗，通過讓JavaScript從加載的DOM中讀取所有必要的信息，將HTML呈現爲畫布圖像。由於canvas缺乏CSS的許多標準部分，特別是涉及到文本格式時，需要完成很多解決方法和性能強烈的過程（例如letter-spacing）。目的是，永遠不會做出一個無懈可擊的HTML渲染器，因爲它根本不可能，而是儘可能地做到儘可能準確。HTML到canvas的性能問題，從哪裏開始？

對於示例頁面，谷歌瀏覽器通常以比FF快的速度加載它們。但是，對於某些頁面（通常是較大的頁面），Chrome會完全凍結，Firefox正在加載它們。現在，我一直在努力確定事情發生的位置，但沒有多少運氣，因爲它不會在Chrome中輸出任何內容。

Chrome是否對某個時間範圍內可以執行的畫布繪製數量有限制，或者頁面可以使用多少系統資源？如果我根本無法從網頁獲得任何反饋（如它剛掛斷），我該如何開始解決瓶頸問題？

示例（它應該做的是在頁面頂部渲染一個畫布圖像，該圖像看起來應該與實際的HTML頁面大致相同，您可以通過單擊它來切換畫布圖像（顯示/隱藏）。請不要打開他們要麼，如果你在你的瀏覽器有未保存的工作，因爲它最終可能把它們掛以及）：

simple test, works fine in FF/Chrome

another simple test, works fine in FF/Chrome

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

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

我不是在尋找一個快速的腳本，因爲這種渲染圖像的模擬類型，我認爲它甚至不能完成。只是試圖找到方法來使其效率稍微提高一點，而不會丟失任何當前的功能。

來源

2011-05-29 Niklas

嗨 - 我會檢查代碼是不是導致一個無限循環或http://hertzen.com/experiments/html2canvas/tests/palmtrees/鎖FF4太。 – Kinlan 2011-05-29 16:30:11

最後一個例子崩潰我的FF4（4.0.1），第一個無響應的腳本警報，然後我必須殺死進程並重新啓動。該頁面嘗試在Chrome中加載，但從未這樣做。不過，我仍然可以繼續使用Chrome。 FF，不是（正如我所猜測的）。 – 2011-05-29 16:31:19

所以我想這只是Chrome的問題。如果它是一個無限循環，它可能會崩潰的早期版本的FF以及？ – Niklas 2011-05-29 16:33:35

該問題似乎與css屬性background-repeat，特別是repeat-x。註釋掉

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

解決了該問題至少鍍鉻，並看着它很可能是一個無限循環的Kinlan提出，但到底爲什麼它卡住只在FF和Chrome的新版本是我」你需要更詳細地看看（很可能沒有可用的圖像寬度，或類似的東西）。

來源

2011-05-29 17:49:33 Niklas

從哪裏開始？

分解它。

使用相同的示例，並將它（你的渲染代碼）做了多少。它仍然不起作用嗎？再次等等，它有用嗎？把你拿出來的一半放回去。

如在，擺脫所有嘗試的文字渲染，或所有邊框/填充代碼。只是評論一下。那它有用嗎？

或者試着在199行註釋掉ctx.drawImage(img,x,y);，沒有別的。那它有用嗎？

如果幸運的話，您可以確定Chrome花費大量時間做某件事的關鍵點。

來源

2011-05-29 16:33:24

謝謝，拋出一些警報幫助我確定它停止響應的位置。 – Niklas 2011-05-29 18:00:08

您是否嘗試過使用Chrome內置的性能分析器？

來源

2011-05-29 17:48:13 hplbsh

不，現在可能可以做，因爲它停止掛斷。但在此之前，甚至無法使用它作爲從未加載過的頁面。 – Niklas 2011-05-29 17:52:02

HTML到canvas的性能問題，從哪裏開始？

回答

相關問題