TGCode

关注互联网技术

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

2021年1月10日   |   by tgcode

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

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


//http://www.cnblogs.com/rubylouvre/archive/2011/04/15/2016800.html
var str = '
test
';
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='
test
';
          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 = '

 

 ';
          var start = new Date;
          for (var i = 0, firstChild; i  400; i++) {
            var div = document.createElement('div');
            div.innerHTML = tgcodestr;
            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

相关推荐: 如何学习Javascript

　　首先要说明的是，咱现在不是高手，最多还是一个半桶水，算是入了JS的门。 　　谈不上经验，都是一些教训。 　　这个时候有人要说，“靠，你丫半桶水，凭啥教我们”。您先别急着骂，先听我说。 　　你叫一个大学生去教小学数学，不见得比一个初中生教得好。因为大学生早已…

Tags: , , ,