太多的html元素减慢了jquery

Question

我有一个js脚本来获取数据源并根据响应文本构建一些div。

我已经使用了web worker和ajax来拆分读取数据源并构建html代码进程。

然而，当我将html附加到我的容器时，它变得很慢（比如18000的div）

然后我更改方法以附加200 div以滚动到我的容器的下方。

它变得非常快，但是当所有项目渲染时，另一个进程开始变慢， 例如，如果我让容器显示和隐藏，那就很慢了。

我发现另一个解决方案是使用z-index，它使show hide进程更快。

但是，虽然我需要更改容器内容，但它会再次变慢。

任何想法或解决方案？

Answer 1

在实时DOM结构之外执行尽可能多的更改将提高性能。要了解更多信息，请查看How to improve the performance of your java script in your page?

Answer 2

我一直处于类似的情况，在那里我将很多孩子添加到树中的节点。

<强>问题

1. 页面很慢。
2. 元素的渲染很慢，有时甚至JS在IE中崩溃。

<强>解决方案

1. 我创建了一个实例中DOM中存在的数字元素的上限阈值。让我们说最初有500个元素，然后有另一个ajax请求将获取大约500个节点，所以我会清除一些元素。如果您可以管理清算方案，它会有所帮助。
2. 没有内联CSS样式，它会看出这个东西会产生什么不同但是保持CSS类中的所有样式可以提高性能。
3. 定义合适的HTML结构不要保留任何悬空的div，span等。
4. 通过正确的委托来附加事件处理程序，例如'on'。

可以做很多事情来改善这一点。如果您可以发布一个jsfiddle，这肯定会有所帮助。

Answer 3

问题已经解决了 SlickGrid可以轻松处理