如何书写高质量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 相关文章推荐
完美解决AJAX跨域问题
Nov 01 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
React组件refs的使用详解
Feb 09 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
vue-router懒加载的3种方式汇总
Feb 28 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 self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
jQuery ajax cache缓存问题
2010/07/01 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
Python命令行解析模块详解
2018/02/01 Python
python语音识别实践之百度语音API
2018/08/30 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
Python类class参数self原理解析
2020/11/19 Python
css sprite简单实例
2016/05/23 HTML / CSS
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
关于迟到的检讨书
2015/05/06 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
Python快速实现一键抠图功能的全过程
2021/06/29 Python
python开发的自动化运维工具ansible详解
2021/08/07 Python