看到一遍文章
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;
},
分享到:
相关推荐
document.getElementById... /*@cc_on // 原始的 innerHTML 在 IE 中的性能好一点 oldEl[removed] = html; return oldEl; @*/ var newEl = oldEl.cloneNode(false); newEl[removed] = html; oldEl.pare
Javascript之createElement和innerHTML增加页面元素的性能对比
代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 ... <head> <title>appendChild,innerHTML,join</title> [removed]<!– //使用appendChild()方法添加span标签 function AppendD
多数现代浏览器都实现了innerHTML操作,它的方便性让我们爱不释手,但如果使用不当,很容易出现效率问题,本文通过一个例子来说明如何优化innerHTML操作。
回顾 Vue2,我们知道每个组件...• SSR 优化:当静态内容大到一定量级时候,会用 createStaticVNode 方法在客户端去生成一个 static node,这些静态 node,会被直接 innerHtml,就不需要创建对象,然后根 据对象渲染。
性能: innerHTML每次使用时都会解析 HTML 并创建节点。 Domplate 节点在第一次使用时创建一次,并在每次后续调用时克隆。 继续做你正在做的事情:模板富有表现力、熟悉且快速创建,但使用 DOM 节
mjst 自动从导出原始作者是Andrea Giammarchi( ),他位于 原始自述文件如下:什么mjst是一种轻量级的产品,缩小并压缩了大约1Kb的性能,并且以性能为重点的模板引擎具有标准支持。 有很多JavaScript模板引擎解决...
网页性能优化->尽量少操作DOM 2..虚拟DOM(Virtual DOM) VS js直接操作原生DOM(innerHTML) function Raw() { var data = _buildData(), html = ; ... for(var i=0; i<data.length; i++) { var render = ...
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...
$('d1').innerHTML = txt; } } xhr.send(null); } </script> </head> ;"> ;" id="s1" onchange="change(this.value);"> <option value="qq">QQ</option> 宝马</option> 法拉利</option> </select> <div id="d1"></...
Java的产生与流行是当今Internet发展的客观要求,Java是一门各方面性能都很好的编程语言,它的基本特点是简单、面向对象、分布式、解释的、健壮的、安全的、结构中立的、可移植的、性能很优异的、多线程的、动态的,...