如何緩存行內base64數據uri（圖像）？

我正在使用背景圖像數據uri base64編碼圖像直接內聯在HTML頁面內。我到處看到與未編碼圖像相反的地方，它們沒有存儲在緩存中，這確實有時是性能問題。如何緩存行內base64數據uri（圖像）？

但看我的Chrome瀏覽器開發工具的時候，我看「緩存在內存中」 ......

是內聯的，在最HTML的base64圖片的緩存？

如果是的話：我的問題是：我最初檢查它是因爲我想分析加載base64內嵌圖像的時間。所以我現在無法看到第一次下載/訪問花費解碼和加載它的時間？我嘗試清除瀏覽器的歷史記錄，但與其他緩存（如圖像等標準資產）相反，它仍然存在，也就是說，即使我清除了瀏覽器歷史記錄/緩存，下次我加載它時，它仍然是用chrome dev寫入的工具爲0ms /「from memory cache」：我如何清除它以查看首次訪問者會發生什麼？

注：當然，「禁用緩存」在Chrome瀏覽器開發工具選擇另外，我不知道這是重要的，但這裏是Base64和HTML代碼（這是相當小：小於900個字節）。

<div style="background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCAAKAB4DAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABQYE/8QAJBAAAgEEAQMFAQAAAAAAAAAAAQIDAAQREgUTITEyQUJRcZL/xAAWAQEBAQAAAAAAAAAAAAAAAAAEAgP/xAAdEQACAgIDAQAAAAAAAAAAAAAAAQIDESEEInEx/9oADAMBAAIRAxEAPwCOtrYGJmdY36iEIerqUOR3I9/yqRJssYAk2jakg47HIpUFoNYygsZY7PmYmcqge2dYiQMb/Xfxmj8pPRvxWt5Bb6BYbyUB9hIRJqRgrnPmpqei7liQInmqiRIWsPUKVENIT5FQZeJJbUfId/SUW5934IpXReg7Mz8ldFyWJkfJJz8qx+JG7WWz/9k=');" ><a href="/home">

來源

2017-04-12 Mathieu

當我重複測試時，Chrome提出了兩個請求：第一個請求獲取HTML頁面，這是一個正常的請求;第二個請求獲取圖像並從內存中提供，這是合理的，因爲圖像包含在第一個請求中嵌入在HTML本身

換句話說，內嵌圖像不會被緩存，除非頁面你居住的地方被緩存。

來源

2017-04-12 10:48:35 user2612030

所以你說內聯base64被緩存，因爲它所在的HTML文件被緩存。但可以緩存html頁面嗎？我認爲只有圖像，CSS，JS可以被緩存？ – Mathieu

當我說圖像，cc，js可以被緩存時，我的意思是圖像，CSS和js不在HTML文件內部（內聯），但住在外部文件中（.css，.js文件...） – Mathieu

對於第一個要求討論緩存可能是錯誤的，但沒有爲內嵌資源執行單獨的請求，因此Chrome將其列爲從「內存緩存」中提供服務。在回答你的問題時，任何東西都可以被緩存，當然是HTML頁面。但是，動態生成的頁面通常會設置標題，以防止它們被緩存，並且現在大多數頁面都是動態的。所以，內聯資源是一把雙刃劍！ – user2612030

如何緩存行內base64數據uri（圖像）？

回答

相關問題