Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Understanding Webkit Rendering Slide 1 Understanding Webkit Rendering Slide 2 Understanding Webkit Rendering Slide 3 Understanding Webkit Rendering Slide 4 Understanding Webkit Rendering Slide 5 Understanding Webkit Rendering Slide 6 Understanding Webkit Rendering Slide 7 Understanding Webkit Rendering Slide 8 Understanding Webkit Rendering Slide 9 Understanding Webkit Rendering Slide 10 Understanding Webkit Rendering Slide 11 Understanding Webkit Rendering Slide 12 Understanding Webkit Rendering Slide 13 Understanding Webkit Rendering Slide 14 Understanding Webkit Rendering Slide 15 Understanding Webkit Rendering Slide 16 Understanding Webkit Rendering Slide 17 Understanding Webkit Rendering Slide 18 Understanding Webkit Rendering Slide 19 Understanding Webkit Rendering Slide 20 Understanding Webkit Rendering Slide 21 Understanding Webkit Rendering Slide 22 Understanding Webkit Rendering Slide 23 Understanding Webkit Rendering Slide 24 Understanding Webkit Rendering Slide 25 Understanding Webkit Rendering Slide 26 Understanding Webkit Rendering Slide 27 Understanding Webkit Rendering Slide 28 Understanding Webkit Rendering Slide 29 Understanding Webkit Rendering Slide 30 Understanding Webkit Rendering Slide 31 Understanding Webkit Rendering Slide 32 Understanding Webkit Rendering Slide 33 Understanding Webkit Rendering Slide 34 Understanding Webkit Rendering Slide 35 Understanding Webkit Rendering Slide 36 Understanding Webkit Rendering Slide 37 Understanding Webkit Rendering Slide 38 Understanding Webkit Rendering Slide 39 Understanding Webkit Rendering Slide 40 Understanding Webkit Rendering Slide 41 Understanding Webkit Rendering Slide 42 Understanding Webkit Rendering Slide 43 Understanding Webkit Rendering Slide 44 Understanding Webkit Rendering Slide 45 Understanding Webkit Rendering Slide 46 Understanding Webkit Rendering Slide 47 Understanding Webkit Rendering Slide 48 Understanding Webkit Rendering Slide 49 Understanding Webkit Rendering Slide 50 Understanding Webkit Rendering Slide 51 Understanding Webkit Rendering Slide 52 Understanding Webkit Rendering Slide 53 Understanding Webkit Rendering Slide 54 Understanding Webkit Rendering Slide 55 Understanding Webkit Rendering Slide 56 Understanding Webkit Rendering Slide 57 Understanding Webkit Rendering Slide 58 Understanding Webkit Rendering Slide 59 Understanding Webkit Rendering Slide 60 Understanding Webkit Rendering Slide 61 Understanding Webkit Rendering Slide 62 Understanding Webkit Rendering Slide 63 Understanding Webkit Rendering Slide 64 Understanding Webkit Rendering Slide 65 Understanding Webkit Rendering Slide 66 Understanding Webkit Rendering Slide 67 Understanding Webkit Rendering Slide 68 Understanding Webkit Rendering Slide 69 Understanding Webkit Rendering Slide 70 Understanding Webkit Rendering Slide 71 Understanding Webkit Rendering Slide 72 Understanding Webkit Rendering Slide 73 Understanding Webkit Rendering Slide 74 Understanding Webkit Rendering Slide 75 Understanding Webkit Rendering Slide 76 Understanding Webkit Rendering Slide 77 Understanding Webkit Rendering Slide 78 Understanding Webkit Rendering Slide 79 Understanding Webkit Rendering Slide 80 Understanding Webkit Rendering Slide 81 Understanding Webkit Rendering Slide 82
Upcoming SlideShare
Hardware Acceleration in WebKit
Next
Download to read offline and view in fullscreen.

62 Likes

Share

Download to read offline

