可能这个标题不太合适,如下有个例子,一种是用原生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的创建元素、文本节点、插入到父节点三个方法过程等价?