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

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

内存泄漏:指在计算机程序中,分配给程序的内存空间在不再需要时没有被正确释放或回收(这句话由 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>

参考:谷歌博客

你可能感兴趣的:(javascript,开发语言,ecmascript)