Question

在Google Chrome浏览器中使用大量隐藏项时遇到一些问题。

最近，我posted a question认为很多想法模糊不清，很快就关闭了。我找到了造成此问题的原因，但是到目前为止我还不知道如何解决它。

有时在开发页面时，会使用一种方法，该方法包括以下事实：预先创建并隐藏一些元素，然后在必要时显示它们。

因此，此类元素的数量极大地影响了浏览器的响应速度。假设我们有以下代码：

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位）中运行该软件时，就会遇到刹车了。

在配置文件中，可以将其视为空任务（系统）。看截图。（这是来自旧主题的，总共有640,000个节点，但这并没有改变本质。）

https://i.imgur.com/yL8I5Hj.jpg

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

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

Answer 1

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

将它们添加到DocumentFragment会有所帮助，但是如果您想快速渲染640,000个节点，则无济于事。

预先创建元素然后显示它们是避免与用户交互造成麻烦的有用方法，但是大型文档通常较慢，并且很难快速建立大量节点。

我认为您有两种选择：

将更改分批进行较小的工作，然后使用requestAnimationFrame等待下一帧进行下一批。这样，当浏览器在所有新DOM上运行时，将停止抽搐，并且明显停止了大约一秒钟，但总体上将花费很多。或者，您可以使用requestIdleCallback在没有其他工作发生时在后台建立大量文档。无论使用哪种方法，您都可能遇到一个问题，即文档显示为交互式文档，但您的隐藏DOM节点尚不可用，因此您必须进行管理。
根据需要切换到添加DOM，而仅优化该DOM。创建其他对象来管理所有数据（您甚至可以使用Worker或Comlink将所有数据保留在JS主线程之外）。通常这会更快，这是大多数应用程序的工作方式，但是您需要做更多工作来优化性能以响应用户的操作（他们可能需要等待8秒钟才能使您的应用程序最初加载，但是如果他们单击某些内容，他们会期望在100毫秒左右的时间内）。

Google Chrome浏览器中的DOM重载问题

1 个答案: