In their presentation at the Google Chrome Dev Summit in Mountain View CA, Tom Wiltzius and Nat Duca talked about the basics of Web page rendering and how you can make jank-free experiences. Here are my notes from their talk:
- Screens run at 60hz. 16ms is the time you have to render on screen in order to make things seem smooth to users.
- Work with the browser as much as possible. Use CSS for animations instead of Javascript.
- If you have good load times, engagement goes up. Responsive, smooth experiences are also critical to good user experiences -especially on mobile devices. Slow, laggy experiences are a "tell" of Web apps vs. native apps.
- From Javascript to the screen, there are a few pipeline stages first it has to be styled then laid out, painted, and composited.
- Timeline view in Chrome Dev Tools shows you where time is eaten up in janky interactions on you site.
- CSS will let you animate what you want but not all properties are created equally. Compositing is easy and cheap on the GPU so properties like opacity are fast. Width changes instead are slow because they rely on paints and paints are slow.
- There is a lot of unpredictability in how long things take to paint.
- A paint storm is painting over and over again, and thereby repeating the same cost.
- Look at your paint-rects early on before you get to a complex DOM structure.
- Keeping all your paints in layers makes things faster and smoother. Decompose the structure of your page into layers of things that move together, stretch together, etc. GPUs are really good at bulk pixel changes.
- We can't always make layers automatically. There are some fundamental parts that browsers can't do on their own.
- Layers aren't free. Hide layers if the user doesn't need them.
- If your drag something with your finger, you want it to respond instantly and stick to a finger. This is currently a hard problem on the Web.
- If you hit the fast scroll path, things will work. Make sure the layers you expected to create were and are working as intended. This means no repainting during scrolling. Layers are good but are hard to persuade to exist. High DPI vs. Low DPI matters.
- If you want to create low latency when Javascript is involved, you have to keep everything under 7ms on mobile. This is usually not an issue on desktops and laptops that are more capable.
- Be judicious about where you install touch listeners. Don't use document listeners. Use Element listeners. You might be preventing scrolling.
- If you are listening to touchend, also listen to touchcancel.
- Mousewheel listeners have a lot of the same problems as touchlisteners.
- Android WebViews had good reasons to disable hardware acceleration. In the Chrome WebView, you may not want to do this.
- The are differences between Chrome and the Chrome WebView in Android. The WebView paints the entire DOM, watch the size of it. UI threads need to be kept free from each other. They use the same threads.