2-DOM的回流与重绘

TaiXinF

已于 2022-09-01 10:46:03 修改

阅读量105

点赞数

分类专栏： web前端文章标签： html 前端 css

于 2022-09-01 10:45:47 首次发布

本文链接：https://blog.csdn.net/Tx457973/article/details/126613664

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文探讨了前端开发中的关键优化策略，如使用`document.createDocumentFragment`避免文档碎片和批量修改CSS以减少回流。同时强调了使用transform进行动画的重要性，提倡在动画开发中优先选择。

摘要由CSDN通过智能技术生成

笔记

 <head>
    <title>分离读写</title>
    <style>
      #box {
        width: 100px;
        height: 100px;
        background: red;
        border: 1px solid green;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script>
        let box = document.getElementById("box");
        //现代的浏览器都有 渲染队列的机制
        //如果发现你下面连续在修改样式
        //分离读写
        box.style.width = "200px"; //
        console.log(box.clientWidth); //如果手贱输出了一句   就会阻断   一次回流
        box.style.height = "200px"; //
        box.style.margin = "200px"; //
        // 会等样式都该完成后 再去修改

        //批量处理 (避免阻塞)
        //   box.style.cssText = "width:200px;height:200px;";
        box.className = "aa";

    </script>
  </body>

回流例子 - 1 这样的方法现在一般不好用

<body>
    <ul id="box"></ul>
    <script>
      //批量处理 文档碎片-临时容器
      let frg = document.createDocumentFragment();
      for (let i = 0; i < 5; i++) {
        let newLi = document.createElement("li");
        newLi.innerHTML = i;
        //创建的里放到文档碎片中
        frg.appendChild(newLi);
      }
      //一次性把内容放到容器中： 引发一次回流
      box.appendChild(frg);
      //记住这样写了 一定要销毁
      frg=null
    </script>
  </body>

2 字符串拼接方法-介意

 <body>
    <ul id="box"></ul>
    <script>
      let str = ``;
      for (let i = 0; i < 5; i++) {
        str += `<li>${i}</li>`;
      }
      box.innerHTML = str;
      // es6
    </script>
  </body>