Faster HTML and CSS: Layout Engine Internals for Web Developers

Google Tech Talks
November 12, 2008

ABSTRACT

How fast Web pages load and how fast they change dynamically depends on both the Web page and the browser it's running in. Browser makers put significant effort into making their browsers faster, but there are also things that Web page authors can do to make their pages more responsive.

I plan to talk about HTML, CSS, and the DOM in Mozilla, from the DOM tree and CSS style sheets through to displaying pixels on the screen. In particular, what do Mozilla-based browsers spend the time doing when they're displaying a Web page? Which parts of this work are redone when the page is changed by script? And what implications does this have for how authors can make their pages faster, and for how authors can test the performance of their pages?


Speaker: David Baron
David is a software engineer at Mozilla Corporation, where he works on Mozilla's implementations of Cascading Style Sheets (CSS) and layout algorithms (computing the positions of objects), fixing memory leaks, and other things. He has been working on Mozilla since 1998, and is a member of the W3C CSS working group.

• Category

  People & Blogs

[paratirisis]

- 43:16 Hiding elements. display:none vs. visibility affect rendering performance in a different (and non obvious) way.

- 49:00 Optimisations with absolute positioning: Absolutely positioned elements within other absolutely/relatively positioned elements cause more computations.

- 52:00,55:50 Table vs floating layout for performance: depends, width computation on deep nested elements is expensive

- 54:30 Benchmarking

[tunkara]

i guess he stutters ...anyway don't blame him....he is gifted..

[vividexstance]

Can people do presentations without saying the word "ummm" every two seconds?

[wampus959]

His name is Werner Brandes, and his voice is his passport!

[Rick Beacham]

good presentation. alot of information.

[SamuraiGuevara]

awesome information

[Mandar Deodhar]

after this talk, google created chrome =)

[seanslik1]

he's crying?

[Rahul pal]

i like this video

[Rahul pal]

god i am impress

[odiousominious]

does this mean that under hover (besides being specific) its best to start with visibility:hidden so that it will switch faster while in site (I doubt it takes too much time to load)