请问老师现代浏览器关于回流

来源：3-2 回流与重绘, 如何避免布局抖动

hy_wang

2021-02-02

请问一下老师是不是现代浏览器对于回流的问题已经自己做了优化，我在chrome88版本下这段代码并没有看到每次都触发了回流重新paint。而是都是最后才进行的paint

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .app {
      /* will-change: transform; */
      width: 300px;
      height: 300px;
      background-color: red;
      /* animation: wang 2s infinite; */
    }

    @keyframes wang {
      from {
        transform: translate(0);
      }

      to {
        transform: translate(100px);
      }
    }
  </style>
</head>

<body>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>


  <script>
    const divs = document.getElementsByClassName('app')
    const update = () => {
      for (let div of divs) {
        console.log(div, 'div')
        div.style.width = div.offsetTop * Math.random() + 'px'
      }
      window.requestAnimationFrame(update)
    }
    window.addEventListener('click', () => {
      update()
    })
  </script>
</body>

</html>

图片描述

写回答

1回答

Mr_Max

2021-02-02

已采纳

同学你好！

对应问题进行一下更正，

这里rAF进行了调度，每次重绘前安排进行了一些重新布局。

Mr_Max

慕丝4078674

这里rAF进行了调度，每次重绘前安排进行了一些重新布局。

2021-12-10

共9条回复

前端性能优化企业级解决方案 6大角度+大厂视野

只要项目还在线，性能优化永远是时刻要关注的问题

1109 学习 · 226 问题

查看课程

相似问题

请问老师回流和重塑

回答 1

有一些疑惑想请教老师

回答 3

关于强制同步布局

回答 1

请问老师关于复合线程

回答 1

请问老师关于重绘

回答 2

打开慕课网App查看更多内容