异步编程:实现原理;多线程、基于单线程的EventLoop机制
js中的异步编程:
-
定时器;
-
ajax[HTTP网络请求];
+promise;
+async/await (generator)
- requestAnimationFrame
js是单线程的;Js中的大部分代码都是同步编程,但是可以基于单线程的EventLoop(事件循环机制)实现异步编程。
js代码在js引擎中自上而下执行,遇到定时器等异步任务,是把这些异步任务先存放到EventQueue任务队列中, + 这些任务没有执行,处于等待和监听状态,
- 主线程会继续向下执行同步代码。
EventQueue 事件(任务)队列(优先级队列结构 )
-
微任务 microtask promise async/await requestAnimationFrame
-
宏任务 macrotask 定时器 ajax[HTTP网络请求] 事件绑定
查找异步任务的优先执行顺序:
-
先执行微任务,只要有微任务,就不会执行宏任务;
-
微任务中谁先放置的先执行谁;
-
宏任务谁先到可执行状态谁先执行;
js中任务执行的顺序: 同步任务-----》异步微任务----------》异步宏任务
严格按照这个顺序执行 :
-
哪怕在同步任务没有执行完,有异步任务已经到达执行时间也不会执行;
-
不论什么时候放置的异步微任务,也不论宏任务是否到达执行条件,只要有微任务,就不会执行异步宏任务
浏览器是多线程,打开一个页面,浏览器会分配很多线程,同时处理一下事情
- GUI渲染线程:自上而下渲染线程;
+JS引擎(渲染)线程:浏览器只会开辟一个线程来执行js程序
+HTTP网络请求线程:
+定时器监听线程:监听定时器是否到达时间;
+DOM事件监听线程:监听DOM事件的绑定;