Scribd
Upload
42 views2 pages

6 Browser Rendering

The document discusses the process of rendering HTML elements and building various contexts in a browser, including the DOM tree, RenderObject tree, and stacking contexts. It explains how different CSS properties, such as display flex and position absolute, affect the rendering process and the creation of formatting contexts. The speaker concludes by emphasizing the complexity of rendering and the interconnectedness of different layers and contexts in web development.

Uploaded by

kocherlasri876
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
42 views2 pages

6 Browser Rendering

The document discusses the process of rendering HTML elements and building various contexts in a browser, including the DOM tree, RenderObject tree, and stacking contexts. It explains how different CSS properties, such as display flex and position absolute, affect the rendering process and the creation of formatting contexts. The speaker concludes by emphasizing the complexity of rendering and the interconnectedness of different layers and contexts in web development.

Uploaded by

kocherlasri876
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

[00:00:00]

>> Evgenii Ray: So now let's become browser, part two. So now we are slightly
complicate the exercise. We are going to build all the formatting context. Also we
are gonna detect all the elements outside of normal flow. And we're also going to
build stacking context DOM, RenderObject tree, RenderLayer tree and the
GraphicLayer trees.

[00:00:20]
So we can see how everything works together. The HTML is pretty simple and we're
gonna render it line by line. So let's start with the step one. So we render the
HTML element. So when we render HTML element so the DOM tree is updated. So we
added this element to the tree, also the RenderObject is created.

[00:00:45]
Because we create 100 objects for every DOM element, then the root GraphicLayer is
initiated. And the root RenderLayer is initiated. And we start with a default
stacking context and default blocks formatting context because we use the root
element. So let's continue and render the body. When to render the body, the DOM
tree is updated.

[00:01:07]
The RenderObject tree is updated, but rest is untouched.
>> Evgenii Ray: So next we render the section tag with a few flex items. So we
updated our DOM tree. And we updated our RenderObject tree. Now, no position
absolute apply to our any CSS transformation, we keep our single RenderLayer and we
also keep our single GraphicLayer.

[00:01:33]
But now we need to update our formatting context tree. So since the display flex is
assigned, we're creating a new flex formatting context. And one thing interesting
is usually the div doesn't create the block formatting context. But because now
it's a flex item and we are within different formatting context, this means that
this instructs the browser that now the div element should initiate the block
formatting context.

[00:02:00]
So we get to two more contexts here. Okay, now let's render the absolutely position
item with a span with some text. So we updated the DOM tree. We added two more
rendering objects, and since the element has the position absolute assign to that,
so we update our render layer tree.

[00:02:24]
And now we have two layers. So the next thing that we do is because the span or
sorry, actually because we have the position absolute assign, we also move out the
element from the default stacking context. So now we have a separate realm where we
put all our elements.

[00:02:44]
So we create a new stacking context. And within this stacking context, we created a
new default block formatting context and initiated the inline formatting context.
Yeah, I hope it's clear. [LAUGH] So now we are rendering the new div element and
since this div element has the display inline block assigned, so this means we need
to update the DOM tree, we also update the RenderObject tree.

[00:03:14]
GraphicLayer is untouched, RenderLayer tree is also untouched because we don't play
with the staking context here. And now we're updating our root stacking context and
creating a new block formatting context because the display inline block is
assigned, okay? Let's render the last one. So here, we assigned the absolute
positioning, but we also assigned the 3D transformation.

[00:03:39]
So this means that we need to update the DOM tree. We also update the RenderObject
tree. Then we create a new RenderLayer. But the difference is, this RenderLayer
will be assigned to the different GraphicLayer. So because we initiated a 3D
transformation. So we promoted this layer to the new GraphicLayer.

[00:04:00]
And we also initiated a new stacking context, where we placed the new formatting
context initiated by the div tag.
>> Speaker 2: So the stacking context that we end up with at the end, if you were
actually to view this in a browser, basically you'd have the root context. And then
the stacking context one would be right on top of that, and the stacking context
two.

[00:04:19]

>> Evgenii Ray: Yeah, it will be on top of the next one.


>> Speaker 2: Perfect, that was all I wanted to clarify, thank you.
>> Evgenii Ray: And we're done. So we initially started with the very simple
concepts, just some box model margins and bottings. When we overused what are the
painting layers and how they work together, and now we can call ourselves Jedai of
reflow.

You might also like