DOM Udacity English English (auto-generated)

DOMYouTube↗ IA↗(long shot)
Education 1.6K views 13 likes 0 dislikes 05 Oct 2015

Udacity 651K subscribers United States YouTube↗

Click to Play Video

Okay, back to the rendering process of a single frame.

okay back to the rendering process of a single frame once the browser knows

Once the browser knows which rules apply to an element,

which rules apply to an element it can

it can begin calculate layout.

begin to calculate layout or in other

Or it, in other words, how much space elements take up and

words how much space elements take up

where they are on the screen.

and where they are on screen so here's

So, here's all the CSS that we want to apply.

all the CSS that we want to apply and

And layout turns this into a collection of boxes like this.

layout turns this into a collection of boxes like this in the tooling you'll

In the tooling, you'll see this as layout.

see this as layout the web's layout

The web's layout model means that one element can affect others.

model means that one element can affect

So, for example, the width of body

others so for example the width of body

typically affects the children's widths and so on, all the way down the tree.

typically affects the children's width and so on all the way down the tree so

So the process can be quite involved for the browser.

the process can be quite involved for

Sometimes, you may hear layout called reflow.

the browser sometimes you may hear

It's the same thing.

layout called reflow it's the same thing

The next step in the process is to talk about vector to raster.

the next step in the process is to talk about vector to raster for example the

For example, the boxes we had before were vectors like this, just shapes.

boxes we had before were vectors like this just shapes but now what we need to

But now what we need to do is fill in individual pixels, like this. And that's what a rasterizer is for.

do is fill in individual pixels like this and that's what a rasterizer is for

So, this is the layout we had before, and

so this is the layout we had before and

these are the draw calls that the rasterizer will make to fill it in.

these are the drawer calls that the rasterizer will make to fill it in when

When done, it will look like this.

done it'll look like this but that's a

But that's a little too quick, so let's step through and

little too quick so let's step through

see it build up the picture bit by bit.

and see it build up the picture bit by

So you can see, these rectangles start to appear, then some text.

bit so you can see these rectangles start to appear then some text then we get a

And we get a shadow, a white line, a picture, and finally it tightens up.

shadow a white line a picture and finally it type these up the tooling is

The tooling is going to show you this as paint.

going to show you this as paint you may

You may have noticed in that previous list that one of the calls was called

have noticed in that previous list that one of the calls was called drawbitmap

draw bitmap. What we normally do is we send things like JPEGs, or

what we normally do is we send things like JPEGs or pings or gifts down the

PNGs or GIFs down the wire to our page.

wire to our page but what the browser

But what the browser has to do is decode these into memory, like this.

has to do is decode these into memory like this in the tooling you'll see it

In the tooling, you'll see it as image decode.

as image decode potentially we're doing

Potentially, we're doing something like responsive web design.

something like responsive web design and

And so the image may also need resizing.

so the image may also need resizing

Painting, as you may have noticed just now, was done into a single surface.

painting as you may have noticed just now was done into a single surface

However, sometimes browsers make multiple surfaces called layers or

however sometimes browsers make multiple surfaces called layers or compositor

compositor layers and it can paint into those individually.

layers and it could paint into those

So here I have a site and this masthead has its own layer.

individually so here I have a and this masthead has its own layer that

That means we can paint the concept behind.

means we can paint the content behind

And we can paint the masthead itself.

and we can paint the masthead itself the

The process of handling these layers is shown in the tooling as

process of handling these layers is

composite layers.

shown in the tooling as composite layers

This masthead is a layer, but because we have buttons for

this must head is a layer but because we

next and previous on top of it they are also turned into layers as well.

have buttons for next and previous on top of it they are also turned into layers as well

In this course, we're going to talk about layer management

in this course we're going to talk about

to make sure that you don't create extra layers by accident.

layer management to make sure that you don't create extra layers by accident

Now, we can put all these layers back together.

now we can put all these layers back

And so now we've finished painting all the layers for our page.

together and so now we've finished painting all the layers for our page to

To be honest, painting actually happens into a grid of tiles like this.

be honest painting actually happens into a grid of tiles like this

I mentioned it for completeness, but

I mentioned it for completeness but it's

it's not something we get to control as developers.

not something we get to control as

All of this happened on the CPU.

developers all of this happened on the

The layers themselves and their tiles will be uploaded to the GPU.

CPU the layers themselves and their tiles will be uploaded to the GPU again

Again, this will be included in composite layers.

this will be included in composite

And lastly, the GPU will be instructed to put the pictures up on the screen. And that, in brief,

layers and lastly the GPU will be instructed to put the pictures up on screen and that in brief is how we get

is how we get from a single request all the way through to pixels on screen.

from a single request all the way through to pixels on screen

Similar videos:

Dom.
Krzysztof Gonciarz
219.5K views 13.6K likes 118 dislikes 29 Sep 2016100% match

dom-2
CS50
5.2K views 0 likes 0 dislikes 08 Nov 2013100% match

dom-0
CS50
5.9K views 0 likes 0 dislikes 07 Nov 2013100% match

RAIL - Animations Part 2 - App Lifecycles - Browser Rendering Optimization
Udacity
966 views 2 likes 0 dislikes 05 Oct 2015100% match

针对移动设备设置
 Udacity
20K views 39 likes 0 dislikes 15 Jul 2014100% match

Layout Thrashing - Styles and Layout - Browser Rendering Optimization
Udacity Videos
1.1K views 6 likes 0 dislikes 05 Oct 2015100% match

RAIL Response - App Lifecycles - Browser Rendering Optimization
Udacity Videos
1K views 2 likes 0 dislikes 05 Oct 2015100% match

RAIL Thresholds Review - App Lifecycles - Browser Rendering Optimization
Udacity
867 views 3 likes 0 dislikes 05 Oct 2015100% match

Layout and Paint - The Critical Rendering Path - Browser Rendering Optimization
Udacity
3.5K views 19 likes 0 dislikes 05 Oct 2015100% match

DOM
CS50
7.6K views 0 likes 0 dislikes 30 Oct 2012100% match

Lesson 1 Introduction
Udacity Videos
1.7K views 4 likes 0 dislikes 05 Oct 2015100% match

Juddering - The Critical Rendering Path - Browser Rendering Optimization
Udacity Videos
1.3K views 2 likes 0 dislikes 05 Oct 2015100% match

dom-1
CS50
4.7K views 0 likes 0 dislikes 08 Nov 2013100% match

Composite Layers - Compositing and Painting - Browser Rendering Optimization
Udacity
1.4K views 3 likes 0 dislikes 05 Oct 2015100% match

Compositing - Compositing and Painting - Browser Rendering Optimization
Udacity
1.6K views 9 likes 0 dislikes 05 Oct 2015100% match

Make Some Quizzes - Compositing and Painting - Browser Rendering Optimization
Udacity
820 views 2 likes 0 dislikes 05 Oct 2015100% match

DOM
CS50
2K views 0 likes 0 dislikes 25 Oct 2017100% match

requestAnimationFrame - JavaScript - Browser Rendering Optimization
Udacity Videos
1.8K views 13 likes 3 dislikes 05 Oct 2015100% match

在移动设备上使用开发者工具
 Udacity
16.2K views 39 likes 4 dislikes 15 Jul 2014100% match

Final Project - The Critical Rendering Path - Browser Rendering Optimization
Udacity
974 views 0 likes 1 dislikes 05 Oct 2015100% match

DOM
CS50
9.8K views 47 likes 1 dislikes 10 Nov 2015100% match

Managing Layers 2 - Compositing and Painting - Browser Rendering Optimization
Udacity Videos
815 views 6 likes 0 dislikes 05 Oct 2015100% match

Lesson 5 Outro - Styles and Layout - Browser Rendering Optimization
Udacity Videos
502 views 0 likes 0 dislikes 05 Oct 2015100% match

Frames - The Critical Rendering Path - Browser Rendering Optimization
Udacity Videos
1K views 3 likes 0 dislikes 05 Oct 2015100% match

Test… All the Devices!!! - Weapons of Jank Destruction - Browser Rendering Optimization
Udacity
1K views 4 likes 0 dislikes 05 Oct 2015100% match

What Goes Into One Frame - The Critical Rendering Path - Browser Rendering Optimization
Udacity Videos
2K views 7 likes 0 dislikes 05 Oct 2015100% match

Lesson 2 Introduction - App Lifecycles - Browser Rendering Optimization
Udacity Videos
884 views 2 likes 0 dislikes 05 Oct 2015100% match

Mobile tools for iOS
Udacity
12K views 7 likes 0 dislikes 23 Feb 2015100% match

Just in Time - JavaScript - Browser Rendering Optimization
Udacity Videos
1.6K views 14 likes 0 dislikes 05 Oct 2015100% match

Course Introduction - The Critical Rendering Path - Browser Rendering Optimization
Udacity
4.2K views 15 likes 0 dislikes 05 Oct 2015100% match

Settings Privacy About Contact Donate