提高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 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
Jquery插件 easyUI属性汇总
Jan 19 Javascript
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
浅析javascript的return语句
Dec 15 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 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中动态HTML的输出技术
2006/10/09 PHP
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
php Session存储到Redis的方法
2013/11/04 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
基于Python实现文件大小输出
2016/01/11 Python
简单谈谈Python流程控制语句
2016/12/04 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
python实现可变变量名方法详解
2019/07/01 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
python Canny边缘检测算法的实现
2020/04/24 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
优秀教师事迹简介
2014/02/02 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
计算机实训报告范文
2014/11/05 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技