提高jQuery性能优化的技巧


Posted in Javascript onAugust 03, 2015

下面把提高jQuery性能优化技巧给大家分享如下:

缓存变量
DOM遍历是昂贵的,所以尽量将会重用的元素缓存。

// 糟糕

h = $('#element').height();

$('#element').css('height',h-20);

// 建议

$element = $('#element');

h = $element.height();

$element.css('height',h-20);

避免全局变量
jQuery与javascript一样,一般来说,最好确保你的变量在函数作用域内。

// 糟糕

$element = $('#element');

h = $element.height();

$element.css('height',h-20);

// 建议

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

var h = $element.height();

$element.css('height',h-20);

使用匈牙利命名法
在变量前加$前缀,便于识别出jQuery对象。

// 糟糕

var first = $('#first');

var second = $('#second');

var value = $first.val();

// 建议 - 在jQuery对象前加$前缀

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

var $second = $('#second'),

var value = $first.val();

使用 Var 链(单 Var 模式)
将多条var语句合并为一条语句,我建议将未赋值的变量放到后面。

var 

  $first = $('#first'),

  $second = $('#second'),

  value = $first.val(),

  k = 3,

  cookiestring = 'SOMECOOKIESPLEASE',

  i,

  j,

  myArray = {};

请使用'On'
在新版jQuery中,更短的 on(“click”) 用来取代类似 click() 这样的函数。在之前的版本中 on() 就是 bind()。自从jQuery 1.7版本后,on() 附加事件处理程序的首选方法。然而,出于一致性考虑,你可以简单的全部使用 on()方法。

// 糟糕

$first.click(function(){

    $first.css('border','1px solid red');

    $first.css('color','blue');

});

$first.hover(function(){

    $first.css('border','1px solid red');

})

// 建议

$first.on('click',function(){

    $first.css('border','1px solid red');

    $first.css('color','blue');

})

$first.on('hover',function(){

    $first.css('border','1px solid red');

})

精简javascript
一般来说,最好尽可能合并函数。

// 糟糕
$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});
// 建议
$first.on('click',function(){
    $first.css({
        'border':'1px solid red',
        'color':'blue'
    });
});

// 糟糕

$first.click(function(){

    $first.css('border','1px solid red');

    $first.css('color','blue');

});

// 建议

$first.on('click',function(){

    $first.css({

        'border':'1px solid red',

        'color':'blue'

    });

});

链式操作
jQuery实现方法的链式操作是非常容易的。下面利用这一点。

// 糟糕

$second.html(value);

$second.on('click',function(){

    alert('hello everybody');

});

$second.fadeIn('slow');

$second.animate({height:'120px'},500);

// 建议

$second.html(value);

$second.on('click',function(){

    alert('hello everybody');

}).fadeIn('slow').animate({height:'120px'},500);

维持代码的可读性
伴随着精简代码和使用链式的同时,可能带来代码的难以阅读。添加缩紧和换行能起到很好的效果。

// 糟糕

$second.html(value);

$second.on('click',function(){

    alert('hello everybody');

}).fadeIn('slow').animate({height:'120px'},500);

// 建议

$second.html(value);

$second

    .on('click',function(){ alert('hello everybody');})

    .fadeIn('slow')

    .animate({height:'120px'},500);

选择短路求值
短路求值是一个从左到右求值的表达式,用 &&(逻辑与)或 || (逻辑或)操作符。

// 糟糕

function initVar($myVar) {

    if(!$myVar) {

        $myVar = $('#selector');

    }

}

// 建议

function initVar($myVar) {

    $myVar = $myVar || $('#selector');

}

选择捷径
精简代码的其中一种方式是利用编码捷径。

// 糟糕

if(collection.length > 0){..}

// 建议

if(collection.length){..}

繁重的操作中分离元素
如果你打算对DOM元素做大量操作(连续设置多个属性或css样式),建议首先分离元素然后在添加。

// 糟糕

var 

    $container = $("#container"),

    $containerLi = $("#container li"),

    $element = null;

$element = $containerLi.first(); 

//... 许多复杂的操作

// better

var 

    $container = $("#container"),

    $containerLi = $container.find("li"),

    $element = null;

$element = $containerLi.first().detach(); 

//... 许多复杂的操作

