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 相关文章推荐
Javascript 中的类和闭包
Jan 08 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
使用jQuery重置(reset)表单的方法
May 05 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
Angular 作用域scope的具体使用
Dec 11 Javascript
从零开始搭建一个react项目开发
Feb 09 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
织梦模板标记简介
2007/03/11 PHP
PHPEXCEL 使用小记
2013/01/06 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
vue+php实现的微博留言功能示例
2019/03/16 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
详解python eval函数的妙用
2017/11/16 Python
分分钟入门python语言
2018/03/20 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
2014道德模范事迹材料
2014/02/16 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
小学语文课后反思精选
2014/04/25 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
花木兰观后感
2015/06/10 职场文书
靠谱准确的求职信
2019/04/02 职场文书
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript