JQuery性能问题

1、当有几百个click事件时，性能问题就凸显出来了。

如果后台代码循环了100个这样的li，那么不知不觉中就绑定了100个click事件。

而如果这样的代码在一个页面的js代码中多次出现，那性能可想而知。

一种改进方式：

$("#infoList1").click(function(e){
var $target = $(e.target);
if (!$target.is("li")) {
return false; // 忽略任何不是li元素的click事件
}
// code here
});

用以上方式直接绑定li元素的父节点或者祖先节点。这里只绑定了一个click事件，无论infoList1下的li有多少个。

$("#infoList1").click(function(e){
    var $target = $(e.target);
    if ($target.is("li")) {
        // li click handler
    } else if ($target.is("a")) {
        // a click handler
    } else if ($target.is("input:button")) {
        // button click handler
    }
    // ... 以下多个其他元素的click事件处理
});

2、jQuery中还有一种写法，和live有异曲同工之妙

$("#infoList1").delegate("li", "click", function(){
    // li click handler
});
用委托绑定事件，

3.、给选择器提供上下文
默认情况下，当你使用类似$(’.myDiv’)的选择器时将在整个DOM文档查找元素，这有很大的代价。
当执行选择操作时，jQuery函数可以指定第二个参数：jQuery( expression, context )通过给选择器提供一个上下文，那就会在这个context中进行元素查找，而不必在整个DOM文档中查找元素。
var selectedItem = $('#listItem' + i, $('.myList'));

4、写你自己的选择器
jQuery有许多内置的选择器用以通过ID、class、标签、属性以及其他元素进行选择操作。然而当你需要基于其它一些内容进行元素选择而jQuery却没有提供该选择器时，你能做什么呢？
嗯，一个解决方案可能是从一开始就给元素添加上classes，从而利用这些classes进行元素的选择操作。然而这被证明很难对jQuery扩展出新的选择器。
最好的解释方法就是使用实例：

$.extend($.expr[':'], {
over100pixels: function(a) {
return $(a).height() > 100;
}
});

$('.box:over100pixels').click(function() {
alert('The element you clicked is over 100 pixels high');
});

代码的前一部分创建一个自定义的选择器，它可以找出所有长度超过100px的元素。接下来的代码仅仅是将click事件绑定到使用该选择器查找出来的那些元素上。
这里我不做更具体的讲解，但是你能设想一下它有多么的强大！如果你在google上搜索”custom jquery selector”，你会看到有很多这方面的例子。

5、为了速度和SEO方面的考虑，延迟加载内容
另外还有一个方法可以提升页面加载速度，理顺Spiders搜索的HTML内容，通过在页面加载之后使用AJAX请求晚加载其他内容，这样用户就可以马上开始浏览，让Spider看到你想要它们进行索引的内容。
我们已经在自己的网站上使用了这个技术。本页面上部的紫色按钮会弹出三个表格，方位与Google地图，这会使我们页面大小增加两倍。因此我们仅需要把这些HTML内容放入一个静态页面中，在页面加载完成之后通过load()函数加载它：

JS代码：

$('#forms').load('content/headerForms.html', function() {
// Code here runs once the content has loaded
// Put all your event handlers etc. here.
});

我不会在页面上随处使用这个技巧。对此，你必须权衡考虑。你需要有额外的页面请求，而且页面上的部分内容不能立即呈现给用户，但是正确的使用这个技巧对优化会很有帮助。

6、jquery图片加载完毕：

$('#myImage').attr('src', 'image.jpg').load(function() {
alert('Image Loaded');
});

7、Jquery 绑定方法你选择哪个呢？

下面为您讲解：

jQuery的事件处理方法介绍 - bind()，live()，delegate()，on()

bind()方法

使用较早版本jQuery的教程或者应用中，我们往往使用bind()方法来将事件绑定到特定的元素上，如下

<section id="container">
	<img class="scv" src="images/scv.gif" alt="Terran unit" />
</section>

$('.scv').bind('click', function(){
    $('#container').append('<img class="scv" src="images/scv.gif" alt="Terran unit" />');
});

　　如果你查看相关jQuery1.7.1最新文档的话，大家应该知道最新的jQuery中bind目前其实最后也是调用on()方法来实现的，所以呢，如果现在大家使用最新jQuery版本（目前为1.7.1）的话，尽量避免使用bind()方法。

如果大家点击运行上面在线演示的话，肯定会发现，当点击第一个图片时，会生成新的图片，但是如果你点击新生成的图片，不会继续执行添加新图片的操作。为什么会这样呢？因为使用bind绑定的元素是页面上所有存在的class="scv"的元素，新生成的元素添加到DOM，并没有绑定我们添加的click方法。那么怎么让新的图片也可以绑定我们click方法呢。我们可以使用clone()方法，如下：

$('.scv').bind('click', function(){
	$(this).clone(true).appendTo('#container');
});

　　我们这里使用clone方法来生成一个新的图片，并且添加到#container容器中。这里我们使用clone方法参数true，代表克隆的元素同时克隆绑定的方法。这里我们运行在线演示看看效果，如下：

live()方法

在老的jQuery版本中，我们有一个方法专门用来处理动态生成的元素的事件绑定 - live()，使用live()方法可以将方法绑定的效果应用到已存在或者新创建的DOM元素。代码如下：

$('.scv').live('click', function(){
	$(this).clone().appendTo('#container');
});

如果大家运行演示，可以看到以上代码同样也可以达到效果。

live()调用过程如下：

我们首先将click方法绑定到了Document，然后，查找Document里是否有.scv这个元素。这个过程对于性能来说可能比较浪费，所以我们可以使用如下带参数方法优化方式：

$('.scv', '#container').live('click', function(){
	$(this).clone().appendTo('#container');
});

　　以上代码中我们使用#container作为绑定的上下文，jQuery将会在#container这个元素中查询.scv元素。代码如下：

Delegate方法

在最新的jQuery版本中，我们最好不要使用live()方法，因为它已经被放弃了，这里我们使用delegate方法来指定事件绑定的上下文，如下：

$('#container').delegate('.scv','click', function(){
    $(this).clone().appendTo('#container');
});

　　大家可以看到以上代码中，我们首先设定了方法绑定的上下文 - #container，然后，寻找class为.scv的元素，再绑定click方法。

注意：这里克隆后添加到的元素应该是你定义的上下文，否则，新生成的图片绑定不上click方法。

on()方法

其实在最新版本的jQuery类库中，所有以上方法在后面其实都是调用on()方法，所以，如果你开发最新版本的jQuery，完全可以使用on()方法来处理所有的事件绑定，避免过多的方法调用。如下：

$('.scv').on('click', function(){
    $(this).clone(true).appendTo('#container');
});

代码和bind方法一样。

总结

总的来说，最新的jQuery版本中，所有的方法基本最后都使用on()方法来处理，如果你针对新版本的jQuery做开发，大家可以考虑使用delegate()和on()方法处理事件绑定，虽然以前方法也可以用，但是大都都已经退出历史舞台。希望大家喜欢我们的文章，如果你有任何建议和问题，请给我们留言，谢谢！

posted @ 2013-09-29 00:15 wfpanskxin 阅读(355) 评论(0) 收藏举报

刷新页面返回顶部