Excellent article. Most projects treat the client-side like a necessary evil and so I've seen pages with thousands of divs that can cause a hundred reflows for a single click. Not good, although at least it made the backend feel very fast in comparison!

And here's Kelly Norton's example code: http://kellegous.com/media/upload/2013/01/layout.js

I really like that he included a reduced case of sample code. It really makes it easy to understand the differences in the solution.

Also, that last line, that comment, heh.

The little pop-up bubble in the lower-right corner showing the reader how long it took the page to render is pretty sweet.

Imagine my surprise when I groggily google Kelly Norton.

I've been battling with her in PageRank for years. I claim she isn't playing fair!

FYI, it took me a little digging around to figure out where your atom feed is. :-)

Here in case anyone else wants it: http://kellegous.com/atom.xml

Thanks. I've meaning to put the links back for a while and never have done it.

I think the problem is that she appears on multiple sites. Even if you get the first link (as you do when I Google you, but Google has me pretty heavily bubbled into technology), she gets a good part of the page. This is because search engines don't like to return a bunch of very similar responses. So while hits for you are limited to the several sites you are on (your site, LinkedIn, Twitter, Facebook), there are apparently tons of porn sites that she is on.

I'll throw in that Google did a pretty good job of giving you links. On "my Google", you got 4 of the first 5 links, but non after that on the first page. On DuckDuckGo, which doesn't bubble me in, (but has a technology bias) you only got 1 of the first 5 links.

You've disabled your safe search!! ;-)

With DuckDuckGo, the porn star is 3 of the first 5 links, even with Safe Search on.

Only 1 of the remaining 2 is kellegous.com (The other is a health care consultant on LinkedIn).

lol, kinda like Violet Blue (the journalist) unfortunatly , s long as people will search for the porn star nickname , the genuine person will come second in google results.

Whilst Violet Blue may be the journalist's legal name, the flurry of trademarking, and other assorted activity, leads me to strongly suspect it is not her birth name. In which case, she has no more "claim" to the name except being "first to the gate" (then aggressively defending it).

The right solution to this problem in general is to not do layout manually in script and instead do declarative layout in CSS. That, of course, requires more powerful CSS features, but those are happening. Several browsers now shipping calc() unprefixed and flexbox is well on its way; those should help a lot between the two of them...

Very enlightening! I am building a single-page application, was one of the "unaware" that will definitely be much more mindful of this now. Thank you!

Why does Element.innerText cause the browser to "layout?" The author said he might explain this in another article.

You are going to make me give away my future punchline. ;-) The short story is that innerText will include the line breaks that are introduced by text layout. A lot of people call innerText when what they actually want is textContent (which doesn't layout because is just a concatenation of the descendent text nodes)