太多的html元素减慢了jquery

Question

I have a js script to get a datafeed and built some div according to the response text.

I have already used web worker and ajax to split the read datafeed and build html code process.

However while I append the html to my container, it becomes slow (let say 18000's div)

Then I change the method to append the 200 div for scroll to down of my container.

It becomes very fast, but while all items render, the other process start to become slow, for example if I make the container show and hide, it is pretty slow.

I found another solution is to use z-index, it makes the show hide process much faster.

However, while I need to change the container content, it becomes slow again.

Any idea or solution?

Answer 1

在实时DOM结构之外执行尽可能多的更改将提高性能。要了解更多信息，请查看如何在页面中提高java脚本的性能？

Answer 2

I have been in this similar situation, where I was adding lot of child's to a node in a tree.

Problems

1. The page was slow.
2. Rendering of elements were slow,Sometimes even JS crashes in IE.

Solutions

1. I created a upper threshold of the number elements that will be present in a DOM at one instance. Lets say initially there are 500 elements,then there is another ajax request that will be fetching around 500 nodes so I would clear some element. It can help if you can manage the clearing scenarios.
2. No inline CSS Styles, It will look what this thing will create difference but keep all the Styling in CSS classes improves performance.
3. Defining an appropriate HTML Structure Like not keeping any dangling divs,spans etc.
4. attaching event handlers through proper delegation like 'on'.

There are lot of things that can be done tom improve this. If you can post a jsfiddle for this will certainly help.

Answer 3

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