• Javascript createElement和innerHTML增加页面元素的使用对比


    最近遇到js的效率问题,是关于在页面中新增元素的问题;

    假设:我们有页面如下

    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    <div id="div1"></div>
    </BODY>
    <script>
       
    // 脚本位置
    </script>
    </HTML>

    现在,我们要往div1中添加对象,大家都知道在为web页面增加一个元素时可以使用如下代码:

    // 方法1

    div1.innerHTML = '<a href="">测试</a>';

    或者:

    // 方法2

    var a = document.createElement('a');

    a.innertText = '测试';
    div1.appendChild(a);

     在网上搜索到一个探讨js效率问题的文章,其大概意思是说方法2的效率高,其对比代码如下

    // 方法1
    function init(){
    var staDate = new Date();
    var doc = window.document;
    for(var i=0;i<100;i++){
    var str="<div id='div_'"+i+"' style='100px; height:20px;background-color:#eee'>test</div>";
    container.innerHTML 
    += str;
    }
    alert(
    new Date - staDate);
    }
    //方法2
    function init(){
    var staDate = new Date();
    var doc = window.document;
    for(var i=0;i<100;i++){
    var oDiv = doc.createElement("div");
    var oText = doc.createTextNode("text");
    oDiv.appendChild(oText);
    container.appendChild(oDiv);
    oDiv.style.id 
    = "div_"+i;
    oDiv.style.width 
    = "100px";
    oDiv.style.height 
    = "20px";
    oDiv.style.backgroundColor 
    = "#eee";
    }
    alert(
    new Date - staDate);
    }

    其页面中有:

    <div id="container"></div>
    <input type="button" value="start" onclick="init();" />

    从执行效果来看方案2要比方案1快10倍左右,到底这是不是真的呢?其实上面的测试代码是有待商榷的,且看其方法1中的循环代码:

    for(var i=0;i<100;i++){
    var str
    ="<div id='div_'"+i+"' style='100px; height:20px;background-color:#eee'>test</div>";
    container.innerHTML += str;
    }

     其中有很多字符串操作,而且除了使用+号来连接字符串外,还使用了+=操作符,这就是问题的所在了,在javascript中这种操作字符串的做法是严重影响效率的,所以使用上面的方法来测试createEmenent和innerHTML的效率对innerHTML是不公平的, 据此看来很可能是字符串操作吃掉了innerHTML的性能,于是写了下面的测试代码

    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    <input type="button" value="测试1" onclick="test1()" /><input type=text readonly id=t1>
    <input type="button" value="测试2" onclick="test2()" /><input type=text readonly id=t2>
    <input type="button" value="清空" onclick="div1.innerHTML = ''; div2.innerHTML = ''; t1.value=''; t2.value = '';" />
    <div id="div1"></div>
    <div id="div2"></div>
    </BODY>
    <script>
    function test1()
    {
        
    var d = new Date();
        
    var buf = new Array();
        
    for (var n = 0; n < 1000; n ++)
        {
            buf.push(
    '<a href="">测试');
            buf.push(n);
            buf.push(
    '</a>');
        }
        
        div1.innerHTML 
    = buf.join('');

        t1.value 
    = '耗时:' +  (new Date() - d);
    }

    function test2()
    {
        
    var d = new Date();
        
    for (var n = 0; n < 1000; n ++)
        {
            
    var e = document.createElement('a');
            e.href 
    = '';
            e.innerText 
    = '测试' + n;
            div2.appendChild(e);
        }
        
        t2.value 
    = '耗时:' +  (new Date() - d);
    }
    </script>
    </HTML>

     经测试发现:

    1. 在创建的对象较少(0-大约10左右)时,innerHTML和createElement效率差不多,测试值悠忽不定
    2. 在创建对象多于20时,innerHTML要比createElement效率高很多,平均测试差不多createElement耗时是innerHTML的两倍。

    总结:其实效率也在于编写的代码,在知道可用的API的效率后,怎么编写代码也是非常重要的,否则应由的执行效率不能体现出来,就如上面从网上搜到的那些代码,得出一个与事实相悖的结论。

    来自:http://qsfwy.javaeye.com/blog/241312

  • 相关阅读:
    HDU 1728 逃离迷宫
    程序猿求职之道(《程序猿面试笔试宝典》)之不想签约,但也不想轻易放弃机会,怎么办?
    职场生涯(—)
    Python学习笔记24:Django搭建简单的博客站点(二)
    &quot;高可用方案工具包&quot; high availability toolkit 1.1
    [Swift]LeetCode421. 数组中两个数的最大异或值 | Maximum XOR of Two Numbers in an Array
    [Swift]LeetCode420. 强密码检验器 | Strong Password Checker
    [Swift]LeetCode419. 甲板上的战舰 | Battleships in a Board
    [Swift]LeetCode417. 太平洋大西洋水流问题 | Pacific Atlantic Water Flow
    [Swift通天遁地]七、数据与安全-(11)如何检测应用程序中的内存泄露
  • 原文地址:https://www.cnblogs.com/jazzka702/p/1487789.html
Copyright © 2020-2023  润新知