热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何提高jquery的性能

缓存变量DOM遍历是昂贵的,所以尽量将会重用的元素缓存。糟糕h$('#element').height();$('#element').css(&#

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

  1. // 糟糕
  2. h = $(‘#element‘).height();
  3. $(‘#element‘).css(‘height‘,h-20);
  4. // 建议
  5. $element = $(‘#element‘);
  6. h = $element.height();
  7. $element.css(‘height‘,h-20);


避免全局变量

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

  1. // 糟糕
  2. $element = $(‘#element‘);
  3. h = $element.height();
  4. $element.css(‘height‘,h-20);
  5. // 建议
  6. var $element = $(‘#element‘);
  7. var h = $element.height();
  8. $element.css(‘height‘,h-20);


使用匈牙利命名法

在变量前加$前缀,便于识别出jQuery对象。

  1. // 糟糕
  2. var first = $(‘#first‘);
  3. var secOnd= $(‘#second‘);
  4. var value = $first.val();
  5. // 建议 - 在jQuery对象前加$前缀
  6. var $first = $(‘#first‘);
  7. var $secOnd= $(‘#second‘),
  8. var value = $first.val();


使用 Var 链(单 Var 模式)

将多条var语句合并为一条语句,我建议将未赋值的变量放到后面。

  1. var 
  2.   $first = $(‘#first‘),
  3.   $secOnd= $(‘#second‘),
  4.   value = $first.val(),
  5.   k = 3,
  6.   COOKIEstring = ‘SOMECOOKIESPLEASE‘,
  7.   i,
  8.   j,
  9.   myArray = {};


请使用’On’

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

  1. // 糟糕
  2. $first.click(function(){
  3.     $first.css(‘border‘,‘1px solid red‘);
  4.     $first.css(‘color‘,‘blue‘);
  5. });
  6. $first.hover(function(){
  7.     $first.css(‘border‘,‘1px solid red‘);
  8. })
  9. // 建议
  10. $first.on(‘click‘,function(){
  11.     $first.css(‘border‘,‘1px solid red‘);
  12.     $first.css(‘color‘,‘blue‘);
  13. })
  14. $first.on(‘hover‘,function(){
  15.     $first.css(‘border‘,‘1px solid red‘);
  16. })


精简Javascript

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

  1. // 糟糕
  2. $first.click(function(){
  3.     $first.css(‘border‘,‘1px solid red‘);
  4.     $first.css(‘color‘,‘blue‘);
  5. });
  6. // 建议
  7. $first.on(‘click‘,function(){
  8.     $first.css({
  9.         ‘border‘:‘1px solid red‘,
  10.         ‘color‘:‘blue‘
  11.     });
  12. });


链式操作

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

  1. // 糟糕
  2. $second.html(value);
  3. $second.on(‘click‘,function(){
  4.     alert(‘hello everybody‘);
  5. });
  6. $second.fadeIn(‘slow‘);
  7. $second.animate({height:‘120px‘},500);
  8. // 建议
  9. $second.html(value);
  10. $second.on(‘click‘,function(){
  11.     alert(‘hello everybody‘);
  12. }).fadeIn(‘slow‘).animate({height:‘120px‘},500);


维持代码的可读性

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

  1. // 糟糕
  2. $second.html(value);
  3. $second.on(‘click‘,function(){
  4.     alert(‘hello everybody‘);
  5. }).fadeIn(‘slow‘).animate({height:‘120px‘},500);
  6. // 建议
  7. $second.html(value);
  8. $second
  9.     .on(‘click‘,function(){ alert(‘hello everybody‘);})
  10.     .fadeIn(‘slow‘)
  11.     .animate({height:‘120px‘},500);


选择短路求值

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

  1. // 糟糕
  2. function initVar($myVar) {
  3.     if(!$myVar) {
  4.         $myVar = $(‘#selector‘);
  5.     }
  6. }
  7. // 建议
  8. function initVar($myVar) {
  9.     $myVar = $myVar || $(‘#selector‘);
  10. }


选择捷径

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

  1. // 糟糕
  2. if(collection.length > 0){..}
  3. // 建议
  4. if(collection.length){..}


繁重的操作中分离元素

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

  1. // 糟糕
  2. var 
  3.     $cOntainer= $("#container"),
  4.     $cOntainerLi= $("#container li"),
  5.     $element = null;
  6. $element = $containerLi.first(); 
  7. //... 许多复杂的操作
  8. // better
  9. var 
  10.     $cOntainer= $("#container"),
  11.     $cOntainerLi= $container.find("li"),
  12.     $element = null;
  13. $element = $containerLi.first().detach(); 
  14. //... 许多复杂的操作
  15. $container.append($element);


熟记技巧

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

  1. // 糟糕
  2. $(‘#id‘).data(key,value);
  3. // 建议 (高效)
  4. $.data(‘#id‘,key,value);


使用子查询缓存的父元素

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

  1. // 糟糕
  2. var 
  3.     $cOntainer= $(‘#container‘),
  4.     $cOntainerLi= $(‘#container li‘),
  5.     $cOntainerLiSpan= $(‘#container li span‘);
  6. // 建议 (高效)
  7. var 
  8.     $cOntainer= $(‘#container ‘),
  9.     $cOntainerLi= $container.find(‘li‘),
  10.     $cOntainerLiSpan= $containerLi.find(‘span‘);


避免通用选择符

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

  1. // 糟糕
  2. $(‘.container > *‘); 
  3. // 建议
  4. $(‘.container‘).children();


避免隐式通用选择符

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

  1. // 糟糕
  2. $(‘.someclass :radio‘); 
  3. // 建议
  4. $(‘.someclass input:radio‘);


优化选择符

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

  1. // 糟糕
  2. $(‘div#myid‘); 
  3. $(‘div#footer a.myLink‘);
  4. // 建议
  5. $(‘#myid‘);
  6. $(‘#footer .myLink‘);


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

  1. // 糟糕
  2. $(‘#outer #inner‘); 
  3. // 建议
  4. $(‘#inner‘);


坚持最新版本

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

  1. // 糟糕
  2. $(‘#outer #inner‘); 
  3. // 建议
  4. $(‘#inner‘);


利用CDN

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

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

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

如何提高jquery的性能


推荐阅读
  • React基础篇一 - JSX语法扩展与使用
    本文介绍了React基础篇一中的JSX语法扩展与使用。JSX是一种JavaScript的语法扩展,用于描述React中的用户界面。文章详细介绍了在JSX中使用表达式的方法,并给出了一个示例代码。最后,提到了JSX在编译后会被转化为普通的JavaScript对象。 ... [详细]
  • 本文介绍了2015年九月八日的js学习总结及相关知识点,包括参考书《javaScript Dom编程的艺术》、js简史、Dom、DHTML、解释型程序设计和编译型程序设计等内容。同时还提到了最佳实践是将标签放到HTML文档的最后,并且对语句和注释的使用进行了说明。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 猜字母游戏
    猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]
  • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
    本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • Node.js学习笔记(一)package.json及cnpm
    本文介绍了Node.js中包的概念,以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM(Node Package Manager)的基本介绍和使用方法,以及如何通过NPM下载第三方模块。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • Jquery 跨域问题
    为什么80%的码农都做不了架构师?JQuery1.2后getJSON方法支持跨域读取json数据,原理是利用一个叫做jsonp的概念。当然 ... [详细]
  • 本文总结了在编写JS代码时,不同浏览器间的兼容性差异,并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ... [详细]
  • 如何压缩网站页面以减少页面加载时间
    本文介绍了影响网站打开时间的两个因素,即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法,并推荐了相应的压缩工具。此外,还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]
  • 第8章 使用外部和内部链接
    8.1使用web地址LearnAboutafricanelephants. ... [详细]
  • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
  • 前言:关于跨域CORS1.没有跨域时,ajax默认是带cookie的2.跨域时,两种解决方案:1)服务器端在filter中配置详情:http:blog.csdn.netwzl002 ... [详细]
author-avatar
手机用户2602914293
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有