单线程JavaScript实现异步过程详解


Posted in Javascript onMay 19, 2020

前两天硬着头皮在部门内部做了一次技术分享,主题如题。索性整理成文章留个纪念!

要了解异步实现,首先我们得先了解:

同步 & 异步

同步:会逐行执行代码,会对后续代码造成阻塞,直至代码接收到预期的结果之后,才会继续向下执行任务。

异步:调用之后先不管结果,继续向下执行任务。

网上各种文章对同步和异步的解释也不外如是,但是看文字总是有点晦涩难懂!我就生活化的来比拟一下这两个概念吧!

就好比请人吃饭:

比如你要请两个人吃饭,一个是巴菲特,由于他是举世瞩目股神想请他吃饭的人从这里排到了法国,你为表诚意,你会精心打扮自己,然后租一架飞机亲自去美国,请他跟你吃顿特色菜...那么为了请他吃个烤腰子,你全程都在为些事费心费力,投入大量的精力!

所以,也就阻塞了你干别的事情,是的,这就是同步!

请人吃顿饭就这么难吗?当然,也没有那么难!不信,你请我吃饭试试:

如果你想请我吃饭,那你只需要打个电话通知我一声:喂,今天晚上请你吃个海底捞啊!我:好啊!然后你不要来接我,到了点我自己去了!期间,你该干嘛就去干嘛!

看,其他也很简单嘛?瞧,这就是异步!

那么回到代码层面:

同步代码:(代码片段1)

function someTime() {
  let s = Date.now();
  while(true) {
    if (Date.now() - s > 2000) {
      console.log(2)
      break;
    }
  }
}
console.log(1);
someTime();
console.log(3);
// 其打印顺序:1 ...(2秒以后)... 2 3

异步代码:(代码片段2)

function someTime() {
  setTimeout(() => {
    console.log(2);
  }, 2000)
}

console.log(1);
someTime();
console.log(3);

// 其打印顺序:1 3 ...(2秒以后)... 2

看看,同步代码,当执行这种耗时操作时,就会停在原地,一定要等待这时间过去之后才会执行后面的代码!而异步代码,后面的执行完全不受影响...

JavaScript单线程

众所周知JavaScript是单线程的,所谓单线程是指程序执行时,所走的程序路径按照连续顺序排下来,前面的必须处理好,后面的才会执行!这个解释跟【同步】的解释如出一辙!

如此看起来异步编程对于单线程而言似乎并非正统,甚至有点矛盾。然而,通过刚才的例子,我们发现,JavaScript是真的实现了异步编程的!为啥加了个setTimeout()不能不阻塞了呢?按单线程的执行的话那如下代码会是怎么样的呢?

function timeOut() {
  setTimeout(() => {
    console.log('timeOut');
  }, 0)
}
function someTime() {
  let s = Date.now();
  while(true) {
    if (Date.now() - s > 2000) {
      console.log('some Time')
      break;
    }
  }
}
console.log(1);
timeOut();
someTime();
console.log(3);

如果是以单线程那种解释来执行的话,这个打印顺序应该是:1 - time Out - some Time - 3才对!然而,其真正的执行结果却是:1 - some Time - 3 - time Out

为什么?浏览器的多线程

JavaScript是脚本语言,它需要在一个宿主环境里才能运行,显然我们接触较多的宿主环境就是--浏览器!虽说JavaScript是单线程的,然而浏览器却不是!

单线程JavaScript实现异步过程详解

如图所求,JavaScript引擎线程称为主线程,它负责解析JavaScript代码;其他可以称为辅助线程,这些辅助线程便是JavaScript实现异步的关键了!

如(代码片段2):主线程负责自上而下顺序执行,当遇到setTimeout函数后,便将其交给定时器线程去执行,自己继续执行下面的代码!从而达到异步的目的。

不仅如此,更关键的是:

单线程JavaScript实现异步过程详解

任务队列

当定时器线程计时执行完之后,会将回调函数放入任务队列中!

当这些任务加入到任务队列后并不会立即执行,而是处于等候状态!等主线程处理完了自己的事情后,才来执行任务队列中任务!

这个过程我感觉像是古代嫔妃被翻了牌子后,就需要在自己寝宫里精心准备,等待皇上批完凑折后的驾临...(哦,别想歪了!)

宏任务 & 微任务

然而,异步任务却又分为两种:一种叫“宏任务”(MacroTask 或者 Task),一种叫“微任务”(MicroTask)!

这又是两个啥玩意呢?

单线程JavaScript实现异步过程详解

光看这个依然晦涩难懂,那我们来看一段代码吧!

console.log(1);
setTimeout(() => {
  console.log(2);
}, 0);
Promise.resolve().then(() => {
  console.log(3);
});
console.log(4);

