Google Chrome中的DOM重载问题 [英] DOM overload problems in Google Chrome

问题描述

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

最近，我将有所帮助，但是如果您想快速渲染640,000个节点，则不需要那么多。

预先创建元素然后显示它们可以是避免与用户交互造成麻烦的一种有用方法，但是通常使用大型文档

我认为您有两个选择：

1. 将更改分成较小的工作，并使用 requestAnimationFrame 等待下一个帧进行下一批处理。这样，当浏览器在所有新DOM上运行时，将停止抽搐，并且明显停止了大约一秒钟，但总体上将花费很多。或者，您可以使用 requestIdleCallback 可以在没有其他工作发生时在后台建立大量文档。遇到这两种情况，您可能会遇到一个问题，即文档显示为交互式文档，但您的隐藏DOM节点尚不可用，因此您必须进行管理。

   
   



2. 切换为根据需要添加DOM，而仅优化该DOM。创建其他对象来管理所有数据（您甚至可以使用 Worker 或 Comlink 保留所有内容从JS主线程删除该数据）。通常这会更快，这是大多数应用程序的工作方式，但是您需要做更多工作来优化性能以响应用户的操作（他们可能需要等待8秒钟才能使您的应用程序最初加载，但是如果他们单击某些内容，他们会期望在100毫秒左右的时间内）。

   
   

I have some problems when using a large number of hidden items in Google Chrome.

Recently, I posted a question that many thought was obscure and soon it was closed. I found the cause of this problem, but so far I have no idea how to solve it.

Sometimes when developing pages, a method is used which consists in the fact that some elements are created in advance and hidden, and then displayed if necessary.

So the number of such elements greatly affects the speed of the response of the browser. Suppose we have the following code:

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>

So when I launch it in Firefox (67.0 (64-bit)), then there are no special brakes. But when I run it in Chrome Version 74.0.3729.169 (Official build), (64 bits), then I get strong brakes.

In the profile this can be seen as the Empty Task (System). Look at the screenshot. (It is from the old theme, and there are a total of 640,000 nodes, but this does not change the essence).

Is there a way to speed up the work, and can I freeze items that are not displayed? As far as I understand these empty tasks, this is the time for which the browser indexes the element or something like that.

Maybe there are any settings that can be changed programmatically, which will speed up the work (may require more RAM).

解决方案

parent.appendChild(...); is the slow step. You're adding 50,000 nodes to the document, even hidden (which should avoid a reflow layout step) they will be a chunk of work to add.

Adding them to a DocumentFragment will help, but not that much if you want to quickly render 640,000 nodes.

Creating elements in advance and then showing them can be a useful way to avoid jank with user interactions, but large documents are generally slower and large numbers of nodes will be hard to make fast.

I think you have two options:

1. Batch the changes into smaller pieces of work, and use requestAnimationFrame to wait for the next frame to do the next batch. That way will stop jank and the apparent second or so while the browser works on all the new DOM, but will take much more time overall. Alternatively you could use requestIdleCallback to build up the massive document in the background when other work isn't happening. With either of these you could have an issue where the document appears interactive but your hidden DOM nodes aren't available yet, so you have to manage that.

2. Switch to adding the DOM as you need it, and instead optimise just that DOM. Create some other object to manage all your data (you could even use a Worker or Comlink to keep all that data off the main JS thread). This will generally be quicker and is what most apps do, but you will have more work optimising the performance in response to user actions (they might wait 8s for your app to load initially, but then if they click something they're going to expect something within 100ms or so).

这篇关于Google Chrome中的DOM重载问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！