也谈javascript程序优化问题

作者：cityvoice 来源：经典论坛时间：2008-10-29 11:30:00　

写了几年代码，很少谈到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>

先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>

第三讲，尽量用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>

用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>

其实，做程序就是这样，不能一味强调某一方面，有时候我们在获得某一项便利特性得同时比如PORTAL技术，就不得不牺牲另外一些特性，我们要做的就是要尽量平衡各方面得要求。不改变其它性能的情况下，我们应该尽量去优化已有代码，这在大型项目得时候尤其重要，这是做一个好的程序员所应具备得。

标签：程序,javascript,优化

投稿

也谈javascript程序优化问题

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

第三讲，尽量用cloneNode代替createNode

猜你喜欢

C#简单访问SQLite数据库的方法(安装,连接,查询等)

symfony2.4的twig中date用法分析

深度学习详解之初试机器学习

Python如何基于Tesseract实现识别文字功能

仿DW的图形菜单 DIV+CSS

mysql按照时间分组查询的语句

Oracle 数据显示横表转纵表

Python Json读写操作之JsonPath用法详解

perl哈希hash的常见用法介绍

escape解决AJAX中文乱码的简单方法

JavaScript 作用域scope简单汇总

SQL Server 2000安装图解教程

scrapy-redis源码分析之发送POST请求详解

python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性

vue项目的创建的步骤(图文教程)

Python中对元组和列表按条件进行排序的方法示例

Go开发Gin项目添加jwt功能实例详解

Python BS4库的安装与使用详解

深入理解JS中的substr和substring

详解Python中str和repr方法的区别

也谈javascript程序优化问题

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

第三讲，尽量用cloneNode代替createNode

猜你喜欢

C#简单访问SQLite数据库的方法(安装,连接,查询等)

symfony2.4的twig中date用法分析

深度学习详解之初试机器学习

Python如何基于Tesseract实现识别文字功能

仿DW的图形菜单 DIV+CSS

mysql按照时间分组查询的语句

Oracle 数据显示 横表转纵表

Python Json读写操作之JsonPath用法详解

perl哈希hash的常见用法介绍

escape解决AJAX中文乱码的简单方法

JavaScript 作用域scope简单汇总

SQL Server 2000安装图解教程

scrapy-redis源码分析之发送POST请求详解

python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性

vue项目的创建的步骤(图文教程)

Python中对元组和列表按条件进行排序的方法示例

Go开发Gin项目添加jwt功能实例详解

Python BS4库的安装与使用详解

深入理解JS中的substr和substring

详解Python中__str__和__repr__方法的区别

Oracle 数据显示横表转纵表

详解Python中str和repr方法的区别