js 通过 a 标签下载文件的内存泄漏问题

linhieng

已于 2024-02-08 18:56:12 修改

阅读量388

点赞数 11

文章标签： javascript 开发语言 ecmascript

于 2024-02-08 18:52:28 首次发布

本文链接：https://blog.csdn.net/linhieng/article/details/136081549

版权

之前的一篇博客介绍了本地如何保存（下载）文件。博客中的代码其实没有考虑到内存泄漏问题，所以这篇博客介绍一下如何解决内存泄漏：

内存泄漏：指在计算机程序中，分配给程序的内存空间在不再需要时没有被正确释放或回收（这句话由 ChatGPT 生成）。

如果你学习过 C 语言那么应该知道动态申请的内容空间，使用完后一定要释放掉，这就是为了防止内存泄漏。在本案例中，我们生成了一个文件的链接，该链接会占据一块内存空间，当用户成功下载文件后，该内存空间其实就无用了，如果此时不释放该文件所占据的空间，那么就是内存泄漏。

如果你长时间浏览某个大型网页后，发现页面变得卡顿，那么大概率是该网页占据的内存太大，其原因可能就是网站开发者没有考虑到内存泄漏问题。

下面给出案例代码来叫你如何防止内存泄漏（借助 URL.revokeObjectURL）：点击下载按钮，3 秒后复制链接会发现链接已失效。

<body>
    <button>将内容写入到文件中并下载（3秒后无效）</button>
    <p>生成的链接：<input id="link" disabled></input> <button>复制</button></p>

    <script>
        const link = document.getElementById('link')

        const saveFile = async (strContent, filename) => {
            const blob = new Blob([strContent], {type: 'text/plain'})
            const a = document.createElement('a')
            a.download = filename
            a.href = URL.createObjectURL(blob)

            // 显示链接方便复制
            link.value = a.href

            a.addEventListener('click', (e) => {
                // URL.revokeObjectURL 用于释放之前通过 URL.createObjectURL 创建的对象
                setTimeout(() => URL.revokeObjectURL(a.href), 3 * 1000)
            })
            a.click()
        }

        document.querySelector('button').onclick = () => saveFile('hello, world!', 'hello.txt')
        document.querySelector('p button').onclick = () => {
            link.disabled = false
            link.select()
            document.execCommand('copy')
            link.disabled = true
        }
    </script>
</body>

参考：谷歌博客

linhieng

关注

11
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js 通过 a 标签下载文件的内存泄漏问题

如果你学习过 C 语言那么应该知道动态申请的内容空间，使用完后一定要释放掉，这就是为了防止内存泄漏。在本案例中，我们生成了一个文件的链接，该链接会占据一块内存空间，当用户成功下载文件后，该内存空间其实就无用了，如果此时不释放该文件所占据的空间，那么就是内存泄漏。如果你长时间浏览某个大型网页后，发现页面变得卡顿，那么大概率是该网页占据的内存太大，其原因可能就是网站开发者没有考虑到内存泄漏问题。内存泄漏：指在计算机程序中，分配给程序的内存空间在不再需要时没有被正确释放或回收（这句话由 ChatGPT 生成）。
复制链接

扫一扫