【自学】4.23 raf

原创已于 2022-04-23 18:40:49 修改 · 399 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2022-04-23 18:38:01 首次发布

本文介绍了如何利用requestAnimationFrame和DocumentFragment来优化DOM渲染性能。通过requestAnimationFrame在浏览器空闲时执行，节省资源，减少CPU开销，尤其在非激活标签页中。同时，使用DocumentFragment批量处理元素，避免频繁的回流和重绘，提高页面加载速度。理解并运用这些技术，可以显著提升前端应用的性能。

每天写点

4.23

raf基本使用

   const total = 100000 //渲染十万条数据
    const once = 20
    const loopcount = total / once
    let currentcount = 0
    let lidoc = document.querySelector("ul")
    function add () {
      const sec = document.createDocumentFragment()
      for (let i = 0; i < once; i++) {
        const li = document.createElement('li')
        li.innerText = Math.floor(Math.random() * total)
        sec.appendChild(li)
      }
      lidoc.appendChild(sec)
      currentcount += 1
      loop()
    }
    function loop () {
      if (currentcount <= loopcount) {
        window.requestAnimationFrame(add)
      }
    }
    loop()

requestAnimationFrame会节省资源，运行浏览器时会自动优化调用，在浏览器tab页面不是激活状态下，会自动暂停执行，有效节省CPU的开销
对隐藏或者不可见元素的动画，requestAnimationFrame 不会进行重绘或者是回流，意味着占用的内存更少，性能更好
回流（reflow）：对于DOM结构中的各个元素都有自己的盒子模型,这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow 【改变元素位置】
重绘（repaint）：当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了，这个过程称之为repaint【改变元素视觉效果】
DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。