HTML頁面上的多個Base64圖像和平滑加載

Question

有人知道在網頁上打印多個圖像（base64）時進行異步圖像解析的技術嗎？

這會導致Firefox在游戲機上加載/解析時凍結不多（對於15張圖像以上為1.5MB），因此我對此感到有些擔心。

仍然我認為提供URL並使用javascript異步（惰性）圖像加載會更好，如果有人有更多信息提示，我將很高興聽到它。謝謝。

Answer 1

答案是，無法通過打印的base64圖像 （以html HTTP響應發送）來控制瀏覽器的解析速度 。 如果您打印大量圖像，則瀏覽器將使用更多的CPU來解析網頁。

如果您有bin圖像，解決方案是分別調用它們 ，則必須獲得一個URL才能單獨提供圖像數據（無靜態文件）。

這樣做的問題是使瀏覽器緩存起作用 ：如果不是每次加載頁面時，您都必須渲染頁面上的每個圖像，從而導致網絡服務器過熱。

另一種解決方案是將圖像緩存在服務器端 ，但是客戶端每次仍然需要消耗Web服務器帶寬才能下載圖像。

可以使用http cache-control激活瀏覽器緩存 ： https : //css-tricks.com/snippets/php/intelligent-php-cache-control/

最好的辦法是使用緩存控制，但也要在服務器端使用緩存。

當然，這僅適用於二進制數據，如果您有圖像文件，只需讓您的Web服務器自然地將服務器圖像文件存儲到服務器即可 。