请问老师现代浏览器关于回流
请问一下老师是不是现代浏览器对于回流的问题已经自己做了优化，我在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>
857
收起
正在回答
相似问题
流程设计器的问题
700
1
5
老师在浏览器打开是这个样子的不是汉字是怎么回事啊
677
0
3
浏览器缓存被清空
625
0
6
关于cookie的生命周期
783
0
6
在webview中远程视频流播放不了
1270
0
6
登录后可查看更多问答，登录/注册
