How browser engines work?

HOW BROWSER ENGINES WORK?

Anthony Ricaud, @rik24d

PARDON MY FRENCH

http://www.flickr.com/photos/nitot/6537065859/



PARDON MY FRENCH

- http://www.paris-web.fr/2011/conferences/un-navigateur-comment-ca-marche.php

http://www.paris-web.fr/2011/conferences/un-navigateur-comment-ca-marche.php




THIS IS ONLY AN INTRODUCTION

WHO ?

- Web developer at Mozilla but

- 2 patches in Firefox

- 23 in WebKit

STANDING ON THE SHOULDERS OF GIANTS

- Robert O’Callahan, Boris Zbarsky, David Baron (Mozilla)

- Dave Hyatt, Simon Fraser (Apple)

- Paul Irish, Alex Russell, Tony Gentilcore, (Google)

- Anne Van Kersteren (Opera)

- Nicholas Zakas (ex-Yahoo), Eric Law (Microsoft)

STANDING ON THE SHOULDERS OF GIANTS

- List of documents to prepare this talk

- http://ricaud.me/nav-marche

http://ricaud.me/nav-marche


CHROME

CONTENT

IT’S COMPLEX

IT’S COMPLEX

URL parser

Cache system

Network stackCookies

Databases

Painting

JS Engine

DOM Bindings

Accessibility stack

Font rendering

Image decoding Downloading

PluginsNative themesScrolling

PRESTO TRIDENTGECKO WEBKIT

NEW REQUEST

- Parse the URL : protocol, domain

- DNS requestwww.mozilla.org -> 63.245.208.161

- Open TCP connection, send HTTP request

SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xml

SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xml

XML MODE

SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html

<html>


<html>

QUIRKS MODE


<html><!doctype html><html>

STANDARDS MODE

HTML5, HTML4, XHTML1.0, CSS3, ECMASCRIPT 5

HTML5, HTML4, XHTML1.0, CSS3, ECMASCRIPT 5

THEY DON’T CARE

<!doctype html><html> <head> <title>KISS</title> </head> <body> <div> <h1>BISOUS</h1> <p>Bonnes Idées Simples Ou Ultra Sensées.</p> </div> </body></html>

HTML

HEAD BODY

TITLE DIV

H1 PKISS

BISOUSBONNES IDÉES

SIMPLES OU ULTRA SENSÉES.

HTML

HEAD BODY

TITLE DIV

H1 PKISS

BISOUSBONNES IDÉES


DOM TREE

HTML

HEAD BODY

TITLE DIV

H1 PKISS

BISOUSBONNES IDÉES


SUB-RESOURCES

SUB-RESOURCES- Image

SUB-RESOURCES- Image- Launch a download, non-blocking

SUB-RESOURCES- Image- Launch a download, non-blocking- Runs an image decoder


- CSS


- CSS- Launch a download, non-blocking


- CSS- Launch a download, non-blocking- Then it gets interesting…

CSS BUCKETS

ID OTHERSTAGNAMECLASS

CSS BUCKETS


div

CSS BUCKETS


div

.item

CSS BUCKETS


div.item

CSS BUCKETS


div.item

#sidebar

CSS BUCKETS


div.item#sidebar

CSS BUCKETS


div.item#sidebar

div#sidebar

CSS BUCKETS


div.item#sidebar

div#sidebar

div p

CSS BUCKETS


div.item#sidebar

div#sidebar div p

CSS BUCKETS


div.item#sidebar

div#sidebar div p

:visited

DOM TREE + PARSING CSS

HTMLDOM Tree

CSSStyle Rules

CSS MATCHINGBODY

DIV

P

DIVid="sidebar"

PP

DIVclass="item"

DIVclass="item"

DIVclass="item"

div.item#sidebardiv#sidebardiv pul pul > pbody > div p#sidebar p

RENDER TREEHTML

HEAD BODY

TITLE DIV

H1 PKISS

BISOUS BONNES IDÉES SIMPLES OU

RENDER TREEHTML

HEAD BODY

TITLE DIV

H1 PKISS

BISOUS BONNES IDÉES SIMPLES OU

Viewport

Block

Block

Scroll

Block

Block Block

TextText

DOM TREE + RENDER TREE

HTMLDOM Tree

CSSStyle Rules

Render Tree

A REFLOW OR LAYOUT

HTMLDOM Tree

CSSStyle Rules

Render Tree Layout

AND PAINTING

HTMLDOM Tree

CSSStyle Rules

Render Tree Layout Painting

PAINT ?

PAINT ?

- Used to be the CPU drawing everything

PAINT ?


- We’re giving more and more stuff to the GPU

PAINT ?


- We’re giving more and more stuff to the GPU

- Hardware acceleration



- JS- Launch a download, almost blocking

JAVASCRIPT

- JS and DOM are different

- DOM = slow

- Be careful about triggering unnecessary reflows

HTMLDOM Tree

CSSStyle Rules

Render Tree Layout

POTENTIAL REFLOW

HTMLDOM Tree

CSSStyle Rules

Render Tree Layout Painting

NEW JAVASCRIPT ENGINES


- Storing info about the code to compute it only once


- Storing info about the code to compute it only once

- Watch David Mandelin

http://blog.mozilla.com/dmandelin/2011/06/16/know-your-engines-at-oreilly-velocity-2011/

http://blog.mozilla.com/dmandelin/2011/06/16/know-your-engines-at-oreilly-velocity-2011/


- @rik24d

- [email protected]

- Merci Mauriz



http://svay.com

http://svay.com

QUESTIONS ?


- @rik24d

- [email protected]

- Merci Mauriz



http://svay.com

http://svay.com

How browser engines work?

Technology

Transcript of How browser engines work?