上傳處理縮圖到顯示縮圖的效能
chinghanho opened this issue · comments
製造縮圖到顯示需要多消耗 50% 時間。
測試情境：
製造縮圖：上傳 15 張 1,500 百像素的照片，從開始進行 add 跑迴圈開始，到完成 async control flow 需要費時 9 秒。
不需要製造縮圖：只需要 4.5 秒。
參考案例 Dropzone.js：
他的 demo 拖照片進去系統 CPU 使用量不高，縮圖產生時間也比較短。
在 91b8664 把 FileReader 改成用 Blob 的方式顯示，顯示的速度提高 33%，一樣的樣本資料，費時 3.1 秒。
不過這樣的後遺症是：
- 製造縮圖的時間反而增加到 6.6 秒（？）
- 如果拖進來的東西是目錄會掛（是說原本用 FileReader 時也還沒加上目錄的處理就是……）
附上 Blob 物件跟 FileReader 物件的說明：
A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.
The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.
可以研究一下 Web Workers 的用法。