• 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

  • 相关阅读:
    Keras学习笔记——Hello Keras
    记一次线上事故的JVM内存学习
    postgresql中的search_path
    CentOS7安装setuptools
    CentOS7安装EPEL的两种方式
    Ncures库的介绍与安装
    CentOs6.5 安装Zlib
    Centos 安装zlib
    Windows如何压缩tar.gz格式
    nginx运行文件出错env: /etc/init.d/nginx: No such file or directory
  • 原文地址:https://www.cnblogs.com/bluers/p/3524981.html
Copyright © 2020-2023  润新知