$container.append($element);

熟记技巧
你可能对使用jQuery中的方法缺少经验,一定要查看的文档,可能会有一个更好或更快的方法来使用它。

// 糟糕

$('#id').data(key,value);

// 建议 (高效)

$.data('#id',key,value);

使用子查询缓存的父元素
正如前面所提到的,DOM遍历是一项昂贵的操作。典型做法是缓存父元素并在选择子元素时重用这些缓存元素。

// 糟糕

var 

    $container = $('#container'),

    $containerLi = $('#container li'),

    $containerLiSpan = $('#container li span');

// 建议 (高效)

var 

    $container = $('#container '),

    $containerLi = $container.find('li'),

    $containerLiSpan= $containerLi.find('span');

避免通用选择符
将通用选择符放到后代选择符中,性能非常糟糕。

// 糟糕

$('.container > *'); 

// 建议

$('.container').children();

避免隐式通用选择符
通用选择符有时是隐式的,不容易发现。

// 糟糕

$('.someclass :radio'); 

// 建议

$('.someclass input:radio');

优化选择符
例如,Id选择符应该是唯一的,所以没有必要添加额外的选择符。

// 糟糕

$('div#myid'); 

$('div#footer a.myLink');

// 建议

$('#myid');

$('#footer .myLink');

避免多个ID选择符在此强调,ID 选择符应该是唯一的,不需要添加额外的选择符,更不需要多个后代ID选择符。

// 糟糕

$('#outer #inner'); 

// 建议

$('#inner');

坚持最新版本
新版本通常更好:更轻量级,更高效。显然,你需要考虑你要支持的代码的兼容性。例如,2.0版本不支持ie 6/7/8。摒弃弃用方法关注每个新版本的废弃方法是非常重要的并尽量避免使用这些方法。

// 糟糕

$('#outer #inner'); 

// 建议

$('#inner');

利用CDN
谷歌的CND能保证选择离用户最近的缓存并迅速响应。(使用谷歌CND请自行搜索地址,此处地址以不能使用,推荐jquery官网提供的CDN)。

必要时组合jQuery和javascript原生代码
如上所述,jQuery就是javascript,这意味着用jQuery能做的事情,同样可以用原生代码来做。原生代码(或vanilla)的可读性和可维护性可能不如jQuery,而且代码更长。但也意味着更高效(通常更接近底层代码可读性越差,性能越高,例如:汇编,当然需要更强大的人才可以)。牢记没有任何框架能比原生代码更小,更轻,更高效(注:测试链接已失效,可上网搜索测试代码)。鉴于vanilla 和 jQuery之间的性能差异,我强烈建议吸收两人的精华,使用(可能的话)和jQuery等价的原生代码。

最后忠告
最后,我记录这篇文章的目的是提高jQuery的性能和其他一些好的建议。如果你想深入的研究对这个话题你会发现很多乐趣。记住,jQuery并非不可或缺,仅是一种选择。思考为什么要使用它。DOM操作?ajax?模版?css动画?还是选择符引擎?或许javascript微型框架或jQuery的定制版是更好的选择。

以上就是本文针对提高jQuery性能优化详细介绍,希望对大家有所帮助。

Javascript 相关文章推荐
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
DOM 中的事件处理介绍
Jan 18 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
vue实现分页组件
Jun 16 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
jquery简单实现幻灯片的方法
Aug 03 #Javascript
JS拖拽插件实现步骤
Aug 03 #Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 #Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 #Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 #Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 #Javascript
JavaScript图片轮播代码分享
Jul 31 #Javascript
You might like
用PHP查询域名状态whois的类
2006/11/25 PHP
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
php数组删除元素示例
2014/03/21 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
Python实现提取文章摘要的方法
2015/04/21 Python
python类和继承用法实例
2015/07/07 Python
利用python画一颗心的方法示例
2017/01/31 Python
Python分治法定义与应用实例详解
2017/07/28 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
AJAX的全称是什么
2012/11/06 面试题
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
如何客观的进行自我评价
2013/12/17 职场文书
装修设计师求职信
2014/02/26 职场文书
电气工程自动化求职信
2014/03/14 职场文书
新春寄语大全
2014/04/09 职场文书
电子工程求职信
2014/07/17 职场文书