JS 执行机制(包括同步与异步)

JS 执行机制

  • 一、JS 是单线程
  • 二、同步和异步
  • 三、JS 执行机制步骤
  • 四、事件循环(event loop)

一、JS 是单线程

  • JS 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事,这是因为JS这门脚本语言诞生的使命所致——JS 是为处理页面中用户的交互,以及操作 DOM 而诞生的。比如我们对某个 DOM元素进行添加和删除操作,不能同时进行,应该先进行添加,之后再删除。
  • 单线程意味着,所有的任务需要排列,前一个任务结束,才会执行后一个任务,这样会导致:如果JS 执行的时间过长,会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉

二、同步和异步

  • 为解决JS单线程问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JS 脚本创建多个线程。于是出现了同步和异步。

1. 同步
前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。

同步任务
同步任务都在主线程上执行,形成一个执行栈

2. 异步
在做一件事的时,因为这件事会花费很长时间,在做这件事的同时,还可以去处理其他事情。

异步任务
异步任务不进入主线程,而是进入“任务队列”(task queue)的任务,只有“任务队列”通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行
异步任务:JS 的异步是通过回调函数实现的

一般有以下三种类型:

  1. 普通事件,如 click、resize 等
  2. 资源加载,如 load、error 等
  3. 定时器,包括 setInterval、setTimeout等
  • 异步任务相关的回调函数添加到重新创建的一个任务队列中(任务队列也成为消息队列)
  • 当有多个回调函数时,利用“异步进程处理”
    • 例:有一个点击的回调函数document.onclick=fn();
    • 先把 fn() 提交到“异步进程处理”中,“异步进程处理”来决定要不要把它写到“任务队列”中,只有点击了鼠标,即执行了 fn() ,“异步进程处理”才会把它放到“任务队列”中
    • 例:有一个定时器函数
    • 也是先将回调函数提交到“异步进程处理”中,等时间到了之后,再将其放到“任务队列”中

3.两者的本质区别
这条流水线上各个流程的执行顺序不同

三、JS 执行机制步骤

  1. 先执行执行栈中的同步任务
  2. 遇到回调函数,异步任务(回调函数)先放到任务队列中,不执行
  3. 继续执行执行栈中的同步任务
  4. 一旦执行栈中的所有同步任务执行完毕,系统会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行
    JS 执行机制(包括同步与异步)_第1张图片

四、事件循环(event loop)

由于主线栈不断的重复获得任务、执行任务、再获得任务、再执行,所以这种机制被称为事件循环

你可能感兴趣的:(javascript,前端,开发语言)