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?


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


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



Rendering without the lumpy bits

new frame every 16.67ms

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

Minimize Style Changes




Browser changes the pixel values of an area of the viewport

When does it happen?

Typical Painting Experience

Go through Stacking contexts

Create Render Layers

Paint to ONE Bitmap

What happens to painting when Hardware-Acceleration is Enabled?

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

How can you find out how many bitmaps?



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

Flicker happens

GPU reduces burden on CPU


Reduce Memory Usage

Reduce CPU/GPU switching

Why Opacity?

In Summary

Thanks to @achicu for technical review


@adobeweb for work my team does

Use a spacebar or arrow keys to navigate