Home/ Questions/Q 751401
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T14:39:46+00:00

I have a search that returns JSON, which I then transform into a HTML

  • 0

I have a search that returns JSON, which I then transform into a HTML table in Javascript. It repeatedly calls the jQuery.append() method, once for each row. I have a modern machine, and the Firefox response time is acceptable. But in IE 8 it is unbearably slow.

I decided to move the transformation from data to HTML into the server-side PHP, changing the return type from JSON to HTML. Now, rather than calling the jQuery.append() time repeatedly, I call the jQuery.html() method once with the entire table. I noticed Firefox got faster, but IE got slower.

These results are anecdotal and I have not done any benchmarking, but the IE performance is very disappointing. Is there something I can do to speed up the manipulation of large amounts of data in IE or is it simply a bad idea to process very much data at once with AJAX/Javascript?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As others have mentioned, excessive DOM manipulation kills performance. Creating an HTML string using the aforementioned Array.join(”) and setting the innerHTML of a container using the jQuery.html() method is orders of magnitude faster. Be wary of using jQuery.append(html) – this is equivalent to creating all the DOM nodes first and then inserting them!

    Thing is, even if you optimize the creation of the page node tree, you’re still going to hit a ceiling pretty fast with very large datasets. Browsers just can’t handle such large and complex DOM trees. First thing you will see slowing down will be the interactions (animations, handlers, etc.) even if you use event delegation. If your dataset is truly large, you will need to do some sort of virtualization to only show what is visible in the viewport (this is what SlickGrid does – http://github.com/mleibman/slickgrid).

    Alternatively, you can improve the responsiveness and “time to interactive” of your page by chunking your DOM additions and executing them on a timeout one after another with some pause in between to let the browser handle user events.

    Other techniques include rendering the first page worth of data, allocating room for more, but only rendering it when the user starts scrolling towards it. This is what Facebook does.

    • 0