NAS ENTRANHASDO WEBKITZAEDY SAYÃO @zaedysayao
NAS ENTRANHASDO WEBKITZAEDY SAYÃO @zaedysayaoV8
Zaedy Dantas Sayão@zaedysayao@javamanrj@javamanrj@WORKShttp://about.me/zaedy
BÁSICO
CONCEITO
O QUE É?
BROWSER
USER INTERFACEBROWSER ENGINERENDER ENGINENETWORKI/OJAVASCRIPTENGINEGRAPHICSSTACK
USER INTERFACEBROWSER ENGINERENDER ENGINENETWORKI/OJAVASCRIPTENGINEGRAPHICSSTACKWEBKIT
WEBKITNÃO É UMBROWSER
WEBKIT⊑
BROWSERENGINE
RENDERENGINE
ENGINE?
CONJUNTODE LIBSCÓDIGO
FAZ O QUE?
CÓDIGO42
CÓDIGOPAINTHTMLCSSJSSVGLAYOUT
PAST
HISTÓRIA
2001
KHTML
2005
CONTRIBUTORCOMMITERREVIEWER
APPLEENVIACONTA SVN
ONDERODA?
EVERYWHERE
APPLEGOOGLENOKIABLACKBERRYIGALIA (GNOME)
GETTINGCODE
svn checkout https://svn.webkit.org/repository/webkit/trunkgit clone git://git.webkit.org/WebKit.git1.2GB80% 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
DEMO
PORTS
SAFARIIOS ≠WINDOWS
APPLEPORT DOCOREFOUNDATIONPARA O WINDOWS
CHROMECHROMIUM
ANDROID
QTWEBKIT
WEBKITGTK+
WEBKITNIGHTLYMAC PORT -> SAFARI
INTERFACE
IMPLEMENTAÇÃO
<input type=”number” />WebKitursday, November 3, 2011<input type=”number”/>PINTAPARA MIMinput type=”number” />EU SEI FAZER...
<input type=”number” />WebKitursday, November 3, 2011<input type=”number”/>WEBKIT123AQUI
<input type=”number”/>input type=”number” />PORT123BLZ!
WEBKIT SABECOMODESENHAR
RESPONSABILIDADEÉ DO PORT(COREGRAPHICS)
QTWEBKITQNETWORKACESSMANAGER
KDEWEBKITKDE NETWORK LAYER
NETWORKINTERFACENADA DE HTTP, SSL...MAS TEM CHAMADAS PARAENVIO DE DADOS
IMPLEMENTAÇÃOLIB DO SISTEMA
SE QUISER FAZERUM PORT?
IMPLEMENTE ASINTERFACES
SE NÃOIMPLEMENTAR?
fillRoundedRect()BOTÃOQUADRADO
SE WEBKIT->MENOS UMBROWSER PARATESTAR
NOVA FEATURE->DISPONÍVEL EMTODO PORT
WEBKITTAMBÉM É UMAAPI
WEBKIT2MULTI-PROCESS
JAVASCRIPTCOREENGINE
WEBCORECSS, HTML, DOM,RENDER
WTFWEB TEMPLATEFRAMEWORK
PROPÓSITOS
WEBCORE
LOADINGPARSINGLAYOUTPAINTHTML EDITINGJS BINDINGS
LOADINGPEGANDO DADOS
COMPLICADO!!!
WEBKITWEBCOREWEBCORE/LOADERWEBCORE/PLATFORM/NETWORKFRAMELOADERCLIENT
2 PASSOSFRAMES E RESOURCES
LOADING AFRAMECLASSE FRAMELOADER
1)POLICY STAGEBLOCK POP-UPCROSS-PROCESS NAVIGATION
2)PROVISIONALSTAGEDOWNLOAD OU COMMITEX: LINK
3)COMMITEDSTAGESTART PARSING
LOADINGSUBRESOURCES
DOCLOADERCACHE
DOCLOADERPEGA UMA URLVERIFICA NO CACHE OULOADERRETORNA UMCACHEDRESOURCE
CACHEDRESOURCERESPONDE CALLBACKPRODUZ UM OBJETO(IMAGEM, FONTE...)
PARSING
HTML x XMLHTMLTOKENIZER E HTMLPARSERXMLTOKENIZEROUTRAS TASKS:PRE-LOAD SCANNING(CARREGAMENTO DE CSS ANTESDO PARSE)
DOM TREERENDEROBJECT TREERENDERSTYLE TREERENDERLAYER TREELINEBOX TREE
LOADING -> SOURCEPARSING -> DOM TREEattach() -> RENDEROBJECT TREESTYLE RESOLUTION -> RENDERSTYLETREELAYOUT -> RENDERLAYER ...
DOM TREE<html><head><title>foo</title><head>HTMLDocumentHTMLHTMLELementHTMLHeadElementHTMLTitleElementText(“foo”)
RENDER TREELAYOUTPAINTINGHIT TESTING
RENDER TREERENDEROBJECTSRENDERSTYLERENDERLAYERSINLINEBOXES
RENDEROBJECTclass RenderObject {virtual void layout() = 0;virtual void paint(PaintInfo) = 0;virtual IntRect repaintRect() ...
RENDEROBJECTRenderBlock(<div>, <p>)RenderInline(<span>, <b>, <i>)RenderImage(<image>)RenderText(#text)RenderTableCell (<td>)
OBJETOS DAENGINE JSStringArrayNumberPrototypes.__proto__.callee__defineGetter__.toString()
ABERTASFECHADAS
SPIDER MONKEYJAVASCRIPTCORE (JSC, NITRO)V8
V8
PARSER RUNTIMEINTERPRETER
PARSER
TOKENIZEvar answer = 42;
TOKENIZEvar answer = 42;keyword identifiersinal igualnúmerovírgula
TOKENIZERNOV8src/scanner.*
KEYWORDXIDENTIFIER
instanceof - instanceComponent
A G H J K L M O P Q XY Z
GRAMÁTICA
SouceElement :: (Statement)*FunctionDeclaration ::‘function’ Identifier ‘(‘FormalParameters’)’	‘{‘FunctionBody’}’
SYNTAX TREE
IDENTIFIER LITERALCONSTANTVARIABLEDECLARATIONanswer 42
CONSEQUÊNCIAALTERNATIVABRANCHVELHONOVOCONDIÇÃOidade > 60
PARSER NOV8src/parser.*
CODE TRACE(EVAL)SCRIPT :: COMPILESCRIPT :: NEWINTERNAL :: COMPILER :: COMPILEINTERNAL :: MAKEFUNCIONINFOINTERNAL :: PARSEA...
DEMO
INTERPRETER
var answer = 42;Declare um objeto localChame esse objeto de “answer”Crie um número 42De “assign” do número ao objeto
IDENTIFIER LITERALCONSTANTVARIABLEDECLARATIONanswer 42
VELOCIDADE
BYTECODESERIALIZA EM UMALISTA DE “AÇÕES”
COMPILA OBYTECODEPARA ASSEMBLYJIT (=JUST-IN-TIME) COMPILE
shell --print-codeshell --expose-debug-as debdeb.Debug.disassemble(f)
LAZY
foobar = function(x, y, z){...}foobar(x, y, z);Analiza sintaxeGuarda posição da funçãofoobar = function(x, y, z, run){...}...
Date.now()códigonativocódigoJavaScript
BRIDGE
C++PrimitiveDateObjectArrayFunctionExternal
Handle<FunctionTemplate> systemObject = FunctionTemplate::New();systemObject->Set(String::New(“exit”)),FunctionTemplate::N...
JSLINTJSBEAUTIFY
OBRIGADO!@zaedysayao
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Upcoming SlideShare
Loading in...5
×

Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013

1,521

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,521
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013

  1. 1. NAS ENTRANHASDO WEBKITZAEDY SAYÃO @zaedysayao
  2. 2. NAS ENTRANHASDO WEBKITZAEDY SAYÃO @zaedysayaoV8
  3. 3. Zaedy Dantas Sayão@zaedysayao@javamanrj@javamanrj@WORKShttp://about.me/zaedy
  4. 4. BÁSICO
  5. 5. CONCEITO
  6. 6. O QUE É?
  7. 7. BROWSER
  8. 8. USER INTERFACEBROWSER ENGINERENDER ENGINENETWORKI/OJAVASCRIPTENGINEGRAPHICSSTACK
  9. 9. USER INTERFACEBROWSER ENGINERENDER ENGINENETWORKI/OJAVASCRIPTENGINEGRAPHICSSTACKWEBKIT
  10. 10. WEBKITNÃO É UMBROWSER
  11. 11. WEBKIT⊑
  12. 12. BROWSERENGINE
  13. 13. RENDERENGINE
  14. 14. ENGINE?
  15. 15. CONJUNTODE LIBSCÓDIGO
  16. 16. FAZ O QUE?
  17. 17. CÓDIGO42
  18. 18. CÓDIGOPAINTHTMLCSSJSSVGLAYOUT
  19. 19. PAST
  20. 20. HISTÓRIA
  21. 21. 2001
  22. 22. KHTML
  23. 23. 2005
  24. 24. CONTRIBUTORCOMMITERREVIEWER
  25. 25. APPLEENVIACONTA SVN
  26. 26. ONDERODA?
  27. 27. EVERYWHERE
  28. 28. APPLEGOOGLENOKIABLACKBERRYIGALIA (GNOME)
  29. 29. GETTINGCODE
  30. 30. svn checkout https://svn.webkit.org/repository/webkit/trunkgit clone git://git.webkit.org/WebKit.git1.2GB80% TESTES
  31. 31. BUILD
  32. 32. WebKitTools/Scripts/build-webkit--qt for Qt,--gtk for Gtk+--debug for “Debug” mode
  33. 33. RUN
  34. 34. WebKitTools/Scripts/run-launcher--qt for Qt,--gtk for Gtk+--debug for “Debug” mode
  35. 35. DEMO
  36. 36. PORTS
  37. 37. SAFARIIOS ≠WINDOWS
  38. 38. APPLEPORT DOCOREFOUNDATIONPARA O WINDOWS
  39. 39. CHROMECHROMIUM
  40. 40. ANDROID
  41. 41. QTWEBKIT
  42. 42. WEBKITGTK+
  43. 43. WEBKITNIGHTLYMAC PORT -> SAFARI
  44. 44. INTERFACE
  45. 45. IMPLEMENTAÇÃO
  46. 46. <input type=”number” />WebKitursday, November 3, 2011<input type=”number”/>PINTAPARA MIMinput type=”number” />EU SEI FAZER!WEBKITPORT
  47. 47. <input type=”number” />WebKitursday, November 3, 2011<input type=”number”/>WEBKIT123AQUI
  48. 48. <input type=”number”/>input type=”number” />PORT123BLZ!
  49. 49. WEBKIT SABECOMODESENHAR
  50. 50. RESPONSABILIDADEÉ DO PORT(COREGRAPHICS)
  51. 51. QTWEBKITQNETWORKACESSMANAGER
  52. 52. KDEWEBKITKDE NETWORK LAYER
  53. 53. NETWORKINTERFACENADA DE HTTP, SSL...MAS TEM CHAMADAS PARAENVIO DE DADOS
  54. 54. IMPLEMENTAÇÃOLIB DO SISTEMA
  55. 55. SE QUISER FAZERUM PORT?
  56. 56. IMPLEMENTE ASINTERFACES
  57. 57. SE NÃOIMPLEMENTAR?
  58. 58. fillRoundedRect()BOTÃOQUADRADO
  59. 59. SE WEBKIT->MENOS UMBROWSER PARATESTAR
  60. 60. NOVA FEATURE->DISPONÍVEL EMTODO PORT
  61. 61. WEBKITTAMBÉM É UMAAPI
  62. 62. WEBKIT2MULTI-PROCESS
  63. 63. JAVASCRIPTCOREENGINE
  64. 64. WEBCORECSS, HTML, DOM,RENDER
  65. 65. WTFWEB TEMPLATEFRAMEWORK
  66. 66. PROPÓSITOS
  67. 67. WEBCORE
  68. 68. LOADINGPARSINGLAYOUTPAINTHTML EDITINGJS BINDINGS
  69. 69. LOADINGPEGANDO DADOS
  70. 70. COMPLICADO!!!
  71. 71. WEBKITWEBCOREWEBCORE/LOADERWEBCORE/PLATFORM/NETWORKFRAMELOADERCLIENT
  72. 72. 2 PASSOSFRAMES E RESOURCES
  73. 73. LOADING AFRAMECLASSE FRAMELOADER
  74. 74. 1)POLICY STAGEBLOCK POP-UPCROSS-PROCESS NAVIGATION
  75. 75. 2)PROVISIONALSTAGEDOWNLOAD OU COMMITEX: LINK
  76. 76. 3)COMMITEDSTAGESTART PARSING
  77. 77. LOADINGSUBRESOURCES
  78. 78. DOCLOADERCACHE
  79. 79. DOCLOADERPEGA UMA URLVERIFICA NO CACHE OULOADERRETORNA UMCACHEDRESOURCE
  80. 80. CACHEDRESOURCERESPONDE CALLBACKPRODUZ UM OBJETO(IMAGEM, FONTE...)
  81. 81. PARSING
  82. 82. HTML x XMLHTMLTOKENIZER E HTMLPARSERXMLTOKENIZEROUTRAS TASKS:PRE-LOAD SCANNING(CARREGAMENTO DE CSS ANTESDO PARSE)
  83. 83. DOM TREERENDEROBJECT TREERENDERSTYLE TREERENDERLAYER TREELINEBOX TREE
  84. 84. LOADING -> SOURCEPARSING -> DOM TREEattach() -> RENDEROBJECT TREESTYLE RESOLUTION -> RENDERSTYLETREELAYOUT -> RENDERLAYER TREELINEBOX TREE
  85. 85. DOM TREE<html><head><title>foo</title><head>HTMLDocumentHTMLHTMLELementHTMLHeadElementHTMLTitleElementText(“foo”)
  86. 86. RENDER TREELAYOUTPAINTINGHIT TESTING
  87. 87. RENDER TREERENDEROBJECTSRENDERSTYLERENDERLAYERSINLINEBOXES
  88. 88. RENDEROBJECTclass RenderObject {virtual void layout() = 0;virtual void paint(PaintInfo) = 0;virtual IntRect repaintRect() = 0;Node* node();RenderStyle* style() const;RenderLayer* containingLayer();}
  89. 89. RENDEROBJECTRenderBlock(<div>, <p>)RenderInline(<span>, <b>, <i>)RenderImage(<image>)RenderText(#text)RenderTableCell (<td>)
  90. 90. OBJETOS DAENGINE JSStringArrayNumberPrototypes.__proto__.callee__defineGetter__.toString()
  91. 91. ABERTASFECHADAS
  92. 92. SPIDER MONKEYJAVASCRIPTCORE (JSC, NITRO)V8
  93. 93. V8
  94. 94. PARSER RUNTIMEINTERPRETER
  95. 95. PARSER
  96. 96. TOKENIZEvar answer = 42;
  97. 97. TOKENIZEvar answer = 42;keyword identifiersinal igualnúmerovírgula
  98. 98. TOKENIZERNOV8src/scanner.*
  99. 99. KEYWORDXIDENTIFIER
  100. 100. instanceof - instanceComponent
  101. 101. A G H J K L M O P Q XY Z
  102. 102. GRAMÁTICA
  103. 103. SouceElement :: (Statement)*FunctionDeclaration ::‘function’ Identifier ‘(‘FormalParameters’)’ ‘{‘FunctionBody’}’
  104. 104. SYNTAX TREE
  105. 105. IDENTIFIER LITERALCONSTANTVARIABLEDECLARATIONanswer 42
  106. 106. CONSEQUÊNCIAALTERNATIVABRANCHVELHONOVOCONDIÇÃOidade > 60
  107. 107. PARSER NOV8src/parser.*
  108. 108. CODE TRACE(EVAL)SCRIPT :: COMPILESCRIPT :: NEWINTERNAL :: COMPILER :: COMPILEINTERNAL :: MAKEFUNCIONINFOINTERNAL :: PARSEAPI :: PARSE
  109. 109. DEMO
  110. 110. INTERPRETER
  111. 111. var answer = 42;Declare um objeto localChame esse objeto de “answer”Crie um número 42De “assign” do número ao objeto
  112. 112. IDENTIFIER LITERALCONSTANTVARIABLEDECLARATIONanswer 42
  113. 113. VELOCIDADE
  114. 114. BYTECODESERIALIZA EM UMALISTA DE “AÇÕES”
  115. 115. COMPILA OBYTECODEPARA ASSEMBLYJIT (=JUST-IN-TIME) COMPILE
  116. 116. shell --print-codeshell --expose-debug-as debdeb.Debug.disassemble(f)
  117. 117. LAZY
  118. 118. foobar = function(x, y, z){...}foobar(x, y, z);Analiza sintaxeGuarda posição da funçãofoobar = function(x, y, z, run){...}foobar(x, y, z, false);HACKCompila e roda
  119. 119. Date.now()códigonativocódigoJavaScript
  120. 120. BRIDGE
  121. 121. C++PrimitiveDateObjectArrayFunctionExternal
  122. 122. 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();}EXPONDOFUNÇÃO
  123. 123. JSLINTJSBEAUTIFY
  124. 124. OBRIGADO!@zaedysayao

×