By Christian Heilmann CHAPTER 3(hidden in a $() selector chained to a method) to access elements in the
document to change their look and feel. In a lot of cases, that is just not
needed. You could use event handling instead, or condition checking in
JavaScript and add a class to the body or the parent element of what you
want to change and let CSS do the rest. It’s something the browser does on
reflows and rendering anyway, so why not piggyback on that?
If you check what you need to achieve before getting excited about the
simplicity of chaining and selecting elements in JavaScript, you will find
that most of what you need to do now involves adding and removing class-
es, and loading content. JavaScript is good for on-the-fly changes triggered
by interaction; CSS is great for making the changes appear.
Browser makers do a great job of allowing us, in developer tools, to tap
into the rendering by the browser and see what happens.
A requestAnimationFrame() lets you change things and only display
them when the result can end up onscreen. Furthermore, when the browser
tab your script runs in is inactive (when the user is in another tab or win-
dow), the animation doesn’t run, thereby not wasting computation time and
shortening battery life. In contrast, a setTimeout() hopes that the browser
is ready to draw and runs whether the user is viewing your animation or
not.
Animations and transitions in CSS are hardware-accelerated; JavaScript
animations are not. So are transformations in CSS, which means that a
transform: translate(x,y) beats a position: absolute; top: x ; left: y ;
when it comes to performance.
I urge anyone working on the Web to keep up to date with brows-
er technology and standards support. Only when developers use what
browsers offer can we make the Web better. If functionality defined in the
standards is not used, browser makers are less inclined to support it. Why
support input type="range" when most developers use a div and a jQuery
plugin to turn it into a slider? You probably won’t have the time to con-
stantly update your code, so be lazy about this — use what is fit for the job
and enhance as needed with JavaScript. We can only resolve the chicken