关于html:如何提高jQuery的性能

7次阅读

共计 1674 个字符,预计需要花费 5 分钟才能阅读完成。

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:

正文完
 0