issues
search
zhaoqize
/
blog
✍️qize的博客:原创文章、外文翻译、技术总结和演示代码
https://zhaoqize.github.io/blog/
MIT License
280
stars
74
forks
source link
JavaScript的异步性和队列问题
#6
Open
zhaoqize
opened
6 years ago
zhaoqize
commented
6 years ago
JavaScript线程
浏览器一般会有下面三个线程,多个线程之间的同步操作是通过浏览器 内核控制 实现的。
解说
javascript引擎是基于事件驱动单线程执行的,JS引擎一直等待着任务队列中任务的到来,然后加以处理,浏览器无论什么时候都只有一个JS线程在运行JS程序。
GUI渲染线程负责渲染浏览器界面,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的,当JS引擎执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
事件触发线程,当一个事件被触发时该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等,但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。(当线程中没有执行任何同步代码的前提下才会执行异步代码)
JavaScript事件队列
解说
Macrotasks包含生成dom对象、解析HTML、执行主线程js代码、更改当前URL还有其他的一些事件如页面加载、输入、网络事件和定时器事件。从浏览器的角度来看,macrotask代表一些离散的独立的工作。当执行完一个task后,浏览器可以继续其他的工作如页面重渲染和垃圾回收。
Microtasks则是完成一些更新应用程序状态的较小任务,如处理promise的回调和DOM的修改,这些任务在浏览器重渲染前执行。Microtask应该以异步的方式尽快执行,其开销比执行一个新的macrotask要小。Microtasks使得我们可以在UI重渲染之前执行某些任务,从而避免了不必要的UI渲染,这些渲染可能导致显示的应用程序状态不一致。
参考
JavaScript下的setTimeout(fn,0)意味着什么?
JavaScript队列函数和异步执行
JavaScript Event Loop机制详解与Vue.js中nextTick的实践应用
HTML系列:macrotask和microtask
JavaScript线程
浏览器一般会有下面三个线程,多个线程之间的同步操作是通过浏览器 内核控制 实现的。
解说
JavaScript事件队列
解说
参考