節省了時間- 在瀏覽器中處理大圖像" />
客戶上傳了28 張圖像，每張大約5800 x 9500 像素 和28 MB 大小。當嘗試在瀏覽器中顯示這些圖像時，整個選項卡凍結了 - 甚至拒絕關閉 - 長達 10 分鐘。這是在配備 Ryzen 9 CPU 和 RTX 4080 GPU 的高階機器上進行的，而不是小型筆記型電腦。
在我們的 CMS (Grace Web) 中，當管理員上傳檔案（無論是圖片還是影片）時，我們會在上傳完成後立即顯示它。這對於用戶體驗來說非常好 - 它確認上傳成功，他們上傳了他們想要的內容，並且它顯示了 UI 的響應能力以獲得更好的感覺。
但是這些巨大的圖像，瀏覽器幾乎無法顯示它們並凍結了。
要注意的是，問題不在於上傳本身，而在於顯示這些大圖像。同時一張一張渲染 28 張巨大的圖像實在是太多了。即使在空白頁上，也只是...不。
任何時候您在 中顯示圖片時在圖像加載和佈局重新計算期間，瀏覽器會經歷一個使用CPU、RAM、GPU（有時甚至是驅動器）的整個過程，有時甚至會在顯示圖片之前多次循環執行此過程。它經歷了計算像素、在硬體之間傳輸資料、插值演算法等。對於瀏覽器來說，這是一個重要的過程。
我們考慮了幾個選項：
這些解決方案都感覺不可用。我們不想限制管理員上傳所需內容的能力，也不想在使用者體驗上妥協。
我記得
我們決定替換 帶有
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
// img.src = URL.createObjectURL(file); // Use this if you're working with uploaded files
img.src = filesroot + data.file_path; // Our existing file path
img.onload = function() {
// Resize canvas to desired size (for preview)
canvas.width = 80 * (img.width / img.height); // Adjust scaling as needed
canvas.height = 80;
// Draw the image onto the canvas, resizing it in the process
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
file_div.innerHTML = ''; // Prepared <div> in UI to display the thumbnail
file_div.appendChild(canvas);
};
改善是立竿見影的！瀏覽器不僅可以毫無問題地處理28 張大圖像，而且我們還通過加載120 MB 圖像測量28,000 x 17,000 像素進一步推動它，並且它仍然可以正常工作是一個小圖標。
使用元素，繪圖完全掌握在 GPU 手中，而這些晶片實際上就是為此任務而製造的。
透過調整
鑑於這一成功，我們現在正在考慮替換 與 在我們應用程式的其他部分，特別是在一次顯示大約 250 張圖像的管理螢幕中。雖然這些圖像已經正確調整了大小，但我們很好奇是否使用
我們將進行測試和基準測試來衡量任何效能提升。我一定會在以後的文章中分享我們的發現。
使用
對於公共網站，最好在將圖像提供給使用者之前在伺服器端正確調整圖像大小。如果您對如何自動調整圖像大小和優化感興趣，我寫了一篇關於該主題的文章，您可能會覺得有用。
我喜歡優化！ 儘管我們每天都在向本地高效能硬體邁進，但透過最佳化 - 即使「它很好，但還可以更好」 - 我們可以防止此類問題開始。
這種方法不是標準的。而且我不太關心標準。它們通常被視為硬性規則，但它們只是指導方針。這個解決方案很合適。我們沒有客戶擁有沒有堅實的的古老設備。支持。所以，即使現在我們有更多的程式碼需要管理，有多種顯示圖片的方式，但它非常適合，這才是重要的！
你有類似的經驗嗎？你是怎麼處理的？歡迎在下面的評論中分享您的經驗或提出問題！
以上是
