改善Jquery代码性能的一些技巧_H5之家 - 中国HTML5教程资源分享第一站

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

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

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

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

if((selector)[0]){...}

// 或者这样

if((selector).length){...}

来看看这个例子：

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

</ul>

<pre escaped="true">...

//这个if条件将返回true，因为我们有两个

// input域匹配了选择器，所以<statement>代码将会执行

if(('#shopping_cart_items input.in_stock')[0]){<statement>}

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

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

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

<script src=""

type="text/javascript"></script>

三、存储数据

使用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部分:

</form>

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代码:

<h2>Selectors in jQuery</h2>

...

</form>

</div>

//使用class来调用submit按钮要比使用绝对的ID选择器慢很多

var main_button = ('#main .button');

var main_button = ('#main_button');

六、善于利用jQuery链

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

<li>Description: <input type="text" name="description" value="" /></li>

('#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事件