jquery代码优化,想到一条在随时更新。。。
我们减少字节数和请求次数以及加载顺序以使页面加载的更快。如今,我们越来越多的注意到另一个影响网站性能的部分--CPU利用率。使用 jQuery和其他JavaScript框架,使节点选择和DOM操作变得越来越容易,如果使用不当,有可能影响整个网页的响应速度。
咱们细谈:
1.总是使用#id去寻找element. jQuery中最快的选择器是ID选择器 ($('#someid')). 这是因为它直接映射为JavaScript的getElementById()方法。
选择单个元素
选择多个元素的时候,我们真正需要知道的是DOM的遍历和循环才是性能低下的原因。为了尽量减少性能损失, 总是使用最近的父ID去寻找。 var
traffic_lights = $(
'#traffic_light input'
)
2、在Classes前面使用Tags ,jQuery中第二快的选择器就是Tag选择器 ($('head')). 而这是因为它直接映射到JavaScript的getElementsByTagName()方法。
总是在一个Class前面加上一个tag名字(记得从一个ID传下来) var
active_light = $(
'#traffic_light input.on'
); 在查找的类名称前面加标签,可以减少DOM查询遍历
3、缓存jQuery对象
养成保存jQuery对象到一个变量上(就像上面的例子)的习惯,首现保存jQuery变量到一个本地变量后,再继续你的操作,jquery采用链式编程:例如
var
$active_light = $(
'#traffic_light input.on'
);
$active_light.bind(
'click'
,
function
(){...})
.css(
'border'
,
'3px dashed yellow'
)
.css(
'background-color'
,
'orange'
)
.fadeIn(
'slow'
);
我们可以利用子查询缓存active和inactive lights以便后面的操作。 在父元素下查找子元素。find(),,children()
例如:我们在进行遍历循环的时候,不能在循环内部每次循环都进行字符串的拼接,或者追加元素,而是在全部循环以后,直接一次性进行追加等操作
字符串拼接特别耗费性能,能不用就不用,哈哈哈
6.事件委托(时间冒泡)
每一个JavaScript事件(如click, mouseover 等)在DOM结构树上都会冒泡到它的父元素上。如果我们想让很多elements(nodes)调用同一个function这是非常有用的。取而代之的是 你可以只对它们的父级绑定一次,而且可以计算出是哪一个节点触发了事件,而不是绑定一个事件监听器到很多节点上这种效率低下的方式。例如,假如我们要开发 一个包含很多input的大型form,当input被选择的时候我们想绑定一个class name。像这样的帮定是效率低下的:、
$(
'#myList).bind('
click
', function(e){
var target = e.target, // e.target grabs the node that triggered the event.
$target = $(target); // wraps the node in a jQuery object
if (target.nodeName === '
LI
') {
$target.addClass('
clicked');
// do stuff
}
});
7、遵从$(windows).load
有 一种诱惑会使jQuery开发者hook所有事情到 $(document).ready 这个虚伪的事件里。毕竟在大多数例子里都可以看到这样使用。虽然$(document).ready 非常有用,它在页面呈现时发生,虽然其它对象还在下载中。如果你发现你的页面在下载中停顿,就有可能是$(document).ready 引起的。你可以通过把jQuery functions帮定到$(window).load事件来减少下面下载时的CPU使用率,它是在所有HTML(包括iframe内容)都下载完以后才 去调用所有对象的
8.压缩JS
虽然和jQuery无关,但在这里也要提一下。使JavaScript函数和变量变得可读是一个趋势,这对开发者来讲是必不可少的,但对普通用户来 讲没有任何关系。不用什么借口,是时候把JS压缩纳入我们的工作流程中来了。注释你的代码,在投放到生产环境之前找一个压缩工具进行压缩。使用 YUICompressor 压缩你代码中多余的浪费的字节。根据我们的经验,它可以安全的把JavaScript压缩的尽可能小,而不会多占用CPU。