zoukankan      html  css  js  c++  java
  • jquery find选择器在不同浏览器下的差异

    初步测试,5000个节点的隐藏。

    代码如下:

    <!doctype html>
    <html lang="en">
    <head>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div>
            <ul></ul>
        </div>
        <script>
        var html = "";
    for(var i=0;i<5000;i++){
      var $m = '<li><a></a></li>';
      html += $m;
    }
    $("body").find("ul").append(html);
    var time = new Date().getTime();
    $("body").find("a").hide();
    var endtime = new Date().getTime();
    console.log("find cost" + (endtime-time));


    time = new Date().getTime();
    $("body a").hide();
    endtime = new Date().getTime();
    console.log("find cost" + (endtime-time));</script>
    </body>
    </html>

    IE7下find = 501ms,css =731ms

    IE11下find = 216ms , css = 32ms

    chrome下find = 683ms , css = 93ms

    firefox下 find = 285ms , css = 260ms

    safari find = 294ms , css= 105ms

    可能是因为IE7以下不存在css选择器原生方法,jquery针对此采用的sizzle引擎虽有所优化,但仍不及find方法。

    综合来说,现代浏览器(IE6,7除外)在CSS选择节点的执行效率上由于原生方法的优势均不同程度的有所提高。

    因此,在使用jquery时,若兼容在IE8以上的,则可以无脑采用css选择器,若考虑到IE6,7,则需要有针对性的使用find() (IE6,7)和 css选择器(IE8及以上)。

    参考:http://hi.baidu.com/xujie2453/item/6258f4d8eb315230e3108f3f

  • 相关阅读:
    0127 date dateformat calebdar
    0126 字符串缓冲区StringBuffer类 正则表达式
    0126 String类
    0125 java API object
    0125 匿名对象 内部类 包 代码块
    0123 final关键字,static 关键字
    0123 this关键字 super关键字
    0122面向对象 构造方法
    0122面向对象3 多态
    0120 面向对象2
  • 原文地址:https://www.cnblogs.com/bluers/p/3524981.html
Copyright © 2011-2022 走看看