1. 选择器的使用
最快的选择器:id和元素标签选择器
较慢的选择器:class选择器
最慢的选择器:伪类和属性选择器 $(':hidden') $('[attribute=value]')
3. 父元素和子元素的关系:
$parent.find('.child') > $('#parent > .child') > $('#parent .child')
4. 不要过度使用jQuery
jQuery速度再快,也无法与原生的js方法相比,所以有原生方法可以使用的场合尽量避免使用jQuery
5. 做好缓存
选中一个网页元素是开销很大的步骤,所以使用选中器的次数应该越少越好,并尽可能缓存选中的结果,便于以后反复使用。
6. 使用链式写法
$('div').find('h3').eq(2).html('hello');
7. 事件委托
js的事件模型采用'冒泡'模式,子元素的事件会逐级向上'冒泡'成为父元素的事件。
$('td').on('click', function(e){console.log(e);}); $('table').on('click',function(e){console.log(e);}); $('table').off('click', 'td');
8. 少改动DOM结构
改动DOM结构开销很大,因此不要频繁使用append,insertBefore,insertAfter可以先合并在插入
如果要对一个DOM元素进行大量处理,应该先detach,处理完后再插入
如果要在DOM上存储数据$.data($('elem'),key,value);
插入html代码时,使用浏览器原生的innerHtml
9. 正确处理循环
循环总是一种比较耗时的操作,如果可以使用复杂的选择器直接选中元素就不要使用循环
js原生循环方法for和while,要比jquery的each快
10. 尽量少生成jquery对象
使用一次选择器就会产生一个jquery对象,它是一个很庞大的对象带有很多属性和方法。
var $text = $('#text'); var $ts = $text.text(); var $text = $('#text'); var $ts = $.text($text); 快
11. 使用作用域最短的方法
方法读取全局变量没有读取方法内的局部变量快
调用对象的方法的时候,closure模式要比prototype模式更快
12. 使用Pub/Sub模式管理事件
当发生某个事件后,如果要连续执行多个操作可以使用事件触发的形式