页面渲染不应该是异步的吗?
来源：4-9 nextTick
慕侠8534226
2020-11-09
在老师的例子中，微任务的队列里面应该是有3个任务的，一个是flushSchedulerQueue,另外两个分别是打印nextTick和打印nextTick with promise。第一个微任务执行完后，dom就重新渲染了，证据是页面由hello world变成了hello vue。如果页面渲染是异步的话，不应该是在下一轮事件循环的宏任务或者微任务中执行吗？下面图两张图分别是微任务flushSchedulerQueue执行前和执行后的，可以看到页面已经渲染过了。我想知道页面渲染在event loop中的执行机制。
2回答
-
因为你处于debug模式，阻塞了JS线程的运行；我们都知道浏览器的渲染进程和JS进程是互斥的，当JS线程运行的时候，渲染线程便不会渲染；浏览器为了保证60帧的稳定，并不会每一轮event loop都渲染，当你这里JS线程被阻塞后，渲染进程相当于只要准备好了，就可以渲染，在渲染watcher run了之后，dom已经改变了，等待下一次渲染之后就可以看到改变的视图，这里其实是你debug的原因，它一直空闲，dom一变，就重新渲染了；你可以尝试在渲染watcher run之后加一个1~99999（10w足够看见效果但不至于把页面卡死）的循环打印，就能看到控制台已经在输出了（说明渲染watcher已经run了，dom已经改变了），但是页面并没有刷新渲染，直到循环结束JS线程空闲，渲染进程才会重新渲染。
112021-07-04 -
ustbhuangyi
2020-11-11
参考这个就好了：https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model
先执行宏任务，再执行微任务，然后更新视图。00
相似问题