圖片加載似乎減慢了Javascript的執行速度

我正在一個簡單的web應用程序，純粹是Javascript。圖片加載似乎減慢了Javascript的執行速度

其中一個核心功能是加載和查看圖像。

當加載大量大圖片時，腳本執行速度通常會變慢或甚至停止，直到其中一些加載完成，這對於大型文件（HTML5視頻不會因爲某些原因而不太糟糕）尤其明顯。

通過使用jQuerys .css()設置div的background-image css屬性加載圖像，在加載圖像之前沒有任何阻塞事件或睡眠/等待時間。

奇怪的是，在OSX上，即使在全屏模式下（OSX瀏覽器爲觸控板留下襬動空間），滾動（使用Macbook觸控板）可暫時緩解停頓/減速，這讓我認爲這是渲染或資源問題某種形式的分配。感覺瀏覽器不需要重繪，並且由於滾動而只能被強制執行。

我想強制它不斷重繪，60 FPS。

2016-01-09 JKunstwald

那麼你是否經常在滾動上設置背景圖像屬性，即使在已經有這個設置的圖像上？也許你應該看看懶加載？ – adeneo

@adeneo不滾動，它會出現：用戶輸入 - >加載約。 20圖像 - >根據進一步的用戶輸入操作DOM（幻燈片等） – JKunstwald

問題在於加載很多大圖片並在應用程序中顯示它們。您可以嘗試圖像延遲加載概念，只要您滾動窗口就可以加載/提取圖像。

可能是這個link將是有幫助的。這個插件將負責在用戶滾動時加載圖像並且它非常易於使用。

有人可以嘗試WebWorker的概念。它在javascript中的多線程。

2016-01-09 16:34:19 Azim

我也想過這個，但我仍然好奇：爲什麼如果瀏覽器實際上仍然有資源渲染，這會減慢呈現？ – JKunstwald

當瀏覽器處理許多圖像時，渲染需要時間。它不僅關於資源，關於獲取圖像，然後渲染到UI中。考慮一下facebook的例子，有時即使頁面被渲染，圖片也需要時間來展示。而且，瀏覽器使用單個線程（這取決於瀏覽器），因此它會影響性能。也許你可以找一些工作轉向使用新的概念稱爲WebWorker。 – Azim

我想補充一點，不要忘記圖像優化。

2016-01-09 17:03:05

令人難過的是，因爲圖像不是來自我的（到任何地方的熱鏈接都取決於用戶輸入）。 – JKunstwald

我想這個時間是不可能的。 –

回答