Great performance
JavaScript and jQuery are falsely conflated. JavaScript animation is fast. jQuery slows it
down. Despite jQuery being tremendously powerful, it wasn’t designed to be a high-
performance animation engine. It has no mechanism to avoid “layout thrashing,” in which
a browser becomes overtasked with layout processing work while it’s in the process of
animating.
Further, because jQuery’s code base serves many purposes beyond animation, its
memory consumption triggers garbage collections within the browser, causing animations
to stutter unpredictably. Lastly, due to decisions made by the jQuery team in the noble
pursuit of helping novice users avoid sabotaging their UI with bad code, jQuery forgoes
the recommended practice of using the requestAnimationFrame function, which
browsers make available to drastically improve frame rates for web animation.
JavaScript animation libraries that bypass jQuery entirely deliver fantastic performance
by streamlining their interaction with a page. One library of note, which we’ll be using
throughout this book, is Velocity.js. It’s lightweight, yet incredibly feature rich, and it
mirrors jQuery’s animation syntax to help eliminate the learning curve.
This is a topic we’ll explore in-depth in Chapter 7, “Animation Performance.” By
learning the nuances of browser rendering performance, you’ll gain a foundation on which
to build reliable animations for all browsers and devices, regardless of their individual
processing power.