How Browser Works


Codepen Meetup, Hyderabad



September, 2015

Me!


@arvindr21


Author: Learning Ionic

Blog: The Jackal of Javascript

Browsers?

Heads Up


Compiling what I learnt so far.

Written by a lot of awesome people.

only Sharing the knowledge.

http://www.google.com


  • Resolve DNS
  • Request Page
  • Tokenize the response
  • Parse HTML
  • Build DOM tree
  • Build Render tree
  • Layout the Render tree
  • Painting

DNS Lookup

Request a Page

Parse, Render, Layout & Paint

Turn HTML text

to

Document Object Model

<html>
  <body>
    

Hello World

<img src="example.png"/>
</body> </html>


DOM Tree + CSS == Render Tree


CSS Box Model

Only visual elements are in the render tree


Not part of render tree

Head
display:none
position:absolute
position:relative

switch (style.get().display()) {
    case NONE:
        style.dropRef();
        return nullptr;
    case INLINE:
        return createRenderer<RenderInline>(element, WTF::move(style));
    case BLOCK:
    case INLINE_BLOCK:
    case COMPACT:
        return createRenderer<RenderBlockFlow>(element, WTF::move(style));
    case LIST_ITEM:
        return createRenderer<RenderListItem>(element, WTF::move(style));
    case TABLE:
    case INLINE_TABLE:
        return createRenderer<RenderTable>(element, WTF::move(style));

Source

Resolve Styles - CSS Specificity


  1. User Styles
  2. Inline Styles
  3. Browser Styles

Calculate the position - Size

Why this is important?

Element

clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth

Frame, Image

height, width

Window

getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode()

TRIGGER HW ACCEL

translateZ(0) or translate3d(0,0,0)

Animate with Top/Left


VS.

Animate with Translate

Finally


Understand and Love Browsers

Resources

Questions?


Thanks!