如何提高jQuery的性能 ？

Posted 2021-09-04 diuxie

1
google code已经集合了几个javascript库，我们可以从那里加载这些库而不必通过自己的服务器加载。这样的好处是节省带宽，如果用户访问过同样加载了这些库的网站后，JavaScript库会缓存在用户端，提高加载速度。

PLAIN TEXT
JavaScript:

// 加载jQuery google.load("jquery", "1.2.6");
    // 自己的代码...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
完整说明在此...

2，将匹配选择器元素对象保存在变量中。

尤其在循环体里，下面的做法影响运行效率：

PLAIN TEXT
JavaScript:
var myList = $(\'.myList\');
}
上面的代码在我的机器上耗时1066毫秒。除非我疯了才会将选择器表达示放在循环体里。应该这样做：

JavaScript:
for(i = 0; i <1000; i++){
}
上面的代码耗时只有224毫秒。想要更快还可以这样做：

PLAIN TEXT
JavaScript:
var myListItems = \'<ul>\';

myListItems+=\'This www.walajiao.comis list item \' + i;

myListItems+=\'</ul>\';

$(\'myDiv\').removeClass(\'off\').addClass(\'on\');

如果要连接的方法调用很多，jQuery同样和JavaScript一样可以将游戏代理语句分行书写：

PLAIN TEXT
JavaScript:

.find(\'TABLE .firstCol\')
.css(\'background\' : \'red\')

$(\'#myTable\')

.css(\'background\',\'red\')
.find(\'.lastColumn\')

$.fn.makeRed = function(){
}
$(\'#myTable\').find(\'.firstColumn\').makeRed().append(\'hello\');

6，学会在适当的时候使用动画
查看一下jQuery的源代码会发现jQuery库中很强大的slideDown()和fadeIn()都是调用jQuery本身的animate()方法：

PLAIN TEXT
JavaScript:

return this.animate({height: "show"}, speed, callback);

return this.animate({opacity: "show"}, speed, callback);

$(\'#myBox\').mouseover(function(){

$(this).animate({"height": 200}, "slow");

$(\'#myBox\').mouseover(function(){
});

7，事件委托
jQuery比以往更重视元素事件委托，这更能体现unobtrusively（无侵入）原则。在元素上添加太多的事件会降低效率，也不便书写和调试。而事件委托能用较少的代码完成同样的功能。

PLAIN TEXT
JavaScript:

$(this).css(\'background\', \'red\');

var $j = jQuery.noConflict();
$(\'#myImage\').attr(\'src\', \'image.jpg\').load(function(){
});
运行后如果图片加载完毕了，会弹出对话框。这是使用了回调函数。

11，如果检查DOM中的某元素是否存在
如果要对某元素进行操作，并不需要先去检查该元素时否存在于DOM中。因为jQuery的方法或函数对那些并不存在的元素根本不会进行任何操作。但如果需要知道是否已有选定或选定的数量时，可以用length属性：

PLAIN TEXT
JavaScript:

12，简化的$(document).ready
通常需要这样写：

PLAIN TEXT
JavaScript: