由react fiber引起的关注
- 组件树转为链表，可分段渲染
- 渲染时可以暂停，去执行其他高优先级任务，空闲时在继续渲染（
JS是单线程的，JS执行的时候没法去DOM渲染） - 如何判断空闲？
requestIdleCallback
区别
requestAnimationFrame每次渲染完在执行，高优先级requestIdleCallback空闲时才执行，低优先级- 都是宏任务，要等待DOM渲染完后在执行
<p>requestAnimationFrame</p>
<button id="btn1">change</button>
<div id="box"></div>
<script>
const box = document.getElementById('box')
document.getElementById('btn1').addEventListener('click', () => {
let curWidth = 100
const maxWidth = 400
function addWidth() {
curWidth = curWidth + 3
box.style.width = `${curWidth}px`
if (curWidth < maxWidth) {
window.requestAnimationFrame(addWidth) // 时间不用自己控制
}
}
addWidth()
})
</script>
window.onload = () => {
console.info('start')
setTimeout(() => {
console.info('timeout')
})
// 空闲时间才执行
window.requestIdleCallback(() => {
console.info('requestIdleCallback')
})
window.requestAnimationFrame(() => {
console.info('requestAnimationFrame')
})
console.info('end')
}
// start
// end
// timeout
// requestAnimationFrame
// requestIdleCallback
