1. 开始录制
    • 先点击 回收垃圾 清除其他的内存占用
    • 再点击 案例的按钮，开始内存分析
    • 结束录制前再次点击 回收垃圾 观察移除后的 input 节点 是否还占用内存
  2. 结束录制

问题

  1. 示例代码

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="toggleInput(false)">创建一个2s后销毁的文本框</button>
    <button onclick="toggleInput(true)">创建一个2s后销毁的聚焦文本框</button>
    <script>
        function toggleInput(isFocus) {
            const inp = document.createElement('input');
            inp.value = '2s后销毁';
            document.body.appendChild(inp);

            isFocus && inp.focus();

            setTimeout(() => {
                inp.remove();
            }, 2000);
        }
    </script>
</body>

</html>

  2. 查看 创建一个2s后销毁的文本框 的内存占用

    创建一个 2s 后销毁的文本框，2s 内存销毁

  3. 查看 创建一个2s后销毁的聚焦文本框 的内存占用

    创建一个 2s 后销毁的文本框，2s 内存没有销毁，这是一个 chrome 的 bug

最后一个聚焦的文本框销毁后仍然占用内存

  1. 示例代码

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="createInputs()">创建 10 个2s后销毁的聚焦文本框</button>
    <script>
        function createInputs() {
            let times = 0;
            let timer = setInterval(() => {
                if (times === 10) {
                    clearInterval(timer);
                    return;
                }
                times++;

                const inp = document.createElement('input');
                document.body.appendChild(inp);
                inp.focus();
                setTimeout(() => {
                    inp.remove();
                }, 200);
            }, 300);
        }
    </script>
</body>

</html>

  2. 查看内存占用

切换焦点解决问题

  1. 示例代码

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="toggleInput(true)">创建一个2s后销毁的聚焦文本框</button>
    <input id="input" />

    <script>
        function toggleInput(isFocus) {
            const inp = document.createElement('input');
            const input = document.getElementById('input');
            inp.value = '2s后销毁';
            document.body.appendChild(inp);

            isFocus && inp.focus();

            setTimeout(() => {
                input.focus();
                inp.remove();
            }, 2000);
        }
    </script>
</body>

</html>

  2. 查看内存占用

打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 问题
  2. 2. 最后一个聚焦的文本框销毁后仍然占用内存
  3. 3. 切换焦点解决问题