jQuery性能优化

最新推荐文章于 2017-06-14 17:58:14 发布

Wismyluckstar

最新推荐文章于 2017-06-14 17:58:14 发布

阅读量436

点赞数

本文链接：https://blog.csdn.net/u014492098/article/details/42490613

版权

jQuery性能优化

这里总结了几篇博文的内容，方便日后查阅。

1.总是从ID选择器开始继承

JQuery中最快的筛选器是ID筛选器($(‘#someid’))。这是因为它直接和JavaScript的getElementById()方法对应。

2. 在class前使用tag

第二快的选择器是tag选择器($(‘head’)). 因为它和JavaScript的getElementsByTagName() 方法对应。例如：$(‘div.someclass’)。

综合第一点和第二点:

如果需要$(‘.someclass’)，应该使用$(‘#someid > tag.someclass’)来缩小DOM Tree的搜索范围 #someid 前面不要用tag来修饰。写成$(‘div#someid’)会降低性能，因为JS会遍历所有的div元素来查找id为’someid’的哪一个节点: #someid也不需要由#otherid来修饰。写成$(‘#otherid #someid’)也会降低性能。

3.缓存JQuery对象

要养成将jquery对象缓存进变量的习惯。

永远不要这样做：

$('#traffic_light input.on').bind('click', function(){...});
$('#traffic_light input.on').css('border', '3px dashed yellow');
$('#traffic_light input.on').css('background-color', 'orange');
$('#traffic_light input.on').fadeIn('slow');

最好先将对象缓存进一个变量然后再操作:

var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){...});
$active_light.css('border', '3px dashed yellow');
$active_light.css('background-color', 'orange');
$active_light.fadeIn('slow');

永远不要让相同的选择器在你的代码里出现多次。

4.用for替代each

原生函数总是比辅助组件更快。

5. 合理使用链式操作

可以减少对DOM Tree的访问以及代码量。

6.使用子查询

使用children(), find(), filter() 来进行子查询。

7.对直接的DOM操作进行限制

尽量减少对DOM Tree的直接操作。

几种可用的方法：

先将元素从document中删除，完成修改后再把元素放回原来的位置
将元素的display设置为”none”，完成修改后再把display修改为原来的值
在插入之前将多个元素包裹进一个单独的父级节点会更快
尽可能少的修改元素style上的属性
尽量通过修改className来修改样式

8. 事件冒泡的利用

除非在特殊情况下, 否则每一个js事件(例如:click, mouseover 等.)都会冒泡到父级节点. 当我们需要给多个元素调用同个函数时这点会很有用。

代替这种效率很差的多元素事件监听的方法就是, 你只需向它们的父节点绑定一次, 并且可以计算出哪个节点触发了事件。

例如, 我们要为一个拥有很多输入框的表单绑定这样的行为: 当输入框被选中时为它添加一个class。

像这样绑定事件是低效的:

$('#entryform input).bind('focus', function(){
    $(this).addClass('selected');
}).bind('blur', function(){
    $(this).removeClass('selected');
});

我们需要在父级监听获取焦点和失去焦点的事件:

$('#entryform).bind('focus', function(e){
    var cell = $(e.target);  // e.target 保存事件的触发者
    cell.addClass('selected');
}).bind('blur', function(e){
    var cell = $(e.target);
    cell.removeClass('selected');
});