欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS中文档碎片的理解和使用

程序员文章站 2022-06-05 08:20:44
1、我们要明白当js操作dom时发生了什么? 每次对dom的操作都会触发"重排"(重新渲染界面,发生重绘或回流),这严重影响到能耗,一般通常采取的做法是尽可能的减少 dom操作来减少"重排" 2、什么是文档碎片? document.createDocumentFragment() 一个容器,用于暂时 ......

1、我们要明白当js操作dom时发生了什么?   

       每次对dom的操作都会触发"重排"(重新渲染界面,发生重绘或回流),这严重影响到能耗,一般通常采取的做法是尽可能的减少 dom操作来减少"重排"        

2、什么是文档碎片?    document.createdocumentfragment()    一个容器,用于暂时存放创建的dom元素      

3、文档碎片有什么用?    将需要添加的大量元素  先添加到文档碎片中,再将文档碎片添加到需要插入的位置,大大 减少dom操作,提高性能(ie和火狐比较明显)
      比如需要往页面上放100个元素:
     普通方式:(操作了100次dom)         

            for(var i=100; i>0; i--){ 

              var elem = document.createelement('div');

              document.body.appendchild(elem);//放到body中          }
     文档碎片:(操作1次dom)         

        var df = document.createdocumentfragment();          

          for(var i=100; i>0; i--){              

            var elem = document.createelement('div');                             

            df.appendchild(elem);          }         

         //最后放入到页面上         

       document.body.appendchild(df);