欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jq性能优化的几种方法

程序员文章站 2022-07-02 12:38:51
...

一、用对选择器

最快的选择器:id选择器和元素标签选择器
遇到这些选择器的时候,jQuery内部会自动调用浏览器的原生方法(比如getElementById()),所以它们的执行速度快。

$('#id')
$('form')
$('input')

较慢的选择器:class选择器
$(’.className’)的性能,取决于不同的浏览器。Firefox、Safari、Chrome、Opera浏览器,都有原生方法getElementByClassName(),所以速度并不慢。但是,IE5-IE8都没有部署这个方法,所以这个选择器在IE中会相当慢。

二、理解父子关系

下面六个选择器,都是从父元素中选择子元素,建议使用find方法

$('.child', $parent)  //比最快的形式慢了5%-10%
$parent.find('.child')  //最快
$parent.children('.child')  //比最快的形式大约慢50%
$('#parent > .child')  //比最快的形式大约慢70%
$('#parent .child')  //最慢,比最快的形式慢了77%
$('.child', $('#parent'))  //最快的形式慢了23%

三、做好缓存

选中某一个网页元素,是开销很大的步骤。所以,使用选择器的次数应该越少越好,并且尽可能缓存选中的结果,便于以后反复使用。
缓存比不缓存,快了2-3倍

 var cached = jQuery('#top');
 cached.find('p.classA');
 cached.find('p.classB');

采用链式写法时,jQuery自动缓存每一步的结果,因此比非链式写法要快。根据测试,链式写法比(不使用缓存的)非链式写法,大约快了25%

$('div').find('h3').eq(2).html('Hello');

四、事件委托

javascript的事件模型,采用"冒泡"模式,利用这一点可以大大简化事件的绑定。比如,有一个表格(table元素),里面有100个格子(td元素),现在要求在每个格子上面绑定一个点击事件(click)。
可以这么写:

$("table").on("click", "td", function(){
  $(this).toggleClass("click");
});

更好的写法,则是把事件绑定在document对象上面

$(document).on("click", "td", function(){
  $(this).toggleClass("click");
});

如果要取消事件的绑定,就使用off()方法

$(document).off("click", "td");

参考文章
jQuery性能优化大全
jQuery代码优化的9种方法