View
1.656
Download
0
Category
Tags:
Preview:
DESCRIPTION
Cada vez mais ferramentas, softwares e devices possuem soluções baseadas no WebKit. Contudo, poucas pessoas sabem o que ele é de verdade, como ele funciona internamente, seu potencial e o que ele oferece. Veremos seus core, discutiremos como é possível usar o WebKit para fazer o seu browser ou usá-lo dentro de sua aplicação e entenderemos seu funcionamento e suas ferramentas disponiveis. Ainda, veremos como funciona a interpretação e run do JavaScript dentro da engine V8
Citation preview
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
Recommended