jQuery性能优化技巧分析

本文较为详细分析了jQuery性能优化技巧。分享给大家供大家参考。具体分析如下：
一、使用最新版本的jQuery类库
jQuery新版本会较上个版本进行Bug修复和一些优化，不过需要注意的是，在更换版本之后，不要忘记测试你的代码，毕竟有时候不是完全向后兼容的。
二、使用合适的选择器
jQuery选择器性能最佳到最差方式如下：
id选择器，如$（"#id", context）
标签选择器，如$（"p", context）
class选择器，如$（".class", context）
属性选择器，如$（"[attribute=value]", context）
伪类选择器，如$（":hidden", context）
补充及注意事项:
尽量给选择器指定上下文context，可以缩小定位元素的范围
避免id重复修饰id，错误代码：var $el = $（"#list #item1"）
避免标签或class修饰id，错误代码： var $el = $（"ul #item1"）
如果使用属性选择器，尽量指定所属的标签选择器，这样可以加快访问速度，正确代码:var $el = $（"a[title="link"]"）
三、缓存对象
下面是性能不好的方式：

$（"#home"）.css（...）;$（"#home"）.bind（"click", function（） {}）;$（"#home"）.addClass（...）;

说明:jQuery会在创建每个选择器的过程中，查找DOM，消耗时间与性能。
比较好的方式：

var $homeLink = $（"#home", context）;$homeLink.css（...）;$homeLink.bind（"click", function（） {}）;$homelink.addClass（...）;

说明:永远不要让相同的选择器在你的代码里出现多次。
四、循环时的DOM操作
使用jQuery可以很方便的添加，删除或者修改DOM节点，但是在一些循环中，例如for（），while（）或者$.each（）中处理节点时，下面有个实例值得大家注意:

var $list = $（"#list"）;for（var i = 0; i < 100; i++） {$list.append（"<li>" + i + "</li>"）;}

说明:循环添加li节点100次，这种操作消耗的性能不低，所以更好的方式是将要添加的节点在插入DOM树之前全部创建好，再一次性添加到DOM树中。更好的方式：

var $list = $（"#list"）,fragment = "";for（var i = 0; i < 100; i++） {fragment += "<li>" + i + "</li>";}$list.append（fragment）;

五、数组方式使用jQuery对象
使用jQuery选择器获取结果是一个jQuery对象。在性能方面，建议使用简单for或者while循环来处理，而不是$.each（），这样能使你的代码更快。
另外注意：检查长度是一个检查jQuery对象是否存在的方式。

var $list = $（"#list"）;if（$list） {//总是true//do something}if（$list.length） { //拥有元素才返回true//do something}

六、事件代理
每一个JavaScript事件（如click,mouseover）都会冒泡到父级节点。当我们需要给多个元素调用同一个函数时，这点会很有用。

...<ul id="list"><li id="item1"></li><li id="item2"></li><li id="item3"></li>...</ul>...var $item1 = $（"#item1"）,$item2 = $（"#item2"）,$item3 = $（"#item3"）;...$item1.click（function（） {...}）;$item2.click（function（） {...}）;$item3.click（function（） {...}）;...

说明:这种方式，如果有100个li，要绑定100个事件。显然，不科学，性能损耗很多。
更好的方式是：只需向li的父节点ul绑定一次事件，然后通过event.target获取到点击的当前元素。

var $list = $（"#list"）;$list.click（function（e） {var $currentItem = $（e.target）;//e.target捕捉到当前触发事件的目标元素...}）;

七、将你的代码转化成jQuery插件
如果每次都花时间去写类似的jQuery代码，那么可以考虑将这部分类似的代码变成插件，它能够使你的代码有更好的重用性，并且能够有效的帮助你组织代码。
八、使用Javascript数组join（）来拼接字符串
处理长字符串的时候，使用join（）方法有助于优化性能。

var arr = [];for（var i = 0; i < 100; i++）{arr[i] = "<li>" + i + "</li>";}$list.html（arr.join（""））;

九、合理利用HTML5的data属性
HTML5的data属性可以帮助我们插入数据，特别是前后端的数据交换。jQuery的data（）方法，有效的利用HTML5的属性，来自动得到数据。

...<a id="info" data-info-index="23" data-role="linkInfo"></a>...var $infoLink = $（"#info"）;var infoIndex = $infoLink.data（"info-index"）;var type = $infoLink.data（"linkInfo"）;

十、尽量使用原生的JavaScript方法
如：

$（this）.css（"color": "blue"）;

优化成：

this.style.color = "blue";

如：

$（"<p></p>"）;

优化成:

$（document.createElement（"p"））;

十一、压缩JavaScript
使用压缩工具压缩JavaScript文件。
发布项目时，应使用“压缩版”JavaScript文件。
希望本文所述对大家的jQuery程序设计有所帮助。