Nas entranhas do WebKit e do V8 - The Developers Conference 2013 SP - TDC2013

NAS ENTRANHAS
DO
WEBKIT E DO V8
ZAEDY SAYÃO @zaedysayao

Zaedy Dantas Sayão
@zaedysayao
@javamanrj
@javamanrj
@WORKS
http://about.me/zaedy

USER INTERFACE
BROWSER ENGINE
RENDER ENGINE
NETWORK
I/O
JAVASCRIPT
ENGINE
GRAPHICS
STACK

USER INTERFACE
BROWSER ENGINE
RENDER ENGINE
NETWORK
I/O
JAVASCRIPT
ENGINE
GRAPHICS
STACK
W
EBKIT

C
Ó
D
I
G
O
PAINT
HTML
CSS
JS
SVG

C
Ó
D
I
G
O
PAINT
HTML
CSS
JS
SVG
LAYOUT

APPLE
GOOGLE
NOKIA
BLACKBERRY
IGALIA (GNOME)

svn checkout https://svn.webkit.org/repository/webkit/trunk
git clone git://git.webkit.org/WebKit.git

1.2GB

1.2GB
80% TESTES

WebKitTools/Scripts/build-webkit
--qt for Qt,
--gtk for Gtk+
--debug for “Debug” mode

WebKitTools/Scripts/run-launcher
--qt for Qt,
--gtk for Gtk+
--debug for “Debug” mode

APPLE
PORT DO
COREFOUNDATION
PARA O WINDOWS

WEBKIT
NIGHTLY
MAC PORT -> SAFARI

<input type=”number”/>
WEBKIT

<input type=”number” />
WebKit
ursday, November 3, 2011
WEBKIT

WebKit
PINTA
PARA MIM
WEBKIT

WebKit
PINTA
PARA MIM
WEBKIT
PORT

WebKit
PINTA
PARA MIM
input type=”number” />WEBKIT
PORT

WebKit
PINTA
PARA MIM
input type=”number” />
EU SEI FAZER!
WEBKIT
PORT

WebKit
WEBKIT
123

WebKit
WEBKIT
123
AQUI

PORT
123

PORT
123
BLZ!

RESPONSABILIDADE
É DO PORT
(COREGRAPHICS)

NETWORK
INTERFACE
NADA DE HTTP, SSL...
MAS TEM CHAMADAS PARA
ENVIO DE DADOS

IMPLEMENTAÇÃO
LIB DO SISTEMA

ﬁllRoundedRect()
BOTÃO
QUADRADO

SE WEBKIT
->
MENOS UM
BROWSER PARA
TESTAR
#1

NOVA FEATURE
->
DISPONÍVEL EM
TODO PORT
#2

WEBCORE
CSS, HTML, DOM,
RENDER

LOADING
PARSING
LAYOUT
PAINT
HTML EDITING
JS BINDINGS

WEBKIT
WEBCORE
WEBCORE/LOADER
WEBCORE/PLATFORM/NETWORK
FRAMELOADERCLIENT

LOADING A
FRAME
CLASSE FRAMELOADER

1)POLICY STAGE
BLOCK POP-UP
CROSS-PROCESS NAVIGATION

2)PROVISIONAL
STAGE
DOWNLOAD OU COMMIT
EX: LINK

3)COMMITED
STAGE
START PARSING

DOCLOADER
PEGA UMA URL
VERIFICA NO CACHE OU
LOADER
RETORNA UM
CACHEDRESOURCE

CACHEDRESOURCE
RESPONDE CALLBACK
PRODUZ UM OBJETO
(IMAGEM, FONTE...)

HTML x XML
HTMLTOKENIZER E HTMLPARSER
XMLTOKENIZER
OUTRAS TASKS:
PRE-LOAD SCANNING
(CARREGAMENTO DE CSS ANTES
DO PARSE)

DOM TREE
RENDEROBJECT TREE
RENDERSTYLE TREE
RENDERLAYER TREE
LINEBOX TREE

LOADING -> SOURCE
PARSING -> DOM TREE
attach() -> RENDEROBJECT TREE
STYLE RESOLUTION -> RENDERSTYLE
TREE
LAYOUT -> RENDERLAYER TREE
LINEBOX TREE

DOM TREE
<html>
<head>
<title>
foo
</title>
<head>
HTMLDocument
HTMLHTMLElement
HTMLHeadElement
HTMLTitleElement
Text(“foo”)

