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");
上一篇: Vue Axios异步请求