`

(转)innerHTML和createElement效率比较

 
阅读更多

让我再次想起这个问题源于前面的一次面试，记得当时问我的一个问题是“创建节点选用哪种方式比较好”，我当时的回答是：IE下面innerHTML效率更高，而非IE浏览器下面则是createElement更好。可是，面试官觉得我的结论是不正确的，“在各种浏览器下面，innerHTML都要比createElement效率更高的”！

把回来后的一趟子事完成后，开始着手证明一下，其实，我当时回答的也不是没有“证据”，因为我在一个前端博客（DOM操作的性能优化）上面看到这样的结论：“appendChild和innerHTML的效率也是要分浏览器来考虑到，IE浏览器操作innerHTML的效率非常高，而FF和Opera会慢些，尤其是FF，当innerHTML内部元素很多的时候效率极低，毕竟innerHTML是IE首创并发扬光大的。所以可以这么讲：IE的innerHTML效率优于appendChild,而Firefox则是相反。。。”，可惜当时自己看到这样的结论却没有做测试，无demo，无真相啊！

好了，下面是我的三个测试code：

<body>

<div id="container"></div>

<input type="button" value="start" onclick="init()" />

</body>

CODE1：

function init(){

       var staDate = new Date();

       var container = document.getElementById("container");

       for(var i=0;i<500;i++){

              var str="<div>test</div>";

              container.innerHTML += str;

       }

       alert(new Date - staDate);

}

CODE2：

function init(){

       var staDate = new Date();

       var container = document.getElementById("container");

       for(var i=0;i<500;i++){

              var odiv = document.createElement("div");

              var otext = document.createTextNode("text");

              odiv.appendChild(otext);

              container.appendChild(odiv);

       }

       alert(new Date - staDate);

}

CODE3：

function init(){

       var staDate = new Date();

       var container = document.getElementById("container");

       var arr = [];

       for(var i=0;i<500;i++){

              var str="<div>test</div>";

              arr.push(str);

       }

       container.innerHTML = arr.join("");

       alert(new Date - staDate);

}

下面是某一次测试得出的数据：

IE7：             3469              109                16

FF：              6072              35                  14

Chrome：      3170              3                   2

可以看出，第一个程序耗时很大一部分是由于字符串的连接操作造成的，这个问题我以前探讨过：也说说JavaScript字符串连接的效率，另外，innerHTML的效率（耗时）比createElement再append要高！

更改程序，再次验证：

CODE4：

//在代码2的基础上增加一个数量节

function init(){

       var staDate = new Date();

       var container = document.getElementById("container");

       for(var i=0;i<5000;i++){

              var odiv = document.createElement("div");

              var otext = document.createTextNode("text");

              odiv.appendChild(otext);

              container.appendChild(odiv);

       }

       alert(new Date - staDate);

}

CODE5：

//比代码3更严谨，只计算操作innerHTML的时间

function init(){

       var container = document.getElementById("container");

       var arr = [];

       for(var i=0;i<5000;i++){

              var str="<div>test</div>";

              arr.push(str);

       }

       var str = arr.join("");

       var staDate = new Date();

       container.innerHTML = str;

       alert(new Date - staDate);

}

IE7：             922                78

FF：              372                144

Chrome：      32                  28

看来，IE浏览器操作innerHTML的效率确实非常高，当innerHTML内容很多时，IE效率比FF高，“毕竟innerHTML是IE首创并发扬光大的”，不过，innerHTML的效率显然还是比createElement和append要高！

看来，面试官的结论是正确的，在敬佩的同时对自己当时不作测试感到惋惜！

最后，感谢zhubiao大哥在百忙中抽出时间和我讨论，让我知道“innerHTML属于‘静态’的操作，消耗内存小一点。creatElement相比之下会更消耗内存…”

文章结尾，附上网上一些大牛对这个问题的探讨：

PPK：Benchmark - W3C DOM vs. innerHTML

Dustindiaz：innerHTML and DOM Methods

怿飞：通过 Dom 方法提高 innerHTML 性能

文章来源:http://www.iteye.com/topic/500009

分享到：
| (转)Eclipse 3.7 (Indigo)中文字体太小
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Javascript createElement和innerHTML增加页面元素的性能对比

    `createElement` 和 `innerHTML` 都是JavaScript中用于在页面上添加元素的常见方法，但它们在性能上有显著区别。 首先，`innerHTML` 属性允许我们将HTML字符串直接插入到指定元素中，从而创建或修改元素的内容。...

    innerHTML_outerHTML.rar_javascript

    因此，对于大量数据的操作，推荐使用创建DOM节点的方法（如 `createElement`、`appendChild` 等）来提高效率。 在提供的压缩包文件 "innerHTML_outerHTML.htm" 中，很可能是通过实例展示了 `innerHTML` 和 `...

    优化innerHTML操作(提高代码执行效率)

    使用`createElement`和`appendChild`等方法创建和插入新节点，可以避免innerHTML的全量解析和重建，提高效率。例如，创建一个新的`&lt;p&gt;`元素，然后将其添加到目标元素的末尾。 3. **利用临时元素**： 创建一个临时...

    javaScript动态添加Li元素的实例

    在给定的文件内容中，包含了两种主要的技术实现：使用innerHTML和使用createElement。下面将对这两种方法进行详细解读，并解释相关的知识点。 首先，来看使用innerHTML的方法。innerHTML属性允许我们通过JavaScript...

    JavaScript执行效率优化及内存管理优化.docx

    JavaScript执行效率优化与内存管理是Web开发中的关键环节，它们直接影响到网页的性能和用户体验。下面将详细讨论这些优化策略。 1.1 DOM操作优化 1.1.1 使用DocumentFragment批量处理DOM 在大量添加DOM元素时，...

    前端工具 - HTML转JS工具

    例如，可以创建一个HTML模板字符串，然后在需要的时候用`document.createElement()`和`innerHTML`等方法将其插入到DOM中。 在提供的压缩包中，我们看到有以下几个文件： 1. **html2js.html**：这很可能是工具的主...

    html 转 js 的工具

    总的来说，HTML转JS工具是Web开发中的一个重要辅助手段，它简化了HTML和JavaScript之间的转换过程，提高了开发效率，尤其是在处理动态内容和增强交互性时。通过理解这些工具的工作原理和功能，开发者可以更好地利用...

    createElement与createDocumentFragment的点点区别小结

    考虑以下示例，对比使用`createElement`和`createDocumentFragment`创建多个`&lt;p&gt;`元素的效率： ```javascript // 使用createElement for (var i = 0; i ; i++) { var op = document.createElement("P"); var oText...

    专题资料（2021-2022年）javascript效率经验谈.docx

    以下是从给定文件中提取的JavaScript效率提升策略和实践经验： 1. 避免大HTML字符串赋值给`innerHTML`: 当需要更新大量DOM元素时，直接修改`innerHTML`可能导致性能下降。因为这会触发浏览器重新解析整个HTML片段，...

    JavaScript执行效率优化与内存管理优化.pdf

    JavaScript执行效率优化与内存管理是Web开发中至关重要的主题，因为它们直接影响到用户体验和资源消耗。以下是基于提供的部分内容，详细阐述这些优化策略及其原理。 **1. DOM操作优化** 1.1.1 使用`...

    一些高性能的Javascript代码.doc

    在IE和Firefox下，这种方法可将效率提升10%-30%，在Firefox中尤为明显。例如： ```javascript // 优化前 for (var i = 0; i ; i++) { var el = document.createElement('p'); el.innerHTML = i; document.body...

    将Html转化成能追加的js格式

    总结来说，"将Html转化成能追加的js格式"是为了便于JavaScript动态地向页面追加内容，通过提供工具函数或库，我们可以更高效地实现这一过程，从而提升前端开发的效率和代码质量。压缩包中的`Util.js`可能是实现这一...

    js动态生成表格

    在JavaScript（JS）中动态生成表格是一项常见的任务，特别是在网页交互和数据展示中。这篇文章将深入探讨如何利用JS实现这一功能，...在实际项目中，结合现代前端框架和第三方库，可以进一步提升开发效率和用户体验。

    JS提高优化性能完全秘籍.pdf

    当需要根据数据动态生成大量DOM元素时，直接修改父元素的`innerHTML`属性通常比逐个创建和追加DOM元素更高效。这是因为浏览器能够一次性解析和构建整个HTML字符串，而不是逐一处理每个元素。 **服用前：** ```...

    Html与Javascript互相转换工具

    例如，`document.createElement()`用于创建新元素，`appendChild()`将元素添加到父元素中，`innerHTML`属性可以用来设置或获取元素的HTML内容。通过这些方法，JavaScript可以动态改变HTML页面。 转换工具可能还包含...

    javascript动态生成页面元素

    例如，IE和Firefox对`innerHTML`的处理存在差异，这可能需要使用条件语句来区分不同的浏览器行为： ```javascript if (document.all && document.getElementById) { // IE specific code } else { // Firefox and...

    JS大转盘游戏代码

    通过`document.getElementById`、`document.createElement`、`element.innerHTML`等方法，可以创建、修改和操作页面元素。 2. **事件处理**：用户点击开始游戏按钮时，会触发相应的事件。JS中的`addEventListener`...

Magicbox
Global site tag (gtag.js) - Google Analytics