StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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.</p> <p>Two suggestions that apply regardless:</p> <p>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.</p> <p>Second, when building the table, the <em>way</em> 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 <code>innerHTML</code> property of a container is usually faster than using the DOM <code>createElement</code> 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 <code>join</code> the array:</p> <pre><code>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(""); </code></pre> <p>(That's raw JavaScript/DOM; if you're already using jQuery and prefer, that last line can be rewritten <code>$('#containerId').html(markup.join(""));</code>)</p> <p>This is faster than using <code>createElement</code> 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 <code>join</code> thing helps because the strings are not constantly being reallocated, and the JavaScript engine can optimize the <code>join</code> operation at the end.</p> <p>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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload