淨重/節點Webkit - 圖像解碼即使它已經可見

我目前正在基於JavaScript(pure js)的遊戲。遊戲包含5個大精靈表（例如2861 × 768和4096 × 4864）。當遊戲開始時，所有5個精靈表被預加載到畫布元素。這5個精靈中的三個一起表示一個動畫，其中每個精靈包含75個幀。當一個精靈以其動畫結束時，我隱藏它並顯示下一個精靈。當第二個精靈完成動畫時，我隱藏它並顯示第三個/最後一個。淨重/節點Webkit - 圖像解碼即使它已經可見

當第二個或第三個精靈即將顯示時，會發生0.5 s - 1 s的小延遲。圖像正在解碼。

這不是第一次發生的事情，它總是發生。那動畫每5分鐘重複一次，並且小的延遲總是發生。

我之所以使用canvas元素進行預加載，是因爲我認爲WebKit會丟棄一段時間內未使用的解碼圖像，並且canvas元素會阻止WebKit從內存中刪除它。但那不行。

我已經嘗試了幾乎所有我知道的優化。我甚至通過刪除後代選擇器等來重構我的所有CSS。

我用來繪製這些動畫的渲染器是由我自己構建的，它工作的很完美，所以不可能是問題，因爲它工作得很好在Firefox中。

編輯[2016/03/04]： 我用帆布做了一個模式，結果更糟。它滯後很多。延遲保持不變。只有在西北地區，這個問題不會在Firefox中持續存在。

畫布模式 - 滯後：

默認值（HTML）模式 - 工程完美：

Codepen：我的渲染http://codepen.io/anon/pen/JXPWXX

注：如果我隱藏這些其他元素與opacity:0.2而不是opacity:0，問題不會發生。但是，我不能像這樣隱藏它們，因爲它們仍然可見。他們不應該是可見的。如果我添加opacity:0.01它不可見並且問題在Chrome中不會發生，但仍然存在於NW中。

在NW中，當我從不透明度：0.2變爲不透明度：1時，正在處理圖像解碼。 Chrome瀏覽器中不會發生同樣的情況。

我使用以下版本：

nw.js v0.12.3 
io.js v1.2.0 
Chromium 41.0.2272.76 
commit hash: 591068b-b48a69e-27b6800-459755a-2bdc251-1764a45

三個圖像精靈是14.4MB，14.9MB和15.5MB大小。每個精靈包含75幀。

爲什麼會發生這種情況，我該如何預防它？

來源

2016-02-19 Darko Riđić

請注意，這隻發生在Node Webkit中。它在Chrome中運行得很好。 –

你看過垃圾收集器嗎？聽起來像垃圾收集器正在運行，導致暫停。無論你處理畫布的方式，或者你的渲染器正在創造比你想象的更多的垃圾。 – Bill

你可以分享一些代碼或將它放在[JsFiddle]（https://jsfiddle.net/）上？ –

嘗試直接切換到谷歌瀏覽器，因爲新版本可能會在19.04.2016發佈。之後NW將有望跟上每個Chromium的發佈。

你不應該在Chrome中遇到同樣的問題。

來源

2016-03-10 15:27:50 swolfish

我建議使用idata = ctx.getImageData(0, 0, canvas.width, canvas.height)從畫布檢索數據數組，然後ctx.putImageData(idata, 0, 0)在精靈之間切換，而不是隱藏畫布。

來源

2016-03-01 17:54:23 aecend

我只使用畫布元素進行預加載。但我會支持canvas，而「HTML」的方式將會是一個倒退。謝謝你的推薦:) –

鑑於保持Webkit認爲圖像仍然顯示使得問題消失（如您的不透明實驗所示），我會將它幾乎完全移出可見區域，只有一個透明行與視口重疊（使用溢出隱藏）。

請注意，解壓後的4000x4000精靈表會使用64兆字節的RAM（每個像素4字節（= RGBA）），所以也許最好確保下一張圖像提前一點「變暖」，而沒有保持所有的時間都打開包裝？

來源

2016-03-04 15:31:20

雖然我已經嘗試了類似的東西，但我會再試一次，並會告訴你它是否可以工作。謝謝你的建議:)但不是做這個黑客，它會更好地切換到電子而不是NW。假設Electron可以正常工作。我不會切換到Electron，讓這個問題得不到解決！：d –

淨重/節點Webkit - 圖像解碼即使它已經可見

回答

相關問題