RENDER TREE
LAYOUT
PAINTING
HIT TESTING

RENDER TREE
RENDEROBJECTS
RENDERSTYLE
RENDERLAYERS
INLINEBOXES

RENDEROBJECT
class RenderObject {
virtual void layout() = 0;
virtual void paint(PaintInfo) = 0;
virtual IntRect repaintRect() = 0;
Node* node();
RenderStyle* style() const;
RenderLayer* containingLayer();
.....
}

RENDEROBJECT
RenderBlock(<div>, <p>)
RenderInline(<span>, <b>, <i>)
RenderImage(<image>)
RenderText(#text)
RenderTableCell (<td>)

OBJETOS DA
ENGINE JSString
Array
Number
Prototypes
.__proto__
.callee
__deﬁneGetter__
.toString()

SPIDER MONKEY
JAVASCRIPTCORE (JSC, NITRO)
V8

TOKENIZE
var answer = 42;
keyword

TOKENIZE
var answer = 42;
keyword identiﬁer

TOKENIZE
var answer = 42;
keyword identiﬁer
sinal igual

TOKENIZE
var answer = 42;
keyword identiﬁer
sinal igual
número

TOKENIZE
var answer = 42;
keyword identiﬁer
sinal igual
número
ponto e
vírgula

instanceof - instanceComponent
#1
PERGUNTA 1

A G H J K L M O P Q XY Z
#2
PERGUNTA 2

SouceElement :: (Statement)*
FunctionDeclaration ::
‘function’ Identiﬁer ‘(‘FormalParameters’)’

‘{‘FunctionBody’}’

IDENTIFIER LITERAL
CONSTANT
VARIABLE
DECLARATION
answer 42

CONSEQUÊNCIA
ALTERNATIVA
BRANCH
VELHO
NOVO
CONDIÇÃO
idade > 60

CODE TRACE
(EVAL)
SCRIPT :: COMPILE
SCRIPT :: NEW
INTERNAL :: COMPILER :: COMPILE
INTERNAL :: MAKEFUNCIONINFO
INTERNAL :: PARSEAPI :: PARSE

var answer = 42;
Declare um objeto local
Chame esse objeto de “answer”
Crie um número 42
De “assign” do número ao objeto

BYTECODE
SERIALIZA EM UMA
LISTA DE “AÇÕES”

COMPILA O
BYTECODE
PARA ASSEMBLY
JIT (=JUST-IN-TIME) COMPILE

shell --print-code
shell --expose-debug-as deb

shell --print-code
shell --expose-debug-as deb
deb.Debug.disassemble(f)

foobar = function(x, y, z)
{
...
}
foobar(x, y, z);

{
...
}
foobar(x, y, z);
Analiza sintaxe
Guarda posição da função

{
...
}
foobar(x, y, z);
Analiza sintaxe
Compila e roda

{
...
}
foobar(x, y, z);
Analiza sintaxe
foobar = function(x, y, z, run)
{
...
}
foobar(x, y, z, false);
Compila e roda

{
...
}
foobar(x, y, z);
Analiza sintaxe
foobar = function(x, y, z, run)
{
...
}
foobar(x, y, z, false);
HACK
Compila e roda

Date.now()
código
nativo
código
JavaScript

C++
Primitive
Date
Object
Array
Function
External

Handle<FunctionTemplate> systemObject = FunctionTemplate::New();
systemObject->Set(String::New(“exit”)),
FunctionTemplate::New(system_exit)->GetFunction());
static Handle<value> system_exit(const Arguments& args)
{
int status = args[0]->Int32Value();
::exit(status);
return Undefined();
}
EXPONDO
FUNÇÃO

JSLINT
JSBEAUTIFY
YUI COMPRESSOR

Nas entranhas do WebKit e do V8 - The Developers Conference 2013 SP - TDC2013

Recommended

Recommended

More Related Content

Similar to Nas entranhas do WebKit e do V8 - The Developers Conference 2013 SP - TDC2013

Similar to Nas entranhas do WebKit e do V8 - The Developers Conference 2013 SP - TDC2013 (20)

More from javamanrj

More from javamanrj (8)

Recently uploaded

Recently uploaded (20)

Nas entranhas do WebKit e do V8 - The Developers Conference 2013 SP - TDC2013