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卸载全部事件的思路详解
Apr 03 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
Jquery获取radio选中的值
May 05 jQuery
jquery实现提示语淡入效果
May 05 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jQuery实现带进度条的轮播图
Sep 13 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
PHP中GET变量的使用
2006/10/09 PHP
用Flash图形化数据(一)
2006/10/09 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
php获取随机数组列表的方法
2014/11/13 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
JavaScript 数组运用实现代码
2010/04/13 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
js实现图片粘贴到网页
2019/12/06 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
Python实现获取网站PR及百度权重
2015/01/21 Python
Python生成密码库功能示例
2017/05/23 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
优秀员工获奖感言
2014/03/01 职场文书
《春天来了》教学反思
2014/04/07 职场文书
安全隐患整改报告
2014/11/06 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
学校德育工作总结2015
2015/05/11 职场文书
欢迎新生标语2015
2015/07/16 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android
python实现学员管理系统(面向对象版)
2022/06/05 Python