event-loop
2018-06-04 00:13:22 4 举报
render-event-loop
作者其他创作
大纲/内容
layout
可能存在多个宏队列
render queue
callback
check
是
color: red
执行微任务（block）
microtask1
Heap
浏览器会尽量以一定频率（60HZ）来更新页面，所以会将多次页面更新操作放进更新队列
setTimeout
paint
macrotask3
切换到渲染线程
push
检查宏任务队列是否为空
JS 单线程
JS 引擎
done
执行宏任务(block)
执行更新（block）
否
切换到javascript线程
shift
低优先级宏队列
Call stack
microtask2
Event Loop
主线程
ajax
macrotask1
定时器线程
composite
检查是否需要更新页面
recalculate style
Promise.resolve()
Timeout
微队列
microtask3
高优先级宏队列
取出最早的宏任务
宏队列
macrotask2
pop all
渲染线程
CSS操作
width=100px
dispatch event
备注：实线代表主线程的执行流程，虚线代表具体的调用过程；done：线程执行完成，通知主线程继续事件循环；push：向队列添加一个任务；shift：从队列头部取出最早入队的一个任务；check：检查队列是否为空；pop all：取出队列所有项；block：暂停事件循环，等待线程执行完成
取出最早的微任务
has dispatched all event?
检查微任务队列是否为空
网络请求线程
DOM操作
height=50px
0 条评论
回复 删除
下一页
