Do not mess with trees while living in the forest

Saving you 40 minutes

  1. Process HTML markup and build the DOM tree.
  2. Process CSS markup and build the CSSOM tree.
  3. Combine the DOM and CSSOM into a render tree.
  4. Run layout on the render tree to compute geometry of each node.
  5. Paint the individual nodes to the screen.

Then you see your page. Thanks for attention.

What is a problem?

I use [React/Angular/Vue/dead rabbit leg]. I don't do DOM.

When DOM tree is growing

Sample markup

<body>
  <header>
    <img src="" alt="" id="logo">
  </header>
  <main>
    <h1>Sample</h1>
    <p>Hello, world</p>
  </main>
  <footer></footer>
</body>

DOM scheme how we know it

DOM scheme how it really is

What is DOM? (baby don't hurt me...)

  • Built from HTML markup;
  • Consists of nodes
  • Provides API to access and manipulate nodes;
  • There are 7 nodes types now;
  • Each nodes represents certain part of document;

7 types

Node.ELEMENT_NODE 1 An Element node such as <p> or <div>
Node.TEXT_NODE 3 The actual Text of Element or Attr.
Node.PROCESSING_INSTRUCTION_NODE 7 A ProcessingInstruction of an XML document such as <?xml-stylesheet ... ?> declaration.
Node.COMMENT_NODE 8 A Comment node.
Node.DOCUMENT_NODE 9 A Document node.
Node.DOCUMENT_TYPE_NODE 10 A DocumentType node e.g. <!DOCTYPE html> for HTML5 documents.
Node.DOCUMENT_FRAGMENT_NODE 11 A DocumentFragment node.

Then wild CSSOM tree appears!

Sample CSS

body {
  font-size: 16px;
}
img {
  float: left;
}
p {
  font-weight: bold;
}
p img {
  border: lime 4px solid;
}

CSSOM structure

CSSOM in nutshell

  • CSSOM building starts with built-in styles;
  • Has tree structure but is based on CSS only;
  • Rebuilt each time new CSS portion appears on page;

Render tree

Creating Render-tree

  • Combined with DOM and CSSOM;
  • Consists of renderer objects;
  • Each renderer has reference to DOM object and corresponding set of CSS rules;
  • Is base for layout calculation;
  • Contains only elements visible and present on page;

Keep your trees together!

Creating layout

  • Part of rendering process when all dimensions, positions and elements relations are calculated. Also is known as reflow;
  • Flow model is used which allow browser to process most elements at once pass;
  • Except tables. Tables are special snowflakes. They need more than one pass;
  • Flow model means that changes in element causes consequences for element down the flow;

Layout

All the pretty colors

Paint

  • Browsers are trying to split image to layers to make viewport update easier;
  • With no other circumstances layers are created by z-index;
  • There is a step of layer composition;
  • Browsers are trying to optimize GPU tasks and send as few updates as possible;

Fine. Can we go?

NO

(servant passes thgrough hall and stands before the king)

- We are out of inner resources, sir!

(king, looking on servant like Chrome looks on your RAM)

- Get some external then!

So, how external resources are loaded?

  • All scripts and styles are blocking by default;
  • Executing scripts is also blocking;
  • CSSOM building blocks scripts execution;
  • CSS fetch blocks render;
  • Sync JS fetch blocks both parsing and render;
  • Layout building is postponed till all included resources are loaded;
  • Some browsers can launch preload scanner to fetch resources while HTML parsing is blocked;

Blocking is baaaaad

[async] and [defer] attributes allow script to be fetched in non-blocking way;

Async

  • Fetched asyncronously, do not block HTML parsing;
  • Starts executing immediately after fetching;
  • Execution order depends only on fetch order, not include order;

using [async]

Defer

  • Fetched in same way as async;
  • Starts executing only after DOM is fully parsed and built;
  • Execution order is exactly the same as include order;

Using [defer]

{{scheme for defer loading with CSS in queue}}

Critical rendering path

Intermediate steps between receiving the HTML, CSS, and JavaScript bytes and the required processing to turn them into rendered pixels

Critical Resource

Resource that could block initial rendering of the page.

CSS or JS.

Critical Path Length

Number of roundtrips, or the total time required to fetch all of the critical resources.

Critical Bytes

Total number of bytes required to get to first render of the page, which is the sum of the transfer filesizes of all critical resources.

Script sync load

Script async load

Script defer load

Boosting rendering speed in page lifecycle

Boosting rendering speed in page lifecycle

  • Cache all possible references to DOM elements in your scripts;
  • Batch all DOM manipulations;
  • Use display:none or node cloning to modify node in DOM;
  • Do not modify DOM in cycles!
  • Reading length property of HTMLCollection object always causes reflow;

Boosting rendering speed in page lifecycle

  • Use CSS animations wherever is possible;
  • Use requestAnimationFrame for calculated animations;
  • Use will-change to avoid CSS critical performance issues;
  • Use DOM events delegation;
  • Debounce user interaction event handlers such as window resize;