NAS ENTRANHAS DO

WEBKIT E DO V8ZAEDY SAYÃO @zaedysayao

Zaedy Dantas Sayão@zaedysayao@javamanrj@javamanrj

@WORKS

http://about.me/zaedy

BÁSICO

CONCEITO

O QUE É?

BROWSER

X

USER INTERFACE

BROWSER ENGINE

RENDER ENGINE

NETWORK I/O

JAVASCRIPTENGINE

GRAPHICS STACK

USER INTERFACE

BROWSER ENGINE

RENDER ENGINE

NETWORK I/O

JAVASCRIPTENGINE

GRAPHICS STACK

WEBKIT

WEBKITNÃO É UM BROWSER

WEBKIT

⊑

BROWSERENGINE

RENDERENGINE

ENGINE?

CONJUNTO DE LIBS

CÓDIGO

FAZ O QUE?

CÓDIGO

CÓDIGO

CÓDIGO

CÓDIGO

CÓDIGO

42

CÓDIGO

CÓDIGO

HTMLCSSJS

SVG

CÓDIGO

PAINT

HTMLCSSJS

SVG

CÓDIGO

PAINT

HTMLCSSJS

SVG

LAYOUT

PAST

HISTÓRIA

2001

KHTML

2005

CONTRIBUTOR

CONTRIBUTOR

CONTRIBUTOR

COMMITER

CONTRIBUTOR

COMMITER

CONTRIBUTOR

COMMITER

REVIEWER

APPLE ENVIA

CONTA SVN

ONDE RODA?

EVERYWHERE

APPLEGOOGLENOKIA

BLACKBERRYIGALIA (GNOME)

GETTING CODE

svn checkout https://svn.webkit.org/repository/webkit/trunk

git clone git://git.webkit.org/WebKit.git

svn checkout https://svn.webkit.org/repository/webkit/trunk

git clone git://git.webkit.org/WebKit.git

1.2GB

svn checkout https://svn.webkit.org/repository/webkit/trunk

git clone git://git.webkit.org/WebKit.git

1.2GB

80% TESTES

BUILD

WebKitTools/Scripts/build-webkit

--qt for Qt, --gtk for Gtk+ --debug for “Debug” mode

RUN

WebKitTools/Scripts/run-launcher

--qt for Qt, --gtk for Gtk+ --debug for “Debug” mode

PORTS

SAFARIIOS ≠WINDOWS

APPLEPORT DO

COREFOUNDATION PARA O WINDOWS

CHROMECHROMIUM

ANDROID

QTWEBKIT

WEBKITGTK+

WEBKIT NIGHTLY

MAC PORT -> SAFARI

PORTS

INTERFACE

IMPLEMENTAÇÃO

<input type=”number”/>

<input type=”number”/>WEBKIT

<input type=”number” />

WebKit

Thursday, November 3, 2011

<input type=”number”/>WEBKIT

<input type=”number” />

WebKit

Thursday, November 3, 2011

<input type=”number”/>

PINTA PARA MIM

WEBKIT

<input type=”number” />

WebKit

Thursday, November 3, 2011

<input type=”number”/>

PINTA PARA MIM

WEBKIT

PORT

<input type=”number” />

WebKit

Thursday, November 3, 2011

<input type=”number”/>

PINTA PARA MIM

<input type=”number” />

Port

Thursday, November 3, 2011

WEBKIT

PORT

<input type=”number” />

WebKit

Thursday, November 3, 2011

<input type=”number”/>

PINTA PARA MIM

<input type=”number” />

Port

Thursday, November 3, 2011

EU SEI FAZER!

WEBKIT

PORT

<input type=”number” />

WebKit

Thursday, November 3, 2011

<input type=”number”/>WEBKIT

123

<input type=”number” />

WebKit

Thursday, November 3, 2011

<input type=”number”/>WEBKIT

123

AQUI

<input type=”number”/><input type=”number” />

Port

Thursday, November 3, 2011

PORT123

<input type=”number”/><input type=”number” />

Port

Thursday, November 3, 2011

PORT123

BLZ!

<input type=”number”/><input type=”number” />

Port

Thursday, November 3, 2011

PORT123

BLZ!

WEBKIT SABE COMO

DESENHAR

RESPONSABILIDADEÉ DO PORT

(COREGRAPHICS)

QTWEBKITQNETWORKACESSMANAGER

KDEWEBKITKDE NETWORK LAYER

NETWORK INTERFACENADA DE HTTP, SSL...

MAS TEM CHAMADAS PARA ENVIO DE DADOS

IMPLEMENTAÇÃOLIB DO SISTEMA

SE QUISER FAZER UM PORT?

IMPLEMENTE AS INTERFACES

SE NÃO IMPLEMENTAR?

fillRoundedRect()BOTÃO

QUADRADO

SE WEBKIT ->

MENOS UM BROWSER PARA

TESTAR#1

NOVA FEATURE ->

DISPONÍVEL EM TODO PORT#2

WEBKIT TAMBÉM É UMA

API

WEBKIT2MULTI-PROCESS

JAVASCRIPTCOREENGINE

WEBCORECSS, HTML, DOM,

RENDER

WTFWEB TEMPLATE FRAMEWORK

PROPÓSITOS

WEBCORE

LOADINGPARSINGLAYOUTPAINT

HTML EDITINGJS BINDINGS

LOADINGPEGANDO DADOS

COMPLICADA!!!

WEBKITWEBCORE

WEBCORE/LOADERWEBCORE/PLATFORM/NETWORK

FRAMELOADERCLIENT

2 PASSOSFRAMES E RESOURCES

LOADING A FRAME

CLASSE FRAMELOADER

1)POLICY STAGEBLOCK POP-UP

CROSS-PROCESS NAVIGATION

2)PROVISIONAL STAGE

DOWNLOAD OU COMMITEX: LINK

3)COMMITED STAGE

START PARSING

LOADINGSUBRESOURCES

DOCLOADERCACHE

DOCLOADERPEGA UMA URL

VERIFICA NO CACHE OU LOADER

RETORNA UM CACHEDRESOURCE

CACHEDRESOURCERESPONDE CALLBACKPRODUZ UM OBJETO (IMAGEM, FONTE...)

PARSING

HTML x XMLHTMLTOKENIZER E HTMLPARSER

XMLTOKENIZER

OUTRAS TASKS:PRE-LOAD SCANNING

(CARREGAMENTO DE CSS ANTES DO PARSE)

DOM TREERENDEROBJECT TREERENDERSTYLE TREERENDERLAYER 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>

HTMLDocumentHTMLHTMLElementHTMLHeadElementHTMLTitleElement

Text(“foo”)

RENDER TREE

LAYOUTPAINTING

HIT TESTING

RENDER TREE

RENDEROBJECTSRENDERSTYLE

RENDERLAYERSINLINEBOXES

RENDEROBJECTclass 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

ArrayNumberPrototypes.__proto__.callee__defineGetter__.toString()

ABERTASFECHADAS

SPIDER MONKEYJAVASCRIPTCORE (JSC, NITRO)

V8

V8

PARSER RUNTIME

INTERPRETER

PARSER

TOKENIZE

var answer = 42;

TOKENIZE

var answer = 42;keyword

TOKENIZE

var answer = 42;keyword identifier

TOKENIZE

var answer = 42;keyword identifier

sinal igual

TOKENIZE

var answer = 42;keyword identifier

sinal igual

número

TOKENIZE

var answer = 42;keyword identifier

sinal igual

número

ponto e vírgula

TOKENIZERNO V8

src/scanner.*

KEYWORDX

IDENTIFIER

#1PERGUNTA 1

instanceof - instanceComponent

#1PERGUNTA 1

instanceof - instanceComponent

#1PERGUNTA 1

instanceof - instanceComponent

#1PERGUNTA 1

#2PERGUNTA 2

A G H J K L M O P Q X Y Z

#2PERGUNTA 2

GRAMÁTICA

SouceElement :: (Statement)*

FunctionDeclaration :: ‘function’ Identifier ‘(‘FormalParameters’)’ ‘{‘FunctionBody’}’

SYNTAX TREE

IDENTIFIER LITERAL CONSTANT

VARIABLE DECLARATION

answer 42

CONSEQUÊNCIAALTERNATIVA

BRANCH

VELHONOVO

CONDIÇÃO

idade > 60

PARSER NO V8src/parser.*

CODE TRACE (EVAL)

SCRIPT :: COMPILE

SCRIPT :: NEW

INTERNAL :: COMPILER :: COMPILE

INTERNAL :: MAKEFUNCIONINFO

INTERNAL :: PARSEAPI :: PARSE

INTERPRETER

var answer = 42;

var answer = 42;

Declare um objeto localChame esse objeto de “answer”

Crie um número 42De “assign” do número ao objeto

IDENTIFIER LITERAL CONSTANT

VARIABLE DECLARATION

answer 42

VELOCIDADE

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)

LAZY

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

foobar(x, y, z);

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

foobar(x, y, z);

Analiza sintaxe

Guarda posição da função

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

foobar(x, y, z);

Analiza sintaxe

Guarda posição da função

Compila e roda

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

foobar(x, y, z);

Analiza sintaxe

Guarda posição da função

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

foobar(x, y, z, false);

Compila e roda

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

foobar(x, y, z);

Analiza sintaxe

Guarda posição da função

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

foobar(x, y, z, false);

HACK

Compila e roda

RUNTIME

Date.now()

código nativo

código JavaScript

BRIDGEBRIDGING

C++Primitive

DateObjectArray

FunctionExternal

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

JSLINTJSBEAUTIFY

YUI COMPRESSOR

OBRIGADO!

@zaedysayao