提高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 相关文章推荐
javascript 兼容鼠标滚轮事件
Apr 07 Javascript
JavaScript 高效运行代码分析
Mar 18 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
JS实现移动端点击按钮复制文本内容
Jul 28 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
python 实现性别识别
2020/11/21 Python
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
简历自我评价怎么写呢?
2014/01/06 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
市级三好生竞选稿
2015/11/21 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
Python基础之函数嵌套知识总结
2021/05/23 Python
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS