DOM基础—3 使用文档碎片减少页面渲染完成时间

最新推荐文章于 2022-07-19 20:23:50 发布

原创最新推荐文章于 2022-07-19 20:23:50 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

Javascript 专栏收录该内容

44 篇文章

订阅专栏

本文通过实例演示了如何使用文档碎片来显著提升页面加载效率，尤其是在低版本浏览器中效果更为明显。通过对比直接添加元素与使用文档碎片的方式，展示了后者在页面渲染上的优势。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>文档碎片</title>
    <style></style>
    <script type="text/javascript">
    window.onload=function(){

      // 这个例子可以看到在运行之后要等待几秒钟之后，页面才会显现出新增的li，这是因为在这一万次增加新元素中
      //每增加一个都是先执行增加操作，再执行页面渲染操作，这样无疑就浪费了很多时间
      // var oUl=document.getElementById('ul1');
      // for(var i=0;i<10000;i++){
      //   var oLi=document.createElement('li');
      //   oUl.appendChild(oLi);
      // }
      /////////////////////////////////////////////////////


      //使用文档碎片操作可以大大的节约时间(页面渲染完成的时间大大减少)：
      var oUl=document.getElementById('ul1');
      var oFrag=document.createDocumentFragment();  //创造一个文档碎片对象
      for(var i=0;i<10000;i++){
        var oLi=document.createElement('li');
        oFrag.appendChild(oLi);  //先把创建的元素都现存放在文档碎片对象中，装完了再拿过去一次性渲染完成
      }
      oUl.appendChild(oFrag);
    }
    </script>
  </head>
  <body>
    <ul id='ul1'></ul>
  </body>
</html>

但是不得不说，文档碎片对于提高页面性能来说功能还是很鸡肋的，因为在高级浏览器比如chrome和IE9来说，文档碎片节省的时间微乎其微，在低版本的浏览器来说，节省的时间还是相当可观的