• Save
Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 1,674 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,674
On Slideshare
1,629
From Embeds
45
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 45

https://twitter.com 45

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