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

Use

Paints

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?

Demo

GPU!!

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

Flicker happens

GPU reduces burden on CPU

Memory

Reduce Memory Usage

Reduce CPU/GPU switching

Why Opacity?

In Summary

Thanks to @achicu for technical review

Follow

@adobeweb for work my team does

Use a spacebar or arrow keys to navigate