首页 > 程序开发 > web前端 > JavaScript >

高效将字符串转换为文档碎片

2011-04-15

我在《javascript 动态插入技术》中,就介绍了用innerHTML转换为文档碎片的技术了,这个被各大类库所取用。但事实上,如果我们的字符串没有th,tbody,col等需要通过包装才能动态生成的标签,也没有那个特烦人的script标签,我们在提高性能

我在《javascript 动态插入技术》中,就介绍了用innerHTML转换为文档碎片的技术了,这个被各大类库所取用。但事实上,如果我们的字符串没有th,tbody,col等需要通过包装才能动态生成的标签,也没有那个特烦人的script标签,我们在提高性能上还是有许多方法,如insertAdjacentHTML。但想使用insertAdjacentHTML,限制非常多的,如在IE下避开innerHTML为只读的元素,FF需要很高的版本才支持,加之调用对象(如jQuery)的元素往往只能是节点,不能是字符串,因此很多情况下,我们还是先需要把它转换为节点集合,而今天我介绍的是使用createContextualFragment直接将字符串转换为文档碎片!

传统的innerHTML方式会产生一个多余的div元素做转换器,然后再使用createDocumentFragment创建一个文档碎片,一个个节点转移上去。如果使用createContextualFragment就可以避免这一步了。

//http://www.cnblogs.com/rubylouvre/archive/2011/04/15/2016800.html
var str = <div><strong>test</strong></div>;
var range =document.createRange();
range.selectNodeContents(document.documentElement);
var fragment =range.createContextualFragment(str);
document.body.appendChild(fragment);


<!doctype html>
<html>
<head>
<title>高效将字符串转换为文档碎片 by 司徒正美</title>
<script>

window.onload = function(){
try{
var str=<div><strong>test</strong></div>;
var range=document.createRange();
range.selectNodeContents(document.documentElement);
var fragment =range.createContextualFragment(str);
document.body.appendChild(fragment);

}catch(e){}

}

</script>
</head>
<body>

</body>
</html>

运行代码


<!doctype html>
<html>
<head>
<title>性能测试 by 司徒正美 </title>
<script>
window.onload = function(){
try{
var str = <div class="calendar" id="pager-top"><a rel="prev" href="##" class="prev">aaa</a> <span class="edit-in-place-add"></span></div> ;
var start = new Date;
for (var i = 0, firstChild; i < 400; i++) {
var div = document.createElement(div);
div.innerHTML = str;
var fragment = document.createDocumentFragment();
while((firstChild = div.firstChild)){ // 将div上的节点转移到文档碎片上!
fragment.appendChild(firstChild);
}
}
var div1 = document.createElement(div);
div1.innerHTML = "innerHTML : "+ (new Date - start)
document.body.appendChild(div1)
start = new Date;
var HTML = document.documentElement;
for (var i = 0; i < 400; i++) {
var range = document.createRange();
range.selectNodeContents(HTML);
range.createContextualFragment(str);
}
var div2 = document.createElement(div);
div2.innerHTML = "createContextualFragment : "+ (new Date - start)
document.body.appendChild(div2)
}catch(e){
var div3 = document.createElement(div);
div3.innerHTML = "error : "+ e
document.body.appendChild(div3)
}

}

</script>
</head>
<body>

</body>
</html>


运行代码

brower innerHTML createContextualFragment
chrome12 34 70
ff4 36 33
opera 28 17

绿色通道:好文要顶关注我收藏该文与我联系

相关文章
最新文章
热点推荐