• notes from Free Udacity Course Browser Rendering

• App Lifecycles

R.A.I.L

Response, Animations, Idle, Load.

But that's not in chronological order... Liar.

• Load: Critical Rendering Path, rendering response (max 1s)

  • GatsbyJS does this very effectively!

• Idle: Wait for user response, or things deferred below the fold (max 50ms)

  • lazy loading images/videos/assets
  • other assets comments...
  • ...(max 50ms) as user Response delay can + to this.

• Response: UI/UX (max:100ms)

  • checkbox
  • tap button
  • ...animations

• Animation: (16ms - (4ms))

  • minus browser overhead (4ms)

Strategy - F.L.I.P

First.Last.Invert.Play

• Theory: Once the browser has run the animation once, we can run it backwards at very little cost. Pre-calculate the expensive work.

L.I.A.R

Chronological order of app lifecycle. Load, Idle, Animation, Response