关于innerHTML以及html2dom

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

使用innerHTML或者insertAdjacentHTML 创建元素的时候能给我们带来很大的方便，为domNode 赋予innerHTML 属性，在插入大量的ＨＴＭＬ的时候，使用innerHTML要比多次创建ｄｏｍ效率高的多，这是因为在设置innerHTML 时候，浏览器会创建一个innerHTML解析器，这个解析器是在浏览器级别的代码（通常是C++编写的）基础上运行的，因此执行要比Javascript快得多。

不可避免地，创建和销毁HTML解析器也会带来性能的损失，因而应该将设置innerHTML的次数要尽量少，避免浏览器多次的创建HTML解析器，另外如果innerHTML有用户输入或者来自第三方网站，容易造成脚本的攻击，比如包含<script>的代码。同时如果使用这种方式创建的元素之后又为之绑定了事件应先移除事件，如果要移除这段HTML的时候，应该先移除事件避免内存泄露。当然在创建的时候自己可以过滤是否包含攻击性的脚本，得到一个无害的文本。安全的创建节点的方式如下

首先在内存中创建一个文档片段，然后将要创建的元素添加到这个片段中，最后将片段添加到相应的位置即可

var docFragment = document.createDocumentFragment();
var greeting = document.createElement('P');
greeting.setAttribute("id", "greeting");
docFragment.appendChild(greeting);
var text = document.createTextNode("Hello ");
greeting.appendChild(text);
var b = document.createElement('B');
greeting.appendChild(b);
var text_0 = document.createTextNode("World");
b.appendChild(text_0);

对于以上的方式感觉这么多行代码有些麻烦，我们可以使用一个开源的html2dom 来实现HTML与Dom之间的转换。将HTML 生成如上的创建dom的javascript代码。通过这种的方式浏览器不会启用HTML解析器来解析一个长的字符串，也许会提高网站的性能。

如下两种使用方式

假设我想添加 Hello World 这段HTML到文档上，可以使用

var h2d = html2dom.parse('Hello World');
console.log(h2d);

会得到如下：

var docFragment = document.createDocumentFragment(); // contains all gathered nodes
var greeting = document.createElement('P');
greeting.setAttribute("id", "greeting");
docFragment.appendChild(greeting);
var text = document.createTextNode("Hello ");
greeting.appendChild(text);
var b = document.createElement('B');
greeting.appendChild(b);
var text_0 = document.createTextNode("World");
b.appendChild(text_0);

可以看出，html2dom.parse将创建HTML实际上是通过javascript 创建dom来完成的。与第一个Demo的代码一致，只是html2dom将这个过程进行了封装。

如果想了解，javascript代码创建的是什么样的HTML 可以使用html2dom.dom2html

var inp = 'Hello World';
var js = html2dom.parse(inp);
html2dom.dom2html(js, function callback(res) {
console.log("Input:", inp);
console.log("Result:", res);
});

结果

Input: Hello World
Result: Hello World