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

　　我在《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 
    
    
    
    =
    
    
    
     
    
    
    
    '
    
    
    
    
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 
    
    
    
    =
    
    
    
     
    
    
    
    '
    
    
    
    
aaa 
 
    
    
    
    '
    
    
    
    ;
          
    
    
    
    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