On Layout and Web Performance

http://kellegous.com/j/2013/01/26/layout-performance/

by swader • 13 years ago

135 16 13 years ago

pestaa• 13 years ago

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• 13 years ago

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.

danso• 13 years ago

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

simula67• 13 years ago

Imagine my surprise when I groggily google Kelly Norton.

kellegous3• 13 years ago

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

joshuacc• 13 years ago

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

LukeShu2• 13 years ago

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.

camus• 13 years ago

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.

FireBeyond• 13 years ago

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

ybaumes• 13 years ago

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

LukeShu2• 13 years ago

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

bink-lynch• 13 years ago

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• 13 years ago

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

kellegous3• 13 years ago

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)

bzbarsky• 13 years ago

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

On Layout and Web Performance

Related Stories