hushicai
commented
3 years ago 现有 WEB 技术中并没有规定浏览器应该什么何时更新页面，所以通常认为是在一次宏任务完成之后，浏览器自行判断当前是否应该更新页面。如果需要更新页面，则执行 rAF() 的回调并更新页面。否则，就执行下一个宏任务
Open hushicai opened 5 years ago
hushicai
commented
3 years ago 现有 WEB 技术中并没有规定浏览器应该什么何时更新页面，所以通常认为是在一次宏任务完成之后，浏览器自行判断当前是否应该更新页面。如果需要更新页面，则执行 rAF() 的回调并更新页面。否则，就执行下一个宏任务
Event Loop是写在 HTML 规范中的。
Event Loop图解：
（图片来自网络）
这里有两个概念需要区分一下，DOM操作和UI渲染。
DOM操作是实时的，一旦调用就会触发浏览器Style、Layout等行为，随后JS可以立即获得DOM更新后的内容。 UI渲染是按帧进行的，现代浏览器一般保持60FPS的刷新频率，即大概16.7ms渲染一次。
DOM操作是昂贵的，开销比较大，所以在Vue等响应式框架中，基本都会设计一个异步更新队列，在一次事件循环中，缓冲所有DOM操作，然后在microTask中进行批量更新，我们可以通过类似nextTick等API在异步更新队列中插入一个后置任务，在回调中获得更新后的内容，这是由Event Loop机制所保证的。
UI渲染并非在每次Event Loop中都会触发，这一般是由设备刷新频率所决定的，当然浏览器也可以在必要时机提前触发UI渲染。