码迷,mamicode.com
首页 > Web开发 > 详细

jquery学习二:jquery性能优化

时间:2014-10-22 12:25:28      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   ar   使用   java   for   sp   

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属性

10、尽量使用原生的javaScript代码

11、压缩JavaScript

jquery学习二:jquery性能优化

标签:style   blog   color   io   ar   使用   java   for   sp   

原文地址:http://www.cnblogs.com/zhangyanlei183/p/4042576.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!