十大快速提升JQuery性能让你的JQuery跑得更快

本文提供了十个步骤来立即提高脚本的性能。别担心，这不是什么高深的技能。大家都可以用！这些技巧包括：使用最新版本进行合并，最小化脚本，用for替换每个脚本，用id替换类选择器，为选择器设置缓存，避免DOM操作，避免concat()，使用join()处理长字符串并返回假值，使用备忘单和引用文档，以及使用最新版本的jQuery已经在不断开发和改进的过程中。约翰和他的团队不断研究新的方法来提高程序性能。题外话，几个月前，他还发布了Sizzle，一个JS选择器库，据说在Firefox中程序的性能提升了三倍。如果你不想盯着有没有新版本，然后花时间下载上传，谷歌可以再帮你一次。他们的服务器存储了大量的Ajax库供您选择。复制代码如下：-使用简单的脚本标记调用API-脚本类型=' text/JavaScript ' src=' http :3358 www.google.com/jsapi'/scriptscript类型=' text/JavaScript'/*。load jquery v 1.3.2 */Google . load(' jquery '，' 1 . 3 . 2 '，{ uncompressed : false })；/*加载完成后弹出消息*/函数onload(){ alert(' jquery Google API！);} Google . setonloadcallback(OnLoad)；/script另一种更简单快捷的方法是直接使用脚本链接。如果要使用特定版本的jQuery，可以使用上面的方法；如果想直接使用最新版本，下面的代码就够了：复制代码如下： Script type=' text/JavaScript ' src=' http :http://Ajax . googleapis.com/Ajax/libs/jquery/1/jquery . js '/Script特定的版本也可以这样加载：复制的代码如下： Script type=' text/JavaScript ' src=' http :333333——的加载时间也相应延长。考虑到你网站的每个页面都会加载这些脚本，你应该考虑将它们放在一个文件中，然后使用压缩工具(比如狄恩爱德华兹的)来最小化它们。较小的文件无疑会带来更快的加载速度。JavaScript和CSS压缩的目的是减少数据传输的字节数，同时保持脚本的执行性能(通过减少原始文件或使用gzip)。Gzip被大多数产品级网络服务器视为HTTP协议的一部分。引自YUI压缩器，jQuery推荐的压缩脚本的工具。用for替换每个本机函数总是比辅助组件更快。如果需要遍历一个对象(比如从远程位置接收到的JSON对象)，最好将(JSON)对象重写为数组，这样数组的循环处理就更容易了。借助Firebug，我们可以测量每个函数的执行时间。复制代码如下： var Array=new Array()；for(var I=0；i10000I){ array[I]=0；} console . time(' native ')；//函数var l=array.length的原生值；for(var I=0；i10000我){ }

以上结果表明，原生代码能做的事情只需要2毫秒，使用jQuery的每个方法需要26毫秒。而且，这只是在这台机器上测试一个基本上什么都没做的功能的结果。当遇到更复杂的情况，比如设置css属性或者DOM操作，时间差肯定会更大。用ID代替class Selector按ID选择对象要好得多，因为jQuery会使用浏览器的原生函数getElementByID()来获取对象，查询速度非常快。因此，使用比那些方便的css选择技术更复杂的选择器是值得的(jQuery也为我们提供了复杂的选择器)。您也可以手动编写自己的选择器(事实上，它比您想象的要简单)，或者为您想要选择的元素指定一个带有标识的容器。复制代码如下： //以下示例创建一个列表并填写条目//然后每个条目被选中一次//首先，使用class选择console . time(' class ')；var list=$(' # list ')；var items=for(I=0；i1000I){ items=' item '；}个项目=' '；list.html(项目)；for(I=0；i1000i ) { var s=$('。项目' I)；} console . timeend(' class ')；//然后用ID选择console . time(' ID ')；var list=$(' # list ')；var items=for(I=0；i1000I){ items=' item '；}个项目=' '；list.html(项目)；for(I=0；i1000I){ var s=$(' # item ' I)；} console . timeend(' id ')；以上示例很好地说明了不同选择方法之间的显著性能差异。请看下图，用类做选择，时间无限增加，甚至超过5秒。分配给选择器的jQuery的引用文档说：上下文传递给jQuery()的原始DOM节点(如果什么都没有传递，那么上下文就是整个文档)。目的是与选择器一起实现更精确的查询。因此，如果必须使用类来指定目标，至少要为选择器指定上下文，这样可以避免jQuery遍历整个DOM文档的工作：与其这样写：不如按如下方式复制代码： $(')。类')。CSS(' color ' ' # 123456 ')；最好给选择器添加上下文(expression:目标选择器；Context:):复制代码如下： $(表达式，上下文)，即复制代码如下： $('。类'，' # class-container ')。CSS ('color '，' # 123456 ')；这要快得多，因为它不必遍历整个DOM。只需找到#class-container。建立一个缓存，不要犯不断重新选择同一事物的错误。您应该将想要处理的元素缓存为变量。不要在一个周期内重复选择同一个元素！这样做对速度影响很大！复制代码如下： $(“# item”)。CSS ('color '，' # 123456 ')；$('#item ')。html(' hello ')；$('#item ')。css('背景色'，' # ffffff ')；//不如这样写$ ('# item ')。CSS ('color '，' # 123456 ')。HTML(“你好”)。CSS('背景色'，' # ffffff ')；//即便如此var item=$(' # item ')；item.css('color '，' # 123456 ')；item . html(' hello ')；item.css('底色'，' # ffffff ')；//遇到循环，非常不好。console.time(“无缓存”)；for(var I=0；i1000i ) { $('#list ')。追加(I)；} console.timeEnd('无缓存')；//下面是好得多的console . time(' cache ')；var item=$(' # list ')；for(var I=0；i1000I){ item . append(I)；} console.timeEnd('缓存')；避免DOM操作DOM操作越少越好，因为像prepend()、append()和after()这样的插入很耗时。如果使用html()上面的例子会更快：复制代码如下： var list=for(var I=0；i1000I){ list=' I '；} ('#list ')。html(列表)；避免concat()，使用join()处理长字符串听起来可能很奇怪，但它确实可以提高速度，尤其是在连接非常长的字符串时。首先，创建一个数组，把你想连接的东西串联起来。Join()方法比字符串的concat()函数快得多。

复制代码如下： var array=[]；for(var I=0；i=10000I){ array[I]=' I '；} $('#list ')。html(array . join(“”))；=运算符更快，——比将字符串片段放入数组并连接它们更快作为字符串缓冲区的数组比大多数浏览器中的string.prototype.concat.apply方法更有效，除了Windows下的Firefox 2.0.0.14-汤姆特伦卡返回假。您可能已经注意到，如果函数在执行后没有返回false，您将跳到页面的顶部。如果页面很长，这种反应很烦人。因此，与其这样：复制如下代码： $ ('# item ')。单击(function(){//stuff here })；最好再加一句：复制代码如下： $ ('# item ')。点击(function () {//stuff)这里返回false});额外提示备忘单和参考文件。

这个建议并没有直接加快函数的执行速度，但是如果你愿意花时间在上面，研究这些小抄和参考文档，将来会节省很多时间。请在手边准备一份备忘单，以便快速参考。