如何书写高质量jQuery代码(使用jquery性能问题)


Posted in Javascript onJune 30, 2014

如何书写高质量jQuery代码(使用jquery性能问题)

1.正确引用jQuery

1.尽量在body结束前才引入jQuery,而不是在head中。
2.借助第三方提供的CDN来引入jQuery,同时注意当使用第三方CDN出现问题时,要引入本地的jQuery文件。(对于已经使用了cdn的网站可以忽略,现在用户带宽都升级了,这个可以忽略了,放别人机器不一定稳定)
3.如果在</body>前引入script文件的话,就不用写document.ready了,因为这时执行js代码时DOM已经加载完毕了。

<body>
 <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
 <script>window.jQuery || document.write('<script src="jquery1.8.min.js">\x3C/script>')</script>
</body>

2.优化jQuery选择器

高效正确的使用jQuery选择器是熟练使用jQuery的基础,而掌握jQuery选择器需要一定的时间积累,我们开始学习jQuery时就应该注意选择器的使用。

<div id="nav" class="nav">
 <a class="home" href="https://3water.com">三水点靠木</a>
 <a class="articles" href="https://3water.com/list/list_172_1.htm">jQuery教程</a>
</div>

如果我们选择class为home的a元素时,可以使用下边代码:

$('.home'); //1
$('#nav a.home'); //2
$('#nav').find('a.home'); //3

1.方法1会使jQuery在整个DOM中查找class为home的a元素,性能可想而知。
2.方法2为要查找的元素添加了上下文,在这里变为查找id为nav的子元素,查找性能得到了很大提升。
3.方法3使用了find方法,它的速度更快,所以方法三最好。

关于jQuery选择器的性能优先级,ID选择器快于元素选择器,元素选择器快于class选择器。因为ID选择器和元素选择器是原生的JavaScript操作,而类选择器不是,大家顺便可以看下find context 区别,find() children区别。

3.缓存jQuery对象

缓存jQuery对象可以减少不必要的DOM查找,关于这点大家可以参考下缓存jQuery对象来提高性能。

4.正确使用事件委托
事件委托可以使事件更好的执行,在动态添加的元素上绑定事件也需要委托来实现,在新版本的jQuery中推荐大家使用on来给元素绑定一个或多个事件的处理函数。

<table id="t">
 <tr>
  <td>我是单元格</td>
 </tr>
</table>

比如我们要在上边的单元格上绑定一个单击事件,不注意的朋友可能随手写成下边的样子:

$('#t').find('td').on('click', function () {
 $(this).css({ 'color': 'red', 'background': 'yellow' });
});

这样会为每个td绑上事件,在为100个单元格绑定click事件的测试中,两者性能相差7倍之多,好的做法应该是下边写法:

$('#t').on('click', 'td', function () {
 $(this).css({ 'color': 'red', 'background': 'yellow' });
});

5.精简jQuery代码
如在上述代码中我们对jQuery代码进行了适当的合并,类似的还有.attr()方法等,我们没有写成下边的方式:

$('#t').on('click', 'td', function () {
 $(this).css('color', 'red').css('background', 'yellow');
});

6.减少DOM操作
刚开始使用jQuery时可能会频繁的操作DOM,这是相当耗费性能的。如我们要在body中动态输出一个表格,一些朋友会这样写:

var $t = $('body');
$t.append('<table>');
$t.append('<tr><td>1</td></tr>');
$t.append('</table>');

好的做法:

$('body').append('<table><tr><td>1</td></tr></table>');

这样在拼接完table串后再添加到body中,对DOM的操作只需一次。群里以前有朋友就因为这个导致在IE下输出时出现问题,而关于字符串的拼接可以参考下最快创建字符串的方法。

7.不使用jQuery

原生函数总是最快的,这点不难理解,在代码书写中我们不应该忘记原生JS。

就先总结这几条吧,每条建议并不难理解,但总结全面的话还是要花费不少时间的。如在减少代码段中,如果需要根据条件从数组中得到新数组时,可以使用$.grep() 方法,如果你在使用jQuery时有自己必得的话,欢迎在留言中和大家分享!

下面是其它网友的补充:

注意定义jQuery变量的时候添加var关键字

这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下:

$loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了相同的变量名,就会郁闷至死的

请使用一个var来定义变量

如果你使用多个变量的话,请如下方式定义:

var page = 0,

  $loading = $('#loading'),

  $body = $('body');

不要给每一个变量都添加一个var关键字,除非你有严重的强迫症
定义jQuery变量

申明或者定义变量的时候,请记住如果你定义的是jQuery的变量,请添加一个$符号到变量前,如下:

var$loading = $('#loading');

这里定义成这样的好处在于,你可以有效的提示自己或者其它阅读你代码的用户,这是一个jQuery的变量。

DOM操作请务必记住缓存(cache)

在jQuery代码开发中,我们常常需要操作DOM,DOM操作是非常消耗资源的一个过程,而往往很多人都喜欢这样使用jQuery:

$('#loading').html('完毕');

$('#loading').fadeOut();

代码没有任何问题,你也可以正常运行出结果,但是这里注意你每次定义并且调用$('#loading')的时候,都实际创建了一个新的变量,如果你需要重用的话,记住一定要定义到一个变量里,这样可以有效的缓存变量内容,如下:

var $loading = $('#loading');

$loading.html('完毕');$loading.fadeOut();

这样性能会更好。

使用链式操作

上面那个例子,我们可以写的更简洁一些:

var $loading = $('#loading');

$loading.html('完毕').fadeOut();

精简jQuery代码

尽量把一些代码都整合到一起,请勿这样编码:

// !!反面人物$button.click(function(){

    $target.css('width','50%');

    $target.css('border','1px solid #202020');

    $target.css('color','#fff');

});

应该这样书写:

$button.click(function(){

    $target.css({'width':'50%','border':'1px solid #202020','color':'#fff'});

});

避免使用全局类型的选择器

请勿如下方式书写:$('.something > *');

这样书写更好:$('.something').children();

不要叠加多个ID

请勿如下书写:$('#something #children');

这样就够了:$('#children');

多用逻辑判断||或者&&来提速

请勿如下书写:

if(!$something) {

    $something = $('#something ');

}

这样书写性能更好:

$something= $something|| $('#something');
 
 
尽量使用更少的代码

与其这样书写:if(string.length > 0){..}

不如这样书写:if(string.length){..}

尽量使用 .on方法

如果你使用比较新版本的jQuery类库的话,请使用.on,其它任何方法都是最终使用.on来实现的。

尽量使用最新版本的jQuery

最新版本的jQuery拥有更好的性能,但是最新的版本可能不支持ie6/7/8,所以大家需要自己针对实际情况选择。

尽量使用原生的Javascript

如果使用原生的Javascript也可以实现jQuery提供的功能的话,推荐使用原生的javascript来实现。

Javascript 相关文章推荐
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 #Javascript
html文本框提示效果的示例代码
Jun 28 #Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 #Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 #Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 #Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 #Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 #Javascript
You might like
php面向对象的方法重载两种版本比较
2008/09/08 PHP
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
php之可变函数的实例详解
2017/09/13 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
python的等深分箱实例
2019/11/22 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
python中四舍五入的正确打开方式
2021/01/18 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
简短大学毕业感言
2014/01/18 职场文书
导师评语大全
2014/04/26 职场文书
保护环境标语
2014/06/09 职场文书
借款协议书
2014/09/16 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
争做文明公民倡议书
2019/06/24 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
Python数据分析之pandas函数详解
2021/04/21 Python