zoukankan      html  css  js  c++  java
  • javascript 减少回流

     

    减少回流(REFLOWS)

      当浏览器重新渲染文档中的元素时需要 重新计算它们的位置和几何形状,我们称之为回流。回流会阻塞用户在浏览器中的操作,因此理解提升回流时间是非常有帮助的。

    回流时间图表

      你应该批量地触发回流或重绘,但是要节制地使用这些方法。尽量不处理DOM也很重要。可以使用DocumentFragment,一个轻量级的文档对象。你可以把它作为一种方法来提取文档树的一部分,或创建一个新的文档“片段”。与其不断地添加DOM节点,不如使用文档片段后只执行一次DOM插入操作,以避免过多的回流。

      例如,我们写一个函数给一个元素添加20个div。如果只是简单地每次append一个div到元素中,这会触发20次回流。

    复制代码
    function addDivs(element) {
      var div;
      for (var i = 0; i < 20; i ++) {
        div = document.createElement('div');
        div.innerHTML = 'Heya!';
        element.appendChild(div);
      }
    }
    复制代码

      要解决这个问题,可以使用DocumentFragment来代替,我们可以每次添加一个新的div到里面。完成后将DocumentFragment添加到DOM中只会触发一次回流。

    复制代码
    function addDivs(element) {
      var div;
      // Creates a new empty DocumentFragment.
      var fragment = document.createDocumentFragment();
      for (var i = 0; i < 20; i ++) {
        div = document.createElement('a');
        div.innerHTML = 'Heya!';
        fragment.appendChild(div);
      }
      element.appendChild(fragment);
    }
     
  • 相关阅读:
    rapidjson 使用
    【设计模式】模板方法模式
    【设计模式】策略模式
    【设计模式】建造者模式
    【设计模式】享元模式
    /dev/sda1 contains a file system with errors,check forced.
    如何编写高效的Python的代码
    VsCode 调试 Python 代码
    Python 使用 pyinstaller 打包 代码
    初次使用git上传代码到github远程仓库
  • 原文地址:https://www.cnblogs.com/zys8119/p/5600302.html
Copyright © 2011-2022 走看看