Respecting USER

by understanding Browsers

May 2016

TehranJS

Seyed Naser Hassani

Freelance Frontend Developer

naser.xyz

How Browsers Work?

The browsers we will talk about

Chrome, Internet Explorer, Firefox, Safari and Opera

Open Source

engine

Chrome, Opera (blink)

Firefox (gecko)

Safari (webkit)

“present the web resource you choose, by requesting it from the server and displaying it in the browser window."

The browser's main functionality

The browser's high level structure

The rendering engiene

The responsibility of the rendering engine is well... Rendering, that is display of the requested contents on the browser screen.

Rendering engines (Different browsers use different rendering engines):

  • Internet Explorer -> Trident

  • Firefox -> Gecko

  • Safari -> WebKit

  • Chrome, Opera (from version 15) -> Blink (a fork of WebKit)

Webkit Main Render Flow

HTTP://www.google.com

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

The Main Flow (HTML Text to DOM)

Parsing HTML to construct the DOM tree

Tokenize the response

Parse HTML

Build DOM tree

HTML Parsing Flow

HTML Parsing Flow

HTML to DOM

<html>
  <body>
    <p>
      Hello World
    </p>
    <div><img src="example.png"/></div>
  </body>
</html>

The Main Flow (Render Tree)

Parsing HTML to construct the DOM tree

Render tree construction

Tokenize the response

Parse HTML

Build DOM tree

Parsing CSS

CCSOM (CSS Object Model)

RENDER TREE

+

DOM TREE

NOT PART OF RENDER TREE​

ONLY VISUAL ELEMENTS ARE IN THE RENDER TREE

HEAD 

DISPLAY:NONE 

POSITION:ABSOLUTE

POSITION:RELATIVE

RESOLVE STYLES (CSS Specificity)

User Styles

Inline Styles

Browser Styles

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

The render tree relation to the DOM tree

Render Tree

The Main Flow (Layout)

Parsing HTML to construct the DOM tree

Render tree construction

Layout of the render tree

CALCULATE THE POSITION - SIZE

The Main Flow

Parsing HTML to construct the DOM tree

Render tree construction

Layout of the render tree

Painting the render tree

Critical Javascript Path

Making Frames.

1000ms / 60 fps = 16ms ~ 10 - 12ms

Micro Optimizations.

Javascript Compiler

Just In Time

is compilation done during execution of a program – at run time – rather than prior to execution.

array length caching in for loops

for (var i = 0; i < arr.length; i++) {	
    // do stuff	
}
for (var i = 0; len = arr.length; i < len; i++){	
    // do stuff	
}

VS

V8 (and other browsers)
recognize this pattern

http://mrale.ph/irhydra/2/#demo-3​

cacheless Version

cached Version

if you can trivially optimize
it, the browser (probably)
can too!

badly-timed scripts.

function animation() {
    // Do something super rad here.
    requestAnimationFrame(animation);
}

requestAnimationFrame(animation);

long- running scripts.

var dataSortWorker =
    new Worker('sort-worker.js');

dataSortWorker.postMessage(dataToSort);

// The main thread is now free to
// continue working on other things...

dataSortWorker.addEventListener( 'message',
    function(evt) {
        var sortData = evt.data;
        // Update data on screen in a rAF...
    });
var taskList = breakTaskDown(monsterTaskList);
requestAnimationFrame(processTaskList);

function processTaskList(taskStartTime){
    var taskFinishTime;
    do {
        var nextTask = taskList.pop();
        processTask(nextTask);
        
        // Go again if there's enough time...
        taskFinishTime = window.preformance.now();    
    } while (taskFinishTime - taskStartTime < 3);

    if (taskList.lenght > 0)
        requestAnimationFrame(processTaskList);
}

"But worker don't have DOM access."

large scripts.

2,219KB

The average weight of a web page

images

js

video

font

css

80.5 %

1,421 KB

368 KB

177 KB

116 KB

74 KB

52 KB

Current JavaScript delivery techniques focus on delivering a single package 

This means on average websites are downloading 368kb of JavaScript before any can be executed

If the JavaScript hasn’t
loaded, the user can’t interact
with things on the page that
depend upon it

Is there a maximum amount of JavaScript I should use?

As we are building a responsive site, today’s example will aim to start rendering in 5 seconds on a slow 3G connection

WebPageTest defines this as 96 kilobytes per second

To start with we need to define ‘slow 3G’

96KB x 5secs = 480KB

So as we want to load our site in 5 seconds...

We can then split 480KB across our assets

HTML CSS JS Images Fonts
30KB 40KB 50KB 300KB 60KB

blocked scripts.

<link type="text/stylesheet" href="/main.css"/>




<script>
 window.getComputedStyle(document.body).margin;
</script>

CSSOM + inline script

can’t execute until CSS ready

<link type="text/stylesheet" href="/main.css"/>

<script>
 var script = document.createElement('script');
 script.src = '/app.js';
 document.getElementsByTagName('head')[0]
    .appendChild(script);
</script>

CSSOM + dynamic script insertion

can’t execute until CSS ready

dynamic script insertion

blocking

<link type="text/stylesheet" href="/main.css"/>

<script async src="/app.js"></script>

3rd option: async attribute

ideal: async attribute

we should probably start using async

console.thanks('THE END');

QUESTION?

How Browsers Work

By Naser Hassani

Made with Slides.com

How Browsers Work

How Browsers Work: Behind the scenes of modern web browsers

  • 1,235

More from Naser Hassani