使用Fetch API+Blob API下载文件的内存占用

Question

Chrome的Blob存储系统设计文档提到了以下内容。

如果blob的内存空间已满，或者新的blob太大而无法在内存中，那么blob系统将使用磁盘。这可以是将旧的blob分页到磁盘，或者直接将新的太大的blob保存到磁盘。

然而，即使在多次浏览文档之后，我仍然有以下担忧：

null

const download = downloadLinks => {

  const _download = async ( downloadLink ) => {

    const blobURL = await fetch(downloadLink, {  
      responseType: 'blob'  
    })
    .then(res => res.blob())
    .then(blob => window.URL.createObjectURL(blob))
 
    const fileName = downloadLink.substr(downloadLink.lastIndexOf('/'))
    
    const a = document.createElement('a')  
    a.href = blobURL
    a.setAttribute('download', fileName)  
    document.body.appendChild(a)  
    a.click()
    a.remove()  
    
    window.URL.revokeObjectURL(blobURL)
  }

  const downloadInterval = () => {

    if (downloadLinks.length == 0) return

    const url = downloadLinks.pop()
    
    _download(url)
    
    if (downloadLinks.length !== 0) setTimeout(downloadInterval, 500)

  }

  setTimeout(downloadInterval, 0)
}

https://github.com/eligrey/filesaver.js/#supported-browsers

Answer 1

简短的回答是肯定的！

>

fetch实际上改变了这种行为，因为它首先将数据加载为ReadableStream并加载到内存中。因此，请改用下面的代码。

此方法可以下载的最大文件大小取决于磁盘大小、操作系统和浏览器。没有一个适用于所有系统的确切数字。这个问题在这里得到了详细解答。

const download = downloadLinks => {

    const _download = url => {

        const xhr = new XMLHttpClient()
        xhr.responseType = 'blob'
        xhr.open('GET', url)
        xhr.onload = () => {
            const fileName = url.substr(url.lastIndexOf('/'))
            const blobURL = window.URL.createObjectURL(xhr.response)
            const a = document.createElement('a')  
            a.href = blobURL
            a.setAttribute('download', fileName)  
            document.body.appendChild(a)  
            a.click()
            a.remove()  
            window.URL.revokeObjectURL(blobURL)
        }
        xhr.send(null)

    }

    const downloadInterval = () => {

        if (downloadLinks.length == 0) return

        const url = downloadLinks.pop()
        
        _download(url)
        
        if (downloadLinks.length !== 0) setTimeout(downloadInterval, 500)

    }

    setTimeout(downloadInterval, 0)
}