`
lveyo
  • 浏览: 909460 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

innerHTML的性能问题

    博客分类:
  • AJAX
阅读更多
看到一遍文章When innerHTML isn’t Fast Enough,反应了innerHTML在操作量大了以后的性能下降的问题。
并且给出了一个replaceHTML的函数
function replaceHtml(el, html) {
	var oldEl = typeof el === "string" ? document.getElementById(el) : el;
	/*@cc_on // Pure innerHTML is slightly faster in IE
		oldEl.innerHTML = html;
		return oldEl;
	@*/
	var newEl = oldEl.cloneNode(false);
	newEl.innerHTML = html;
	oldEl.parentNode.replaceChild(newEl, oldEl);
	/* Since we just removed the old element from the DOM, return a reference
	to the new element, which can be used to restore variable references. */
	return newEl;
};


用这个函数来代替innerHTML后在不同浏览器中的性能表现为:
Safari 3:
5000 elements…
innerHTML (destroy only): 63ms
innerHTML (create only): 390ms
innerHTML (destroy & create): 484ms
replaceHtml (destroy only): 47ms (1.3x faster)
replaceHtml (create only): 15ms (26.0x faster)
replaceHtml (destroy & create): 62ms (7.8x faster)
Done.
10000 elements…
innerHTML (destroy only): 110ms
innerHTML (create only): 3500ms
innerHTML (destroy & create): 4735ms
replaceHtml (destroy only): 110ms (~ same speed)
replaceHtml (create only): 31ms (112.9x faster)
replaceHtml (destroy & create): 141ms (33.6x faster)
Done.

Firefox 3:
5000 elements…
innerHTML (destroy only): 863ms
innerHTML (create only): 522ms
innerHTML (destroy & create): 1421ms
replaceHtml (destroy only): 20ms (43.1x faster)
replaceHtml (create only): 225ms (2.3x faster)
replaceHtml (destroy & create): 239ms (5.9x faster)
Done. 10000 elements…
innerHTML (destroy only): 5521ms
innerHTML (create only): 2626ms
innerHTML (destroy & create): 8528ms
replaceHtml (destroy only): 39ms (141.6x faster)
replaceHtml (create only): 373ms (7.0x faster)
replaceHtml (destroy & create): 422ms (20.2x faster)
Done.

Opera 9.5:
5000 elements…
innerHTML (destroy only): 16ms
innerHTML (create only): 141ms
innerHTML (destroy & create): 94ms
replaceHtml (destroy only): 16ms (~ same speed)
replaceHtml (create only): 78ms (1.8x faster)
replaceHtml (destroy & create): 125ms (1.3x slower)
Done.
10000 elements…
innerHTML (destroy only): 31ms
innerHTML (create only): 156ms
innerHTML (destroy & create): 312ms
replaceHtml (destroy only): 31ms (~ same speed)
replaceHtml (create only): 203ms (1.3x slower)
replaceHtml (destroy & create): 157ms (2.0x faster)
Done.

IE7:
1000 elements…
innerHTML (destroy only): 0ms
innerHTML (create only): 0ms
innerHTML (destroy & create): 0ms
replaceHtml (destroy only): 0ms (~ same speed)
replaceHtml (create only): 0ms (~ same speed)
replaceHtml (destroy & create): 0ms (~ same speed)
Done.
15000 elements…
innerHTML (destroy only): 31ms
innerHTML (create only): 156ms
innerHTML (destroy & create): 172ms
replaceHtml (destroy only): 32ms (~ same speed)
replaceHtml (create only): 157ms (~ same speed)
replaceHtml (destroy & create): 188ms (1.1x slower)
Done.

似乎在IE上没有什么改进,但是在其它浏览器上效果明显。

经常使用的prototype.js里是调用Element.update(element,content)来完成innerHTML操作的,打开prototype.js文件,修改update的部分
update: function(element, content) {
    element = $(element);
    if (content && content.toElement) content = content.toElement();
    if (Object.isElement(content)) return element.update().insert(content);
    content = Object.toHTML(content);
    element.innerHTML = content.stripScripts();
    content.evalScripts.bind(content).defer();
    return element;
  },

用replaceHTML函数代替element.innerHTML = content.stripScripts();这行就可以了。
update: function(element, content) {
    element = $(element);
    if (content && content.toElement) content = content.toElement();
    if (Object.isElement(content)) return element.update().insert(content);
    content = Object.toHTML(content);
    element = replaceHtml(element, content.stripScripts());
    content.evalScripts.bind(content).defer();
    return element;
  },
10
3
分享到:
评论
12 楼 lveyo 2008-04-20  
hax我看了你的分析文章,我也是用到的时候才发现老外的那篇文章的,也没想去研究为什么会有性能差异,还是你有钻研的精神,以后要多向你学习!
11 楼 myreligion 2008-04-17  
对于返回的 element 使用后是不是需要手动的delete掉? 否则会不会有内存泄露?

10 楼 fins 2008-04-16  
已经写完

在这里回复的文章大家可以忽略不计了

具体的分析大家请去

http://fins.iteye.com/blog/183373

9 楼 fins 2008-04-16  
又分析出一点东西  有时间单独写文章来分析吧

我不能再这样一点一点的回复了 呵呵
8 楼 fins 2008-04-16  
又仔细分析一下, 新方法里依然调用了一次innerHTML, 所不同的是这次执行innerHTML的是一个不在dom树中的孤立节点.
那么我们可以理解为 对dom树以外的孤立节点进行innerHTML操作 比对在dom树上的结点更快 (这个还是好理解的)

7 楼 fins 2008-04-16  
我看了webkit的代码 一看就明白原因了
但是实在不理解为什么会差这么多:
看看 webkit的里cpp的setInnerHTML方法 :
void HTMLElement::setInnerHTML(const String& html, ExceptionCode& ec)
{
    RefPtr<DocumentFragment> fragment = createContextualFragment(html);
    if (!fragment) {
        ec = NO_MODIFICATION_ALLOWED_ERR;
        return;
    }

    replaceChildrenWithFragment(this, fragment.release(), ec);
}


也就是说 在对el.innerHTML赋值时, 浏览器做的工作实际上就是创建一个临时的节点,然后把这个节点替换 el的所有子结点.

我不明白的是,就这样一个简单的调用关系 为什么在FF下会有那么大的性能差距
有没有哪位朋友来写一下 gecko的实现方法啊
6 楼 hax 2008-04-16  
我猜测是与innerHTML的实现有关。最好找gecko和webkit的源码看看。
5 楼 笨笨狗 2008-04-16  
太夸张了吧,拷贝个新的dom节点,然后再进行innerHTML操作后替换,这个直觉上让人觉得应该更慢啊,诡异……
4 楼 fins 2008-04-15  
另外发现个问题
这个方法会用新的el替换旧的
在复杂的ajax控件中 那个 el上面往往是有事件的
这种做法会丢失那些事件吧

本来还想用这个方法替换 gt-grid里的部分代码呢
可是突然发现了这个问题 只好作罢了

3 楼 fins 2008-04-15  
此文必须要顶
我和hax同惑啊 这个的原理是什么呢?为什么快呢?
以及那个测试是怎么做的呢?
其实测试的方法很重要

t=开始时间
某操作
耗时=现在时间-t


这种算法有时并不能正确的算出"某操作"的时间
2 楼 hax 2008-04-15  
great article!

不过我对它的机理还没有想清楚,如果有如此大的性能提升,为什么浏览器自己不做这个优化?
1 楼 bsspirit 2008-04-15  
这个innerHTML, 还真没考虑过性能问题.

我还以为, 除了innerHTML 就是 createElement(), 就这两种方式呢!!

等会,我也试试.

多谢楼主.

相关推荐

    通过 Dom 方法提高 innerHTML 性能

     document.getElementById... /*@cc_on // 原始的 innerHTML 在 IE 中的性能好一点 oldEl[removed] = html; return oldEl; @*/ var newEl = oldEl.cloneNode(false); newEl[removed] = html; oldEl.pare

    Javascript createElement和innerHTML增加页面元素的性能对比

    Javascript之createElement和innerHTML增加页面元素的性能对比

    javascript appendChild,innerHTML,join性能比较代码

    代码如下:&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 ... &lt;head&gt; &lt;title&gt;appendChild,innerHTML,join&lt;/title&gt; [removed]&lt;!– //使用appendChild()方法添加span标签 function AppendD

    优化innerHTML操作(提高代码执行效率)

    多数现代浏览器都实现了innerHTML操作,它的方便性让我们爱不释手,但如果使用不当,很容易出现效率问题,本文通过一个例子来说明如何优化innerHTML操作。

    Vue3.0 性能提升主要是通过哪几方面体现的?

    回顾 Vue2,我们知道每个组件...• SSR 优化:当静态内容大到一定量级时候,会用 createStaticVNode 方法在客户端去生成一个 static node,这些静态 node,会被直接 innerHtml,就不需要创建对象,然后根 据对象渲染。

    cleanshave:通过将 Mustache 模板编译成 Domplates 来优化 Mustache 模板的 CLI 工具

    性能: innerHTML每次使用时都会解析 HTML 并创建节点。 Domplate 节点在第一次使用时创建一次,并在每次后续调用时克隆。 继续做你正在做的事情:模板富有表现力、熟悉且快速创建,但使用 DOM 节

    mjst:自动从code.google.compmjst导出

    mjst 自动从导出原始作者是Andrea Giammarchi( ),他位于 原始自述文件如下:什么mjst是一种轻量级的产品,缩小并压缩了大约1Kb的性能,并且以性能为重点的模板引擎具有标准支持。 有很多JavaScript模板引擎解决...

    详解操作虚拟dom模拟react视图渲染

    网页性能优化-&gt;尽量少操作DOM 2..虚拟DOM(Virtual DOM) VS js直接操作原生DOM(innerHTML) function Raw() { var data = _buildData(), html = ; ... for(var i=0; i&lt;data.length; i++) { var render = ...

    【卷一/共两卷】AJAX实战pdf高清版90M

    2.4.5 捷径:使用innerHTML属性 2.5 使用XML技术异步加载数据 2.5.1 IFrame 2.5.2 XMLDocument和XMLHttpRequest对象 2 5.3 向服务器发送请求 2.5.4 使用回调函数监视请求 2.5.5 完整的生命周期 2.6 Ajax有何不同 2.7...

    java练习题

    $('d1').innerHTML = txt; } } xhr.send(null); } &lt;/script&gt; &lt;/head&gt; ;"&gt; ;" id="s1" onchange="change(this.value);"&gt; &lt;option value="qq"&gt;QQ&lt;/option&gt; 宝马&lt;/option&gt; 法拉利&lt;/option&gt; &lt;/select&gt; &lt;div id="d1"&gt;&lt;/...

    基于J2EE框架的个人博客系统项目毕业设计论文(源码和论文)

    Java的产生与流行是当今Internet发展的客观要求,Java是一门各方面性能都很好的编程语言,它的基本特点是简单、面向对象、分布式、解释的、健壮的、安全的、结构中立的、可移植的、性能很优异的、多线程的、动态的,...

Global site tag (gtag.js) - Google Analytics