这段代码的执行结果:1 - 4 - 3 - 2。LOOK!2是最后打印的,哪怕该计时器的时间设置为0。通过之前的同步和异步的解释,1和4先于2打印应该很好理解了,但同样是异步,3也优先于2打印,这又是为什么呢?答案就是因为 setTimeout属于宏任务,而Promise属于微任务!

好吧~ 这就是宏任务和微任务的差别...什么?没懂?

微任务是皇后所生的,是嫡子;而宏任务是某个小妃子所生, 是庶子!你说选太子的时候谁优先?

浏览器的Event Loop

1.执行全局Script同步代码,形成一个执行栈;

2.在执行代码时当遇到如上异步任务时便会按上文所描述的将宏任务回调加入宏任务队列,微任务回调加入微任务队列;

3.然而,回调函数放入任务队列后也不是立即执行;会等待执行栈中的同步任务全部执行完清空了栈后引擎才能会去任务队列检查是否有任务,如果有那便会将这些任务加入执行栈,然后执行!

4.执行栈清空后,会先去检查微任务队列是否有任务,逐一将其任务加入执行栈中执行,期间如果又产生了微任务那继续将其加入到列队末尾,并在本周期内执行完,直到微任务队列的任务全部 清空,执行栈也清空后,再去检查宏任务队列是否有任务,取到队列队头的任务放入到执行栈中执行,其他可能又会产生微任务,那当本次执行栈中的任务结果清空后又会去检查微任务队列...

5.引擎会循环执行如上步骤,这就是Event Loop!

单线程JavaScript实现异步过程详解

又要上代码了:

console.log('start');
setTimeout(() => {
  console.log('time1');
  Pormise.resolve().then(() => {
    console.log('promise1');
  })
}, 0);
setTimeout(() => {
  console.log('time2');
  Pormise.resolve().then(() => {
    console.log('promise2');
  })
}, 0);
Pormise.resolve().then(() => {
  console.log('promise3');
});
console.log('end');

这段代码的打印顺序:

start - end - promise3 - timer1 - promise1 - timer2 - promise2

据说:node 10.x版本上面的输入结果会是:

start - end - promise3 - timer1 - timer2 - promise1 - promise2

node 11.x版本以后改了,输出跟浏览器输出一致了!

Web Worker

HTML5中支持了Web Worker,使得能够同时执行两段JS了,那是不是就是说JS实现了“多线程”了呢?我们来看看Web Worker的官方解释:

通过使用Web Workers,Web应用程序可以在独立于主线程的后台线程中,运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务,从而允许主线程(通常是UI线程)不会因此被阻塞/放慢。

独立线程,看似像是实现了“多线程”,然而他是独立于主线程,也就是主线程依然是那个主线程没有变!虽然你大妈已经不是你大妈了,但是你大爷还是你大爷!JS单线程的本质依然没有变!

WebWorker是向浏览器申请一个子线程,该子线程服务于主线程,完全受主线程控制。

Web Worker注意事项:

单线程JavaScript实现异步过程详解

写了一个demo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Worker</title>
</head>
<body>
  <button onclick="startWorker()">开始</button>
  <button onclick="stopWorker()">停止</button>
  <button onclick="updateNum()">在运行时点击</button>
  <div id="output"></div>
  <div id="num"></div>

  <script id="worker" type="app/worker">
    function updateSync() {
      for (let i = 0; i < 10000000000; i++) {
        if (i % 100000 === 0) {
          postMessage(i);
        }
      }
    }
    updateSync();
  </script>

  <script>
    let worker;
    function startWorker() {
      let blob = new Blob([document.querySelector('#worker').textContent]);
      let url = window.URL.createObjectURL(blob);
      console.log(url);
      worker = new Worker(url);

      worker.onmessage = function(e) {
        document.getElementById('output').innerHTML = e.data;
      }
    }

    function stopWorker() {
      if (worker) {
        worker.terminate();
      }
    }
    
    let num = 0;
    function updateNum() {
      num++;
      document.getElementById('num').innerHTML = num;
    }
  </script>
</body>
</html>

这段代码可以稍微解释一下Web Worker的用途之一 --执行费时的处理任务吧!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中对节点进行操作的相关介绍
Apr 16 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 #Javascript
JS使用for in有序获取对象数据
May 19 #Javascript
基于js实现数组相邻元素上移下移
May 19 #Javascript
Node.js API详解之 zlib模块用法分析
May 19 #Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 #Javascript
JavaScript实现简单的弹窗效果
May 19 #Javascript
js实现自定义右键菜单
May 18 #Javascript
You might like
php+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
Python第三方库的安装方法总结
2016/06/06 Python
使用requests库制作Python爬虫
2018/03/25 Python
Python入门学习指南分享
2018/04/11 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
运动会邀请函范文
2014/01/31 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
单位员工收入证明样本
2014/10/09 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书