

On Layout and Web Performance - swader
http://kellegous.com/j/2013/01/26/layout-performance/

======
pestaa
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>

~~~
yawgmoth
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.

------
simula67
Imagine my surprise when I groggily google Kelly Norton.

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

~~~
joshuacc
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>

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

------
bzbarsky
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...

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

------
bink-lynch
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!

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

~~~
kellegous
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)

