Creating Web Experiences with users in mind

@divya • Product Manager, Adobe

HTML5 Please / HTML5 Boilerplate

The Web Experience

Our View of the Web Experience

Creating inferior experience

"Why does the page flicker?"

"Why is my page so slow when scrolling?"

Leads to Superstitions

" Use `translate3d(0, 0, 0)` to make your scrolling/animations faster "

"Use longer decimal units to make browsers be more accurate about % values"

What is a browser?

How do the pixels render?

Layout/Reflow

Calculation of information required to display visible DOM nodes.

When does it happen?

Style changes

Fetching of layout values/scroll values Demo - Fixed

Adding/removing elements

How to detect Layout/Reflow

Demo

Avoid it like a plague

How to minimize Layout?

Move content away from the flow.

Use only on the element with least children.

Batch reading/writing layout values

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

Minimize Style Changes

Avoid

Sibling selectors
Generic Selectors

Use

Specific classes

Paints

Browser changes the pixel values of an area of the viewport

When does it happen?

Scrolling
Hover
Basically all the time

Typical Painting Experience

Go through Stacking contexts

Root Object (html)
transform, position: relative, position: absolute
opacity < 1
CSS Filter
overflow is set

Create Render Layers

Each Stacking context creates a Render Layer
WebGL, Video or accelerated canvas has own Render Layer

Paint to ONE Bitmap

What happens to painting when Hardware-Acceleration is Enabled?

Many bitmaps not just ONE (hardware-accelerated bitmaps have a 'backing store')
HW-accelerated bitmaps are directly rendered by GPU
Browser determines which render layers go into which bitmap

How does the browser decide which bitmaps are HW-accelerated?

Intense painting occurs: e.g. video, WebGL or canvas
3D Transformed elements
Filters, masks, reflections, opacity, transitions, animations
position: fixed
content overlapping existing GPU-rendered bitmaps

How can you find out how many 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

GPU reduces burden on CPU

Limited by Memory
Each backing store (what?) uses dimension of texture * 4 bytes (minimum)

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 textures to GPU
Fewer GPU layers

Reduce CPU/GPU switching

Do animation only in GPU Demo
Don't animate z-index
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
Use specific class names
Do layout, repaint, GPU acceleration sparingly
Memory can quickly get out of hand!
Use Browser developer tools to test!

Thanks to @achicu for technical review

Follow

@adobeweb for work my team does