Google Chrome 中的 DOM 过载问题

我在 Google Chrome 中使用大量隐藏项目时遇到一些问题。

最近，我发布了一个问题 https://stackoverflow.com/questions/56329780/inexplicit-task-in-chrome-perfomance-devtools许多人认为这很晦涩难懂，很快就被关闭了。我找到了这个问题的原因，但到目前为止我不知道如何解决。

有时，在开发页面时，会使用一种方法，即预先创建一些元素并将其隐藏，然后在需要时显示。

所以此类元素的数量很大程度上影响了浏览器的响应速度。 假设我们有以下代码：

var elem = document.getElementsByClassName ('Founder') [0];
var parent = document.getElementsByClassName ('Cloud') [0];
var empty = document.getElementsByClassName ('empty') [0];
for (var i = 0; i <50000; i ++) {
var clone = elem.cloneNode (true);
    // var clone = empty.cloneNode (true);
clone.style.display = 'none';
        parent.appendChild (clone);
    }

<div class = 'Cloud'>
<input class = 'Founder' type = 'text'>
<div class = 'empty'> </div>
</div>

因此，当我在 Firefox（67.0（64 位））中启动它时，就没有特殊的刹车。 但是当我在 Chrome 版本 74.0.3729.169（官方版本）（64 位）中运行它时，我会遇到强烈的刹车。

在配置文件中，这可以被视为空任务（系统）。看一下截图。 （来自旧主题，总共有64万个节点，但这并没有改变本质）。

有没有办法加快工作速度，我可以冻结未显示的项目吗？据我了解这些空任务，这是浏览器索引元素或类似内容的时间。

也许有任何设置可以通过编程方式更改，这将加快工作速度（可能需要更多 RAM）。

parent.appendChild(...);是缓慢的一步。您要向文档添加 50,000 个节点，即使是隐藏的（这应该避免回流布局步骤），它们也将是一个需要添加的大量工作。

将它们添加到DocumentFragment https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment会有帮助，但如果您想快速渲染 640,000 个节点，效果就没有那么大了。

提前创建元素然后显示它们可能是避免用户交互卡顿的有用方法，但大型文档通常较慢，并且大量节点将很难快速生成。

我认为你有两个选择：

1. 将更改批处理为更小的工作片段，然后使用requestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame等待下一帧进行下一批。当浏览器在所有新 DOM 上工作时，这种方式将停止卡顿和明显的第二次左右，但会花费much总体上有更多的时间。或者你可以使用requestIdleCallback https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback当其他工作没有发生时，在后台构建大量文档。对于其中任何一个，您可能会遇到一个问题：文档显示为交互式，但隐藏的 DOM 节点尚不可用，因此您必须对此进行管理。

2. 切换到根据需要添加 DOM，然后只优化该 DOM。创建一些其他对象来管理所有数据（您甚至可以使用Worker https://developer.mozilla.org/en-US/docs/Web/API/Worker or Comlink https://github.com/GoogleChromeLabs/comlink让所有数据远离主 JS 线程）。这通常会更快，并且是大多数应用程序所做的，但是您将需要更多的工作来优化响应用户操作的性能（他们可能会等待 8 秒来等待您的应用程序最初加载，但如果他们单击他们期望的内容100 毫秒左右的时间）。