[JavaScript]使用document.createDocumentFragment优化性能

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title ></ title >

     < script  type ="text/javascript" >
         function  slowAdd() {
             for  ( var  i  =   0 ; i  <   10000 ; i ++ ) {
                 var  op  =  document.createElement( " span " );
                 var  oText  =  document.createTextNode(i);
                op.appendChild(oText);
                document.body.appendChild(op);
            }
        }

         function  fastAdd(){
             var  oFragmeng  =  document.createDocumentFragment();   // 创建文档碎片
             for  ( var  i  =   0 ; i  <   10000 ; i ++ ) {
                 var  op  =  document.createElement( " span " );
                 var  oText  =  document.createTextNode(i);
                op.appendChild(oText);
                oFragmeng.appendChild(op); 
            }
            document.body.appendChild(oFragmeng);  // 最后一次性添加到document中
        }
     </ script >

</ head >
< body >
    
     < p >
         < input  id ="Button1"  type ="button"  value ="button"  onclick  = "slowAdd()" /></ p >
     < p >
         < input  id ="Button2"  type ="button"  value ="button"   onclick  = "fastAdd()" /></ p >
    
</ body >
</ html >