jQuery简单的性能优化(二)

本文中用到的jQuery版本为v1.12.0

1. 缓存对象

 在写jQuery代码的时候,有些开发人员喜欢这么写:
$('#id').css('color', 'white');
$('#id').on('click', function(event) {...});
$('#id').find('.childNode').siblings().hide();
$('#id').fadeIn('500');

当然,开发过程中的跳跃思维会导致你有可能书写类似这样的代码,这无可厚非,但是这么书写导致的是:jQuery会在创建每一个选择器的过程中,查找DOM,创建多个jQuery对象。相对应的,比较良好的书写方式如下:

var $id = $('#id');
$id.css('color', 'white');
$id.on('click', function(event) {...});
$id.find('.childNode').siblings().hide();
$id.fadeIn('500');

当然,使用jQuery的链式操作会使代码更加简洁:

var $id = $('#id');
$id.css('color', 'white')
        .on('click', function(event) {...})
        .find('.childNode').siblings().hide()
        .fadeIn('500');

这里只是为了说明使用缓存变量的重要性,这和Java开发中不要随意的创建对象一样,可以帮助你有效地提高代码的执行效率。
如果在其他函数也用到了该jQuery对象,那么可以把它缓存到全局环境中。如:

window.$me = {
        id1 = $('#id1'),
        head = $('#title')
};
function test () {
        $me.id1.css('color', 'white')
            .on('click', function(event) {...})
            .find('.childNode').siblings().hide()
            .fadeIn('500');
        $me.head.text('I am a Head');
}

切记:永远不要让相同的选择器在你的代码中出现多次。

2. 循环时的DOM操作

使用jQuery可以很方便的对DOM节点进行增删查改,但是在一些循环中,如for()while()$.each()中处理节点时,如下例:

$ul = $('#ul-list');
$.each(dataArray, function(index, val) {
        $ul.append('<li>'+dataArray[index]+'</li>');
});

在上面代码中,将dataArray中的数据逐个加入到ul中,期间每一条数据都通过.append()将新节点添加到容器中。实际上jQuery操作消耗的性能也不低,所以更好的方式是尽可能的减少DOM操作。可以将整个元素字符串在插入DOM之前全部创建好。如:

var $ul = $('#ul-list');
var html = "";
$.each(dataArray, function(index, val) {
        html += '<li>'+dataArray[index]+'</li>';
});
$ul.html(html);

3. 数组方式使用jQuery对象

使用jQuery选择器获取的结果是一个jQuery对象。然而,jQuery类库会让你感觉你在使用一个定义了索引和长度的数组。在性能方面,使用for()或者while()来处理比使用$.each()要快。
同时,检查该数组的长度也是一个检查jQuery对象是否存在的方法。如:

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

4. 事件代理

每一个JavaScript事件(如:clickmouseover等)都会冒泡到父级节点。当我们需要给多个元素调用同个函数时,这点会很有用。比如,我们要唯一个表格绑定这样的行为:点击td后,把背景色设置为红色,代码如下:

$("#myTabel td").click(function(event){
      $(this).css('background-color','red');
})

假设有100个td,在使用上述方式的时候,就绑定了100个事件,这将带来很负面的性能影响。
代替这种效率较低的多元素事件监听的方法就是,只需向它们的父节点绑定一次事件,然后通过event.tartget获取点击到的当前元素,代码如下:

$("#myTabel").click(function(event){
      var $td = $(event.target);
      $td.css('background-color','red');
})

在改进方式中,只为一个元素绑定了一个事件,显然这种方式的性能要优于之前那种。同时,在jQuery 1.7版本中提供了一个新的方式:on(),来帮助你将整个事件监听封装到一个便利的方法中:

$("#myTabel").on('click', 'td', function(event){
      $(this).css('background-color','red');
})

5.尽量使用原生的JavaScript方法

下面的代码,用来判断多选框是否选中:

var $cb = $('#checkbox');
$cb.click(function(e){
        if($cb.is(':checked')){
                alert('你已选中该多选框');
        }
});

这里使用了jQuery提供的is()方法来判断多选框是否选中,但这里可以直接使用原生的JavaScript的方法:

var $cb = $('#checkbox');
$cb.click(function(event) {
    if (this.checked) {alert('checked')}
});

毋庸置疑,第二种方式效率高于第一种,因为它不需要再去调用其他函数。
还有很多:

//$(this).css('color','red');
this.style.color = 'red';//better;

//$('<p>');
$(document.createElement('p'));//better;

方法的选择很重要,有时候,也许你根本不需要jQuery。

6.压缩JavaScript

现在的web项目总是离不开大量的JavaScript,而js文件的体积越来越大,随之也影响到页面的感知新能。因此,需要对JavaScript文件进行压缩。
压缩的方法和工具在网上很多,大家可以自行搜索。

完。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,354评论 0 44
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 16,635评论 18 503
  • 1. 四年前,我第一次见到阿春。 天气炎热,学校很大,我提着26寸的箱子,差点中暑。 阿春就是这个时候出现的,他递...
    诺然yz阅读 7,137评论 124 207
  • 晨起的朝阳无限好,租了一辆小黄自行车准备今天的十里画廊骑行。 九月末的尾巴,不冷不热,微风徐徐,好个秋天。 第一站...
    清风伏笔阅读 443评论 0 9