Js编程-同步异步编程

87 阅读2分钟

异步编程:实现原理;多线程、基于单线程的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事件的绑定;