Understanding Webkit Rendering

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Understanding Webkit Rendering

  1. 1. Understanding WebKit Rendering Ariya Hidayat Sunday, October 7, 12
  2. 2. whoami Sunday, October 7, 12
  3. 3. Sunday, October 7, 12
  4. 4. WebKit Sunday, October 7, 12
  5. 5. WebKit is Everywhere Sunday, October 7, 12
  6. 6. Browser at a High Level User Interface Data Persistence Browser Engine Render Engine Networking JavaScript Graphics I/O Engine Stack Sunday, October 7, 12
  7. 7. WebKit Components Render Engine CSS DOM SVG HTML Canvas WebCore Client Interface JavaScript Engine (JSC/V8) Sunday, October 7, 12
  8. 8. Platform Abstraction Networking Thread Geolocation Timer I/O Client Interface Clipboard Events Theme Graphics API Calls Events Port (Chrome, Safari, etc.) Sunday, October 7, 12
  9. 9. Layout Sunday, October 7, 12
  10. 10. From Contents to Pixels DOM Render Layout HTML DOM HTML Parser Tree Render Paint Tree Style CSS Style Sheets Parser Rules http://www.html5rocks.com/en/tutorials/internals/howbrowserswork Sunday, October 7, 12
  11. 11. DOM Tree <html><body><p>Hello</p></body></html> HTMLDocument HTMLBodyElement HTMLParagraphElement attributes, children, contents Sunday, October 7, 12
  12. 12. HTML Parsing tag <html><body><p>Hello</p></body></html> Loader Tokenizer text DOM Tree May come in chunks Tree Builder Section 12.2 in HTML Specification http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#parsing Sunday, October 7, 12
  13. 13. DOM Tree vs Render Tree HTMLDocument RenderRoot HTMLBodyElement RenderBody HTMLParagraphElement RenderText There is no Render* for display:none Sunday, October 7, 12
  14. 14. “Attach” Process Historical: Node is invisible, attach it to the main view to make it visible View 1:1 many:1 Node/Element RenderObject RenderStyle tree structure/navigation <div>42</div> computed style metrics (box model) hit testing another tree structure Sunday, October 7, 12
  15. 15. Sunday, October 7, 12
  16. 16. It’s a forest! Sunday, October 7, 12
  17. 17. Effects of Style Recalc and Layout document.getElementById('box').style.top = '100px'; Aggregated “dirty” area document.getElementById('box').style.backgroundColor = 'red'; No layout necessary, metrics are not flagged as “changed” Sunday, October 7, 12
  18. 18. Getting the Right Style Stylesheet List HTMLDocument p { color: blue } HTMLBodyElement HTMLParagraphElement DOM Tree RenderStyle CSS Style Selector: id, class, tags, ... Sunday, October 7, 12
  19. 19. Minimizing Layout Element clientHeight focus() clientLeft getBoundingClientRect() clientTop getClientRects() clientWidth scrollByLines() offsetHeight scrollByPages() offsetLeft scrollHeight offsetParent scrollIntoView() offsetTop scrollIntoViewIfNeeded() offsetWidth scrollLeft scrollTop scrollWidth innerText outerText 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 Sunday, October 7, 12
  20. 20. Painting Sunday, October 7, 12
  21. 21. Goals of Painting • “Visualize” all RenderObjects (again, tree traversal) • All painting commands go to GraphicsContext abstraction • Important Optimizations • Clipped to the visible viewport • Back-to-front Transparency & clipping Sunday, October 7, 12
  22. 22. CSS Painting: 10 Stages http://www.w3.org/TR/CSS2/zindex.html Appendix E. Elaborate description of Stacking Contexts • Background • Floats • Foreground • Selection Done by the render objects • Outline (in the render tree) Sunday, October 7, 12
  23. 23. Graphics Abstraction Chromium Android Qt Mac & iOS GraphicsContext Skia CoreGraphics QPainter graphics stack Native controls, RenderTheme e.g. form elements Sunday, October 7, 12
  24. 24. Painting Flow: Browser vs WebKit Browser WebKit User scrolls the viewport Request painting, GraphicsContext Sometimes to the backing store Style change Mark “dirty” area Sunday, October 7, 12
  25. 25. Path is Everything Sunday, October 7, 12
  26. 26. Stroke = Outline Solid Dashed Dotted Textured Sunday, October 7, 12
  27. 27. Brush = Fill None Solid Gradient Textured Sunday, October 7, 12
  28. 28. Gradient = Non-uniform Pixel Values Sunday, October 7, 12
  29. 29. Drawing Time: Solid vs Gradient Only border 14x slower Solid color fill (depending on the dimension) Linear gradient fill Radial gradient fill Sunday, October 7, 12
  30. 30. Path Approximation Curves Polygon Sunday, October 7, 12
  31. 31. Antialiasing Multiple levels of transparency Sunday, October 7, 12
  32. 32. Transformation Scaling Perspective Rotation Sunday, October 7, 12
  33. 33. Text Rasterization Sunday, October 7, 12
  34. 34. Font Atlas Buffer Bye Sunday, October 7, 12
  35. 35. Simple to Complex ell o! H Simple shape Solid color Curves Gradient brush Textured stroke Blur shadow Serif text Rotated Sunday, October 7, 12
  36. 36. Simple to Complex ell o! H Simple shape Solid color Curves Gradient brush Textured stroke Blur shadow Serif text Make it as an image Rotated Sunday, October 7, 12
  37. 37. Hardware Acceleration Sunday, October 7, 12
  38. 38. Game vs Web Sunday, October 7, 12
  39. 39. Game Text Textured objects Animation Transformation Physics Sunday, October 7, 12
  40. 40. Large Area, but Still Bounded Sunday, October 7, 12
  41. 41. Web Page Images Text Sunday, October 7, 12
  42. 42. Challenges Predictable contents (assets) ✔ Mostly text ✔ Mostly images ✔ Initial response immediate Sunday, October 7, 12
  43. 43. SoC = System-on-a-Chip CPU GPU Sunday, October 7, 12
  44. 44. GPU Workflow Matrix Vertices Rendered Textured Sunday, October 7, 12
  45. 45. Optimized for Games “Fixed” geometry Transformation Textured triangles Parallelism Sunday, October 7, 12
  46. 46. Powerful Capabilities http://epicgames.com/technology/ http://www.rage.com/ epic-citadel Sunday, October 7, 12
  47. 47. http://www.trollquotes.org/619-super-spider-bat-troll-quote/ Sunday, October 7, 12
  48. 48. Fundamental Physical Limitations • Memory: Can’t store too much stuff • Speed: Quad-core CPU can do certain operations better • Bandwidth: Data transfer can be the bottleneck Sunday, October 7, 12
  49. 49. Traffic Congestion Sunday, October 7, 12
  50. 50. Efficient Use of GPU Drawing Backing Layer & primitives stores compositing Sunday, October 7, 12
  51. 51. Maps Tile Sunday, October 7, 12
  52. 52. Pinch to Zoom when you pinch... Sunday, October 7, 12
  53. 53. Responsive Interface decoupled Rendering Processor User interaction Sunday, October 7, 12
  54. 54. Rendering vs Interaction Screen Backing Store Rendering Web Page User interaction Sunday, October 7, 12
  55. 55. Checkerboard Pattern Sunday, October 7, 12
  56. 56. Progressive Rendering Fast but blurry Crisp but slow Sunday, October 7, 12
  57. 57. Perceived Responsiveness User pinches Smooth scaled Blocky (but fast!) Sunday, October 7, 12
  58. 58. Tiling System Texture upload .... .... CPU GPU Sunday, October 7, 12
  59. 59. Tile Transformation Panning = Translation Zooming = Scaling Sunday, October 7, 12
  60. 60. Checkerboard Pattern Sunday, October 7, 12
  61. 61. Typical Animation opacity, movement, scaling, rotation, ... Sunday, October 7, 12
  62. 62. Principles of Fluid Animation At the beginning, push as many 1 resources as possible to the GPU 2 During the animation, minimize CPU-GPU interaction Sunday, October 7, 12
  63. 63. Immediate vs Retained At the beginning... draw the shape onto a buffer For every animation tick... blit the buffer at (x, draw the shape at (x, y) y) x = x + 10 x = x + 10 Off main thread Sunday, October 7, 12
  64. 64. Mechanics of Animation “Hey, this is good stuff. Cache it as texture Initialization “Apply [operation] to texture #42.” Animation step Sunday, October 7, 12
  65. 65. Elements = Layer Sunday, October 7, 12
  66. 66. Logical 3-D Sunday, October 7, 12
  67. 67. Compositing By Force -webkit-transform: translateZ(0) Not needed for CSS .someid { -webkit-animation-name: somekeyframeanimation; -webkit-animation-duration: 7s; -webkit-transform: translateZ(0); } Don’t do that Sunday, October 7, 12
  68. 68. Magical Advice Use translate3d for hardware acceleration Sunday, October 7, 12
  69. 69. Magical Advice Use translate3d for hardware acceleration Sunday, October 7, 12
  70. 70. Debugging in Safari defaults write com.apple.Safari IncludeInternalDebugMenu 1 Sunday, October 7, 12
  71. 71. Compositing Indicators Texture (number = upload) Composited layer No associated texture Container layer Overflow Sunday, October 7, 12
  72. 72. Avoid Texture Reupload No reupload Upload Opacity Position Everything else! Size Animation “Hardware accelerated CSS” Sunday, October 7, 12
  73. 73. Examples Sunday, October 7, 12
  74. 74. Color Transition @-webkit-keyframes box { 0% { -webkit-transform: background-color: blue; } 100% { -webkit-transform: background-color: green; } } Need a new texture uploaded to the GPU for every in-between color Sunday, October 7, 12
  75. 75. Color Transition: The Trick Blended with http://jsfiddle.net/79AVn Sunday, October 7, 12
  76. 76. Prepare and Reuse Hide the layer offscreen Viewport Sunday, October 7, 12
  77. 77. Timer Latency Depending on user Animation end triggers the JavaScript callback JavaScript code kicks the next animation Prepare both animation and hide the “wrong” one Sunday, October 7, 12
  78. 78. Avoid Overcapacity .... .... Think of the GPU memory like a cache. Sunday, October 7, 12
  79. 79. Conclusion Sunday, October 7, 12
  80. 80. Rendering Aspects Sunday, October 7, 12
  81. 81. There is No Silver Bullet Sunday, October 7, 12
  82. 82. Thank You ariya.hidayat@gmail.com ariya.ofilabs.com @AriyaHidayat Sunday, October 7, 12
  • AzharKhan152

    Aug. 10, 2019
  • ChangChengSheng

    Feb. 3, 2019
  • yumios

    Jul. 28, 2018
  • GoichiHirakawa

    Aug. 26, 2017
  • imvic999

    Jul. 7, 2017
  • gexiang

    Mar. 19, 2017
  • MikeTsukerman

    Jan. 26, 2017
  • KaiChen5

    Nov. 14, 2016
  • KarthikMarimuthu1

    Oct. 10, 2016
  • UyeongJu

    Sep. 28, 2016
  • enzuguri

    Feb. 17, 2016
  • ah2dius

    Dec. 23, 2015
  • t1mer

    Sep. 13, 2015
  • DelianDelchev

    Aug. 25, 2015
  • goddy128

    Aug. 17, 2015
  • DawsonBotsford

    Aug. 13, 2015
  • kelingm

    Jul. 19, 2015
  • technosprout

    Jun. 28, 2015
  • MateBrki

    Jun. 25, 2015
  • qiangyee

    May. 19, 2015

Views

Total views

31,737

On Slideshare

0

From embeds

0

Number of embeds

318

Actions

Downloads

799

Shares

0

Comments

0

Likes

62

×