问题描述

js里操作DOM节点性能损失最低的方式是什么？

可能这个标题不太合适，如下有个例子，一种是用原生js里的创建节点、文本节点、插入父节点内的方式，一种是用数据格式化字符串的方式

// 方式1：
 var a = document.createElement('a');
 a.href = 'http://www.baidu.com';
 a.target ='_blank';
 var text = document.createTextNode('this is baidu homepage');
 a.appendChild(text);
 document.body.appendChild(a);

 //方式2：
 var data = {
  content: "this is baidu homepage",
    href: "http://www.baidu.com",
    target: "_blank"
 };
 var tpl = '<a href="{#href#}" target="{#target#}">{#content#}</a>';
 var tplEngine = function(data, tpl) {
    return tpl.replace(/{#(w+)#}/g, function(match, key) {
           return typeof data[key] === undefined ? '' : data[key];
        });
 };
 document.body.innerHTML(tplEngine(data,tpl));

1、这两种方式哪种性能损失更低？
2、innerHTML()方法的后台运行原理是什么？是否和js的创建元素、文本节点、插入到父节点三个方法过程等价？

解决方案

innerHTML是属性，不是方法

多个dom插入操作最好是用DocumentFragment，而不是每次都操作document，操作DocumentFragment，最后插入DocumentFragment到dom树

不过最新浏览器优化过，应该性能差不是很大

http://www.zhihu.com/question/27260165

解决方案二：

理论上后者性能高，因为它修改dom的次数更少。
不过最好用react一类的框架。