sven
3/22/2016 - 4:57 PM

Notes on frontend performance

Notes on frontend performance

README.md
content_copyfile_download
  • Rendered
  • Source

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

Check for JavaScript

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

Testing/Demo