Faster HTML and CSS: Layout Engine Internals for Web Developers
November 7th, 2009 | by admin |
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.
Duration : 1:1:15
Tags: education, engedu, Google, googletechtalks, talk, talks, techtalk, techtalks
By bloodjake12 on Nov 7, 2009
actually no, theres …
actually no, theres a video thats like 4 hours long
By ALEKS899 on Nov 7, 2009
longest video on …
longest video on youtube
By exnext on Nov 7, 2009
nervous!!!!!!
nervous!!!!!!
By UTubeMatias on Nov 7, 2009
1 hour cool
1 hour cool
By tuleo554 on Nov 7, 2009
wow this guy is …
wow this guy is soooo nervous!
By tunkara on Nov 7, 2009
i guess he stutters …
i guess he stutters …anyway don’t blame him….he is gifted..
By Pacplay365 on Nov 7, 2009
wow i cant believe …
wow i cant believe yall sat here for an hour watchign this
By Juicyman3000yo on Nov 7, 2009
rynjhtumiqrkp; …
rynjhtumiqrkp;ioptjrtiow yuipjwe rjo[paop;LD IKP[OJETYUI0H4OPT6UAPSIO’ERYUJM[PE56U9- ue9i6y0495yu096qu094wy6i90w46[
By paratirisis on Nov 7, 2009
- 43:16 Hiding …
– 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
By paratirisis on Nov 7, 2009
- 32:35 Event …
– 32:35 Event states/hover: should be specific to avoid unneccessary layouting computation.
- 36:30 Problems with deferred repainting and coallescing: scripts asking for information that is available only after redoing the layout. This forces the browser to immediatelly do the computation and slows scripts down. He gives tips and best practices on how to avoid that. Relayouting.
- 41:40 “The cost of relayouting an element is affected by the type of element the ancestor is”
By paratirisis on Nov 7, 2009
- 20:55 …
– 20:55 Optimisations undertaken by the browser on CSS selectors. What you can do: the right most part of the selector expression should be as specific as possible.
-28:00 Dealing with scripts that change the style in DOM/layout. FF can detect when changes to the style will require redoing the layout.
-30:00 Scrolling is usually optimised. The position:fixed style inhibits optimisations in scrolling. Overflow with transparencies above non-uniform elements disable optimisations in scrolling.
By paratirisis on Nov 7, 2009
- 13:28 Stylesheets …
– 13:28 Stylesheets block construction of the rendering tree until they are loaded because they affect the visual result. However the DOM tree is beein built.
- 14:30 “Flash of unstyled content”: scripts access layouting information before CSS is loaded.
- 15:30 CSS selectors – explanation on how they work and what you can do with them, how they map on the DOM tree. Matching is complicated and slow on deep documents
By paratirisis on Nov 7, 2009
- 09:45 Complexity …
– 09:45 Complexity of parsing a document is not linear because it is done incrementally. For instance, elements with many nodes end up with n^2 complexity. Reason: layouting is applied on the “whole”, thus by adding incrementally parts to it the layouting is redone allways on the “whole”.
- 11:56 Scripts block rendering until they are loaded because they are supposed to be inlined to the document right at the point they are loaded in.
By paratirisis on Nov 7, 2009
- The browser’s …
– The browser’s internal representation of the HTML document looks similar to the one exported by the DOM
- 07:40 There is a “rendering tree” (or “frame tree”) which represents the rendering areas of the document. It consists of rectangular areas.
There is not a 1:1 representation of DOM nodes to nodes in the rendering tree.
By paratirisis on Nov 7, 2009
At my first take I …
At my first take I thought of David Baron’s presentation style as pretty dry, but after watching it again it’s pretty OK. Since the content is very interesting, here’s a wrapup (split because of the 500 characters limit)
By xXxBlender3DxXx on Nov 7, 2009
Then why did you …
Then why did you click on it?
By franziep on Nov 7, 2009
look at the title– …
look at the title—- its for web developers not beginners if yu struggle with HTML go to w3schools free tutorials good luck with that
By Tenatiouz on Nov 7, 2009
all chinese to me, …
all chinese to me, I just wanted to know how to Layout my HTML code so it doesn’t look like a huge mess
By F00dTube on Nov 7, 2009
hrvatwrestle: But …
hrvatwrestle: But that is not what I see when I look at this guy. Obviously he takes his time and seems comfortable, but I see someone that really likes to tell something about his own expertise. He doesn’t complicate things at all, on contrary he paraphrases constantly and spends a lot of time on each point.
By elbombardi on Nov 7, 2009
Take it easy man, …
Take it easy man, you made the presentation so BOOOORING !!!!!
By zachleat on Nov 7, 2009
Huh? This is a …
Huh? This is a tech talk! Interesting content is interesting on its own. This is a fascinating look at browser internals.
I think you’re being much too harsh on this guy.
Love the guy clapping when he talked about scripts not blocking! Hilarious.
By athox on Nov 7, 2009
He’s not a …
He’s not a presentation expert, but then again, that’s not his job. He was just asked to present the CSS way of mozilla, which IS his job.
By 2ndLeterOfTeAlphabet on Nov 7, 2009
visit htmlhelp2. …
visit htmlhelp2.blogspot. com
By shreeksn on Nov 7, 2009
some people may not …
some people may not be able to present their knowledge well. That’s no reason to criticize them.
By hrvatwrestle on Nov 7, 2009
its the know it all …
its the know it all syndrome. complicates and wants you to not understand him. so that he seems like a genius, but he doesnt want to explain properly, so that we can all know what hes talking about.
he should thro in some ticks as well, then wed all be thinking… oh he has a different brain, with some short circuits and different wiring, thats why hes a genius.
ive seen this before. many times.