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. WebKit Components
Render Engine
CSS
DOM SVG
HTML Canvas
WebCore
Client Interface JavaScript Engine (JSC/V8)
Sunday, October 7, 12
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
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. DOM Tree
<html><body><p>Hello</p></body></html>
HTMLDocument
HTMLBodyElement
HTMLParagraphElement attributes, children, contents
Sunday, October 7, 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. DOM Tree vs Render Tree
HTMLDocument RenderRoot
HTMLBodyElement RenderBody
HTMLParagraphElement RenderText
There is no Render* for display:none
Sunday, October 7, 12
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
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. 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
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. 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. 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. 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
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
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. 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
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
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. 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. Mechanics of Animation
“Hey, this is good stuff. Cache it as texture
Initialization
“Apply [operation] to texture #42.”
Animation step
Sunday, October 7, 12
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. Magical Advice
Use translate3d for
hardware acceleration
Sunday, October 7, 12
69. Magical Advice
Use translate3d for
hardware acceleration
Sunday, October 7, 12
70. Debugging in Safari
defaults write com.apple.Safari IncludeInternalDebugMenu 1
Sunday, October 7, 12
71. Compositing Indicators
Texture (number = upload)
Composited layer
No associated texture
Container layer
Overflow
Sunday, October 7, 12
72. Avoid Texture Reupload
No reupload Upload
Opacity
Position Everything else!
Size
Animation
“Hardware accelerated CSS”
Sunday, October 7, 12
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. Color Transition: The Trick
Blended with
http://jsfiddle.net/79AVn
Sunday, October 7, 12
76. Prepare and Reuse
Hide the layer
offscreen
Viewport
Sunday, October 7, 12
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. Avoid Overcapacity
.... ....
Think of the GPU memory like a cache.
Sunday, October 7, 12
