- Reflow (Mozilla) = Layout (Webkit)
- Loading: Layout > Paint > Composition
- Composition is on GPU like translate > skips layout and paint loading cycle
- Aim for 60 FPS
- Only change properties that trigger compositing rather than layout or paint
- Use requestAnimationFrame
- Batch edit CSS via JS: all changes at once or change CSS class name
- Change CSS class name instead of single attributes
- Hide elements with
display: none
, make changes, display again to skip layout and repaint - Use transform + opacity to skip layout and repaint
- Shadow and blur is bad for scroll performance
- Keep recordings as short as possible
- Avoid unnecessary actions (like clicks,...)
- Disable the browser cache
- Disable all browser extensions (or use incognito mode)
- Tab: Timeline
- Tab Preferences: More tools » Rendering settings » Enable paint flashing
- Tab Preferences: More tools » Rendering settings » Show FPS meter
- Tab: Performance
/Applications/Firefox.app/Contents/MacOS/firefox-bin -ProfileManager
Taking screenshots: screenshot --fullpage
<script type="text/javascript">
document.documentElement.className = 'js';
</script>