jQuery代码优化方法总结


Posted in jQuery onJanuary 29, 2018

用对选择器

在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实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jquery写出PC端轮播图实例
Jan 26 #jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 #jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 #jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 #jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 #jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 #jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 #jQuery
You might like
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
使用vue构建一个上传图片表单
2017/07/04 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
详解numpy的argmax的具体使用
2019/05/27 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
keras 多gpu并行运行案例
2020/06/10 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
授权委托书范本
2014/04/03 职场文书
爱国主义演讲稿
2014/05/07 职场文书
检讨书模板
2015/01/29 职场文书
后天观后感
2015/06/08 职场文书
素质教育学习心得体会
2016/01/19 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python
mysql 排序失效
2022/05/20 MySQL