9种方法优化jQuery代码详解


Posted in jQuery onFebruary 04, 2020

用对选择器

在jQuery中,可以用多种选择器,选择同一个网页元素。每种选择器的性能是不一样的,应该了解它们的性能差异

1、最快的选择器:id选择器和元素标签选择器

举例来说,下面的语句性能最佳:

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

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

2、较慢的选择器:class选择器

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

3、最慢的选择器:伪类选择器和属性选择器

找出网页中所有的隐藏元素,就要用到伪类选择器:

$(':hidden')

属性选择器的例子则是:

$('[attribute=value]')

这两种语句是最慢的,因为浏览器没有针对它们的原生方法。但是,一些浏览器的新版本,增加了querySelector()和querySelectorAll()方法,因此会使这类选择器的性能有大幅提高

理解父子关系

下面六个选择器,都是从父元素中选择子元素

$('.child', $parent)
$parent.find('.child')
$parent.children('.child')
$('#parent > .child')
$('#parent .child')
$('.child', $('#parent'))

1、下面这条语句的意思是,给定一个DOM对象,然后从中选择一个子元素。jQuery会自动把这条语句转成$.parent.find('child'),这会导致一定的性能损失。它比最快的形式慢了5%-10%

$('.child', $parent)

2、这条是最快的语句。.find()方法会调用浏览器的原生方法(getElementById,getElementByName,getElementByTagName等等),所以速度较快

$parent.find('.child')

3、这条语句在jQuery内部,会使用$.sibling()和javascript的nextSibling()方法,一个个遍历节点。它比最快的形式大约慢50%

$parent.children('.child')

4、jQuery内部使用Sizzle引擎,处理各种选择器。Sizzle引擎的选择顺序是从右到左,所以这条语句是先选.child,然后再一个个过滤出父元素#parent,这导致它比最快的形式大约慢70%

$('#parent > .child')

5、这条语句与上一条是同样的情况。但是,上一条只选择直接的子元素,这一条可以选择多级子元素,所以它的速度更慢,大概比最快的形式慢了77%

$('#parent .child')

6、jQuery内部会将这条语句转成$('#parent').find('.child'),比最快的形式慢了23%

$('.child', $('#parent'))

所以,最佳选择是$parent.find('.child')。而且,由于$parent往往在前面的操作已经生成,jQuery会进行缓存,所以进一步加快了执行速度

不过度使用jQuery

jQuery速度再快,也无法与原生的javascript方法相比。所以有原生方法可以使用的场合,尽量避免使用jQuery。

以最简单的选择器为例,document.getElementById("foo")要比$("#foo")快10多倍

再来看一个例子,为a元素绑定一个处理点击事件的函数:

$('a').click(function(){



alert($(this).attr('id'));


});

这段代码的意思是,点击a元素后,弹出该元素的id属性。为了获取这个属性,必须连续两次调用jQuery,第一次是$(this),第二次是attr('id')。

事实上,这种处理完全不必要。更正确的写法是,直接采用javascript原生方法,调用this.id:

$('a').click(function(){



alert(this.id);


});

根据测试,this.id的速度比$(this).attr('id')快了20多倍

做好缓存

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

比如,下面这样的写法就是糟糕的写法:

jQuery('#top').find('p.classA');


jQuery('#top').find('p.classB');

更好的写法是:

var cached = jQuery('#top');


cached.find('p.classA');


cached.find('p.classB');

根据测试,缓存比不缓存,快了2-3倍

jQuery的一大特点,就是允许使用链式写法

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

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

事件委托

javascript的事件模型,采用"冒泡"模式,也就是说,子元素的事件会逐级向上"冒泡",成为父元素的事件。

利用这一点,可以大大简化事件的绑定。比如,有一个表格(table元素),里面有100个格子(td元素),现在要求在每个格子上面绑定一个点击事件(click),请问是否需要将下面的命令执行100次?

$("td").on("click", function(){



$(this).toggleClass("click");


});

回答是不需要,我们只要把这个事件绑定在table元素上面就可以了,因为td元素发生点击事件之后,这个事件会"冒泡"到父元素table上面,从而被监听到

因此,这个事件只需要在父元素绑定1次即可,而不需要在子元素上绑定100次,从而大大提高性能。这就叫事件的"委托处理",也就是子元素"委托"父元素处理这个事件

