Javascript and Performance, Use jquery or pure script?

Question

I have a big data should be shown in a Table. I use javascript to fill the table instead of priting in HTML.

Here is a sample data I use:

var aUsersData = [[1, "John Smith", "...."],[...],.......];

the problem is that Firefox warns me that "There is a heavy script running, should i continue or stop?"

I don't want my visitors see the warning. how can I make performance better? jQuery? pure script? or another library you suggest?

Answer 1

you can use the method here to show a progress bar and not have the browser lock up on you.

http://www.kryogenix.org/days/2009/07/03/not-blocking-the-ui-in-tight-javascript-loops

I am using almost that method on this page:

http://www.bacontea.com/bb/

to get the browser not to hang and show feedback while loading.

Answer 2

jQuery doesn't usually make things faster, just easier. I use jQuery to populate tables, but they're pretty small (at most 2 columns by 40 rows). How much data are you populating into the table? This could be the limiting factor.

If you post some of your table-populating code we can see if it's possible to improve performance in any way.

Answer 3

My suspicion is that it won't make much difference either way, although sometimes adding a layer of abstraction like jQuery can impact performance. Alternately, the jQuery team may have found an obscure, really fast way of doing something that you would have done in a more obvious, but slower, way if you weren't using it. It all depends.

Two suggestions that apply regardless:

First, since you're already relying on your users having JavaScript enabled, I'd use paging and possibly filtering as well. My suspicion is that it's building the table that takes the time. Users don't like to scroll through really long tables anyway, adding some paging and filtering features to the page to only show them the entries from the array they really want to see may help quite a lot.

Second, when building the table, the way you're do it can have a big impact on performance. It almost seems a bit counter-intuitive, but with most browsers, building up a big string and then setting the innerHTML property of a container is usually faster than using the DOM createElement function over and over to create each row and cell. The fastest overall tends to be to push strings onto an array (rather than repeated concatenation) and then join the array:

var markup, rowString;
markup = [];
markup.push("<table><tbody>");
for (index = 0, length = array.length; index < length; ++index) {
   rowString = /* ...code here to build a row as a string... */;
   markup.push(rowString);
}
markup.push("</tbody></table>");
document.getElementById('containerId').innerHTML = markup.join("");

(That's raw JavaScript/DOM; if you're already using jQuery and prefer, that last line can be rewritten $('#containerId').html(markup.join(""));)

This is faster than using createElement all over the place because it allows the browser to process the HTML by directly manipulating its internal structures, rather than responding to the DOM API methods layered on top of them. And the join thing helps because the strings are not constantly being reallocated, and the JavaScript engine can optimize the join operation at the end.

Naturally, if you can use a pre-built, pre-tested, and pre-optimised grid, you may want to use that instead -- as it can provide the paging, filters, and fast-building required if it's a good one.

Answer 4

You can try a JS templating engine like PURE (I'm the main contributor)
It is very fast on all browsers, and keeps the HTML totally clean and separated from the JS logic.

If you prefer the <%...%> type of syntax, there are plenty of other JS template engines available.