jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="header_wrap"><div id="header"><a href="http://net.tutsplus.com" class="logo">Nettuts+</a><ul
class="top_navigation"><li><a
href="http://net.tutsplus.com/advertise/">Advertise</a></li><li><a
href="http://net.tutsplus.com/about/write-for-us/">Write for Us</a></li><li><a
href="http://net.tutsplus.com/about/">About</a></li></ul><div
class="search_form"><form
method="get" action="http://net.tutsplus.com/"> <input
type="text" class="submit_input" name="s" id="s" placeholder="Search..." /> <input
class="submit_button" type="submit" value="Search" /></form></div><div
id="navigation"><ul
class="navigation"><li><a
href="http://net.tutsplus.com/category/tutorials/">Tutorials</a><ul
class="child-nav"><li
class="cat-item cat-item-568"><a
href="http://net.tutsplus.com/category/tutorials/asp-net/" title="ASP.NET programming tutorials.">ASP.NET</a></li><li
class="cat-item cat-item-464"><a
href="http://net.tutsplus.com/category/tutorials/cmss/" title="Tutorials that details how to work with various CMSs.">CMSs</a></li><li
class="cat-item cat-item-547"><a
href="http://net.tutsplus.com/category/tutorials/databases/" title="Learn how to work more efficiently with databases.">Databases</a></li><li
class="cat-item cat-item-286"><a
href="http://net.tutsplus.com/category/tutorials/design-tutorials/" title="Learn the ins and outs of web design.">Design</a></li><li
class="cat-item cat-item-8"><a
href="http://net.tutsplus.com/category/tutorials/html-css-techniques/" title="Get up to speed with HTML and CSS.">HTML & CSS</a></li><li
class="cat-item cat-item-10"><a
href="http://net.tutsplus.com/category/tutorials/javascript-ajax/" title="Learn about vanilla JavaScript, and the various popular libraries that are available, like jQuery.">JavaScript & AJAX</a></li><li
class="cat-item cat-item-153"><a
href="http://net.tutsplus.com/category/tutorials/other/" title="View all posts filed under Other">Other</a></li><li
class="cat-item cat-item-41"><a
href="http://net.tutsplus.com/category/tutorials/php/" title="Learn how to use PHP.">PHP</a></li><li
class="cat-item cat-item-1285"><a
href="http://net.tutsplus.com/category/tutorials/python-tutorials/" title="View all posts filed under Python">Python</a></li><li
class="cat-item cat-item-124"><a
href="http://net.tutsplus.com/category/tutorials/ruby/" title="High quality Ruby and RoR tutorials and screencasts.">Ruby</a></li><li
class="cat-item cat-item-1650"><a
href="http://net.tutsplus.com/category/tutorials/scala-tutorials/" title="View all posts filed under Scala">Scala</a></li><li
class="cat-item cat-item-7"><a
href="http://net.tutsplus.com/category/tutorials/site-builds/" title="Learn how to convert a PSD to HTML from scratch.">Site Builds</a></li><li
class="cat-item cat-item-29"><a
href="http://net.tutsplus.com/category/tutorials/tools-and-tips/" title="Details the most popular tools when building web applications.">Tools & Tips</a></li><li
class="cat-item cat-item-35"><a
href="http://net.tutsplus.com/category/tutorials/wordpress/" title="Become a WordPress master.">Wordpress</a></li></ul></li><li><a
href="http://net.tutsplus.com/category/articles/">Articles</a><ul
class="child-nav"><li
class="cat-item cat-item-1334"><a
href="http://net.tutsplus.com/category/articles/editorials/" title="Opinion pieces on the web development arena. ">Editorials</a></li><li
class="cat-item cat-item-128"><a
href="http://net.tutsplus.com/category/articles/general/" title="Generic articles on web development.">General</a></li><li
class="cat-item cat-item-127"><a
href="http://net.tutsplus.com/category/articles/interviews/" title="Interviews with prominent developers in the web development industry.">Interviews</a></li><li
class="cat-item cat-item-1084"><a
href="http://net.tutsplus.com/category/articles/lectures/" title="Featured talks from web development conferences around the world.">Lectures</a></li><li
class="cat-item cat-item-1"><a
href="http://net.tutsplus.com/category/articles/news/" title="Recent news in the web development industry.">News</a></li><li
class="cat-item cat-item-1251"><a
href="http://net.tutsplus.com/category/articles/quizzes/" title="Quizzes to check your knowledge.">Quizzes</a></li><li
class="cat-item cat-item-437"><a
href="http://net.tutsplus.com/category/articles/reviews/" title="Reviews of new web apps, frameworks, and books.">Reviews</a></li><li
class="cat-item cat-item-1379"><a
href="http://net.tutsplus.com/category/articles/roundups-articles/" title="Compilations of tools, frameworks and other assorted stuff.">Roundups</a></li><li
class="cat-item cat-item-23"><a
href="http://net.tutsplus.com/category/articles/web-roundups/" title="Compilations of popular articles from around the web.">Web Roundups</a></li></ul></li><li><a
href="http://net.tutsplus.com/tag/tips/">Tips</a><ul
class="child-nav"><li><a
href="http://net.tutsplus.com/category/tutorials/ruby/?tag=tips" title="Ruby">Ruby</a></li><li><a
href="http://net.tutsplus.com/category/articles/?tag=tips" title="Articles">Articles</a></li><li><a
href="http://net.tutsplus.com/category/tutorials/tools-and-tips/?tag=tips" title="Tools & Tips">Tools & Tips</a></li><li><a
href="http://net.tutsplus.com/category/tutorials/javascript-ajax/?tag=tips" title="JavaScript & AJAX">JavaScript & AJAX</a></li><li><a
href="http://net.tutsplus.com/category/tutorials/other/?tag=tips" title="Other">Other</a></li><li><a
href="http://net.tutsplus.com/category/tutorials/php/?tag=tips" title="PHP">PHP</a></li></ul></li><li><a
href="http://net.tutsplus.com/sessions/">Sessions</a></li><li><a
href="http://net.tutsplus.com/resources/">Resources</a></li><li><a
href="http://net.tutsplus.com/tag/videos/">Videos</a><ul
class="child-nav"><li><a
href="http://net.tutsplus.com/category/tutorials/python-tutorials/?tag=videos" title="Python">Python</a></li><li><a
href="http://net.tutsplus.com/category/tutorials/tools-and-tips/?tag=videos" title="Tools & Tips">Tools & Tips</a></li><li><a
href="http://net.tutsplus.com/category/tutorials/javascript-ajax/?tag=videos" title="JavaScript & AJAX">JavaScript & AJAX</a></li><li><a
href="http://net.tutsplus.com/category/tutorials/php/?tag=videos" title="PHP">PHP</a></li></ul></li><li
id="nav-premium-link"> <a
href="http://tutsplus.com/courses/?q=true&filter_topic=35" target="_blank">Tuts+ Premium</a></li></ul></div><div
class="site_switcher"><ul><li
class="link-hub"><a
href="http://hub.tutsplus.com/">Tuts+ Hub <span>The Latest Tuts+ Updates</span></a></li><li
class="link-psd"><a
href="http://psd.tutsplus.com/">Psdtuts+ <span>Adobe Photoshop</span></a></li><li
class="link-net"><a
href="http://net.tutsplus.com/">Nettuts+ <span>Web Development</span></a></li><li
class="link-vector"><a
href="http://vector.tutsplus.com/">Vectortuts+ <span>Illustrator and Vector</span></a></li><li
class="link-audio"><a
href="http://audio.tutsplus.com/">Audiotuts+ <span>Audio and Production</span></a></li><li
class="link-ae"><a
href="http://ae.tutsplus.com/">Aetuts+ <span>Adobe After Effects</span></a></li><li
class="link-cg"><a
href="http://cg.tutsplus.com/">Cgtuts+ <span>Computer Graphics</span></a></li><li
class="link-photo"><a
href="http://photo.tutsplus.com/">Phototuts+ <span>Photography</span></a></li><li
class="link-mobile"><a
href="http://mobile.tutsplus.com/">Mobiletuts+ <span>Mobile Development</span></a></li><li
class="link-webdesign"><a
href="http://webdesign.tutsplus.com/">Webdesigntuts+ <span>Web Design</span></a></li><li
class="link-wp"><a
href="http://wp.tutsplus.com/">Wptuts+ <span>WordPress</span></a></li><li
class="link-mac"><a
href="http://mac.tutsplus.com/">Mactuts+ <span>Mac & OS X</span></a></li><li
class="link-gamedev"><a
href="http://gamedev.tutsplus.com/">Gamedevtuts+ <span>Game Development</span></a></li><li
class="link-craft"><a
href="http://craft.tutsplus.com/">Crafttuts+ <span>Craft & Handmade</span></a></li></ul> <a
href="javascript:void(0);" class="site_switcher_button">Toggle</a></div><div
class="header-marketplace-ad ad-themeforest"><a
href="http://themeforest.net?WT.mc_id=TutsHeader&ref=NetPremium" rel="external"><span> </span>Website Templates</a></div></div></div><div
id="content_wrap"><div
id="content" class="clearfix"><div
class="page_wrap"><div
id="leader-board-wrap" style="display: none"><div
class="leader_board"> <a
href="http://net.tutsplus.com/advertise/" class="LB_advert">Advertise Here</a><div
class="lb_inner"><div
id='div-gpt-ad-leaderboard' style='width:728px; height:90px;'> </div></div></div></div> <div
id="page" class="single_post"><div
class="page_inner"><div
class="post post_inner" id="post-5551"><div
class="tut_top"><div
class="post_image"> <a
href="http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/"><img
src="http://nettuts.s3.amazonaws.com/359_jqueryTips/200x200.png" alt="10 Ways to Instantly Increase Your jQuery Performance" /></a></div><div
class="preview"><div
class="post_taxonomy"><ul><li><a
href="http://net.tutsplus.com/category/tutorials/">Tutorials</a><span>\</span></li><li><a
href="http://net.tutsplus.com/category/tutorials/javascript-ajax/">JavaScript & AJAX</a></li></ul></div><h1 class="post_title"> 10 Ways to Instantly Increase Your jQuery Performance</h1><div
class="post_meta"> <a
href="http://net.tutsplus.com/author/giuliobai/" title="Posts by Giulio Bai" rel="author">Giulio Bai</a> on Jun 23rd 2009 with <a
href="http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/#comments" title="Comment on 10 Ways to Instantly Increase Your jQuery Performance"><span
class="dsq-postid" rel="5551 http://net.tutsplus.com/?p=5551">129 comments</span></a></div><div
class="article_social_media"><div
class="tweetmeme_btn"> <a
href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="nettuts">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </div><div
class="facebook_send_btn left"> <g:plusone size="medium" count="false"></g:plusone></div><div
class="facebook_btn"> <fb:like layout="button_count" width="90" height="21"></fb:like></div></div></div></div></div><div
class="tut_bottom"><div
class="hublink"><a
href="http://hub.tutsplus.com/tutorials/10-ways-to-instantly-increase-your-jquery-performance--net-5551" class="hublink_button">View post on <span>Tuts+ Beta</span></a><strong>Tuts+ Beta</strong> is an optimized, mobile-friendly and easy-to-read version of the Tuts+ network.</div></div><div
class="post post_inner_article"><p> This article will present ten easy steps that will instantly improve your script’s performance. Don’t worry; there isn’t anything too difficult here. Everyone can apply these methods! When you’re finished reading, please let us know your speed tips.</p><p><span
id="more-5551"></span></p><h3 id="list">1. Always Use the Latest Version</h3><div
class="tutorial_image"> <img
src="http://d2o0t5hpnwv4c1.cloudfront.net/359_jqueryTips/j2.png" alt=""/></div><p
id="item">jQuery is in constant development and improvement. <a
href="http://ejohn.org/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','ejohn.org']);">John</a> and his team are always researching new ways to improve program performances.<br
/> As a sidenote, just a few months ago, he released <a
href="http://sizzlejs.com/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','sizzlejs.com']);">Sizzle</a>, a selector library that’s said to improve program performances up to 3 times in Firefox.</p><p>If you want to stay up to date without having to download the library a thousand times, GIYF (Google Is Your Friend), in this situation too. Google provides a lot of <a
href="http://code.google.com/apis/ajaxlibs/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','code.google.com']);">Ajax libraries</a> from which to choose.</p><pre name="code" class="html">
<!-- get the API with a simple script tag -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
/* and load minified jQuery v1.3.2 this way */
google.load ("jquery", "1.3.2", {uncompressed: false});
/* this is to display a message box
when the page is loaded */
function onLoad () {
alert ("jQuery + Google API!");
}
google.setOnLoadCallback (onLoad);
</script>
</pre><p><strong><em>* Editor’s Note: </em></strong>Perhaps, the quicker and easier method is to simply link to the script directly. Rather than hard-coding the specific version of jQuery directly (1.3.2), you should instead use 1, which will automatically reference the most recent version of the library.</p><pre name="code" class="html">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
</pre><h3>2. Combine and Minify Your Scripts</h3><div
class="tutorial_image"> <img
src="http://d2o0t5hpnwv4c1.cloudfront.net/359_jqueryTips/jquery.png" alt="Minify" style="width: 600px;" /></div><p>The majority of browsers are not able to process more than one script concurrently so they queue them up — and load times increase.<br
/> Assuming the scripts are to be loaded on every page of your website, you should consider putting them all into a single file and use a compression tool (such as <a
href="http://dean.edwards.name/packer/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','dean.edwards.name']);">Dean Edwards’</a>) to minify them. Smaller file sizes equal faster load times.</p><blockquote><p> The goal of JavaScript and CSS minification is always to preserve the operational qualities of the code while reducing its overall byte footprint (both in raw terms and after gzipping, as most JavaScript and CSS served from production web servers is gzipped as part of the HTTP protocol). — From <a
href="http://developer.yahoo.com/yui/compressor/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','developer.yahoo.com']);">YUI compressor</a>, an excellent tool <strong>jQuery officially reccomends</strong> to minify scripts.</p></blockquote><h3>3. Use For Instead of Each</h3><p>Native functions are always faster than any helper counterparts.<br
/> Whenever you’re looping through an object received as JSON, you’d better <strong>rewrite</strong> your JSON and make it return an array through which you can loop easier.</p><p>Using <a
href="http://getfirebug.com/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','getfirebug.com']);">Firebug</a>, it’s possible to measure the time each of the two functions takes to run.</p><pre name="code" class="javascript">
var array = new Array ();
for (var i=0; i<10000; i++) {
array[i] = 0;
}
console.time('native');
var l = array.length;
for (var i=0;i<l; i++) {
array[i] = i;
}
console.timeEnd('native');
console.time('jquery');
$.each (array, function (i) {
array[i] = i;
});
console.timeEnd('jquery');
</pre><div
class="tutorial_image"> <img
src='http://chartgizmo.com/GenerateChart?id=6757' alt=""/></div><p>The above results are 2ms for native code, and 26ms for jQuery’s “each” method. Provided I tested it on my local machine and they’re not actually doing anything (just a mere array filling operation), jQuery’s each function takes over 10 times as long as JS native “for” loop. This will certainly increase when dealing with more complicated stuff, like setting CSS attributes or other DOM manipulation operations.</p><h3>4. Use IDs Instead of Classes</h3><p>It’s much better to select objects by ID because of the library’s behavior: jQuery uses the browser’s native method, getElementByID(), to retrieve the object, resulting in a very fast query.</p><p>So, instead of using the very handy class selection technique, it’s worth using a more complex selector (which jQuery certainly doesn’t fail to provide), write your own selector (yes, this is possible, if you don’t find what you need), or specify a container for the element you need to select.</p><pre name="code" class="javascript">
// Example creating a list and filling it with items
// and selecting each item once
console.time('class');
var list = $('#list');
var items = '<ul>';
for (i=0; i<1000; i++) {
items += '<li class="item' + i + '">item</li>';
}
items += '</ul>';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('.item' + i);
}
console.timeEnd('class');
console.time('id');
var list = $('#list');
var items = '<ul>';
for (i=0; i<1000; i++) {
items += '<li id="item' + i + '">item</li>';
}
items += '</ul>';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('#item' + i);
}
console.timeEnd('id');
</pre><p>The above code really shows the differences between the two ways of selecting elements, highlighting a never-ending over 5 seconds time to load the class driven snippet.</p><div
class="tutorial_image"><script>google_ad_client = "pub-9093712935949486";
/* 300x250 nettuts middle tutsads */
google_ad_slot = "1775681443";
google_ad_width = 300;
google_ad_height = 250;</script> <script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></div><div
class="tutorial_image"> <img
alt="" src='http://chartgizmo.com/GenerateChart?id=6758'/></div><h3>5. Give your Selectors a Context</h3><p>As stated in <a
href="http://docs.jquery.com/Core/context" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','docs.jquery.com']);">jQuery’s documentation</a>,</p><blockquote><p> The DOM node context originally passed to jQuery() (if none was passed then context will be equal to the document).<br
/> It should be used in conjunction with the selector to determine the exact query used.</p></blockquote><p>So, if you must use classes to target your elements, at least prevent jQuery from traversing the whole DOM using selectors <a
href="http://docs.jquery.com/Core/context" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','docs.jquery.com']);">appropriately</a>.</p><p>Instead of</p><pre name="code" class="javascript">
$('.class').css ('color' '#123456');
</pre><p>always go for contextualized selectors in the form:</p><pre name="code" class="javascript">
$(expression, context)
</pre><p>thus yielding</p><pre name="code" class="javascript">
$('.class', '#class-container').css ('color', '#123456');
</pre><p>which runs much faster, because it doesn’t have to traverse the entire DOM — just the #class-container element.</p><h3>6. Cache. ALWAYS.</h3><p>Do not make the mistake or reusing your selectors time and time again. Instead, you should cache it in a variable. That way, the DOM doesn’t have to track down your element over and over again.</p><p>Never select elements multiple times inside a loop EVER! It’d be a speed-killer!</p><pre name="code" class="javascript">
$('#item').css ('color', '#123456');
$('#item').html ('hello');
$('#item').css ('background-color', '#ffffff');
// you could use this instead
$('#item').css ('color', '#123456').html ('hello').css ('background-color', '#ffffff');
// or even
var item = $('#item');
item.css ('color', '#123456');
item.html ('hello');
item.css ('background-color', '#ffffff');
// as for loops, this is a big no-no
console.time('no cache');
for (var i=0; i<1000; i++) {
$('#list').append (i);
}
console.timeEnd('no cache');
// much better this way
console.time('cache');
var item = $('#list');
for (var i=0; i<1000; i++) {
item.append (i);
}
console.timeEnd('cache');
</pre><p>And, as the following chart exemplifies, the results of caching are evident even in relatively short iterations.</p><div
class="tutorial_image"> <img
alt="" src='http://chartgizmo.com/GenerateChart?id=6759'/></div><h3>7. Avoid DOM Manipulation</h3><p>DOM manipulation should be as limited as possible, since insert operations like <a
href="http://docs.jquery.com/Manipulation/prepend" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','docs.jquery.com']);">prepend()</a>, <a
href="http://docs.jquery.com/Manipulation/append" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','docs.jquery.com']);">append()</a>, <a
href="http://docs.jquery.com/Manipulation/after" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','docs.jquery.com']);">after()</a> are rather time-consuming.</p><p>The above example could be quickened using <a
href="http://docs.jquery.com/Html" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','docs.jquery.com']);">html()</a> and building the list beforehand.</p><pre name="code" class="javascript">
var list = '';
for (var i=0; i<1000; i++) {
list += '<li>'+i+'</li>';
}
('#list').html (list);
</pre><h3>8. No String concat(); Use join() for Longer Strings</h3><p>It might appear strange, but this really helps to speed things, especially when dealing with long strings of text that need to be concatenated.</p><p>First create an array and fill it with what you have to join together. The join() method will prove much faster than the string concat() function.</p><pre name="code" class="javascript">
var array = [];
for (var i=0; i<=10000; i++) {
array[i] = '<li>'+i+'</li>';
}
$('#list').html (array.join (''));
</pre><p>However, recent tests conducted by <a
href="http://www.sitepen.com/blog/2008/05/09/string-performance-an-analysis/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.sitepen.com']);">Tom Trenka</a> contributed to the creation of the following chart.</p><div
class="tutorial_image"> <img
src="http://www.sitepen.com/blog/wp-content/uploads/2008/05/stringperf.png" alt="" style="width: 600px;" /></div><blockquote><p> “The += operator is faster—even more than pushing string fragments into an array and joining them at the last minute” and “An array as a string buffer is more efficient on all browsers, with the exception of Firefox 2.0.0.14/Windows, than using String.prototype.concat.apply.” — Tom Trenka</p></blockquote><h3>9. Return False</h3><p>You may have noticed whenever your functions don’t return false, you jump to the top of the page.<br
/> When dealing with longer pages, this result can be quite annoying.</p><p>So, instead of</p><pre name="code" class="javascript">
$('#item').click (function () {
// stuff here
});
</pre><p>take the time to write</p><pre name="code" class="javascript">
$('#item').click (function () {
// stuff here
return false;
});
</pre><h3>10. Bonus tip – Cheat-sheets and Library References</h3><div
class="tutorial_image"> <img
src="http://d2o0t5hpnwv4c1.cloudfront.net/359_jqueryTips/cheatsheet.png" alt="" style="width: 600px;"/></div><p>This isn’t a speed up tip, but could end up, in a round about way, being one if you take the time to find your way through <a
href="http://colorcharge.com/jquery/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','colorcharge.com']);">cheatsheets</a> and <a
href="http://docs.jquery.com" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','docs.jquery.com']);">function references</a>.<br
/> Save yourself some time and keep a cheat-sheet within an arm’s reach.</p><ul
class="webroundup"><li>Follow us on <a
href="http://www.twitter.com/nettuts" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.twitter.com']);">Twitter</a>, or subscribe to the <a
href="http://feeds.feedburner.com/nettuts" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','feeds.feedburner.com']);" title="NETTUTS RSS Feed">NETTUTS RSS Feed</a> for more daily web development tuts and articles.</li></ul><p> <script>digg_url = "post permalink (not digg url)";</script><br
/> <script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></p><div
style="clear:both;padding-bottom:20px;"><fb:like layout="standard" width="450" height="30"></fb:like></div><p
style="text-align: center;"><div
id="bsap_1284118" class="bsarocks bsap_d754f1e9ba63a736ba8ff5ece958f7dd"></div></p></div><div
id="tag-list"><span>Tags:</span> <a
href="http://net.tutsplus.com/tag/jquery/">jQuery</a></div><div
class="post_footer" style="padding-bottom: 170px;"><div
class="enjoyed_post"> <span
class="thumb_icon"> </span><h5>Enjoyed this Post?</h5><p>Subscribe to our <a
href="http://feeds.feedburner.com/nettuts">RSS Feed</a>, <a
href="http://twitter.com/nettuts">Follow us on Twitter</a> or simply recommend us to friends and colleagues!</p><div
class="article_social_media"><div
class="tweetmeme_btn"> <a
href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="nettuts">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </div><div
class="facebook_send_btn left"> <g:plusone size="medium" count="false"></g:plusone></div><div
class="facebook_btn"> <fb:like layout="button_count" width="100" height="21"></fb:like></div></div></div><div
class="the_author"> <img
alt='' src='http://0.gravatar.com/avatar/c9c7c71532207ed3fa67b689a1d28aad?s=40&d=http%3A%2F%2Ftutsplus.s3.amazonaws.com%2Fgeneral%2Favatar.jpg%3Fs%3D40&r=PG' class='avatar avatar-40 photo' height='40' width='40' /><h5>By <a
href="http://net.tutsplus.com/author/giuliobai/" title="Posts by Giulio Bai" rel="author">Giulio Bai</a></h5><p
class="the_author_p">Rollover to read this author's bio or click through to see a full list of posts by this author.</p><div
class="autor_div"> Howdy! I'm Giulio and I am a freelance web developer and designer. <span
class="arrow"> </span></div></div> <br
class="clear" /><div
class="plus_membership"><div
class="plus_membership_text"> <a
href="" class="plus_icon">Plus Premium</a><div
id="logged-in-plus-footer" style="display: none;"><div
class="plus_content wide"><h3>Hello!</h3><p>You can grab source files and bonus tutorials from the <a
href="http://tutsplus.com/">members area</a>.</p></div><div
class="plus_form"></div></div><div
id="logged-out-plus-footer" style="display: none;"><div
class="plus_content"><h3>Premium Members</h3><p>Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. <a
href="http://tutsplus.com/amember/signup.php">Join Now</a></p></div><div
class="plus_form"><form
name="login" method="post" action="http://tutsplus.com/amember/login.php?amember_redirect_url=http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/" id="signIn"><fieldset> <input
type="text" name="amember_login" id="username" class="input" /> <input
type="password" name="amember_pass" id="password" class="input" /> <input
type="submit" id="submit_plus" class="submit_plus" value="Sign In" /></fieldset></form></div></div></div><div
class="left_corner"> </div><div
class="right_corner"> </div></div> </div><div
class="post extra_posts single"></div><div
class='discus-note'><strong>Note:</strong> Want to add some source code? Type <pre><code> before it and </code></pre> after it. <a
href="http://help.disqus.com/customer/portal/articles/665057" target="_blank">Find out more</a></div><div
class="comments"><div
id="disqus_thread"><div
id="dsq-content"><div
class="navigation"><div
class="nav-previous"><a
href="http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/comment-page-1/#comments" ><span
class="meta-nav">←</span> Older Comments</a></div><div
class="nav-next"></div></div><ul
id="dsq-comments"><li
class="comment even thread-even depth-1" id="dsq-comment-221790"><div
id="dsq-comment-header-221790" class="dsq-comment-header"><cite
id="dsq-cite-221790"> <span
id="dsq-author-user-221790">kramer</span></cite></div><div
id="dsq-comment-body-221790" class="dsq-comment-body"><div
id="dsq-comment-message-221790" class="dsq-comment-message"><p>As of 1.4.2, #3 is actually false, i.e. each() is faster, at least on my machine.</p></div></div></li></li><li
class="comment odd alt thread-odd thread-alt depth-1" id="dsq-comment-255837"><div
id="dsq-comment-header-255837" class="dsq-comment-header"><cite
id="dsq-cite-255837"> <span
id="dsq-author-user-255837">Micha</span></cite></div><div
id="dsq-comment-body-255837" class="dsq-comment-body"><div
id="dsq-comment-message-255837" class="dsq-comment-message"><p>I wonder if there is a difference in performance between this:<br
/> $(‘.class’, ‘#class-container’).css (‘color’, ‘#123456′);</p><p>and that:<br
/> $(‘#class-container .class’).css (‘color’, ‘#123456′);</p><p>Any suggestions?</p></div></div></li><ul
class="children"><li
class="comment even depth-2" id="dsq-comment-275227"><div
id="dsq-comment-header-275227" class="dsq-comment-header"><cite
id="dsq-cite-275227"> http://www.bobsp.de <span
id="dsq-author-user-275227">Boris</span></cite></div><div
id="dsq-comment-body-275227" class="dsq-comment-body"><div
id="dsq-comment-message-275227" class="dsq-comment-message"><p>I’ve read that there is a difference. Maybe you should take a look at this</p><p><a
href="http://net.tutsplus.com/tutorials/javascript-ajax/how-jquery-beginners-can-test-and-improve-their-code/" rel="nofollow">http://net.tutsplus.com/tutorials/javascript-ajax/how-jquery-beginners-can-test-and-improve-their-code/</a></p><p>at #3.</p><p>Boris</p></div></div></li></li><li
class="comment odd alt depth-2" id="dsq-comment-328199"><div
id="dsq-comment-header-328199" class="dsq-comment-header"><cite
id="dsq-cite-328199"> http://www.neteffectservices.com <span
id="dsq-author-user-328199">Ryan Wheale</span></cite></div><div
id="dsq-comment-body-328199" class="dsq-comment-body"><div
id="dsq-comment-message-328199" class="dsq-comment-message"><p>$(‘.class’, ‘#someID’) is merely a shortcut for $(‘#someID’).find(‘.class’) – so no matter what, you are better off using find() as opposed to the context parameter. By using find(), you are eliminating a function call… which is always good ;)</p></div></div></li></li><li
class="comment even depth-2" id="dsq-comment-369336"><div
id="dsq-comment-header-369336" class="dsq-comment-header"><cite
id="dsq-cite-369336"> http://bfred.it <span
id="dsq-author-user-369336">Federico / Bfred.it</span></cite></div><div
id="dsq-comment-body-369336" class="dsq-comment-body"><div
id="dsq-comment-message-369336" class="dsq-comment-message"><p>As expected, in my test #5 is plain wrong. See for yourself:</p><p>The general rule is, the less selectors, the better. I thought of the opposite until recently, but that’s true.</p></div></div></li></li></ul></li><li
class="comment odd alt thread-even depth-1" id="dsq-comment-272439"><div
id="dsq-comment-header-272439" class="dsq-comment-header"><cite
id="dsq-cite-272439"> <span
id="dsq-author-user-272439">Mark Davenport</span></cite></div><div
id="dsq-comment-body-272439" class="dsq-comment-body"><div
id="dsq-comment-message-272439" class="dsq-comment-message"><p>This is really great! Improved the performance of one of my functions dramatically. Thanks.</p></div></div></li></li><li
class="comment even thread-odd thread-alt depth-1" id="dsq-comment-276963"><div
id="dsq-comment-header-276963" class="dsq-comment-header"><cite
id="dsq-cite-276963"> <span
id="dsq-author-user-276963">me</span></cite></div><div
id="dsq-comment-body-276963" class="dsq-comment-body"><div
id="dsq-comment-message-276963" class="dsq-comment-message"><p>plagiarize much:<br
/> <a
href="http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx#tip1" onclick="javascript:_gaq.push(['_trackEvent','outbound-comment','www.tvidesign.co.uk']);" rel="nofollow">http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx#tip1</a></p></div></div></li><ul
class="children"><li
class="comment odd alt depth-2" id="dsq-comment-294419"><div
id="dsq-comment-header-294419" class="dsq-comment-header"><cite
id="dsq-cite-294419"> <span
id="dsq-author-user-294419">Green</span></cite></div><div
id="dsq-comment-body-294419" class="dsq-comment-body"><div
id="dsq-comment-message-294419" class="dsq-comment-message"><p>Yep…plagiarized work.</p><p>No respect to the one who made this <a
href="http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx#tip1" onclick="javascript:_gaq.push(['_trackEvent','outbound-comment','www.tvidesign.co.uk']);" rel="nofollow">http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx#tip1</a>.</p></div></div></li><ul
class="children"><li
class="comment even depth-3" id="dsq-comment-398489"><div
id="dsq-comment-header-398489" class="dsq-comment-header"><cite
id="dsq-cite-398489"> <span
id="dsq-author-user-398489">El garch</span></cite></div><div
id="dsq-comment-body-398489" class="dsq-comment-body"><div
id="dsq-comment-message-398489" class="dsq-comment-message"><p>Copy Paste lol</p></div></div></li></li></ul></li></ul></li><li
class="comment odd alt thread-even depth-1" id="dsq-comment-315828"><div
id="dsq-comment-header-315828" class="dsq-comment-header"><cite
id="dsq-cite-315828"> http://seobynova.com/ <span
id="dsq-author-user-315828">Tư vấn seo</span></cite></div><div
id="dsq-comment-body-315828" class="dsq-comment-body"><div
id="dsq-comment-message-315828" class="dsq-comment-message"><p>Thanks for share infomations</p></div></div></li></li><li
class="comment even thread-odd thread-alt depth-1" id="dsq-comment-320433"><div
id="dsq-comment-header-320433" class="dsq-comment-header"><cite
id="dsq-cite-320433"> <span
id="dsq-author-user-320433">fukid</span></cite></div><div
id="dsq-comment-body-320433" class="dsq-comment-body"><div
id="dsq-comment-message-320433" class="dsq-comment-message"><p>somehow #3 is not corrent now in chrome 7 and firefox 3.6<br
/> chrome 7:</p><p> var array = new Array ();<br
/> for (var i=0; i<10000; i++) {<br
/> array[i] = 0;<br
/> }</p><p> console.time('native');<br
/> var l = array.length;<br
/> for (var i=0;i<l; i++) {<br
/> array[i] = i;<br
/> }<br
/> console.timeEnd('native');</p><p> console.time('jquery');<br
/> $.each (array, function (i) {<br
/> array[i] = i;<br
/> });<br
/> console.timeEnd('jquery');<br
/> native: 24ms<br
/> jquery: 7ms</p><p>firefox 3.6:<br
/> native: 15ms<br
/> jquery: 12ms</p></div></div></li><ul
class="children"><li
class="comment odd alt depth-2" id="dsq-comment-374095"><div
id="dsq-comment-header-374095" class="dsq-comment-header"><cite
id="dsq-cite-374095"> http://www.jobsboard.co.nz <span
id="dsq-author-user-374095">Andrew</span></cite></div><div
id="dsq-comment-body-374095" class="dsq-comment-body"><div
id="dsq-comment-message-374095" class="dsq-comment-message"><p>and in Chrome 13</p><p>native: 15ms<br
/> jquery: 3ms</p></div></div></li></li></ul></li><li
class="comment even thread-even depth-1" id="dsq-comment-322081"><div
id="dsq-comment-header-322081" class="dsq-comment-header"><cite
id="dsq-cite-322081"> <span
id="dsq-author-user-322081">Shoggie</span></cite></div><div
id="dsq-comment-body-322081" class="dsq-comment-body"><div
id="dsq-comment-message-322081" class="dsq-comment-message"><p>Hi all, thank you for sharing!</p><p>Here’s a nice one is ran into today:</p><p>$(“#inSight-content-Search”).hide().html(content).fadeIn();</p><p>That’s a div that gets stuffed with approx 3.2 MB of HTML data from an XSL transformation.</p><p>Adding the .hide() method cuts back the waiting time by 7 (!) seconds in my enviroment.</p><p>Cheers!</p></div></div></li></li><li
class="comment odd alt thread-odd thread-alt depth-1" id="dsq-comment-360209"><div
id="dsq-comment-header-360209" class="dsq-comment-header"><cite
id="dsq-cite-360209"> http://digitalrenewal.com <span
id="dsq-author-user-360209">Trisha</span></cite></div><div
id="dsq-comment-body-360209" class="dsq-comment-body"><div
id="dsq-comment-message-360209" class="dsq-comment-message"><p>This is great! following your guide, many of the elements are already written correctly so Im pretty good to start with. a question though if anyone knows the answer…</p><p>I’ve added a jquery slider to a page template in wordpress. It was loading perfectly until I realized that I’d installed it incorrectly, linking to google’s latest jquery version then adding custom scripts BEFORE the wp-head tag. (as soon as you install a plugin with jquery, it breaks the slider in this order)</p><p>When I corrected the tag order (enqueue jquery, then wp-head, then custom scripts) I get a lag in load time. It loads all of the content on the page first, then the slider pops up seeming out of nowhere. Its driving me batty. If the server has any delay at all, its really noticeable. I’ve tested loading the scripts in many ways and added a compression plugin, but I still get that lag.</p><p>So my question is… is there any way to FORCE jquery to load first on the page or at least prior to the wordpress content???</p><p>Thanks so much!</p></div></div></li><ul
class="children"><li
class="comment even depth-2" id="dsq-comment-361000"><div
id="dsq-comment-header-361000" class="dsq-comment-header"><cite
id="dsq-cite-361000"> http://digitalrenewal.com <span
id="dsq-author-user-361000">Trisha</span></cite></div><div
id="dsq-comment-body-361000" class="dsq-comment-body"><div
id="dsq-comment-message-361000" class="dsq-comment-message"><p>I finally figured this out when i noticed that my ‘images were gone’…<br
/> The css was pointing to images inside the slider that weren’t there. As soon as i relinked the images, it fixed the problem. In the meantime I learned alot about the best ways to utilitze jquery and optimize its usage, so THANK YOU! :D</p></div></div></li><ul
class="children"><li
class="comment odd alt depth-3" id="dsq-comment-453356"><div
id="dsq-comment-header-453356" class="dsq-comment-header"><cite
id="dsq-cite-453356"> <span
id="dsq-author-user-453356">ankit</span></cite></div><div
id="dsq-comment-body-453356" class="dsq-comment-body"><div
id="dsq-comment-message-453356" class="dsq-comment-message"><p>HI Trisha is have question….<br
/> that we are always using jquery.min file and jquery.ui file<br
/> in this files the lots of function are created but you have any idea how to create jquery.min file if i wish to create it by my self.</p></div></div></li></li></ul></li></ul></li><li
class="comment even thread-even depth-1" id="dsq-comment-361079"><div
id="dsq-comment-header-361079" class="dsq-comment-header"><cite
id="dsq-cite-361079"> http://www.blainesch.com <span
id="dsq-author-user-361079">BlaineSch</span></cite></div><div
id="dsq-comment-body-361079" class="dsq-comment-body"><div
id="dsq-comment-message-361079" class="dsq-comment-message"><p>The “return false” part at the bottom only helps if it’s a “click” event. You should be passing the event and calling that event function “preventDefault()” which prevents it from making it an actual anchor event.</p><p>Also, you can use event delegation here:<br
/> <code></p><p>$('#container").delegate("a[href=#]", "click", function(e){<br
/> e.preventDefault();<br
/> });</p><p></code></p></div></div></li></li><li
class="comment odd alt thread-odd thread-alt depth-1" id="dsq-comment-374135"><div
id="dsq-comment-header-374135" class="dsq-comment-header"><cite
id="dsq-cite-374135"> <span
id="dsq-author-user-374135">Adman</span></cite></div><div
id="dsq-comment-body-374135" class="dsq-comment-body"><div
id="dsq-comment-message-374135" class="dsq-comment-message"><p>$.each ist much fast as a native forLoop..</p><p>var array = new Array ();<br
/> for (var i=0; i<1000000; i++) { array[i] = 0; }</p><p>console.time('native');<br
/> var l = array.length;<br
/> console.time('jquery');<br
/> $.each (array, function (i) { array[i] = i; });<br
/> console.timeEnd('jquery');</p><p>for (var i=0;i<l; i++) { array[i] = i; }<br
/> console.timeEnd('native');</p><p>RESULT:<br
/> jquery: 398ms<br
/> native: 1142ms</p></div></div></li><ul
class="children"><li
class="comment even depth-2" id="dsq-comment-398503"><div
id="dsq-comment-header-398503" class="dsq-comment-header"><cite
id="dsq-cite-398503"> <span
id="dsq-author-user-398503">Fred</span></cite></div><div
id="dsq-comment-body-398503" class="dsq-comment-body"><div
id="dsq-comment-message-398503" class="dsq-comment-message"><p>You have nested console.time() methods. If you change your code so there are two distinct timed sections, you’ll see (in FireFox 9 at least) that the native block runs about 50x faster</p><p>var array = new Array();<br
/> for (var i = 0; i < 1000000; i++) {<br
/> array[i] = 0;<br
/> }<br
/> var l = array.length;</p><p> console.time('jquery');<br
/> $.each(array, function (i) {<br
/> array[i] = i;<br
/> });<br
/> console.timeEnd('jquery');</p><p> console.time('native');<br
/> for (var i = 0; i < l; i++) {<br
/> array[i] = i;<br
/> }<br
/> console.timeEnd('native');</p><p>native: 8ms<br
/> jquery: 385ms</p></div></div></li><ul
class="children"><li
class="comment odd alt depth-3" id="dsq-comment-454336"><div
id="dsq-comment-header-454336" class="dsq-comment-header"><cite
id="dsq-cite-454336"> <span
id="dsq-author-user-454336">Dar</span></cite></div><div
id="dsq-comment-body-454336" class="dsq-comment-body"><div
id="dsq-comment-message-454336" class="dsq-comment-message"><p>Excellent point.<br
/> I was about to write it but than I saw your answer</p></div></div></li></li></ul></li></ul></li><li
class="comment even thread-even depth-1" id="dsq-comment-377977"><div
id="dsq-comment-header-377977" class="dsq-comment-header"><cite
id="dsq-cite-377977"> <span
id="dsq-author-user-377977">Pappu Singh</span></cite></div><div
id="dsq-comment-body-377977" class="dsq-comment-body"><div
id="dsq-comment-message-377977" class="dsq-comment-message"><p>I have use ‘for’ instead of ‘$.each()’ and get execution of my script so fast.<br
/> thanks.</p></div></div></li></li><li
class="comment odd alt thread-odd thread-alt depth-1" id="dsq-comment-379988"><div
id="dsq-comment-header-379988" class="dsq-comment-header"><cite
id="dsq-cite-379988"> http://komarnicki.webd.pl <span
id="dsq-author-user-379988">Paul Komarnicki</span></cite></div><div
id="dsq-comment-body-379988" class="dsq-comment-body"><div
id="dsq-comment-message-379988" class="dsq-comment-message"><p>OMG the “return false” advice is a horrible idea — you. should. never. do. that!</p></div></div></li><ul
class="children"><li
class="comment even depth-2" id="dsq-comment-457071"><div
id="dsq-comment-header-457071" class="dsq-comment-header"><cite
id="dsq-cite-457071"> http://twitter.com/craigmdennis <span
id="dsq-author-user-457071">Craig Dennis</span></cite></div><div
id="dsq-comment-body-457071" class="dsq-comment-body"><div
id="dsq-comment-message-457071" class="dsq-comment-message"><p>event.preventDefault(); is all you need</p></div></div></li><ul
class="children"><li
class="comment odd alt depth-3" id="dsq-comment-469277"><div
id="dsq-comment-header-469277" class="dsq-comment-header"><cite
id="dsq-cite-469277"> <span
id="dsq-author-user-469277">Jakob</span></cite></div><div
id="dsq-comment-body-469277" class="dsq-comment-body"><div
id="dsq-comment-message-469277" class="dsq-comment-message"><p>Unless ofc that you need “return false”. Sometimes you need both to stop propogation and the prevent defaults. Return false is much easier to use in such cases.</p></div></div></li></li></ul></li><li
class="comment even depth-2" id="dsq-comment-458708"><div
id="dsq-comment-header-458708" class="dsq-comment-header"><cite
id="dsq-cite-458708"> http://matt-curtis.me/ <span
id="dsq-author-user-458708">Matt Curtis</span></cite></div><div
id="dsq-comment-body-458708" class="dsq-comment-body"><div
id="dsq-comment-message-458708" class="dsq-comment-message"><p>Care to give a little more detail? I personally always use event.preventDefault, but I’m not sure why return false is a bad idea.</p></div></div></li></li><li
class="comment odd alt depth-2" id="dsq-comment-470601"><div
id="dsq-comment-header-470601" class="dsq-comment-header"><cite
id="dsq-cite-470601"> <span
id="dsq-author-user-470601">Ari Susanto</span></cite></div><div
id="dsq-comment-body-470601" class="dsq-comment-body"><div
id="dsq-comment-message-470601" class="dsq-comment-message"><p>No, it works great in my script,</p></div></div></li></li></ul></li><li
class="comment even thread-even depth-1" id="dsq-comment-389034"><div
id="dsq-comment-header-389034" class="dsq-comment-header"><cite
id="dsq-cite-389034"> http://www.paulund.co.uk <span
id="dsq-author-user-389034">Paul</span></cite></div><div
id="dsq-comment-body-389034" class="dsq-comment-body"><div
id="dsq-comment-message-389034" class="dsq-comment-message"><p>Great tips thanks.</p><p>Didn’t know for loop was so much faster than each.</p></div></div></li></li><li
class="comment odd alt thread-odd thread-alt depth-1" id="dsq-comment-392430"><div
id="dsq-comment-header-392430" class="dsq-comment-header"><cite
id="dsq-cite-392430"> http://binhchontructuyen.com <span
id="dsq-author-user-392430">Bình Chọn</span></cite></div><div
id="dsq-comment-body-392430" class="dsq-comment-body"><div
id="dsq-comment-message-392430" class="dsq-comment-message"><p>Great post.<br
/> attr(‘class’, …) faster than addClass(…) ??</p></div></div></li><ul
class="children"><li
class="comment byuser comment-author-jeffreyway even depth-2" id="dsq-comment-392485"><div
id="dsq-comment-header-392485" class="dsq-comment-header"><cite
id="dsq-cite-392485"> http://www.jeffrey-way.com <span
id="dsq-author-user-392485">Jeffrey Way</span></cite></div><div
id="dsq-comment-body-392485" class="dsq-comment-body"><div
id="dsq-comment-message-392485" class="dsq-comment-message"><p>Each applies the class in different way. attr(‘class’…) will use setAttribute, and addClass() sets the classname of the element.</p></div></div></li></li></ul></li><li
class="comment odd alt thread-even depth-1" id="dsq-comment-403866"><div
id="dsq-comment-header-403866" class="dsq-comment-header"><cite
id="dsq-cite-403866"> <span
id="dsq-author-user-403866">Brandon</span></cite></div><div
id="dsq-comment-body-403866" class="dsq-comment-body"><div
id="dsq-comment-message-403866" class="dsq-comment-message"><p>Wow, nice job. Greatest thing is that almost 3 years have gone by since this article was posted and it’s still valid. (I guess a few things may be different, but in general…)</p></div></div></li></li><li
class="comment even thread-odd thread-alt depth-1" id="dsq-comment-405375"><div
id="dsq-comment-header-405375" class="dsq-comment-header"><cite
id="dsq-cite-405375"> http://www.e-sushi.net/ <span
id="dsq-author-user-405375">Mike Edward Moras (e-sushi™)</span></cite></div><div
id="dsq-comment-body-405375" class="dsq-comment-body"><div
id="dsq-comment-message-405375" class="dsq-comment-message"><p>Same article was posted in 2008 at hxxp://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx#tip1</p><p>I guess you don’t care to explain your *copyright violation*, or do you?</p></div></div></li></li><li
class="comment odd alt thread-even depth-1" id="dsq-comment-453095"><div
id="dsq-comment-header-453095" class="dsq-comment-header"><cite
id="dsq-cite-453095"> <span
id="dsq-author-user-453095">Ajay</span></cite></div><div
id="dsq-comment-body-453095" class="dsq-comment-body"><div
id="dsq-comment-message-453095" class="dsq-comment-message"><p>Thanks for this post.</p><p>I want to know reason why there is execution difference between Client and Online using class selector eg. $(‘.item’)<br
/> In both cases it will run(execute) on client side so why there is so much difference.</p></div></div></li><ul
class="children"><li
class="comment even depth-2" id="dsq-comment-459813"><div
id="dsq-comment-header-459813" class="dsq-comment-header"><cite
id="dsq-cite-459813"> <span
id="dsq-author-user-459813">Nan Zhang</span></cite></div><div
id="dsq-comment-body-459813" class="dsq-comment-body"><div
id="dsq-comment-message-459813" class="dsq-comment-message"><p>suppose it will need to request data from servers sometimes online.</p></div></div></li></li></ul></li><li
class="comment odd alt thread-odd thread-alt depth-1" id="dsq-comment-464547"><div
id="dsq-comment-header-464547" class="dsq-comment-header"><cite
id="dsq-cite-464547"> http://www.ghodmode.com/blog <span
id="dsq-author-user-464547">Vince Aggrippino</span></cite></div><div
id="dsq-comment-body-464547" class="dsq-comment-body"><div
id="dsq-comment-message-464547" class="dsq-comment-message"><p>The sample given for the use of selector context is incorrect. jQuery only accepts an element or a jQuery object as a context. This article used a string and that doesn’t work. Documentation: <a
href="http://api.jquery.com/jQuery/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DCore%2FjQuery%26redirect%3Dno#jQuery-selector-context" onclick="javascript:_gaq.push(['_trackEvent','outbound-comment','api.jquery.com']);" rel="nofollow">http://api.jquery.com/jQuery/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DCore%2FjQuery%26redirect%3Dno#jQuery-selector-context</a></p><p>The following article, only available via the wayback machine, appears to be the source of most of this information: <a
href="http://web.archive.org/web/20120303025708/http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx" onclick="javascript:_gaq.push(['_trackEvent','outbound-comment','web.archive.org']);" rel="nofollow">http://web.archive.org/web/20120303025708/http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx</a></p></div></div></li></li></ul><div
class="navigation"><div
class="nav-previous"><a
href="http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/comment-page-1/#comments" ><span
class="meta-nav">←</span> Older Comments</a></div><div
class="nav-next"></div></div></div></div> </div></div></div></div><div
id="sidebar"><div
id="social-stats"><ul><li
class="ss-twitter"> <a
href="http://twitter.com/nettuts" rel="nofollow external"> <span>Twitter</span> <large>88,934</large> <small>Twitter Followers</small> </a></li><li
class="ss-facebook"> <a
href="http://facebook.com/nettutsplus" rel="nofollow external"> <span>Facebook</span> <large>77,090</large> <small>Facebook Fans</small> </a></li><li
class="ss-google-plus"> <a
href="https://plus.google.com/100395074731712398322" rel="nofollow external"> <span>Google+</span> <large>21,467</large> <small>Google+ Followers</small> </a></li></ul></div><div
id="site-updates"><ul
class="navfor-sections"><li
class="mail-chimp-nav"><a
href="#mail-chimp-section"><span> </span>Get Email Updates</a></li><li
class="rss-nav"><a
href="#rss-section"><span> </span>Subscribe via RSS</a></li></ul><div
id="mail-chimp-section" class="section-fornav"><div
id="mail-chimp-response"></div><form
id="mail-chimp-form" action="" method="get"> <input
type="text" name="mail-chimp-email" class="mail-chimp-email" value="" placeholder="me@email.com" /> <input
type="submit" name="mail-chimp-subscribe" value="Subscribe" id="mail-chimp-subscribe" /></form></div><div
id="rss-section" class="section-fornav"><ul><li><a
href="javascript:void(0);">Select a subscription type...</a><ul><li><a
href="http://feeds.feedburner.com/nettuts">Full Post RSS</a></li><li><a
href="http://feedproxy.google.com/nettuts-summary">Summary RSS</a></li></ul></li></ul></div></div><div
id="ad-sidebar-premium"><div
id='div-gpt-ad-sidebar-premium' style='width:300px; height:250px;'> </div></div><div
id="ad-block"><div
id="bsap_1616" class="bsarocks bsap_d754f1e9ba63a736ba8ff5ece958f7dd"></div> <a
href="http://net.tutsplus.com/advertise/" class="end-ad-here">advertise here</a></div><div
id="ad-tuts-premium"> <a
href="http://tutsplus.com/">Become a Tuts+ Premium member to support this site and get access to more than <span>750</span> extra tutorials.</a></div> <div
id="tutsjobs" class="jobs"><h3 class="jobs_header"> Full-time, Part-time and Contract Jobs</h3><div
class="jobs_body"><ul
class="jobs_list"></ul> <a
class="more_jobs" href="http://jobs.tutsplus.com" title="Tuts+ Job Board"> More on Tuts+ Jobs... </a></div></div><div
id="fsjobs" class="jobs"><h3 class="jobs_header"> Freelance Jobs</h3><div
class="jobs_body"><ul
class="jobs_list"></ul> <a
class="more_jobs" href="http://jobs.freelanceswitch.com" title="Freelance Job Board"> More Freelance Jobs... </a></div></div><div
id="social-networking"><ul
class="navfor-sections"><li
class="facebook-nav"><a
href="#facebook-section"><span> </span>Facebook</a></li><li
class="twitter-nav"><a
href="#twitter-section"><span> </span>Twitter</a></li><li
class="google-plus-nav"><a
href="#google-plus-section"><span> </span>Google+</a></li></ul><div
id="facebook-section" class="section-fornav"></div><div
id="twitter-section" class="section-fornav"><div><h3>Follow <a
href="http://twitter.com/nettuts"><span>Nettuts+</a></span> and <span><a
href="http://twitter.com/tutsplus">Tuts+</a></span> on Twitter</h3><ul><li>The latest Twitter feed isn't piping through at the moment, check back soon!<br
/><br
/>Sorry for the inconvenience.</li></ul></div></div><div
id="google-plus-section" class="section-fornav"><div
class="g-plus" data-href="https://plus.google.com/100395074731712398322" data-size="badge" data-width="388"></div></div></div></div></div></div><div
id="footer_wrap"><div
id="footer"><p
class="footer_text"><strong>Nettuts+</strong> is part of the <a
href="http://tutsplus.com/">Tuts+ Network</a>, teaching creative skills to millions worldwide.</p><ul><li><a
href="http://net.tutsplus.com/advertise/">Advertise</a><span>·</span></li><li><a
href="http://www.formstack.com/forms/envato-tuts__contact_form">Suggestions</a><span>·</span></li><li><a
href="http://net.tutsplus.com/about/">About Us</a><span>·</span></li><li><a
href="http://net.tutsplus.com/about/tuts-terms-user-agreement/">Terms and Conditions</a><span>·</span></li><li><a
href="/about/privacy-policy/">Privacy Policy</a><span>·</span></li><li><a
href="http://net.tutsplus.com/about/write-for-us/">Write for Us</a></li></ul> <a
href="http://net.tutsplus.com" class="footer_logo">Nettuts+</a><div
class="lower_footer"><p
class="footer_copy">Copyright © 2013 Envato</p> <a
href="http://envato.com" class="envato_logo">Envato</a></div></div></div>
<div>
<div class="divLink" id="DL">
<a href="#" id="aDivLink">Link</a>
<input id="en3" class="filterChk" type="checkbox" value="1730" name="enableTypeId1730">
<span class="Kurica">Kurr-ri-ca</span>
<div><label>Kurnik</label></div>
<input type="checkbox" title="" value="xxxd3" name="multiselect__ededed" id="ui-multiselect-_ededed-option-0" aria-selected="false" checked="checked" value="44">
</div>
</div>
<ul id="ulxxx">
<li class="lixxx"><div>KK</div></li>
<li class="lixxx"><div>KK</div></li>
<li class="lixxx"><div>KK</div></li>
<li class="lixxx"><div>KK</div></li>
<li class="lixxx"><div>KK</div></li>
<li class="lixxx"><div>KK</div></li>
<li class="lixxx"><div>KK</div></li>
<li class="lixxx"><div>KK</div></li>
<li class="lixxx"><div>KK</div></li>
<li class="lixxx"><div>KK</div></li>
<li class="lixxx"><div>KK</div></li>
<li class="lixxx"><div>KK</div></li>
<li class="lixxx"><div>KK</div></li>
<li class="lixxx"><div>KK</div></li>
</ul>var that = $('#aDivLink');
var sel = "_ededed";
var v = 44;Ready to run.
| Test | Ops/sec | |
|---|---|---|
| Standard | | ready |
| on | | ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.