【性能优化】修复一个谷歌官方承认的内存泄漏问题

田本初

于 2024-08-20 08:15:00 发布

阅读量359

点赞数 17

分类专栏：面试题性能优化 JavaScript 文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/owo_ovo/article/details/141326639

版权

JavaScript 同时被 3 个专栏收录

92 篇文章 2 订阅

订阅专栏

面试题

59 篇文章 1 订阅

订阅专栏

性能优化

5 篇文章 0 订阅

订阅专栏

前言

通过下面这段代码，配合控制台可以直观看到谷歌官方承认的一个内存泄漏问题，https://issues.chromium.org/issues/41403456。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <button onclick="toggleInput(false)">创建一个2秒后自动销毁的文本框</button>
    <button onclick="toggleInput(true)">创建一个2秒后自动销毁的聚焦文本框</button>
  </div>
  <script>
    function toggleInput(isFocus) {
      const ipt = document.createElement('input');
      ipt.value = "2秒后销毁"
      document.body.appendChild(ipt);
      isFocus && ipt.focus();
      setTimeout(() => {
        ipt.remove();
      }, 2000);
    }
  </script>
</body>

</html>

通过控制台的性能分析可以明显观察到：

当生成的input元素未聚焦时，销毁后可以被垃圾回收。

在这里插入图片描述

但当生成的input元素聚焦了，则无法被垃圾回收。

在这里插入图片描述

分析

官方觉得无可厚非，也没必要修改，事实上确实如此，并不会造成页面的卡死等问题。但秉着对技术刨根问底的心，分析内存泄漏原因并尝试解决这个问题。

由于现在Web端多数都是单页面应用，所以几乎不会出现「刷新」这个动作。那么如果有很多表单元素，会不会导致过多的垃圾无法被回收呢。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <button onclick="createInputs()">创建五个自动销毁的文本框</button>
  </div>
  <script>
    function createInputs() {
      let times = 0
      let tId = setInterval(() => {
        if (times === 5) {
          clearInterval(tId);
          return
        }
        times++
        const ipt = document.createElement('input');
        ipt.value = "2秒后销毁"
        document.body.appendChild(ipt);
        ipt.focus();
        setTimeout(() => {
          ipt.remove();
        }, 200);
      }, 300);

    }
  </script>
</body>

</html>

在这里插入图片描述

通过观察可以发现多个聚焦的input，在手动清理后，只有一次的垃圾未被回收。

在这里插入图片描述

这是因为聚焦的input在销毁后，会自动转移到下一个input，所以手动清空垃圾后，仍保留一次垃圾，即最后一次。

解决

尝试通过blur()在销毁元素前失焦，但未生效。

<div>
  <button onclick="createInputs()">创建五个自动销毁的文本框</button>
</div>

function createInputs() {
  let times = 0
  let tId = setInterval(() => {
    if (times === 5) {
      clearInterval(tId);
      return
    }
    times++
    const ipt = document.createElement('input');
    ipt.value = "2秒后销毁"
    document.body.appendChild(ipt);
    ipt.focus();
    setTimeout(() => {
      ipt.blur()
      ipt.remove();
    }, 200);
  }, 300);
}

但是如果聚焦到另一个input上，则可以正常被垃圾回收机制清理。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <button onclick="createInputs()">创建多个自动销毁的文本框</button>
    <input type="text" id="testipt">
  </div>
  <script>
    function createInputs() {
      let times = 0
      let tId = setInterval(() => {
        if (times === 5) {
          clearInterval(tId);
          return
        }
        times++
        const ipt = document.createElement('input');
        ipt.value = "2秒后销毁"
        document.body.appendChild(ipt);
        ipt.focus();
        setTimeout(() => {
          testipt.focus();
          ipt.remove();
        }, 200);
      }, 300);
    }
  </script>
</body>

</html>