Sometimes, it’s only a simple tweak of its scripting that is required to put your site into the fast lane. with this in mind, the following easy-to-use techniques will help speed up the overall loading and execution times of your website’s jQuery code:
Always use the latest version of jQuery. The jQuery framework is actively under development and subject to incremental updates that should be taken advantage of. This requires your site to load the latest version, which depending upon how you do it, may require a periodic updating of your site’s HTML files to insert the latest jQuery version number into these page’s coding.
There are many other ways to speed up jQuery, but these tips will get you started.
A couple of factors come into play: first, if you offload jQuery loading to Google’s CDN, then load times may be dramatically quickened, especially for visitors with a cached version already on their system. Take it a step further than a <script> call, i.e.:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Use google.load() to call all of your libraries instead. This will allow you to use a truncated version of the call, i.e.,
google.load("jqueryui", "1");, to load the most recent version in a library’s branch. Sure, you’ll eventually need to change that 1 to a 2, but such updates will be few and far between.
Developers can learn more at https://code.google.com/apis/libraries/devguide.html.
one side note: sometimes other scripts that you are using may be broken by an update of jQuery — leading some webmasters to run legacy versions of the framework — preventing them from enjoying the latest security and performance benefits that it offers.
Use $(this) whenever you can and group your selectors. Many jQuery uses require DoM traversal in search of a specific element. when using a selector, the element is stored and available for use within the same function via $(this) — offering a resource- saving option that minimizes repeated DoM traversals.
Take for example the following two snippets which perform identical functions:
$("#enter, #enterpic").click(function () {$("#enter, #enterpic").addClass("visibility: hidden");});
And,
$("#enter, #enterpic").click(function () {$(this).addClass("visibility: hidden");});
In the first snippet, the DoM is traversed twice, in the second, only once. That’s a quick way to double your performance. Note also the use of multiple selectors in these examples (#enter, #enter-pic) — a technique that further reduces DoM traversals when the same function needs to be applied to multiple elements.
There are many other ways to speed up jQuery, but these tips will get you started.