Jay Taylor's notes

back to listing index

Page load performance (Notes from "Device Agnostic Development")

[web search]
Original source unknown
Clipped on: 2013-05-17
- Don't do in an imperative way (JS) what you can do in a declarative way (CSS)
- Avoid browser layout operations http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html 
- Avoid Jank, use Canary to profile pages (https://www.google.com/intl/en/chrome/browser/canary.html) render recalculations
- Render time must be under 16ms to avoid Jank
- position: fixed is your friend
- upcoming: position: sticky
- Keep event listeners to a minimum
- Reduce the paint cost: keep to a minimum (dev tools -> show paint rectangles)
    - Reduce size of paint areas
    - Reduce the complexity of your paints
          - dev tools -> "Enable constant frame repainting"
          - Note: Styles have a certain cost

Set limits upfront (number of reqs, GCs, paint time, layout, style calculations)


Also watch: Jank Free: Chrome Rendering Performance