a long long time ago in a galaxy far away...

...web was different...

...code was different...

...coders where different...

Nowadays...web is cooler!

...and coders...are cool also!

ninjas..

...evangelists...

...code cowboys...

...architects...

...bad ass developers...

...rock stars...

Bullshits.

There will be only jedis and siths.



So what's the jedi developer's role in nowadays scenario?



...fight against imperial army of jank...



...writing performant code, avoiding memory leaks...



#perfmatters



Jank is a distruption in a consistent frame rate that manifest itself visually.

what causes jank?



  • Doing things inside event handlers
  • Doing stuff inside scroll
  • Large, complex CSS Declarations
  • JS animations
  • SetTimeouts()
  • Heavy styles
  • Paints and repaints
  • Memory leaks

what causes a memory leak?



  • Uncollected garbage

Jank is a design problem.


A memory leak is just a coding problem.

paints & repaints



A paint occurs when DOM has to render a new object traversing the tree before displaying it on the screen.


A repaint occurs when the screen gets updated due to changes in the page.

js animations



There are no lightweight-js animations. Most of what happens in a tab happens on one thread. But we can run some things even when JS is busy. Like CSS animation.

Your page is bloated when you’re using more memory than necessary for optimal page speed.



#perfmatters

heavy styles




light styles




100% faster paint time.

positioning vs motion



We shouldn't confuse positioning with motion. Moving elements with translate is better than position top/left.

set timeouts



Stay on time. Everytime.




requestAnimationFrame()



The browser can optimize concurrent animations together into a single reflow and repaint cycle, leading to higher fidelity animation.

paint diagnostic


leak diagnostic




A real case study




mobile first


A computer has 16.7ms for logic processing, computing then rendering.


On mobile those ops are 6x slower.

So what?


We should test on low-end hardware, and make sure to get a good frame rate here.

Which side are you on?