2 yishuixs yishuixs 于 2016.03.17 05:02 提问

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的创建元素、文本节点、插入到父节点三个方法过程等价?

2个回答

showbo
showbo   Ds   Rxr 2016.03.17 09:03
已采纳

innerHTML是属性,不是方法

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

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

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

caozhy
caozhy   Ds   Rxr 2016.03.17 05:09

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

yishuixs
yishuixs innerHTML()是否在后台也修改了DOM呢?
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!