Faster HTML and CSS: Layout Engine Internals for Web Developers

[aglehg]

if Bill Gates and Hawking had a kid, it would be this guy. Great talk tough.

[Blinkwing]

he gives better presentations than mark zuckerberg gives interviews.

[Zebastoz]

Retards, why the hell do you care about his public speaking skills? Parels voor de zwijnen.

[fuckutube21]

This guy can't teach anything, I would rather prefer someone with less knowledge but with the ability to actually transmit it.

[kalulew]

He's just not well trained in public speaking. It comes with the fact that people who are of higher IQ tending to be shier than people who are more "average".

[pearl2k11]

faster ? just an hour lol

[Eldeeff]

Sounds like a mix between Bill Gates and Mark Zuckerberg.

[BrandonTsia]

@Eldeeff Or Gates and Leonard from the Big Bang Theory lol

[webmastertool]

@Eldeeff so it's basically like a mix between steve and monks?

[RWOverdijk]

poor poor guy, sounds like freakin scared. made me lol a couple of times.

[srikumarks]

Around 20m30s, he swaps the terms "child" and "descendant" consistently.

[naive505]

"uhm" like Dmitri Gaskin

[bannor99]

Good God, man! Rehearse your talks, please. You're uhhing and uhming us to death.

[TheMoneyLover1995]

wow how did u put 1h vid ?? Are u Guru on Youtube i mean whn i created my acc i put Guru too but i cant do more then 10 min

[surferJake]

Wow, that is awesomely helpful. Thanks David. 

[Naresh7080]

Very useful video. Thanks for sharing.

[ervisgr]

No disrespect but he sounds like stephen hawking.:P

Interesting lecture. Thanks Google.

[knight024]

He needs to better organize his lecture better, he was stubbing on his words for the entire video.

[lektionerteiler]

I would suggest 0.5 mg alprazolam to get cool like fonzie and a line of coke not to fall asleep from the first substance. That should streamline the process of serialization of his tree of thoughts to a linear structure of sentences. ;-) Don't get me wrong, the speech is very interesting...

[SleeplessDad]

I think he is brillant, you d!cks would be a lot more nervous if you had to explain this to a crowd of people, it's so easy to make anonymous insults, losers.

[izvarzone]

When I not consider IE6, I use «parent > child» selector, because its much easier that making tons of classes.

[bloodjake12]

actually no, theres a video thats like 4 hours long

[mRTNpr0d]

there is a video which goes over 24 hours

[exnext]

nervous!!!!!!

[UTubeMatias]

1 hour cool

[tuleo554]

wow this guy is soooo nervous!

[tunkara]

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

[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

[paratirisis]

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

[paratirisis]

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

[paratirisis]

- 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

[paratirisis]

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

[paratirisis]

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

[paratirisis]

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)

[Tenatiouz]

all chinese to me, I just wanted to know how to Layout my HTML code so it doesn't look like a huge mess :)

[franziep]

look at the title---- its for web developers not beginners if yu struggle with HTML go to w3schools free tutorials good luck with that

[F00dTube]

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.

[elbombardi]

Take it easy man, you made the presentation so BOOOORING !!!!!

[xXxBlender3DxXx]

Then why did you click on it?

[zachleat]

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.

[athox]

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.

[2ndLeterOfTeAlphabet]

visit htmlhelp2.blogspot. com

[shreeksn]

some people may not be able to present their knowledge well. That's no reason to criticize them.

[The1NdNly]

at one point i thault he was going to cry.. nice content thou

[xtinctspecies]

speakers that use "um um so sort of" a lot are not interesting..content was pretty good though

[Resalecode]

WOW - LOL Alittle to much information, could have been explained better and a Clearer Speaker Sorry!

[marketa149]

Are there the slides online anywhere?

[jjhnet]

He does have some difficulty presenting the data for sure.

[sajjen1]

Content is interesting, but that guy is no good at giving talks. He doesn't belong on a stage.