This is the second part of the article.Read the first part here.
I know I listen to myself like a spoiler, but don't we all want a more performant website?A popular toy are timers and we should reduce their use (if not avoid).Timer awaken the CPU.JavaScript Timer prove to be a good starting point for us developers to start optimizing.
We all love it when it flashes and glitters!But even more often is at this point.Continuously animated content, such as animated GIFs and automatically playing videos, continuously (often unnecessary) electricity draw (often unnecessary).The small spinner gif continuously triggers painting in the browser, even if we cannot see it.
If we need animations, we should use declarative animations (CSS animations and transitions) if possible.The browser can optimize this if the animated element is not visible, and they are more efficient than script -controlled animations.However, CSS animations are also more limited than their great JavaScript counterparts.
If possible, we should avoid encouraging properties that trigger the layout or paint events.However, this means limiting the animations to opacity or transform [1] - the browser can optimize both to a large extent [2].
When it comes to the sustainability of a website, you are welcome to practice or do without.Construct the opulent animation of a little reduced declarative with CSS.
.Box { / * connect animation * / animation name: boxing lider;/ * Set duration */ animation causing: 1300ms;/ * Repetition rate */ Animation-Orthrayal Count: Infinite;/*...A back and forth */ animation Direction: Alternate;} @Keyframes boxing lider {0% {transform: translate (0, 0);OPACITY: 0.3;} 25% {opacity: 0.9;} 50% {transform: translate (100px, 100px);OPACITY: 0.2;} 100% {transform: translate (30px, 30px);OPACITY: 0.8th;}}
We should also avoid popular polling when it comes to getting regular updates from a server.We are in 2020 and are allowed to use technologies such as webockets, server-senent events or fetch with a permanent connection [3]!A website that is continuously working, even if it should be idle, also reacts less to user interactions.Minimizing background activity improves reaction ability and at the same time the battery life-Win-Win [4]!
