StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>My guess is you are adding the rows to the DOM one by one. This is likely causing many many browser repaints, giving you the sensation of laggyness/slowness as the rows render. </p> <p>The easiest way to increase speed is to limit your interaction with the DOM. Instead of inserting the rows into the DOM one by one, insert them all together.</p> <p>Continue reading for an example of what I mean.</p> <h2>What NOT to do:</h2> <p><a href="http://jsfiddle.net/skylar/arkxp/4/">http://jsfiddle.net/skylar/arkxp/4/</a></p> <p>In this example notice how I am adding the table to the DOM, before I add any of the rows. <strong>This is bad</strong> as it causes the browser to repaint 1000 times!</p> <p><strong>This is wrong:</strong></p> <pre><code>this.table = $("<table></table>").appendTo("body"); this.model.each(this.addRow); </code></pre> <h2>What you should be doing:</h2> <p><a href="http://jsfiddle.net/skylar/arkxp/5/">http://jsfiddle.net/skylar/arkxp/5/</a></p> <p>In this example, I wait to add the table to the DOM until I have generated all the rows. This means the DOM only repaints <strong>once</strong> and should be much quicker than the above example.</p> <p><strong>This is correct:</strong></p> <pre><code>this.table = $("<table></table>"); this.model.each(this.addRow); this.table.appendTo("body"); </code></pre> <p>This is true for any interaction you have with the DOM. The more you mess with it, the more it will slow down. In fact, it is often said that the quickest way to speed up you JS is to <strong>limit your interactions with the DOM</strong></p> <p>If you find yourself in a situation where you need to add something to an element already inside the DOM, simply set it to <code>display:none</code> or temporarily remove it from the DOM while you perform actions upon it. When you are all done, inject it back and you will have only forced a single repaint.</p> <p>Once you get the hang of optimizing your DOM interactions, I think you'll find a lot of room for improvement in your app.</p> <p>Modern browsers limit DOM repaints by caching your requests to update the DOM and doing the changes in "chunks". IE (and older browsers) will repaint on every change. This likely explains why your modern browsers are performing better, despite excessive DOM interaction.</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