WebKit Rendering: Overview for HTML5 Developer

WebKit Rendering: Overview for HTML5 Developer

WebKit is an open-source rendering engine for many popular desktop browsers, application run-times, and mobile devices. Do you ever wonder how WebKit pulls the bits off the server and converts them into visible pixels on the screen? Do you want to know how WebKit takes advantage of modern graphics system for hardware-accelerated animation and other effects? This session will show you a different take on WebKit and give you an insight on how to leverage WebKit to assist your HTML5 application development and performance workflow.


Ariya Hidayat

April 02, 2013


  1. 5.

    KHTML, Apple, and Community 0 50000 100000 150000 0 3

    6 9 12 Revisions Years ~3000 commits/month http://ariya.ofilabs.com/2011/11/one-hundred-thousand-and-counting.html 5
  2. 7.

    Involvement: Social Layers Contributor Committer Reviewer accept or reject patches

    checks in reviewed patches after 10-20 patches after 80 patches 7
  3. 9.

    Browser at a High Level User Interface Browser Engine Graphics

    Stack Data Persistence Render Engine JavaScript Engine Networking I/O http://www.html5rocks.com/en/tutorials/internals/howbrowserswork 9
  4. 11.

    Platform Abstraction Client Interface Networking I/O Graphics Theme Events Clipboard

    Thread Geolocation Timer API Calls Events Port (Chrome, Safari, etc.) http://ariya.ofilabs.com/2011/06/your-webkit-port-is-special-just-like-every-other-port.html 11
  5. 13.

    From Contents to Pixels HTML Parser DOM CSS Parser HTML

    Style Sheets DOM Tree Style Rules Render Tree Render Layout Paint http://www.html5rocks.com/en/tutorials/internals/howbrowserswork 13
  6. 15.

    Browser Caches http://gent.ilcore.com/2011/02/chromes-10-caches.html HTTP Disk Cache HTTP Memory Cache DNS

    Host Cache Preconnect Domain Cache V8 Compilation Cache SSL Session Cache TCP Connections Cookies HTML5 Caches .... 15
  7. 17.

    HTML Parser https://www.webkit.org/blog/1273/the-html5-parsing-algorithm/ ~10,000 lines of code Work in progress:

    Threaded HTML Parser Tokenizer Tree Builder DOM Tree <html><body><p>Hello</p></body></html> tag text 17
  8. 18.

    Preloader Scanner Schedule concurrent loading of resources CSS @import HTML

    <script>, <img> //ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js https://use.typekit.com/bqo8qzg.js /img/sencha-large.png /css/carousel.css /js/carousel.js http://cdn.sencha.io/img/home/promos/promos-20130328-bundle-webinar.png http://cdn.sencha.io/img/home/20130219-promo-senchacon.png http://cdn.sencha.io/img/home/december-2012/icon-news.png http://cdn.sencha.io/img/home/december-2012/icon-blog.png http://cdn.sencha.io/img/20130317-mz-pivot-grid.png http://cdn.sencha.io/img/20120607-whats-new-io.png http://cdn.sencha.io/img/20130317-development-enterprise.png http://cdn.sencha.io/img/home/december-2012/icon-twitter.png http://cdn.sencha.io/img/home/december-2012/customer-logos.png //platform.twitter.com/widgets.js /forum/clientscript/vbulletin_md5.js?v=403 /min/?g=main-js&1362779803&debug=1 sencha.com 18
  9. 19.
  10. 21.

    DOM Tree vs Render Tree There is no Render* for

    display:none HTMLDocument HTMLBodyElement HTMLParagraphElement RenderRoot RenderBody RenderText tree structure/navigation metrics (box model) hit testing RenderStyle computed style many:1 21
  11. 22.

    “Attach” Process Historical: Node is invisible, attach it to the

    main view to make it visible <div>42</div> View RenderObject RenderStyle tree structure/navigation metrics (box model) hit testing computed style Node/Element 1:1 many:1 another tree structure 22
  12. 25.

    Style Recalc vs Layout • RecalcStyle refers to style resolution,

    i.e. solving style properties for each node. • Layout needs style information, e.g. the computed dimension defines the box geometry. • Layout will be deferred if there is painting in progress (not completed yet). • Layout is on-demand: triggered by style change. More complication when loading data data data data RecalcStyle RecalcStyle Layout Paint RecalcStyle Layout Paint preorder traversal might be incremental RenderObject specific 25
  13. 26.

    Effects of Style Recalc and Layout document.getElementById('box').style.top = '100px'; document.getElementById('box').style.backgroundColor

    = 'red'; Aggregated “dirty” area No layout necessary, metrics are not flagged as “changed” 26
  14. 27.

    Getting the Right Style HTMLDocument HTMLBodyElement HTMLParagraphElement DOM Tree p

    { color: blue } Stylesheet List RenderStyle CSS Style Selector: id, class, tags, ... 27
  15. 28.

    Minimizing Layout http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html http://code.google.com/p/chromium/source/search?q=%22-%3EupdateLayoutIgnorePendingStylesheets()%22 clientHeight clientLeft clientTop clientWidth offsetHeight offsetLeft

    offsetParent offsetTop offsetWidth scrollLeft scrollTop scrollWidth innerText outerText Element focus() getBoundingClientRect() getClientRects() scrollByLines() scrollByPages() scrollHeight scrollIntoView() scrollIntoViewIfNeeded() 28
  16. 30.

    Goals of Painting • “Visualize” all RenderObjects (again, tree traversal)

    • All painting commands go to GraphicsContext abstraction • Important • Clipped to the visible viewport • Back-to-front Optimizations Transparency & clipping 30
  17. 31.

    Graphics Abstraction Mac & iOS Chromium & Android Qt CoreGraphics

    Skia QPainter graphics stack GraphicsContext http://ariya.ofilabs.com/2011/06/your-webkit-port-is-special-just-like-every-other-port.html Gtk+ Cairo 31
  18. 32.

    CSS Painting: 10 Stages http://www.w3.org/TR/CSS2/zindex.html Appendix E. Elaborate description of

    Stacking Contexts • Background • Floats • Foreground • Selection • Outline Done by the render objects (in the render tree) 32
  19. 33.

    Painting Flow: Browser vs WebKit WebKit Browser Request painting, GraphicsContext

    User scrolls the viewport Style change Mark “dirty” area Sometimes to the backing store 33
  20. 54.

    Mechanics of Animation Initialization Animation step “Hey, this is good

    stuff. Cache it as texture #42.” “Apply [operation] to texture #42.” 54
  21. 59.

    Avoid Texture Reupload No reupload Upload Opacity Position Size Filter

    Everything else! “Hardware accelerated CSS” 59
  22. 68.

    Timer Latency Depending on user reaction Animation end triggers the

    JavaScript callback JavaScript code kicks the next animation Prepare both animation and hide the “wrong” one 68
  23. 71.

    Color Transition @keyframes box { 0% { transform: background-color: blue;

    } 100% { transform: background-color: green; } } Need a new texture uploaded to the GPU for every in-between color 71
  24. 77.

    More Stuff Jank Busters: http://www.youtube.com/watch?v=hAzhayTnhEI Continuous painting: http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with- DevTools-Continuous-Painting-Mode Chrome

    GPU rendering benchmark (Telemetry): http://www.chromium.org/developers/design-documents/rendering-benchmarks Skia debugger: http://wesleyhales.com/blog/2013/02/18/Adventures-With-the-Skia-Debugger/ 77