Too much html element slow down 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

The question has solved SlickGrid can easily handle

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

Performing as many changes as possible outside of the live DOM structure will improve the performance.To know more about take the look at the How to improve the performance of your java script in your page?