Creating Web Experiences with users in mind
@divya • Product Manager, Adobe
The Web Experience
![](https://s3.amazonaws.com/nimbublips/blackbox.svg)
Our View of the Web Experience
![](https://s3.amazonaws.com/nimbublips/blackbox-dev.svg)
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?
Fetching of layout values/scroll values Demo - Fixed
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.
Apply layout changes on requestAnimationFrame
requestAnimationFrame
Minimize Style Changes
Avoid
- Sibling selectors
- Generic Selectors
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
![](https://lh5.googleusercontent.com/mTQIYRturbWjgHKL2dRFEKPLXQd479b5X9kK5u_udyfr9WT8nR3gNdWm803v-OFL9gACxyZ8s4M2JwjtLk0jqLEpl9JV5X_PUID19QNPpSvrWEmdULg)
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!!
![](http://images2.fanpop.com/image/photos/14200000/CS-source-wallpaper-counter-strike-14231626-1024-768.jpg)
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
Use a spacebar or arrow keys to navigate