Webkit_Overview_2012

Browser & Webkit OverviewKevin HuangOct. 25, 2012Agenda►Browser & Browser Engine Introduction►Webkit Architecture►Graphic System►HBAS Generic Browser►Internet Application Framework IntroductionBrowser Introduction►What is a browser■ A browser is a common used software application ■Access and display pages and files on the web ■Act as a web front-end►What functions browser provideFaviconProxyCrash recoveryFast searchSystem monitorInfobar Bookmark Update manage Screen shot Safe browsering Start page Policy Plugins manage Password manage Process manage Themes Histroy Autofill Tab manage Downlad manageBrowser Engine Introduction►What is browser engine■Rendering engine■JavaScript engine►What is the functions provided by browser engine ■Access■Display■Interactive►Relationship between browser and browser engine ■Shell and CoreTrident Gecko Webkit PrestoIE Maxthon360 Sougou FirefoxSuiteCaminoSafariChromeOperaDifferent Types of BrowserTorchMeegoBrowserBrowser Engine Compare ListSafari, ChromeLGPLWebkit FoundationWebkitKonqueror LPGL KDEKHTML Explorer Proprietary Microsoft Trident Opera Proprietary Opera Presto Firefox GPL/LGPL Netscape/Moazilla Gecko Leading ApplicationLicenseCreatorEngineJavaScript Engine Concept■JavaScprit Engine–Interpreted execute the java script–Operate the DOM structure■Common used JavaScript engine –Chakra (IE9)–SpiderMonkey (Firefox)–V8(Chrome, Maxthon3)–Nitro (Safari4)–JavaScriptCore(Default build in Webkit)What is Webkit►A web-browser engine►Allow web-browsers to render web pages.►Functions provide by Webkit–Display web content.–Following links when clicked by user.–Managing a back-forward list.–Managing a history of pages recently visited.Why Webkit■Open source, with Google, Apple contribution ■Support standard compliance features ►HTML5►CSS3■Maintainable code►Well-structured►Convenience for porting■Performance and efficiency►Layout / Render►JavaScriptSource Code Folder Structure10Webkit ArchitectureWebkit PortWebkit MacWebkt GTKWebkit QTWebkit ChromeJavaScriptCore WebCoreNetworkingGraphics11Webkit ComponentsWebkit port– Webkit front-end layer, porting layer – GTK,MAC,QT,WIN,WX, etc.WebCore– Rendering, Layout, Painting• Bindings • CSS • DOM • HTML • Loader • Rendering • ...JavaScriptCore– Javascript engine12Webkit Ports■ Webkit Ports– The front-end layer used by applications – Each GUI platform (Windows, Gtk+, Qt) provides a different implementations – The goal is to make this a client to the WebCore layer■ Exist Webkit PortsApple's Windows Port Cairo-based Windows Port Qt's WebKit Port (QtWebKit) EFL's WebKit Port Gtk+'s WebKit Port Adobe's AIR Port wxWidgets' WebKit Port Clutters WebKit Port TinOS's WebKit Port Chromium WebKit Port BREW MP Webkit Port Windows CE Webkit Port13Webkit APIImportant classes– WebFrame – WebView – WebFrameView – WebPerferenceWebView Delegate DOM APIhttps:///library/mac/#documentation/ Cocoa/Conceptual/DisplayWebContent/Concepts/WebKitDesign.html14Webkit API ImplementationWebkit API Delegates DOM ClassestPlatform Specific Implementation ClassesWebViewEnums & TypeDefs StructuresWebFrameEnums & TypeDefs StructuresOther ClassesEnums & TypeDefs Structures15Webkit ComponentsWebkit port– Front-end layer – GTK,MAC,QT,WIN,WXWebCore– Rendering, Layout, Painting,…• Bindings • CSS • DOM • HTML • Loader • Rendering • ...JavaScriptCore– Javascript engine16WebCore ResponsibilitiesPainting LoadingScript ExecutionParsingRenderingStyle Resolution17Event Handling LayoutWebCore Internel ModulesWebkit PortWebCoreDOM DOM CSS CSS XML XML Bridge BridgeWebkit API API WebkitJavascriptCoreInterpreter InterpreterParser ParserHTML HTMLLoader LoaderSVG SVGPage PageBindingsLexer LexerRendering RenderingPlatformStorage StoragePlugins PluginsRuntime Runtime18WebCore Internel Modules► Bindings– The language-specific bindings for JavaScript and for C++► Loader– The loader are involved whenever some resources need to be loaded from the network.► Bridge– Bridge is about the bridging to the WebKit framework► DOM– DOM object► Page– Code for the top-level page and frame► HTML– The HTML DOM► Platform–► SVG– The SVG DOMContains much of the engine-level plumbing.► CSS– The CSS backend helps customizing the layouts of an HTML document► XML– The XML DOM► Rendering– This contains all the code related to rendering a page► Platform– Platform specific logic19Working Process (Loading)Loading Parsing Rendering Layout Painting20Loading► Loading local and remote resources► Load frame object► Loading is complexity■ Loading ■ Parsing ■ Executing► Include cache mechanism21Load a Web PagePage Frame FrameLoader DocumentLoader MainResourceLoader/blog/1188/how-webkit-loads-a-web-page/Document CacheResource Loader SubResourceLoaderResourceHandle22Working Process (Parsing)Loading Parsing Rendering Layout Painting23Parsing► Lexical and syntax analysis► Generate HTML DOM tree► Each node is an HTML element ► Error Handling ► Using state machine24Parser a HTMLResourceLoader Lexical analysis DocumentLoader HTMLDocumentParserL H TM oken T t x ne zer:: i n e To kHTMLTreeBuilderr nst o c : er: d l i en u ssTok eB e c e o r r T r::p uilde ML B e T e r H LT HTMFro e e Tr uc tt om A mo icTkenSyntax analysisIf blankCreate Node Insert Element Render...25HTMLConstructionSite::insertHTMLHeadElementH TM LCon struc tionSite::atta chLat erDOM Treehtml head title “Web…” h1 “Web…”Object representation of HTML documentbody div p “This…”26Working Process (Rendering)Loading Parsing Rendering Layout Painting27Rendering► Building Render Tree► RenderObject Tree ► RenderStyle Tree ► RenderLayer Tree ► InlineBox Tree► Apply styles from CSS28RenderingRenderLayoutPaint29Render Tree► DOM tree based ► Rendering infos, css, position, color, font ► One DOM multiple Renderers, flexibility30Render TreeViewporthtml head title “Web…” h1 “Web…” body div p “This…”Block BlockScroll Block Block Block Block Block31Working Process (Layout)Loading Parsing Rendering Layout Painting32Layout► Traverse the render tree ► Invoke the RenderObject’s layout method ► Calculate element‘s size and position infomation33Working Process (Painting)Loading Parsing Rendering Layout Painting34Painting► Draw the elements to a layer ► Start from root element ► All layers drawn into one bitmap ► Draw layer by layer►From background to foreground► Invoke 2D Graphic API ► Hardware accelerated approach for optimize35Event Handling► Listening mouse and keyboard event ► Event queue ► Asynchronous Execute ► Setting related layout flag ► WebCore::EventHandler■ WebCore::EventHandler::mouseUp ■ WebCore::EventHandler::hanldeMouseReleaseEvent ■ WebCore::EventHandler::preperMouseEvent36Webkit ComponentsWebkit port– Front-end layer – GTK,MAC,QT,WIN,WXWebCore– Rendering, Layout, Painting• Bindings • CSS • DOM • HTML • Loader • Rendering • ...JavaScriptCore– JavaScript engine37JavaScriptCore► JavascriptCore■ JavaScriptCore is the built-in JavaScript engine for WebKit► JavaScriptCore main function■ Lexer: is responsible for the lexical analysis ■ Parser: carries out the syntactic analysis ■ Interpreter: executes the byte code produced by the parser• byte code-based • JIT(Just In Time)-based38Main Work Flow(Gecko)DOMHTMLHTML ParserDOM TreeLayoutAttachmentRender TreePaintingDisplayHTML HTML Style SheetCSS ParserStyle Rules39Webkit Process Model►Webkit■runs in one process with application►Webkit2■runs in separated process with applicationApplicationWebkitWebCore JavaScriptCoreApplication ApplicationWebkitWebkitWebCoreJavaScriptCoreUI ProcessUI ProcessWeb ProcessUI ProcessApplicationWebkit WebCore JavaScriptCore Web ProcessWebkit Webkit2ChromeExplain about Webkit2►Not the next version of WebKit!►Webkit2 is the new API layer►Designed for a split process model ►Different from the original WebKit ►On the same repository with WebkitDeep Dive Topics for WebkitRendering in WebKit–/watch?v=RVnARGhhs9w&feature=relmfu The Chromium WebKit API–/watch?v=JFzC_Gx76E8&feature=relmfu Painting in Chromium–/watch?v=JFzC_Gx76E8&feature=relmfu Chromium's multi-process architecture–/watch?v=A0Z0ybTCHKs&feature=relmfuGraphic System►For all Rendering, Webkit requires a Graphics Surface►Drawing on the Graphics Surface is done in different ways on different platforms.►This introduces platform dependency in the graphical components of Webkit►Different ports of Webkit using different techniques introduce their changes in WebCore►All the above result in Code Complexity of WebkitUsing Graphics Abstraction Layer►Reduces code complexity inside WebCore►Good Graphics Abstraction Libraries–Cairo: a 2D graphics library with support for multiple output devices –Skia: another 2D graphics library hosted by GooglePlatform Graphics ComponentsQT GTK Chrome Windows SDLLinux EGL QNX Cairo SkiaQT DIRECT FB GTK OPENGL OPENGL ES Windows GDIXWindows PlatformComponents Webkit PortTorchHarman Community RIMSome Ports use Platform Graphics Components directly –QT–WindowsSome Ports utilize Abstraction using Cairo / SkiaAbstraction helps in support for Multiple Graphical Backends Abstraction reduces Platform Dependency in Webkit CoreGraphic System Example (Android)Webkit PortSkia Bridge Webkit Core V8SkiaJNIAndroid.Webkit.WebViewCoreAndroid.Webkit.WebViewSurfaceRefresh the surfaceeventHBAS Generic Browser■Why need HBAS generic browser?–Webkit Based–Inherit from OWB(Origyn Web Browser )–Ports to QNX, Linux platform–Support DSI interface, D-Bus interface will also be available –Multi-process implementation–Memory management mechanism for embedded system。