the jankness panthom menace
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!
...bad ass developers...
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...
- the dark side -
Jank is a distruption in a consistent frame rate that manifest itself visually.
- keep in mind -
Jank is a design problem.
A memory leak is just a coding problem.
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.
- the dark side: jank -
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.
- the dark side: leaks -
Your page is bloated when you’re using more memory than necessary for optimal page speed.
- jedi mindtricks -
100% faster paint time.
We shouldn't confuse positioning with motion. Moving elements with translate is better than position top/left.
Stay on time. Everytime.
The browser can optimize concurrent animations together into a single reflow and repaint cycle, leading to higher fidelity animation.
A computer has 16.7ms for logic processing, computing then rendering.
On mobile those ops are 6x slower.
We should test on low-end hardware, and make sure to get a good frame rate here.
Which side are you on?