改善Jquery代码性能的一些技巧

在网站前段开发中，前段设计者大多会选择Jquery这个Javascript库来设计绚丽的网页特效。Jquery使用起来方便，不像Javascript那样很麻烦。我们只要在我们的代码中包含了Jquery这个库文件，就可以开始使用Jquery给我们带来的无与伦比的效果了。你在使用Jquery时是否有想过你使用Jquery设计的代码是否是高性能的呢？那么请接着看下文，因为我们整理了很多提高Jquery代码性能的技巧。

一、测试jQuery包装集是否包含某些元素

如果你想测试一下某个jQuery包装集中是否包含某些元素，你首先可以尝试使用验证首个元素是否存在：

if((selector)[0]){...}
// 或者这样
if((selector).length){...}

来看看这个例子：

//例子.如果你的页面有以下html代码

Item X
Item Y
Item Z

...
//这个if条件将返回true，因为我们有两个
// input域匹配了选择器，所以代码将会执行
if(('#shopping_cart_items input.in_stock')[0]){}

二、从jquery.org读取jQuery的最新版本

你可以使用这句代码读取jQuery的最新版本的代码文件。

你可以使用这个方法来调用最近版本的jQuery框架，当然，你还可以使用下面这个代码从ajax.googleapis.com调用同样的最新版本jQuery：

三、存储数据

使用data方法可以避免在DOM中存储数据，有些前端开发er喜欢使用HTML的属性来存储数据：

('selector').attr('alt', 'data being stored');
//之后可以这样读取数据:
('selector').attr('alt');

使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的，我们可以使用jQuery的data方法来为页面中的某个元素存储数据：

('selector').data('参数名', '要存储的数据');
//之后这样取得数据:
('selector').data('参数');

这个data方法能让你自己明明数据的参数，更语义更灵活，你可以在页面上的任何元素存储数据信息。如果想了解更多关于data()和removeData()方法的介绍，可以看看jQuery官方讲解

这个方法的经典应用是给input域一个默认值，然后在聚焦的时候清空它:

HTML部分:

JavaSript部分：

(function() {
//取出有clear类的input域
//(注: "clear once" 是两个class clear 和 once)
('#testform input.clear').each(function(){
//使用data方法存储数据
(this).data( "txt", .trim((this).val()) );
}).focus(function(){
// 获得焦点时判断域内的值是否和默认值相同，如果相同则清空
if ( .trim((this).val()) === (this).data("txt") ) {
(this).val("");
}
}).blur(function(){
// 为有class clear的域添加blur时间来恢复默认值
// 但如果class是once则忽略
if ( .trim((this).val()) === "" && !(this).hasClass("once") ) {
//Restore saved data
(this).val( (this).data("txt") );
}
});
});

五、尽可能使用ID选择器

在使用jQuery之后，你会发现利用class属性来选择DOM元素变得相当简单。尽管如此，还是推荐大家尽量少用class选择器取而代之尽量多使用运行更快的ID选择器(IE浏览器下使用class选择器会在遍历整个DOM树之后返回相符的class包装集)。而ID选择器更快是因为DOM本身就有”天然的”getElementById这个方法，而class并没有。所以如果使用class选择器的话，浏览器会遍历整个DOM，如果你的网页DOM结构足够复杂，这些class选择器足矣把页面拖得越来越慢。让我们看看这段简单的HTML代码:

Selectors in jQuery
...
...

//使用class来调用submit按钮要比使用绝对的ID选择器慢很多
var main_button = ('#main .button');
var main_button = ('#main_button');

六、善于利用jQuery链

jQuery链不但允许以简洁的方式写出强大的操作，而且提高了开发效率，因为它能够把多个命令应用到包装集，而不必重新计算包装集。从而你不用再这样写了：

Description:

('#shopping_cart_items input.text').css('border', '3px dashed yellow');
('#shopping_cart_items input.text').css('background-color', 'red');
('#shopping_cart_items input.text').val("text updated");

取而代之你可以使用jQuery链来完成简便的操作：

var input_text = ('#shopping_cart_items input.text');
input_text.css('border', '3px dashed yellow');
input_text.css('background-color', 'red');
input_text.val("text updated");

//same with chaining:
var input_text = ('#shopping_cart_items input.text');
input_text
.css('border', '3px dashed yellow')
.css('background-color', 'red')
.val("text updated");

七、绑定jQuery函数到(window).load事件

大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到(document).ready事件。虽然(document).ready事件在大多数情况下都OK，但是它的解析顺序是在文档准备就绪，单文档中的图片等对象正在下载的时候开始运行的。所以在某些时候使用(document).ready事件并不一定能达到我们预期的效果，比如一些视觉效果和动画、拖拽、预读取隐藏图片等…通过使用(window).load事件便可以安全的在整个文档都准备就绪之后再开始运行你期望的代码。

(window).load(function(){
// 将你希望在页面完全就绪之后运行的代码放在这里
});

八、使用jQuery链来限定选择器，让你的代码更简洁更优雅

由于JavaScript支持链结构而且支持断行，所以你的代码可以写成下面这样，这个例子先在元素上移除一个class然后在同一个元素上添加另一个class：

('#shopping_cart_items input.in_stock')
.removeClass('in_stock')
.addClass('3-5_days');

如果想让它更简单实用，你可以创建一个支持链结构的jQuery函数：

.fn.makeNotInStock = function() {
return (this).removeClass('in_stock').addClass('3-5_days');
}

('#shopping_cart_items input.in_stock').makeNotInStock().log();

九、使用回调函数同步效果

如果你想确保某个事件或动画效果要在另一个事件运行之后再调用，那你就要使用回调函数了。你可以在这些动画效果后面绑定回调函数：slideDown( speed, [回调] ) ie. (’#sliding’).slideDown(’slow’, function(){… 点击这里预览这个例子.

div.button { background:#cfd; margin:3px; width:50px;
text-align:center; float:left; cursor:pointer;
border:2px outset black; font-weight:bolder; }
#sliding { display:none; }

(document).ready(function(){
// 使用jQuery的click事件改变视觉效果，并开启滑动效果
("div.button").click(function () {
//div.button 现在看上去是按下的效果
(this).css({ borderStyle:"inset", cursor:"wait" });
//#sliding 现在将渐隐并在完成动作之后开启渐显效果
//slideup once it completes
('#sliding').slideDown('slow', function(){
('#sliding').slideUp('slow', function(){
//渐显效果完成后将会改变按钮的CSS属性
('div.button').css({ borderStyle:"outset", cursor:"auto" });
});
});
});
});

十、预加载图片

通常使用JavaScript来预加载图片是个相当不错的方法:

//定义预加载图片列表的函数(有参数)

jQuery.preloadImages = function(){
//遍历图片
for(var i = 0; i").attr("src", arguments[i]);

}
}
// 你可以这样使用预加载函数
.preloadImages("images/logo.png", "images/logo-face.png", "images/mission.png");

十一、将你的代码测试完好

jQuery有一个名为QUnit单元测试框架。编写测试很容易，它能让您可以放心地修改您的代码，并确保它仍然按预期工作。下面是如何工作的：

//将测试分成若干模块.
module("Module B");

test("some other test", function() {
//指定多少个判断语句需要加入测试中.
expect(2);

equals( true, false, "failing test" );
equals( true, true, "passing test" );
});

有用  |  无用 取消

猜你喜欢