jQuery性能优化技巧分析


Posted in Javascript onFebruary 20, 2015

本文较为详细分析了jQuery性能优化技巧。分享给大家供大家参考。具体分析如下:

一、使用最新版本的jQuery类库

jQuery新版本会较上个版本进行Bug修复和一些优化,不过需要注意的是,在更换版本之后,不要忘记测试你的代码,毕竟有时候不是完全向后兼容的。

二、使用合适的选择器

jQuery选择器性能最佳到最差方式如下:

id选择器,如$('#id', context)
标签选择器,如$('p', context)
class选择器,如$('.class', context)
属性选择器,如$('[attribute=value]', context)
伪类选择器,如$(':hidden', context)

补充及注意事项:

尽量给选择器指定上下文context,可以缩小定位元素的范围
避免id重复修饰id,错误代码:var $el = $('#list #item1')
避免标签或class修饰id,错误代码: var $el = $('ul #item1')
如果使用属性选择器,尽量指定所属的标签选择器,这样可以加快访问速度,正确代码:var $el = $('a[title="link"]')

三、缓存对象

下面是性能不好的方式:

$('#home').css(...);
$('#home').bind('click', function() {});
$('#home').addClass(...);

说明:jQuery会在创建每个选择器的过程中,查找DOM,消耗时间与性能。

比较好的方式:

var $homeLink = $('#home', context);
$homeLink.css(...);
$homeLink.bind('click', function() {});
$homelink.addClass(...);

说明:永远不要让相同的选择器在你的代码里出现多次。

四、循环时的DOM操作

使用jQuery可以很方便的添加,删除或者修改DOM节点,但是在一些循环中,例如for(),while()或者$.each()中处理节点时,下面有个实例值得大家注意:

var $list = $('#list');
for(var i = 0; i < 100; i++) {
  $list.append('<li>' + i + '</li>');
}

说明:循环添加li节点100次,这种操作消耗的性能不低,所以更好的方式是将要添加的节点在插入DOM树之前全部创建好,再一次性添加到DOM树中。更好的方式:

var $list = $('#list'),
  fragment = '';
for(var i = 0; i < 100; i++) {
  fragment += '<li>' + i + '</li>';
}
$list.append(fragment);

五、数组方式使用jQuery对象

使用jQuery选择器获取结果是一个jQuery对象。在性能方面,建议使用简单for或者while循环来处理,而不是$.each(),这样能使你的代码更快。

另外注意:检查长度是一个检查jQuery对象是否存在的方式。

var $list = $('#list');
if($list) {  //总是true
  //do something
}
if($list.length) { //拥有元素才返回true
  //do something
}

六、事件代理

每一个JavaScript事件(如click,mouseover)都会冒泡到父级节点。当我们需要给多个元素调用同一个函数时,这点会很有用。

...
<ul id="list">
  <li id="item1"></li>
  <li id="item2"></li>
  <li id="item3"></li>
  ...
</ul>
...

var $item1 = $('#item1'),
  $item2 = $('#item2'),
  $item3 = $('#item3');
  ...

$item1.click(function() {...});
$item2.click(function() {...});
$item3.click(function() {...});
...

说明:这种方式,如果有100个li,要绑定100个事件。显然,不科学,性能损耗很多。

更好的方式是:只需向li的父节点ul绑定一次事件,然后通过event.target获取到点击的当前元素。

var $list = $('#list');
$list.click(function(e) {
  var $currentItem = $(e.target);  //e.target捕捉到当前触发事件的目标元素
  ...
});

七、将你的代码转化成jQuery插件

如果每次都花时间去写类似的jQuery代码,那么可以考虑将这部分类似的代码变成插件,它能够使你的代码有更好的重用性,并且能够有效的帮助你组织代码。

八、使用Javascript数组join()来拼接字符串

处理长字符串的时候,使用join()方法有助于优化性能。

var arr = [];
for(var i = 0; i < 100; i++){
  arr[i] = '<li>' + i + '</li>';
}
$list.html(arr.join(''));

九、合理利用HTML5的data属性

HTML5的data属性可以帮助我们插入数据,特别是前后端的数据交换。jQuery的data()方法,有效的利用HTML5的属性,来自动得到数据。

...
<a id="info" data-info-index="23" data-role="linkInfo"></a>
...

var $infoLink = $('#info');
var infoIndex = $infoLink.data('info-index');
var type = $infoLink.data('linkInfo');

十、尽量使用原生的JavaScript方法

如:

$(this).css('color': 'blue');

优化成:

this.style.color = 'blue';

如:

$('<p></p>');

优化成:

$(document.createElement('p'));

十一、压缩JavaScript

使用压缩工具压缩JavaScript文件。
发布项目时,应使用“压缩版”JavaScript文件。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
测试你的JS的掌握程度的代码
Dec 09 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
angular.bind使用心得
Oct 26 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
移动端js图片查看器
Nov 17 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
js实现简易计算器小功能
Nov 18 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 #Javascript
jQuery源码解读之addClass()方法分析
Feb 20 #Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 #Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 #Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 #Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 #Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 #Javascript
You might like
php include的妙用,实现路径加密
2008/07/29 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
Python3数字求和的实例
2019/02/19 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
英国门把手公司:Door Handle Company
2019/05/12 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
图书室管理制度
2014/01/19 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
教师节表彰会主持词
2015/07/06 职场文书
用Java实现简单计算器功能
2021/07/21 Java/Android
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
ICOM R71E和R72E图文对比解说
2022/04/07 无线电
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript