jQuery is so easy to use that sometimes we just forget that it’s not
CSS. While using CSS, we don’t have to give much thought to performance,
because it’s so fast that it’s not worth the effort to optimize it. But
when it comes to the real world, jQuery can drive developers crazy with
performance issues. Sometimes you lose precious milliseconds without
even noticing it. Also, it’s so easy to forget about some functions and
we keep using the old (and not-so-good) ones.
Let’s take a look at a few of the most-common-and-easiest-to-fix
mistakes while using jQuery in your projects.
You aren’t using the latest jQuery version
Each version update means higher performance and several bug fixes. The
current stable release is 1.7.2, and I’m pretty sure you know about
plenty of sites developed using 1.6 and below. Ok, ok, you can’t just
update every old site for every jQuery update (unless your client is
paying you to do so) but you should at least start using it for your new
projects. So, forget about this local copy and just grab the latest
release every time you start a new project.
You aren’t using a CDN-hosted copy of jQuery
How many unique visitors you`ve got last month? I bet the number is
still under 1 billion, right?
So you’d better use Google’s copy of jQuery instead of yours. If your
user still has the cached file of Google’s website (or from many other
sites that uses its CDN) his browser will just get the cached version,
improving a lot your website’s performance. You can use it by copying &
pasting this HTML:
parallax.js reacts to the orientation of your smart device, offsetting
layers depending on their depth within a scene… Oh, you don’t have a
smart device? No worries, if no gyroscope or motion detection hardware
is available, parallax.js uses the position of your cursor instead.
The jQuery 3D Parallax Plugin magically animates your objects in a
dynamic created 3D world. For those of you who don’t know what Parallax
is, the best way to describe it is the way objects in the background
tend to move less than objects closer to the viewer, the most front
objects also transform themselves to the viewer’s point of view. Here’s
a wiki link for something more indepth.
- You aren’t using a fallback for CDN version
I know I said Google is awesome and stuff, but they can fail. So, every
time you rely upon external sources, make sure you have a local
fallback. I’ve seen this snippet in the HTML5 boilerplate source code
and just found it amazing. You should use it too:
Actually, skrollr is much more than “just” parallax scrolling. It’s a
full-fledged scrolling animation library. In fact, you can use it and
still have no parallax scrolling at all. But I wanted to sound hip and
use some buzz-words. By the way, skrollr leverages HTML5 and CSS3.
<script>window.jQuery || document.write(‘<script
All animations are done using CSS3 transformations whenever possible and
fall back to normal CSS positioning when necessary.
- You aren’t chaining stuff
While doing common operations, you don’t need to call the element every
time you want to manipulate it. If you’re doing several manipulations in
a row, use chaining, so jQuery won’t need to get the element twice.
Clearly, Superscrollorama is amazing. Superscrollorama is a controller
for animation. You add tweens and timelines to it, targeting when an
element appears in the viewport or at a specific scroll point.
Instead of this:
jParallax turns nodes into absolutely positioned layers that move in
response to the mouse. Depending on their dimensions these layers move
at different rates, in a parallaxy kind of way.
After doing the parallaxing illustrations for GitHub‘s 404 and 500
pages, he decided it might be fun to put together some kind of jQuery
plugin to make it easier to do parallax stuff in the future.
Stellar.js is a jQuery plugin that provides parallax scrolling effects
to any scrolling element.
Takes advantage of CSS3 3D transforms to create a real parallax effect.
Responds to mouse movement. Device motion will be supported soon.