Save 37% off PRO during our Black Friday Sale! »

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. WebKit Rendering Overview for HTML5 Developer @ariyahidayat San Francisco, April

    2, 2013 1
  2. whoami 2

  3. WebKit 3

  4. WebKit is Everywhere 4

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

    6 9 12 Revisions Years ~3000 commits/month 5
  6. Heavy on TDD Source Code Tests Repository Checkout 6

  7. Involvement: Social Layers Contributor Committer Reviewer accept or reject patches

    checks in reviewed patches after 10-20 patches after 80 patches 7
  8. Big Players 8

  9. Browser at a High Level User Interface Browser Engine Graphics

    Stack Data Persistence Render Engine JavaScript Engine Networking I/O 9
  10. WebKit Components Render Engine WebCore JavaScript Engine (JSC/V8) Client Interface

    HTML DOM CSS SVG Canvas 10
  11. Platform Abstraction Client Interface Networking I/O Graphics Theme Events Clipboard

    Thread Geolocation Timer API Calls Events Port (Chrome, Safari, etc.) 11
  12. Loader & Parser 12

  13. From Contents to Pixels HTML Parser DOM CSS Parser HTML

    Style Sheets DOM Tree Style Rules Render Tree Render Layout Paint 13
  14. Loader: Resource, Document, Frame, Page 14

  15. Browser Caches HTTP Disk Cache HTTP Memory Cache DNS

    Host Cache Preconnect Domain Cache V8 Compilation Cache SSL Session Cache TCP Connections Cookies HTML5 Caches .... 15
  16. HTML Tokenizer ~70 states <html><body><p>Hello</p></body></html> tag text 16

  17. HTML Parser ~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
  18. Preloader Scanner Schedule concurrent loading of resources CSS @import HTML

    <script>, <img> // /img/sencha-large.png /css/carousel.css /js/carousel.js // /forum/clientscript/vbulletin_md5.js?v=403 /min/?g=main-js&1362779803&debug=1 18
  19. Layout 19

  20. DOM Tree <html><body><p>Hello</p></body></html> HTMLDocument HTMLBodyElement HTMLParagraphElement attributes, children, contents 20

  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
  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
  23. It’s a forest! 23

  24. 24

  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
  26. Effects of Style Recalc and Layout document.getElementById('box') = '100px'; document.getElementById('box').style.backgroundColor

    = 'red'; Aggregated “dirty” area No layout necessary, metrics are not flagged as “changed” 26
  27. Getting the Right Style HTMLDocument HTMLBodyElement HTMLParagraphElement DOM Tree p

    { color: blue } Stylesheet List RenderStyle CSS Style Selector: id, class, tags, ... 27
  28. Minimizing Layout clientHeight clientLeft clientTop clientWidth offsetHeight offsetLeft

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

  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
  31. Graphics Abstraction Mac & iOS Chromium & Android Qt CoreGraphics

    Skia QPainter graphics stack GraphicsContext Gtk+ Cairo 31
  32. CSS Painting: 10 Stages Appendix E. Elaborate description of

    Stacking Contexts • Background • Floats • Foreground • Selection • Outline Done by the render objects (in the render tree) 32
  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
  34. Path is Everything 34

  35. Stroke and Brush 35

  36. Painting Complexity Polygon Multiple levels of transparency 36

  37. Transformation Scaling Rotation Perspective 37

  38. Hardware Acceleration 38

  39. translate3d 39

  40. SoC = System-on-a-Chip CPU GPU 40

  41. Graphics Processing Unit “Fixed” geometry Transformation Textured triangles Parallelism 41

  42. GPU Workflow Vertices Rendered Textured Matrix 42

  43. Efficient Uses of GPU Drawing primitives Backing stores Layer &

    compositing 43
  44. Responsive Interface Processor Rendering User interaction decoupled 44

  45. Maps Tile 45

  46. Rendering vs Interaction Web Page Backing Store Screen Rendering User

    interaction 46
  47. Checkerboard Pattern 47

  48. Pinch to Zoom when you pinch... 48

  49. Progressive Rendering Crisp but slow Fast but blurry 49

  50. Tile Transformation Panning = Translation Zooming = Scaling 50

  51. Perceived Responsiveness User pinches Smooth scaled Blocky (but fast!) 51

  52. Tiling System CPU GPU .... .... Texture upload 52

  53. Per Element Backing Store = Layer 3-D transform/perspective

    <video>, <canvas>, plugins CSS animation, filters .... 53
  54. Mechanics of Animation Initialization Animation step “Hey, this is good

    stuff. Cache it as texture #42.” “Apply [operation] to texture #42.” 54
  55. Element and “Logical” 3-D Compositor Tweening Can be in

    a separate thread 55
  56. Debugging in Safari defaults write IncludeInternalDebugMenu 1 56

  57. Compositing Indicators Composited layer Container layer No associated texture Overflow

    Texture (number = upload) 57
  58. Frame Rate HUD Frame rate chart GPU memory usage

  59. Avoid Texture Reupload No reupload Upload Opacity Position Size Filter

    Everything else! “Hardware accelerated CSS” 59
  60. Constant Upload = Bad translate3d ??? 60

  61. Transformation 61

  62. Fade In/Out 62

  63. three.js Periodic Table 63

  64. Montage MovieShow 64

  65. Photon CSS Lighting 65

  66. FPS View 66

  67. Filter 67

  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
  69. Prepare and Reuse Hide the poster (=layer) offscreen Viewport 69

  70. Avoid Overcapacity .... .... Texture upload Think of the GPU

    memory like a cache. 70
  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
  72. Color Transition Trick Blended with 72

  73. Traffic Congestion The speed of the car vs the traffic

    condition 73
  74. Conclusion 74

  75. Rendering Aspects 75

  76. Run a thorough feature-cost analysis Don’t fight the rendering engine

    Never assume, always measure 76
  77. More Stuff Jank Busters: Continuous painting: DevTools-Continuous-Painting-Mode Chrome

    GPU rendering benchmark (Telemetry): Skia debugger: 77
  78. Thank You @AriyaHidayat Credits: Some artworks are

    from 78