Creating Web Experiences with users in mind
@divya • Product Manager, Adobe
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?
Fetching of layout values/scroll values Demo - Fixed
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.
Apply layout changes on
Minimize Style Changes
- Sibling selectors
- Generic Selectors
Browser changes the pixel values of an area of the viewport
When does it happen?
- Basically all the time
Typical Painting Experience
Go through Stacking contexts
- Root Object (html)
- 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
- content overlapping existing GPU-rendered bitmaps
How can you find out how many bitmaps?
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)
- 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)
- 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 textures to GPU
- Fewer GPU layers
Reduce CPU/GPU switching
- Do animation only in GPU Demo
- Don't animate
- Use Opacity to toggle visibility of GPU-accelerated content
- 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.
- 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
Use a spacebar or arrow keys to navigate