Don’t use jQuery .data() for Animated Properties
While working on a recent Javascript/CSS3 web animation, I decided to experiment with several ways of storing the properties that were being updated on several dozen objects 60 times a second (position, rotation, and scale on the x, y, and z).
Because I was using jQuery in the animation, I decided to first try using jQuery’s .data() utility, which allows you to attach custom data to any jQuery object, by doing something like the following $('.item').data('rotation-x', 30);
Next, I tried creating each animated item as a Javascript object, and storing the values in the object itself, such as item.rotation = {x: 30, y: 45, z: 90}
To more accurately test the performance difference between these two approaches, I used jsPerf, a fantastic Javascript performance-testing website.
The results were pretty staggering. Storing and updating the animated properties through a Javascript Object is literally 100% faster than updating them using jQuery .data(), performing more than 100 million operations/second versus less than 100 thousand.
In fact, the difference is so great that you can’t even visually represent it on a bar chart. And it shows in the actual animation as well. Most experienced Javascript developers probably won’t be surprised by this, but beginners may find this helpful. I, for one, won’t be using .data() anymore when performance is at all critical.