innerHTML

最新推荐文章于 2020-11-30 10:18:06 发布

孃口三三

最新推荐文章于 2020-11-30 10:18:06 发布

阅读量631

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：性能内存脚本 dom innerHTML

本文链接：https://blog.youkuaiyun.com/konglingnan999/article/details/72794377

js 专栏收录该内容

20 篇文章

订阅专栏

DOM操作中的innerHTML可以说是使用频率比较高的了，在使用的时候有一些要点需要注意：
1. innerHTML与outerHTML的区别
2. 通过innerHTML插入脚本
3. innerHTML替换元素影响内存
4. innerHTML的性能

以下做详细说明：

innerHTML与outerHTML的区别
innerHTML在读模式下返回所操作元素的所有子节点，写模式下会根据指定值创建新的DOM树，并将其替换原所有子节点。
outerHTML则是对所操作元素本身及其所有子节点进行操作。读写模式行为与innerHTML相同。
通过innerHTML插入脚本
在大多数浏览器中，通过innerHTML插入<script>（和<style>）元素并不会执行其中的脚本，但在IE8中可以，不过也要满足一些特定的条件：1.需要为<script>元素指定defer属性。2.<script>元素必须位于“有作用域的元素”之后。
我们首选的方法是在<script>元素前插入没有结束标签的隐藏<input>元素。
eg.
div.innerHTML = "<input type=\"hidden\"><script defer>alert('hi');<\/script>";
注：用隐藏的<script>域的原因是其不影响页面布局。
innerHTML替换元素影响内存
使用innerHTML替换元素的时候，被替换的元素看似无影无踪了，但实际上，元素与其事件处理程序和JavaScript对象属性的绑定关系在内存中并没有被一并删除，如果频繁进行替换操作的话，页面所占用的内存数量将会明显增加，占用内存。因此在使用innerHTML（包括outerHTML属性和insertAdjacentHTML（）方法）时，我们要先手动删除与被替换元素绑定的所有事件处理程序和JavaScript对象属性。
innerHTML的性能
在我们需要插入大量HTML标记时，innerHTML是很有优势的，相比多次DOM操作先创建节点再指定关系，使用innerHTML属性效率要高得多。
```
原因在于：在设置innerHTML和outerHTML时，会创建一个HTML解析器，这个解析器是浏览器级别的代码（通常是C++编写的）基础上运行的，因此比执行JavaScript代码要快得多。
```
但不可避免的创建和销毁HTML解析器也会带来性能损失。所以我们最好减少innerHTML和outerHTML的设置次数。

比如下面这段代码：


    var cityUl = cityArea.getElementsByTagName("ul")[0];
    for(var i=0; i<citys.length; i++){
        var cityLi = document.createElement("li");
        var cityA = document.createElement("a");
        cityA.setAttribute("href", "javascript:void(0)");
        cityA.innerHTML = citys[i];
        cityLi.appendChild(cityA);
        cityUl.appendChild(cityLi);
    }

这段代码的循环中多次设置innerHTML属性，这样的性能消耗是很大的。最好的做法是单独构建字符串，然后一次将结果字符串赋值给innerHTML。优化后的代码：

    var cityUl = cityArea.getElementsByTagName("ul")[0];
    var citysStr = "";
    for(var i=0; i<citys.length; i++){
        citysStr += "<li><a href=\"javascript:void(0)\">" + citys[i] + "</a></li>";
    }
    cityUl.innerHTML = citysStr;

这段代码则只进行了一次innerHTML属性设置。