Web Platform Team

html.adobe.com/webplatform

Mandate

Make the web awesome

(makethewebawesome.com)

From

to

Paint the Pixels

How do the pixels render?

Adding/removing elements

How to minimize Layout?

Move content away from the flow.

Use only on the element with least children.

Apply layout changes on requestAnimationFrame

requestAnimationFrame

60fps

Rendering without the lumpy bits

new frame every 16.67ms

setInterval, setTimeout Drops frames if not synched to Browser refresh rate

Batch reading/writing layout values

Demo - Fixed

Paints

Browser changes the pixel values of an area of the viewport

Two kinds of painting

• Paint an element.
• Combine overlapping elements to present a flat image in the viewport.

When does it happen?

• Scrolling
• Hover
• Basically all the time

Typical Painting Experience

Stacking contexts create RenderLayer Objects

Traditional Stacking Contexts

• Root Object (html)
• z-index-ed, positioned elements.
• opacity < 1
• overflow is set

Create Render Layers

Each Stacking context creates a Render Layer

CPU paints to ONE Bitmap

What happens to painting when GPU is involved?

New Stacking Contexts

• Transforms
• Blend Modes
• Filters

• Many bitmaps not just ONE.
• Most bitmaps rendered directly by GPU.
• Browser determines which render layers go into which bitmap.

How does the browser decide which bitmaps are painted by GPU?

• Intense painting occurs: e.g. video, WebGL or canvas
• 3D Transformed elements
• Animated filters, masks, blend modes, reflections, opacity
• position: fixed
• content overlapping existing GPU-rendered bitmaps

How can you find out how many GPU-renderd bitmaps?

Demo

GPU!!

Like CPU but optimized for processing large blocks of data in parallel.

• No Repaints, relayouts.
• If area is large, tiled textures to swap in and out textures quickly.
• Larger power consumption (vs. not using the features).

Flicker happens

• GPU scrambles to swap new textures into tiles as you scroll.
• Browser is switching from CPU rendering to a GPU rendering (Demo)

GPU reduces burden on CPU, but

• Limited by Memory
• Limited by CPU/GPU bandwidth for communication

Memory

• All data & GPU textures are stored.
• Android & iOS can force quit browser or webview to free memory (unlike Desktop).
• More apps open, smaller the size of memory available to your page.

Reduce Memory Usage

• Smaller images (dimensions of image * 4 bytes)
• Smaller JavaScript files/CSS files
• Smaller/Fewer textures to GPU
• Fewer GPU layers

Reduce CPU/GPU Communication

Animate only

• Opacity
• Transform
• Filters
• Blend Modes

Demo

Others

• Don't animate z-index
• Try not to animate non-hardware-accelerated properties on GPU-accelerated content.
• Use Opacity to toggle visibility of GPU-accelerated content

Why Opacity?

• Textures remain in the GPU.
• visibility:hidden removes textures from GPU.
• display: none causes repaints.
• removing elements from DOM causes style recalculations, layout, repaint, firing of events.

In Summary

• Rendering is a beast.
• Do layout, repaint, GPU acceleration sparingly.
• Memory can quickly get out of hand!
• Reduce CPU/GPU communication
• Use Browser developer tools to test!

Thanks!

Special thanks to the team @adobeweb for all these insights.