1. Introduction to WebKit Girish Ramakrishnan

2. History 1999 2001-3 2005

3. What is WebKit WebKit is a rendering engine for web content WebKit is not a browser, a science project, or the solution to every problem HTML JavaScript CSS WebKit Rendering of a web page Image stolen from Adam Barth’s PresentationAdam Barth’s Presentation

4. WebKit ports WebKit is designed to be highly portable

5. Bindings (JavaScript API, Objective-C API)Components WebCore (HTML, CSS, DOM, etc, etc) WTF (Data structures, Threading primitives) Platform (Network, Storage, Graphics) JavaScriptCore (JavaScript Virtual Machine) WebKit and WebKit2 (Embedding API) Image stolen from Adam Barth’s PresentationAdam Barth’s Presentation

6. WTF!? The STL of WebKit project o Data structures o String URL parser Compiled as static lib Minimal porting required (ifdef’s) Source/WTF

7. JavaScriptCore (AKA SFX and Nitro) Primarily developed by Apple Byte Level Interpreter (Llint) Optional DFG JIT Non-trivial to use a stand alone Compiled as static lib Source/JavaScriptCore

8. WebCore HTML, CSS, XML, SVG ….

9. WebCore Asks WebKit layer to load resource Resource loading and frame loading are totally separate Network Loader Image stolen from Adam Barth’s PresentationAdam Barth’s Presentation

10. WebCore Fires off pre-load requests on the fly XSS Auditor Network Loader HTML Parser

11. WebCore Parser generates DOM tree Network Loader HTML Parser DOMScriptCSS

12. WebCore Create RenderObjects using “Attachment” Network Loader HTML Parser DOMScript Render Tree CSS

13. WebCore CSS Style Computation Network Loader HTML Parser DOMScript Render Tree CSS RenderStyles Image stolen from Adam Barth’s PresentationAdam Barth’s Presentation

14. WebCore CSS Style Computation Network Loader HTML Parser DOMScript Render Tree CSS RenderStyles Image stolen from Adam Barth’s PresentationAdam Barth’s Presentation

15. WebCore Network Loader HTML Parser DOMScript Render Tree CSS Layout (RenderLayer, LineBoxes) RenderStyles

16. WebCore graphics Accelerated Compositing Image stolen from Ariya Hidayat’s blogpostAriya Hidayat’s blogpost

17. WebCore Graphics Tiled rendering Image stolen from Ariya Hidayat’s blogpostAriya Hidayat’s blogpost

18. WebCore Directory structure is insightful bindings (and idl files) bridge css Dom editing history html icu Inspector loader Platforms (graphics, network) plugins rendering storage svg xml

19. WebCore Porting Platforms/ implements port abstraction o Networking & Graphics o Time, DnD, Themes, Clipboard, UA Many features like plugins require port specific enhancements o Sprinkle ifdefs as necessary o Add dir/ /.cpp o E.g history/qt/HistoryItemQt.cpp

20. WebCore Porting (2) Client interfaces o Abstract interfaces implemented by the port o Used in place of ifdef’s when it’s useful for many ports class GeolocationClient { virtual bool requestAccess() = 0; } void Page::setClient(GeolocationClient *c) { client = c; } bool Page::requestLocationAccess() { return client->requestAccess(); } // Qt class GeolocationClientQt : public GeolocationClient { … } … page->setClient(new GeolocationClientQt);

21. WebCore Modules (battery, gelocation, indexeddb..) Layout tests Unit tests

22. WebKit Platform specific code o APIs o WebCoreSupport

23. WebKit2 New async API that uses split process model Developed by Apple

24. WebKit2 Image taken from WebKit WikiWebKit Wiki

25. WebKit2 vs Chrome Image taken from WebKit WikiWebKit Wiki

26. Trying out WebKit WebKit has no releases Each port is compiled differently git.webkit.org

27. Thank you Questions?