zoukankan      html  css  js  c++  java
  • JavaScript AppendChild 引发的思考

    今天在网上找到一个AjaxPro生成Tree的例子,看到用了很多的js代码,我这方面不是强项,于是网上查了下资料:

    innerHTML:
    <body>
    </body>
    <script>
    var starttime = new Date();
    for(i = 0 ; i < 100 ; i ++){
        document.body.innerHTML 
    += "<input type='text' value='" + i + "'>";
    }

    alert(
    new Date() - starttime);
    </script>
    知道测试时间是比较长,大约
    "1000"

    appendChild:
    <body>
    </body>
    <script>
    var starttime = new Date();
    for(i = 0 ; i < 100 ; i ++){
        ds 
    = document.createElement("input");
        ds.type 
    = "text";
        ds.value 
    = i;
        document.body.appendChild(ds);
    }

    alert(
    new Date() - starttime);
    </script> 

    其实以上例子还可以在改进一下,因为拼接字符串,重新解析html方面的消耗,所以速度就下来。

     

    innerHTML:
    <body>
    </body>
    <script>
    var starttime = new Date();
    var html = []
    for(i = 0 ; i < 100 ; i ++){
        html.push(
    "<input type='text' value='")
        html.push(i)
        html.push(
    "'>")
    }

    document.body.innerHTML 
    = html.join("")
    alert(
    new Date() - starttime);
    </script>
    时间大约为”
    20

    甚至如果你有更快的话,
    <body>
    </body>
    <script>
    var starttime = new Date();
    var a = [];
    for(i = 0 ; i < 100 ; i ++){
        a[i]
    = "<input type='text' value='" + i + "'>";
    }


    document.body.innerHTML  
    = a.join("");
    alert(
    new Date() - starttime);
    </script>


      事实上,当不同情况下,速度之比是不同的,

    如:当一次性加载大量且复杂的网页元素时,用innerHTMLappendChild()速度要快的

    而当每次只加载几个网页元素,并且要频繁加载时,此时appendChild()innerHTML就快了。Clear

    最后附上浮动图片的代码:

    <script>
    function link$onmouseover(){
        
    var linkimg = this.linkimg;
        
    if(!linkimg){
            linkimg 
    = document.createElement("img");
            
    with(linkimg){
                src 
    = this.href;
                style.position 
    = "absolute";
                style.left 
    = this.style.left;
                style.top 
    = this.style.top;
            }

            document.body.appendChild(linkimg);
            
    this.linkimg = linkimg;
        }

        linkimg.style.display 
    = "";
    }

    function link$onmouseout(){
        
    var linkimg = this.linkimg;
        
    if(linkimg){
            linkimg.style.display 
    = "none";
        }

    }

    </script> 
    <a id="link1" href="图示地址"> link1 </a><br />
    <a id="link2" href="imagesCAZ4JHCC.jpg"> link2 </a>
    <script>
    var link1 = document.getElementById("link1");
    var link2 = document.getElementById("link2");
    link1.onmouseover 
    = link$onmouseover;
    link1.onmouseout 
    = link$onmouseout;
    link2.onmouseover 
    = link$onmouseover;
    link2.onmouseout 
    = link$onmouseout;
    </script>
  • 相关阅读:
    Spring学习笔记(二)----Spring IOC
    LeetCode----正则表达式匹配「动态规划」
    Markdown----一款轻量级标记语言
    LeetCode----最长回文子串「动态规划」
    数据结构(六)
    数据结构(五)
    HDOJ3613解题报告【拓展KMP】
    HDOJ1358解题报告【KMP算法next数组的使用】
    POJ1990解题报告【树状数组】
    HDOJ1507解题报告【二分图染色】
  • 原文地址:https://www.cnblogs.com/myssh/p/1419511.html
Copyright © 2011-2022 走看看