每次通过选择器构建一个新的jQuery对象时，jQuery的核心部分的Sizzle引擎会遍历DOM然后通过对应的选择器来匹配真正的dom元素。这种方式比较低效，在现代浏览器中可以通过document.querySelector方法通过传入对应的Class参数来匹配对应的元素，不过IE8以下版本不支持此方法。一个提高性能的实践是通过变量缓存jQuery对象。例如：
<ul > <li>first</li> <li>second</li> <li>third</li> <li>fourth</li> <li>fifth</li> </ul>
JS：
// 不好的方式: // $('#pancakes li').eq(0).remove(); // $('#pancakes li').eq(1).remove(); // $('#pancakes li').eq(2).remove(); // ------------------------------------ // 推荐的方式: var pancakes = $('#pancakes li'); pancakes.eq(0).remove(); pancakes.eq(1).remove(); pancakes.eq(2).remove(); // ------------------------------------ // 或者: // pancakes.eq(0).remove().end() // .eq(1).remove().end() // .eq(2).remove().end();
定义一个可以复用的函数
直接上例子：
HTML：
<button >Show Menu!</button>
<a href="#" >Show Menu!</a>
JS：
//Bad: //这个会导致多个回调函数的副本占用内存 $('#menuButton, #menuLink' ). click(function(){ // ... }); //---------------------------------------------- //Better function showMenu(){ alert('Showing menu!' ); // Doing something complex here } $('#menuButton' ). click(showMenu); $('#menuLink' ). click(showMenu);
如果定义一个内联(inline)回调函数同时这个包含多个元素的jQuery对象（正如上面所说的第一个例子），对于这个集合中的每个元素都会在内存中保存一个回调函数的副本。
用数组方式来遍历jQuery 对象集合
你或许没有注意到，但是在性能方面，对于jQuery each方法这种优雅实现是有代价的。有一个办法能够更快地遍历一个jQuery对象。就是通过数组来实现，jQuery对象集合就是一个类数组，具有length和value属性。可以通过程序来测试一下性能：
HTML:
<ul > <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <!-- add 50 more --> </ul>
JS:
var arr = $('li'), iterations = 100000; //------------------------------ // Array实现： console.time('Native Loop'); for (var z = 0; z < iterations; z++) { var length = arr.length; for (var i = 0; i < length; i++) { arr[i]; } } console.timeEnd('Native Loop'); //------------------------------ // each实现： console.time('jQuery Each'); for (z = 0; z < iterations; z++) { arr.each(function(i, val) { this; }); } console.timeEnd('jQuery Each');
结果：
可以看到通过数组实现方式遍历，执行效率更高。
//-------------------------------------------------------持续更新...
以上是一些搜集知识的总结，如有任何建议或疑问，欢迎留言讨论。
您可能感兴趣的文章: