jquery性能优化和技巧

使用最新版本的jquery库
合理使用选择器：

id>类>.class>属性选择器>伪类选择器

(开发过程中，尽量避免使用后面两种，第三种选择性的使用)
多使用缓存对象，不要随意创建对象。记住，永远不要让相同的选择器在你的代码里出现多次
循环时的DOM操作。使用jquery可以很方便的添加，删除或者修改DO节点，但是在循环中，要尽量减少 DOM的操作，举个例子：

var top_100_list = [...] //假设这里是100个独一无二的字符串
   $mylist = $("mylist");
   for (var i = 0,l=top_100_list.length;i<l;i++){
      $mylist.append("<li>"+top_100_list[i]+"</li>");
   }

修改代码如下：

var top_100_list = [...],$mylist = $("#mylist"),top_100_li = "";
   for (var i = 0,l=top_100_list.length;i<l;i++){
       top_100_li +="<li>"+top_100_list[i]+"</li>";
   }
   $mylist.html(top_100_li);

5.数组方式使用jquery对象

建议使用简单for或者while循环来处理，而不是$.each()（现在还有好多循环机制，这里不多说）

$.each(array,function(i){
      array[i] = i;
   });

使用for代替each()方法：

var array = new Array();
   for(var i=0;i<array.length;i++){
     array[i] = i;
   }

另外，检查长度也是一个检查jquery对象是否存在的方式

6.事件代理

每一个javascript事件都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点会很有用。但是给每一个子元素都添加一个事件会影响性能，我们可以直接给父元素添加。详细见锋利的jquery

7.将你的代码转化为jquery插件
8.使用join()来拼接字符串
9.合理使用html5的data属性
10.尽量使用原生的Javascript方法
11.压缩javascript

秒客网

jquery性能优化和技巧

相关文章