关于window.requestAnimationFrame的疑问

Question

window.requestAnimationFrame根据mdn的解释:

这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数(即你的回调函数)

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

根据我的理解1：类似与setTimeout只是该函数的执行时间是固定的，数值与屏幕的刷新频率有关，而且会阻塞如下代码。

start =Date.now() end = 0 fake = 0 requestAnimationFrame(() => { 
end = Date.now()
console.log('time', end - start) }) // 阻塞一秒 
while(fake - start < 1000) {
fake = Date.now()
console.log('时差', fake - start) }

根据我的理解2：重绘不是指的浏览器渲染相关的，如下面的代码改变会触发重绘

var bodyStyle = document.body.style;
bodyStyle.padding = "2px"; // 回流 + 重绘 
bodyStyle.border = "1px solid red"; // 回流+重绘 
bodyStyle.color = "blue"; // 重绘 
bodyStyle.fontSize = "14px"; // 回流 + 重绘
// 添加node，回流 + 重绘 
document.body.appendChild(document.createTextNode('abc!'));

很多文档都说该api是在“下一次重绘”执行，问题是我仅仅调用来这个api，没有左改变元素样式的事情，浏览器怎么触发的重绘？，难道是这个api告诉来浏览器要重绘？

Answer 1

参见 深入解析 EventLoop 和浏览器渲染、帧动画、空闲回调的关系