这个问题与使用javascript创建复杂的用户界面同时保持浏览器性能高有关。
具体来说，在包含数千个节点的屏幕上拖动元素时，如何防止浏览器FPS显着下降。
我正在使用javascript根据许多内容生成表单输入：首先，此表单有几个级别，然后每个级别包含3个子级别，这些级别都包含3个子级别。确切地说，有3个父级别，每个父级别3个子级别，以及这些子级别的3个子级别。这使得总共27个容器然后生成表单元素。
为这27个容器中的每个容器生成输入后，主容器中有超过2600个输入，包含所有内容，此容器是一个jquery对话框。
我希望我已经清楚地解释了这一点。我所拥有的是一个包含数千个输入的jQuery对话框，当你在屏幕上拖动这个对话框时，它非常不连贯，不流畅。
我认为这种迟缓是由于容器内有数千个DOM节点被移动。
如果没有浏览器FPS显着下降，我怎么能允许拖动如此大量的元素呢？
起初我打算将这个问题称为“如何在拖动包含数千个输入的jQuery对话框时改进浏览器FPS”，但我将其重命名为更准确。
编辑： 我是否使用jQuery dialog（）来使主容器可拖动，或者我使用普通的vanilla javascript，性能非常低迷。
编辑2 :(我到底在做什么） 数千个输入永远不会像Web表单那样被填写。输入可以包含或不包含由用户输入的实时生成样式表的值。我正在构建一个视觉元素构建器。使用充满输入的对话框，用户可以在元素数组上设置样式。基本上我通过表单对许多元素进行完全CSS控制。事实上它有点疯狂，如果不是不可能的......但就像爱因斯坦所说的那样，“如果一开始，这个想法并不荒谬，那么它就没有希望了......”无论如何，如果我能把它拉下来的话......我会非常喜欢以前从未建造过的东西。如下面的评论中所述，一次只能看到一百个输入。
编辑3： 作为测试，我删除了所有输入的2/3，并且性能显着提高。由于所有元素不需要一次显示，只有当用户导航到表单的那一部分时，才会让DOM忽略它们直到实际需要它们为止？用户看到的只是实际存在的输入数量的一小部分。
感谢所有回答我问题的人，感谢你们的投入（虽然我已经有了几千个...... LOL）。
答案 0 :(得分：0)
通过在不在当前视图中的任何输入上设置display：none，DOM会忽略这些节点，并且可以无滞后地拖动表单。
所以解决方案非常简单。在所有不需要显示的容器上设置display：none（因为你一次只能看到大约100个输入），并且DOM在拖动主容器时重新绘制节点时忽略节点。
问题解决了:)）