jquery学习二：jquery性能优化

浏览数：31 / 时间：2015年06月09日

1、使用最新版本的jQuery类库

2、使用合适的选择器

　　(1) $("#id"):定位dom元素提高性能最佳的方式

　　建议从最近的ID元素开始往下搜索：$("#content").find("div");

　　(2) $("p"),$("div"):性能也不错，它会调用本地的document.getElementsByTagName()来调用

　　(3) $(".class"):对于较早版本的浏览器性能不好，它会遍历节点查找。而对于ie9后的浏览器，它会调用本地的document.getElementsByClassName();

　　(4) $("[attribute=value]"):此方法性能不是太好，虽然很多现代浏览器支持querySelectorAll(),但是不同浏览器的性能不同，建议开发中尽量避免这种对性能的伤害

　　(4) $(":hidden"):建议尽量不要使用

3、缓存对象

　　可能经常会这样写：

　　$("#id input:hidden").show();

　　$("#id input:hidden").val("aa");

　　这样，每执行一行代码，都会查找dom创建一个$("#id input:hidden")对象

　　比较好的方式是：

　　var $dom = $("#id input:hidden");//缓存变量

　　$dom.show();

　　$dom.val("aa");

　　如果使用链式，更简洁：

　　$("#id input:hidden").show().val("aa");

　　记住：永远不要把相同的选择器在代码里出现多次

4、循环时的DOM操作

　　循环时应尽量少的进行dom操作

　　下面这个方式就不是太好：

　　　　 var top_100_list = [...];
        $ul = $("#myUl");
        for(var i = 0;i<top_100_list.length;i++){
            $ul.append("<li>"+top_100_list[i]+"</li>");
        }

　　更好的方式尽量减少dom操作，这里应该将整个元素字符串在插入DOM之前全部创建好，修改代码如下：

        var top_100_list = [...];
        $ul = $("#myUl");
        var myLi = "";
        for(var i = 0;i<top_100_list.length;i++){
            myLi += "<li>"+top_100_list[i]+"</li>";
        }
        $ul.append(myLi);

5、数组方式使用jQuery对象

　　jquery选择器获取的jquery对象，类似一个数组。建议使用for或者while循环获取，代码更快

　　注意：jquery对象不会报错，可以使用length属性判断对象是否存在。

6、事件代理

　　$("#myTable").click(function(){

　　　　var $clicked = $(e.target);

　　　　$clicked.css("background","red");

　　});

7、将代码转化成jquery插件

　　如果每次都需要花一段时间去开发类似的jquery代码，那么可以考虑将代码变成插件

8、使用join()来拼接字符串

9、合理利用html5的Data属性