$("table").on("click", "td", function(){



$(this).toggleClass("click");


});

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

$(document).on("click", "td", function(){



$(this).toggleClass("click");


});

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

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

少改动DOM

1、改动DOM结构开销很大,因此不要频繁使用.append()、.insertBefore()和.insetAfter()这样的方法

如果要插入多个元素,就先把它们合并,然后再一次性插入。根据测试,合并插入比不合并插入,快了将近10倍

2、如果要对一个DOM元素进行大量处理,应该先用.detach()方法,把这个元素从DOM中取出来,处理完毕以后,再重新插回文档。根据测试,使用.detach()方法比不使用时,快了60%

3、如果要在DOM元素上储存数据,不要写成下面这样:

var elem = $('#elem');


elem.data(key,value);

而要写成

var elem = $('#elem');


$.data(elem[0],key,value);

根据测试,后一种写法要比前一种写法,快了将近10倍。因为elem.data()方法是定义在jQuery函数的prototype对象上面的,而$.data()方法是定义jQuery函数上面的,调用的时候不从复杂的jQuery对象上调用,所以速度快得多

4、插入html代码的时候,浏览器原生的innterHTML()方法比jQuery对象的html()更快

尽量少生成jQuery对象

每当使用一次选择器(比如$('#id')),就会生成一个jQuery对象。jQuery对象是一个很庞大的对象,带有很多属性和方法,会占用不少资源。所以,尽量少生成jQuery对象

举例来说,许多jQuery方法都有两个版本,一个是供jQuery对象使用的版本,另一个是供jQuery函数使用的版本。下面两个例子,都是取出一个元素的文本,使用的都是text()方法

既可以使用针对jQuery对象的版本:

var $text = $("#text");


var $ts = $text.text();

也可以使用针对jQuery函数的版本:

var $text = $("#text");


var $ts = $.text($text);

由于后一种针对jQuery函数的版本不通过jQuery对象操作,所以相对开销较小,速度比较快

选择作用域链最短的方法

严格地说,这一条原则对所有Javascript编程都适用,而不仅仅针对jQuery

我们知道,Javascript的变量采用链式作用域。读取变量的时候,先在当前作用域寻找该变量,如果找不到,就前往上一层的作用域寻找该变量。这样的设计,使得读取局部变量比读取全局变量快得多

请看下面两段代码,第一段代码是读取全局变量:

var a = 0;


function x(){



a += 1;


}

第二段代码是读取局部变量:

function y(){



var a = 0;



a += 1;


}

第二段代码读取变量a的时候,不用前往上一层作用域,所以要比第一段代码快五六倍

同理,在调用对象方法的时候,closure模式要比prototype模式更快

prototype模式:

var X = function(name){ this.name = name; }


X.prototype.get_name = function() { return this.name; };

closure模式:

var Y = function(name) {



var y = { name: name };



return { 'get_name': function() { return y.name; } };


};

同样是get_name()方法,closure模式更快

使用Pub/Sub模式管理事件

当发生某个事件后,如果要连续执行多个操作,最好不要写成下面这样:

function doSomthing{



doSomethingElse();



doOneMoreThing();


}

而要改用事件触发的形式:

function doSomething{



$.trigger("DO_SOMETHING_DONE");


}


$(document).on("DO_SOMETHING_DONE", function(){



doSomethingElse(); 

  });

还可以考虑使用deferred对象

function doSomething(){


var dfd = new $.Deferred();


//Do something async, then... 


//dfd.resolve();


return dfd.promise();

}

function doSomethingElse(){


$.when(doSomething()).then(//The next thing);

}

更多关于jQuery代码优化的方法请点击下面的相关链接

jQuery 相关文章推荐
jQuery Tree Multiselect使用详解
May 02 jQuery
jQuery操作css样式
May 15 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 #jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 #jQuery
Jquery Datatables的使用详解
Jan 30 #jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 #jQuery
jquery将信息遍历到界面上实例代码
Jan 21 #jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 #jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 #jQuery
You might like
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
python中必要的名词解释
2019/11/20 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
PyCharm如何导入python项目的方法
2020/02/06 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
python 穷举指定长度的密码例子
2020/04/02 Python
用python批量下载apk
2020/12/29 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
设计师珠宝:Ylang 23
2018/05/11 全球购物
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
Java字符串逆序方法详情
2022/03/21 Java/Android