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呢?
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
console.time 简单分析javascript动态添加Dom节点的性能
console.time 简单分析javascript动态添加Dom节点的性能
高频dom操作和页面性能优化探索(转)
一、DOM操作影响页面性能的核心问题 通过js操作DOM的代价很高,影响页面性能的主要问题有如下几点: 访问和修改DOM元素 修改DOM元素的样式,导致重绘或重排 通过对DOM元素的事件处理,完成与用户的交互功能 DOM的修改会导致重绘和重排。 重绘是指一些样式的修改,元素的位置和大小都没有改变; 重排是指元素的位置或尺寸发生了变化,浏览器需要重新
关于DOM操作的性能优化
最著名的有关用js操作dom的观点是:js和do
js小记:DOM节点操作方法总结
1、通用 - getElementByID() - getElementsByTagName() //得到数组NodeList - getElementsByName() //得到数组NodeList - nodeType - nodeName - nodeValue 2、节点关系 - childrenNodes - firstChild -...
jQuery性能优化--循环时的DOM操作
jQuery性能优化--循环时的DOM操作
前端性能优化:DOM操作性能优化建议
其实在web开发中,单纯因为js导致性能问题的很少,主要都是因为DOM操作引起的。1查找元素的优化2改变DOM,包括添加,修改,删除DOM3改变DOM的样式类等1查找元素的优化  因为ID是唯一的,也有原始的方法,因此使用ID查找元素是最快的,其次的是根据类和类型查找元素,通过属性查找元素是最慢的,因此应该尽可能的通过ID或者类来查找元素,避免通过类来查找元素。2改变DOM,包括添加,修改,删除D
在JS中什么是DOM,DOM的节点有哪些
 DOM DOM是Javascript操作网页的接口,全称叫文档对象模型(Document Object Model)。它的作用是将网页转化为一个Javascript对象,从而用Javascript脚本进行各种操作(比如增删元素等)。 浏览器会根据DOM模型,将结构化文档(比如Html或者xml等)解析成一系列的节点,再由这些节点解析成树状结构(Dom Tree),所有的节点和最终的
jsDOM节点操作
1.访问节点 document.getElementById(id); 返回对拥有指定id的第一个对象进行访问 document.getElementsByName(name); 返回带有指定名称的节点集合 注意:Elements document.getElementsByTagName(tagname); 返回带有指定标签名的对象集合 注意:Elements docu
遍历dom时如何优化JS性能
1. 遍历DOM 当遍历父节点下面的所有子节点时,例如: 1 2 9000个 9003 var div=document.getElementById("div");1) nextSibling方法 var f=div.firstChild; var name=''; do{ name=div.nodeName; }while(f=f.nextSibling) 2)
js DOM效率浅析
一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来。 首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为,比如布局(layout)和绘制(paint)。下面主要先介绍下这些浏览器行为,阐述一个页面是怎么最终被呈现出来的,另外还会从代码的角度,来说明一些不好