yishuixs
yishuixs
采纳率74.7%
2016-03-16 21:02 阅读 1.5k

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 GoCityPass新加坡曼谷通票 2016-03-17 01:03

    innerHTML是属性,不是方法

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

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

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

    点赞 评论 复制链接分享
  • caozhy 从今以后生命中的每一秒都属于我爱的人 2016-03-16 21:09

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

    点赞 评论 复制链接分享

相关推荐