22点关于jquery性能优化的建议

2024-04-11 14:29:03 33

首先，在脑子里牢牢记住jQuery就是javascript。这意味着我们应该采取相同的编码惯例，风格指南和最佳实践。

首先，如果你是一个javascript新手，我建议您阅读《24JavaScriptBestPracticesforBeginners》，这是一篇高质量的javascript教程，接触jQuery之前最好先阅读。

当你准备使用jQuery，我强烈建议你遵循下面这些指南:

1.缓存变量

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

//糟糕
h=$('#element').height();
$('#element').css('height',h-20);

//建议
$element=$('#element');
h=$element.height();
$element.css('height',h-20);

2.避免全局变量

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

//糟糕
$element=$('#element');
h=$element.height();
$element.css('height',h-20);

//建议
var$element=$('#element');
varh=$element.height();
$element.css('height',h-20);

3.使用匈牙利命名法

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

//糟糕
varfirst=$('#first');
varsecond=$('#second');
varvalue=$first.val();

//建议-在jQuery对象前加$前缀  
var$first=$('#first');
var$second=$('#second'),
varvalue=$first.val();

4.使用var链（单var模式）

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

var
 $first=$('#first'),
 $second=$('#second'),
 value=$first.val(),
 k=3,
 cookiestring='SOMECOOKIESPLEASE',
 i,
 j,
 myArray={};

5.请使用'on'

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

//糟糕
$first.click(function(){
   $first.css('border','1pxsolidred');
   $first.css('color','blue');
});

$first.hover(function(){ $first.css('border','1pxsolidred'); })