讨论jQuery和javascript性能的文章并不罕见。然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码。好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验。
首先,在脑子里牢牢记住jQuery就是javascript。这意味着我们应该采取相同的编码惯例,风格指南和最佳实践。
 
首先,如果你是一个javascript新手,我建议您阅读 《给JavaScript初学者的24条最佳实践》 ,这是一篇高质量的javascript教程,接触jQuery之前最好先阅读。
 
当你准备使用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()方法。
 
转载自: 爱思资源网 - 专注WEB前端开发 
原文链接: http://www.aseoe.com/show-13-384-1.html
 

探索高效jQuery的奥秘的更多相关文章

  1. 高效jQuery的奥秘

    讨论jQuery和javascript性能的文章并不罕见.然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码.好的代码会带来速度的提升.快速渲染 ...

  2. 高效 jquery 的奥秘

    当你准备使用 jQuery,我强烈建议你遵循下面这些指南: 1. 缓存变量 DOM 遍历是昂贵的,所以尽量将会重用的元素缓存. // 糟糕 h = $('#element').height(); $( ...

  3. jQuery的奥秘

    颜海镜 高效jQuery的奥秘 讨论jQuery和javascript性能的文章并不罕见.然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码.好 ...

  4. 高效jQuery

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

  5. 高效JQuery编码

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

  6. 深入探索 高效的Java异常处理框架

    转载自:http://www.sunwei.org/archives/196 摘要:本文从Java异常最基本的概念.语法开始讲述了Java异常处理的基本知识,分析了Java异常体系结构,对比Sprin ...

  7. 编写高性能的javascript代码(持续更新)

    参考资料: Vanilla JS——世界上最轻量的JavaScript框架(没有之一) http://segmentfault.com/a/1190000000355277 探索高效jQuery的奥秘 ...

  8. 给JavaScript初学者的24条最佳实践(转:http://www.cnblogs.com/yanhaijing/p/3465237.html)

    作为“30 HTML和CSS最佳实践”的后续,本周,我们将回顾JavaScript的知识 !如果你看完了下面的内容,请务必让我们知道你掌握的小技巧! 1.使用 === 代替 == JavaScript ...

  9. javascript小小技巧

    JS的一些小技巧,我主要是做后台的(.NET),前端知识了解得不多,经验非常有限,不过还是经常写JS代码,对前端有着浓厚的兴趣,特喜欢js这门语言,虽然很多人喷它,但还是很喜欢Js.下面说说项目中我经 ...

随机推荐

  1. HDU 3001 Travelling 3进制状压dp

    题意:10个点,若干条边,边有花费,每个点最多走两次,求走过所有点,花费最少 分析:因为每个点最多走两次,所以联想到3进制,然后枚举状态,就行了(我也是照着网上大神的代码写的) #include &l ...

  2. ASP.NET使用Jquery-Ajax向ashx传递参数中文出现乱码

    今天遇到个问题,IE11下Jquery-Ajax向ashx传递参数中文出现乱码,但在谷歌.火狐.360等浏览器中没有乱码的问题,百度了好久最后发现使用escape()对参数值进行处理就可以了: 参考代 ...

  3. POJ3264 Balanced Lineup 线段树区间最大值 最小值

    Q个数 问区间最大值-区间最小值 // #pragma comment(linker, "/STACK:1024000000,1024000000") #include <i ...

  4. php支持rewrite 时创建.htaccess文件

    1.win+r 快捷键 运行中输入cmd 2.进入dos界面:输入copy con .htaccess   3.回车后可以输入内容,再次回车即可产生文件

  5. 【bzoj2440】完全平方数

    题意: 求第n个不为完全平方数倍数的数 题解: 网上有人说答案不会超过2n (求证0 0?) 竟然不超过2n 那么很明显就是用二分做了 二分判定就是要求小于等于n的合法的数的个数 不难发现一个数若为完 ...

  6. Java程序员的10道XML面试题

    包括web开发人员的Java面试在内的各种面试中,XML面试题在各种编程工作的面试中很常见.XML是一种成熟的技术,经常作为从一个平台到其他平台传输数据的标准.XML面试问题包括用于转换XML文件的X ...

  7. unigui下载文件

    lblProduct.Caption := '<a href="files\1.t" target=new>要下载的文件名</a>';

  8. AutoLayout框架Masonry使用心得

    AutoLayout框架Masonry使用心得 字数1769 阅读1481 评论1 喜欢17 我们组分享会上分享了页面布局的一些写法,中途提到了AutoLayout,会后我决定将很久前挖的一个坑给填起 ...

  9. CSS边框与边界

    (上右下左依次体现)à边框的同一属性名称可以同时使用多个属性值 简化方案:border: 长度 形态 颜色 例如 border:1px solid black; 16.2 CSS中边界的使用 padd ...

  10. ModSecurity for Nginx

    Announcing the availability of ModSecurity extension for Nginx ModSecurity for Nginx ModSecurity for ...