2019/01/16/how-eventloop-affects-rendering
Opened this issue · 10 comments
事件循环是如何影响页面渲染的？ | Harttle Land
JavaScript 是单线程的，但提供了很多异步调用方式比如setTimeout，setInterval，setImmediate，Promise.prototype.then，postMessage，requestAnimationFrame，I...
https://harttle.land/2019/01/16/how-eventloop-affects-rendering.html
博主文章通俗易懂，理解深入，学习了。搜索GitHub徽章找进来的。
我的博客正在写Django搭建博客的教程，可否互加一个友链？
参观地址：www.dusaiphoto.com
你的照片都很棒！已添加链接，当前版本在： https://harttle.land/about.html
谢谢！
已添加友链博主写的很棒，会常来这里学习做客
目前来看最快的是 queueMicroTask
“setImmediate 意在让脚本有机会在 UA 事件和渲染发生后立即得到调用，从渲染的角度上类似于渲染之后调用的 requestAnimationFrame。”
这句话是不是写错了？
“从渲染的角度上类似于渲染之后调用的 requestAnimationFrame。”
应该是：
从渲染的角度上类似于渲染之前调用的 requestAnimationFrame。“”
感谢提出，这句话确实不明所以。干掉了。
document.body.style.background = 'red';
setTimeout(function () {
document.body.style.background = 'white';
})
这个代码在不同浏览器上表现不一致。在最新版的chrom（ 版本：81.0.4044.138）浏览器中一直会闪烁，在火狐（版本：76.0.1）中会几率性出现闪烁。
你好，我想请教下：
- 浏览器页面没有任何变化也会以每隔16ms左右进行 UI render吗
- 执行一个宏任务就会触发一次UI render吗 （UI render里面不是也会产生很多宏任务 嗯嗯...这样一想不是一个死循环吗）
- 16ms的相对时间怎么计算的，我怎么知道我这个交互触发是更好在一个16ms周期进行时，还是结束时
function mainTask() {
requestAnimationFrame(function(e) {
console.log('requestAnimationFrame',e)
const bodyOffsetHeight = document.body.offsetHeight
})
console.log('mainTask')
const bodyOffsetHeight = document.body.offsetHeight
console.log('bodyOffsetHeight:' + bodyOffsetHeight)
requestAnimationFrame(function(e) {
console.log('requestAnimationFrame2',e)
})
}
mainTask()
/*
输出结果:
mainTask
bodyOffsetHeight:8888
requestAnimationFrame 8232132.624
requestAnimationFrame2 8232132.624
*/请教大佬。执行上面的代码，为什么两次requestAnimationFrame的回调在同一帧执行。
访问offsetHeight是否会引起重排（reflow)，进而进入requestAnimationFrame回调执行阶段。
requestAnimationFrame 回调会在微任务结束之后调度，读 offsetHeight 是在当前任务中强制重新 layout（包括应用 CSS 来计算所有元素的位置大小），不会（也没办法）执行后面的微任务或 requestAnimation 回调。
可以看下这个
https://stackoverflow.com/questions/43050448/when-will-requestanimationframe-be-executed