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

  • 1,373 views
Uploaded 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 …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,373
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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