首页 > 网络编程 > JavaScript > javascript技巧 > javascript程序优化

javascript程序优化问题

2008-05-16 22:41:50 作者：

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

createElement:

innerHTML:

第二讲：同样是createNode，再来看看执行顺序的差别

先创建子节点，再append到父节点：

<!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++){ 
        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("毛主席向全世界宣布：中华人民共和国从此成立了");         
        oTd.appendChild(oText); 
        oTr.appendChild(oTd); 
        oTbody.appendChild(oTr); 
        oTab.appendChild(oTbody); 
        oDiv.appendChild(oTab); 
        container.appendChild(oDiv); 
        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 全选注:如需引入外部Js需刷新才能执行]

先append到父节点，再创建子节点：

<!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++){ 
        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 全选注:如需引入外部Js需刷新才能执行]

第三讲，尽量用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 全选注:如需引入外部Js需刷新才能执行]

用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 全选注:如需引入外部Js需刷新才能执行]