页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容 javascript程序优化

javascript程序优化问题第3/3页

发布：dxy 字体：[增加减小] 类型：转载

写了几年代码，很少谈到javascript程序的执行效率问题，今天就举几个例子看看，让大家看看程序优化是多么重要。这节来看看createElement和innerHTML的表现。看看差别是多大

第三讲，尽量用cloneNode代替createNode
还是看例子
用cloneNode：

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<script type="text/javascript"> 
function init(){ 
    var staDate = new Date(); 
    var doc = window.document; 
    for(var i=0;i<100;i++){ 
                        if(container.childNodes.length>0){ 
                                var oDiv = container.lastChild.cloneNode(true); 
                                oDiv.id="div_"+i; 
                                container.appendChild(oDiv);     
                        }else{ 
        var oDiv = doc.createElement("div"); 
        var oTab  = doc.createElement("table"); 
        var oTbody  = doc.createElement("tbody"); 
        var oTr = doc.createElement("tr"); 
        var oTd = doc.createElement("td"); 
        var oText = doc.createTextNode("毛主席向全世界宣布：中华人民共和国从此成立了");                 
        container.appendChild(oDiv); 
                                oDiv.appendChild(oTab); 
                                oTab.appendChild(oTbody); 
                                oTbody.appendChild(oTr); 
                                oTr.appendChild(oTd); 
                                oTd.appendChild(oText); 
        oDiv.id = "div_"+i; 
        oDiv.style.width = "400px"; 
        oDiv.style.height = "20px"; 
        oDiv.style.backgroundColor = "#eee"; 
                         }         
         
    } 
    //alert(container.innerHTML); 
    alert(new Date - staDate); 
} 
</script> 
</HEAD> 
<BODY> 
<div id="container"></div> 
<input type="button" value="start" onclick="init();" /> 
</BODY> 
</HTML>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

用createNode：

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<script type="text/javascript"> 
function init(){ 
    var staDate = new Date(); 
    var doc = window.document; 
    for(var i=0;i<100;i++){ 
                        //if(container.childNodes.length>0){ 
                                //var oDiv = container.lastChild.cloneNode(true); 
                                //oDiv.id="div_"+i; 
                                //container.appendChild(oDiv);     
                        //}else{ 
        var oDiv = doc.createElement("div"); 
        var oTab  = doc.createElement("table"); 
        var oTbody  = doc.createElement("tbody"); 
        var oTr = doc.createElement("tr"); 
        var oTd = doc.createElement("td"); 
        var oText = doc.createTextNode("毛主席向全世界宣布：中华人民共和国从此成立了");                 
        container.appendChild(oDiv); 
                                oDiv.appendChild(oTab); 
                                oTab.appendChild(oTbody); 
                                oTbody.appendChild(oTr); 
                                oTr.appendChild(oTd); 
                                oTd.appendChild(oText); 
        oDiv.id = "div_"+i; 
        oDiv.style.width = "400px"; 
        oDiv.style.height = "20px"; 
        oDiv.style.backgroundColor = "#eee"; 
                         //}         
         
    } 
    //alert(container.innerHTML); 
    alert(new Date - staDate); 
} 
</script> 
</HEAD> 
<BODY> 
<div id="container"></div> 
<input type="button" value="start" onclick="init();" /> 
</BODY> 
</HTML>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

当前3/3页上一页 1 2 3

Tags：javascript 程序优化

浏览次数：载入中... 打印本文关闭本文返回首页

0

顶一下

上一篇文章：比较不错的函数式JavaScript编程指南教程
下一篇文章：执行iframe中的javascript方法

·在百度中搜索关于“javascript程序优化问题相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

javascript程序优化问题第3/3页

文章评论

同类文章

最近更新

热点排行

javascript程序优化问题第3/3页

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行