URL.createObjectURL( ) 方法和 FileReader.readAsDataURL(file) 的比較

1,概念
URL.createObjectURL(object) 返回了一個DOMString包含了一個對象URL,該URL可用於指定源 object的內容。其參數爲用於創建 URL 的File 對象、Blob 對象或者 MediaSource 對象。​

FileReader.readAsDataURL(file) 讀取指定的 Blob 或 File 對象,讀取時觸發onload事件,返回的結果中將是一個包含data:URL格式的字符串(base64編碼)以表示所讀取文件的內容。

2,比較
2.1 內存使用

  • createObjectURL返回一段帶hash的url,並且一直存儲在內存中,直到document觸發了unload事件(例如:document close)或者執行revokeObjectURL來釋放

  • FileReader.readAsDataURL則返回包含很多字符的base64,並會比blob url消耗更多內存,但是在不用的時候會自動從內存中清除(通過垃圾回收機制)

使用createObjectURL可以節省性能並更快速,只不過需要在不使用的情況下手動釋放內存。
但是如果不太在意設備性能問題,並想獲取圖片的base64,則推薦使用FileReader.readAsDataURL

2.2 同步異步

  • createObjectURL是同步執行
  • FileReader.readAsDataURL是異步執行

這兩種方法,參數都是blob對象或File 對象,返回一個可以用a標籤打開的url,這兩種方法都可用於下載文件。

參考鏈接 https://blog.csdn.net/qq_39258552/article/details/84133770

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章