StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You're almost on the spot with your analysis. Let me attempt to explain why <code>setTimeout</code> is making the difference.</p> <p>If you look at this great <a href="http://blog.dynatrace.com/2009/12/12/understanding-internet-explorer-rendering-behaviour/" rel="nofollow">article</a> about DOM rendering, you'll understand that <code>.html()</code> will cause a <strong><em>reflow</em></strong> to happen.</p> <p>Now with the next two lines, what is happening is that you're tying up the browser's rendering thread. Browsers may choose to wait till script execution completes before attempting a reflow (to avoid multiple reflows or to buffer all changes). </p> <p>The solution - we need to tell the browser that our <code>html</code> changes are done and you can complete the rendering process. The way to do it - 1) end your script 2) use <code>setTimeout</code> to yield the execution to the browser.</p> <p>Doing a <code>setTimeout</code> with 0ms delay also works because <code>setTimeout</code> basically relinquishes control of the sript block. One of the reasons why animation related script rely so heavily on <code>setTimeout</code> and <code>setInterval</code>.</p> <p>Another potential improvement would be to use <code>documentFragments</code>, explained succinctly by John Resig <a href="http://ejohn.org/blog/dom-documentfragments/" rel="nofollow">here</a></p> <p>I think combining these two should yield more speed but of course, no way to know until profiling is done!</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