Notes on frontend performance

README.md

Frontend Performance

Notes & tips

• 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

Recording tips

• Keep recordings as short as possible
• Avoid unnecessary actions (like clicks,...)
• Disable the browser cache
• Disable all browser extensions (or use incognito mode)

Developer tools

Chrome

• Tab: Timeline
• Tab Preferences: More tools » Rendering settings » Enable paint flashing
• Tab Preferences: More tools » Rendering settings » Show FPS meter

Firefox

• Tab: Performance

Open Firefox ProfileManager

/Applications/Firefox.app/Contents/MacOS/firefox-bin -ProfileManager

Firefox screenshot command

Taking screenshots: screenshot --fullpage

Further reading

• Firefox CSS rendering
• Firefox waterfall colors

Check for JavaScript

<script type="text/javascript">
  document.documentElement.className = 'js';
</script>

Testing/Demo

• Margin vs. Transform