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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 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 程式大小
2006/12/06 PHP
基于HTTP长连接的"服务器推"技术的php 简易聊天室
2009/10/31 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
Python实现单词拼写检查
2015/04/25 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
详解python分布式进程
2018/10/08 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
技术岗位竞聘演讲稿
2014/05/16 职场文书
师范生求职自荐信
2014/06/14 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
Python机器学习之底层实现KNN
2021/06/20 Python
关于 Python json中load和loads区别
2021/11/07 Python
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫
python 使用pandas读取csv文件的方法
2022/12/24 Python