您的位置:首页 > Web前端 > JQuery

(转)jQuery性能规则

2010-02-06 10:32 162 查看
之前,我们需要担心减少字节数和请求次数以及加载顺序以使页面加载的更快。如今,我们越来越多的注意到一个影响性能的重要组成部分--CPU利用率。使用 jQuery和其他JavaScript框架,使节点选择和DOM操作变得越来越容易,但如果你不小心使用了一些减少浏览器本身要做的工作的一些做法可能 会带来不好的结果。
总是使用#id去寻找element
在Classes前面使用Tags
缓存jQuery对象
更好的利用链
使用子查询
限制直接对DOM操作
事件委托(又名:冒泡事件)
消除查询浪费
遵从 $(window).load
压缩JS
学习jQuery库

1.总是使用#id去寻找element.

在jQuery中最快的选择器是ID选择器 (
$('#someid')
). 这是因为它直接映射为JavaScript的
getElementById()
方法。

选择单个元素

代码

var mylib =
{
article_page :
{
init : function()
{
// Article page specific jQuery functions.
}
},
traffic_light :
{
init : function()
{
// Traffic light specific jQuery functions.
}
}
}

9 遵从$(windows).load

有一种诱惑会使jQuery开发者hook所有事情到
$(document).ready
这个虚伪的事件里。毕竟在大多数例子里都可以看到这样使用。虽然
$(document).ready
非常有用,它在页面呈现时发生,虽然其它对象还在下载中。如果你发现你的页面在下载中停顿,就有可能是
$(document).ready
引起的。你可以通过把jQuery functions帮定到$(window).load事件来减少下面下载时的CPU使用率,它是在所有HTML(包括iframe内容)都下载完以后才去调用所有对象的。

$(window).load(function(){
// jQuery functions to initialize after the page has loaded.
});
多余的功能,如拖拽、帮定可视化效果和动画、预读取图片等,使用这种方法比较好。

10 压缩JS

虽然和jQuery无关,但在这里也要提一下。使JavaScript函数和变量变得可读是一个趋势,这对开发者来讲是必不可少的,但对普通用户来讲没有任何关系。不用什么借口,是时候把JS压缩纳入我们的工作流程中来了。注释你的代码,在投放到生产环境之前找一个压缩工具进行压缩。使用YUICompressor 压缩你代码中多余的浪费的字节。根据我们的经验,它可以安全的把JavaScript压缩的尽可能小,而不会多占用CPU。小提示:为了在YUICompressor里最大化压缩,应该这样这样定义变量(例如:var my_long_variable_name;)

11 学习jQuery库

学习jQuery最好的方法就是去查jQuery的文档了,可以当作手册来用。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: