javascript程序优化问题- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript程序优化问题

Javascript: jQuery生成asp.net服务器控件的代码; javascript 实现的完全兼容鼠标滚轴缩放图片的代码; JavaScript学习笔记（十七）js 优化; 使用SyntaxHighlighter实现HTML高亮显示代码的方法; javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系; 利用jQuery 实现GridView异步排序、分页的代码; jquery.lazyload 实现图片延迟加载jquery插件; Lazy Load 延迟加载图片的 jQuery 插件; jquery 插件实现图片延迟加载效果代码; javascript小数计算出现近似值的解决办法; jquery1.4后 jqDrag 拖动不可用; jquery 应用代码方便的排序功能; 选择TreeView控件的树状数据节点的JS方法(jquery); jquery 图片Silhouette Fadeins渐显效果; JQuery Dialog(JS 模态窗口,可拖拽的DIV); javascript 同时在IE和FireFox获取KeyCode的代码; js 键盘记录实现(兼容FireFox和IE); javascript 函数速查表; jQuery AnythingSlider滑动效果插件; 经典海量jQuery插件大家可以收藏一下

No. « ‹ 283 284 285 286 › »

技术文章搜索

关键字

Javascript 中的 javascript程序优化问题

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 157 ::

收藏到网摘: n/a

比较不错的函数式JavaScript编程指南教程认识延迟时间为0的setTimeout

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

点击运行可以看到效果:

<!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 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);
}
</script>
</HEAD>
<BODY>
<div id="container">
<BR>第二讲：同样是createNode，再来看看执行顺序的差别 <br>先创建子节点，再append到父节点： <BR><div class="htmlarea"><font color=red>点击运行可以看到效果:</font><TEXTAREA id="runcode8238">
<!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">
<BR>第三讲，尽量用cloneNode代替createNode <BR>还是看例子 <BR>用cloneNode： <BR><div class="htmlarea"><font color=red>点击运行可以看到效果:</font><TEXTAREA id="runcode88837">
<!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：

点击运行可以看到效果:

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

比较不错的函数式JavaScript编程指南教程认识延迟时间为0的setTimeout

Javascript 中的 javascript程序优化问题

评论 (0) All