以前写过一篇优化的文章,是关于书写选择器的,今天写这篇主要是应用的时候通过局部变量而减少jquery的资源消耗。
由于jquery本身对每次的选择器结果并没有cache,也就是说$('div');$('div');就会重复的从头到尾再选择一次,理想的情况下, 如果页面的结构没有发生变化,应当第二次遇见同样的选择直接返回第一次的结果,这样就会提高效率,但是jquery本身没有提供这样的功能,那我们再应用 jquery的时候就要注意和考虑自己的代码结构,尽量避免重复的选择。现在很多流行的插件在书写的时候也没有注意这个问题,下边先看看例子,之后再说我 们平时书写的时候一般要注意那些问题。
一般:
$('div').each(function(){
$(this).click(function(){
alert('click');
});
$(this).find('span').css('color','red');
});
优化之后:
$('div').each(function(){
var _self=$(this);
_self.click(function(){
alert('click');
});
_self.find('span').css('color','red');
});
上边这个例子非常简单,当然你可以说直接连写不就把问题解决了嘛,答案是肯定的,但是我们往往在复杂的应用的时候,我们想保存现在this指针,而不是jquery自己指向的指针,看看下边这个:
$('div').each(function(){
$(this).click(function(){
alert('click');
});
$(this).find('span').css('color','red');
$(this).prev().css('color','red');
$(this).prev().find('span').css('color','red');
});
优化后:
$('div').each(function(){
var _self=$(this);
var _selfP=_self.prev();
_self.click(function(){
alert('click');
});
_self.find('span').css('color','red');
_selfP.css('color','red');
_selfP=_.find('span').css('color','red');
});
这个例子中,应该很明显了,我们少执行3次jquery的选择器,而是用_self这样的局部变量做了cache,其余的就不多说了,因为我们定义的是局部变量,也不要担心会占有内存,在函数结束的时候内存就会释放出来。
最后说点平时书写的注意事项:
1、选择器的开始位置,上篇说过用id定位。
2、this指针的cache和选择器的cache,就这篇主题。
3、全部变量尽量减少,这个下篇说明原因和书写方法。
jQuery选择的工作原理和优化2
最新推荐文章于 2025-08-08 06:11:19 发布
本文介绍如何通过使用局部变量缓存来优化jQuery选择器的使用,从而减少资源消耗并提高代码效率。
986

被折叠的 条评论
为什么被折叠?



