码迷,mamicode.com
首页 > Web开发 > 详细

js性能优化篇创建文档碎片

时间:2017-12-20 20:12:15      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:十分   log   gpo   sha   提高   文档   渲染   for   如何   

大家都知道,大量的操作DOM会引起页面的渲染变慢,文档碎片是指一个临时的文档,把创建的dom放到文档里面,不要每次操作都操作DOM,提高页面的效率。下面我们就来看一下如何运用创建文档碎片。

  首先,我们了解下向页面创建dom发生了什么。

 for(var i=0;i<5000;i++){
           var oSpan=document.createElement(‘span‘)
          document.body.appendChild(oSpan)

       }
    

如果我们向以上代码一样,向页面插入很多dom元素,这种渲染的过程是十分缓慢的。

为了解决这个问题,我们可以使用文档碎片createDocumentFragmnet()的方法,即创建一个文档碎片,把需要创建的文档放到文档碎片中,然后再一次性的添加到页面中,这样以来在一定程度上提高页面速度。

   var oDiv = createDocumentFragment(‘div‘)
       for(var i=0;i<5000;i++){
           var oSpan=document.createElement(‘span‘)
              oDiv.appendChild(oSpan)
        

       }
document.body.appendChild(oDiv)

 

 
 

js性能优化篇创建文档碎片

标签:十分   log   gpo   sha   提高   文档   渲染   for   如何   

原文地址:http://www.cnblogs.com/tfl123/p/8075353.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!