javascript程序优化问题

2020-05-12 我要评论

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></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></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></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></div> 
<input type="button" value="start" onclick="init();" /> 
</BODY> 
</HTML>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

猜您喜欢

05-12比较不错的函数式JavaScript编程指南教程
05-12用函数式编程技术编写优美的 JavaScript_ibm
05-12Javascript模块模式分析
05-12Js的MessageBox效果代码
05-12js简单的表拖拽
05-12js下拉框里超过变成省略号
05-12Dom加载让图片加载完再执行的脚本代码
05-12js模拟QQ窗口的抖动效果
05-12yahoo首页伸缩效果代码
05-12直接生成打开窗口代码，不必下载
05-12弹出提示的效果代码
05-12li隔行换色改进版
05-12li隔行换色效果代码升级版
05-12javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)
05-12模仿动画的放大缩小容器
05-12javascript用层模拟可移动的小窗口
05-12javascript双向放大缩小广告代码
05-12引用文章链接代码复制自动加链接功能

javascript程序优化问题

相关文章

猜您喜欢

今日热门