Understanding Webkit Rendering

Understanding WebKit Rendering

Ariya Hidayat

Sunday, October 7, 12

whoami


WebKit


WebKit is Everywhere


Browser at a High Level

User Interface

Browser Engine

Graphics Stack

Data Persistence

Render Engine

JavaScript Engine

Networking I/O


WebKit Components

Render Engine

WebCore

JavaScript Engine (JSC/V8)Client Interface

HTML

DOMCSS

SVG

Canvas


Platform Abstraction

Client Interface

Networking I/O

GraphicsThemeEventsClipboard

Thread Geolocation Timer

API CallsEvents

Port(Chrome, Safari, etc.)


Layout


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




http://livepage.apple.com/


DOM Tree

<html><body><p>Hello</p></body></html>

HTMLDocument

HTMLBodyElement

HTMLParagraphElement attributes, children, contents


HTML Parsing

TokenizerLoader

Tree BuilderMay come in chunks

Section 12.2 in HTML Specification

http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#parsing

DOM Tree

<html><body><p>Hello</p></body></html>

tag

text






DOM Tree vs Render Tree

HTMLDocument

HTMLBodyElement

HTMLParagraphElement

RenderRoot

RenderBody

RenderText

There is no Render* for display:none


“Attach” Process

Historical: Node is invisible, attach it to the main view to make it visible

<div>42</div>

View

RenderObject RenderStyletree structure/navigation

metrics (box model)hit testing

computed style

Node/Element1:1 many:1

another tree structure


It’s a forest!


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”


Getting the Right Style

HTMLDocumentHTMLBodyElement

HTMLParagraphElement

DOM Tree

p { color: blue }

Stylesheet List

RenderStyle

CSS Style Selector: id, class, tags, ...


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

clientHeightclientLeftclientTopclientWidthoffsetHeightoffsetLeftoffsetParentoffsetTopoffsetWidthscrollLeftscrollTopscrollWidthinnerTextouterText

Element

focus()getBoundingClientRect()getClientRects()scrollByLines()scrollByPages()scrollHeightscrollIntoView()scrollIntoViewIfNeeded()










Painting


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


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)






Graphics Abstraction

Mac & iOSChromium

Android Qt

CoreGraphics

Skia

QPainter

graphics stack

GraphicsContext

RenderThemeNative controls,e.g. form elements


Painting Flow: Browser vs WebKit

WebKitBrowser

Request painting, GraphicsContext

User scrollsthe viewport

Style change

Mark “dirty” area

Sometimes to the backing store


Path is Everything


Stroke = Outline

Solid Dashed Dotted Textured


Brush = Fill

SolidNone Gradient Textured


Gradient = Non-uniform Pixel Values


Drawing Time: Solid vs Gradient

Only border

Solid color fill

Linear gradient fill

Radial gradient fill

14x slower(depending on the dimension)


Path Approximation

Curves

Polygon


Antialiasing

Multiple levels of transparency


Transformation

Scaling

RotationPerspective


Text Rasterization


Font Atlas

Bye

Buffer


Simple to Complex

Hello!

Simple shapeSolid color Curves

Gradient brushTextured stroke

Blur shadowSerif textRotated


Simple to Complex

Hello!

Simple shapeSolid color Curves

Gradient brushTextured stroke

Blur shadowSerif textRotatedMake it as an image


Hardware Acceleration


Game vs Web


Game

Animation

Physics

Textured objects

Text

Transformation


Large Area, but Still Bounded


Web Page

Images

Text


Challenges

Predictable contents (assets) ✔Mostly text ✔Mostly images ✔

immediateInitial response


SoC = System-on-a-Chip

CPU GPU


GPU Workflow

Vertices

Matrix

Rendered Textured


Optimized for Games

Transformation

Textured triangles

“Fixed” geometry

Parallelism


Powerful Capabilities

http://epicgames.com/technology/epic-citadel

http://www.rage.com/








http://www.trollquotes.org/619-super-spider-bat-troll-quote/Sunday, October 7, 12

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


Traffic Congestion


Efficient Use of GPU

Drawing primitives

Backing stores

Layer & compositing


Maps

Tile


Pinch to Zoom

when you pinch...


Responsive Interface

Processor

Rendering

User interaction

decoupled


Rendering vs Interaction

Web Page

Backing StoreScreen

Rendering

User interaction


Checkerboard Pattern


Progressive Rendering

Crisp but slow

Fast but blurry


Perceived Responsiveness

User pinches

Smooth scaled

Blocky (but fast!)


Tiling System

CPU GPU

........

Texture upload


Tile Transformation

Panning = Translation Zooming = Scaling


Checkerboard Pattern


Typical Animation

opacity, movement, scaling, rotation, ...


Principles of Fluid Animation

At the beginning, push as many resources as possible to the GPU

During the animation, minimize CPU-GPU interaction

1

2


Immediate vs Retained

draw the shape at (x, y)x = x + 10

blit the buffer at (x, y)

x = x + 10

For every animation tick...

At the beginning...

draw the shape onto a buffer

Off main thread


Mechanics of Animation

Initialization

Animation step

“Hey, this is good stuff. Cache it as texture

“Apply [operation] to texture #42.”


Elements = Layer


Logical 3-D


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


Magical AdviceUse translate3d for

hardware acceleration


Debugging in Safari

defaults write com.apple.Safari IncludeInternalDebugMenu 1


Compositing Indicators

Composited layer

Container layer

No associated texture

Overflow

Texture (number = upload)


Avoid Texture Reupload

No reupload Upload

OpacityPosition

SizeAnimation

Everything else!

“Hardware accelerated CSS”


Examples


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


Color Transition: The Trick

Blended with

http://jsfiddle.net/79AVnSunday, October 7, 12

Prepare and Reuse

Viewport

Hide the layer offscreen


Timer Latency

Depending on user

Animation end triggers the JavaScript callbackJavaScript code kicks the next animation

Prepare both animation and hide the

“wrong” one


Avoid Overcapacity

........

Think of the GPU memory like a cache.


Conclusion


Rendering Aspects


There is No Silver Bullet


Thank You

[email protected]

@AriyaHidayat

ariya.ofilabs.com


Understanding Webkit Rendering

Technology

Transcript of Understanding Webkit Rendering