初识多线程与异步

2,609 阅读5分钟

前两天学习java到多线程就在思考多线程和javascript的异步有什么区别,经过上网搜寻资料,整理了这篇文章,如果文章有问题,恳请大家能与指出。

1. 第一个概念:进程与线程

一个程序就是一个进程,而一个程序中的多个任务则被称为线程。 进程就像是一家工厂,多个工厂之间是独立存在的。而线程就像是工厂中的那些工人,共享资源,完成同一个大目标。

image.jpeg

2.异步是目的多线程是方法

异步和多线程有什么区别?异步是目的,而多线程是实现这个目的的方法。 异步是当一个调用请求发送给被调用者,而调用者不用等待其结果的返回.实现异步可以采用多线程技术或则交给另外的进程来处理.异步是一种效果,多线程是一种具体技术。可以说,用“多线程”实现“异步”。

3.多线程和异步操作的异同

  多线程和异步操作两者都可以达到避免调用线程阻塞的目的,从而提高软件的可响应性,多线程是用来并发的执行多个任务。 若使用异步方式,用这些固定数目的线程在固定的时间内就可以服务更多的请求,而如果用同步方式,那么每个请求都自始至终占用这一个线程,服务器可以同时服务的请求数就少了。 当异步操作执行完成后,系统会从可用线程中选取一个执行回调程序,这时的这个线程可能是刚开始发出请求的那个线程,也可能是其他的线程,因为系统选取线程是随机的事情,所以不能说绝对不是刚开始的那个线程。

4.JavaScript的单线程

JavaScript 是一门动态的解释型的语言,具有跨平台性。JavaScript 从诞生起就是单线程,原因大概是不想让浏览器变得太复杂,因为多线程需要共享资源、且有可能修改彼此的运行结果,对于一种网页脚本语言来说,这就太复杂了。 因此可以说javaScript引擎是单线程的,但是JavaScript 运行的宿主环境浏览器是多线程的。

5.浏览器的多线程

浏览器主线程常驻线程

  1. GUI 渲染线程
  • 绘制页面,解析 HTML、CSS,构建 DOM 树,布局和绘制等
  • 页面重绘和回流
  • 与 JS 引擎线程互斥,也就是所谓的 JS 执行阻塞页面更新
  1. JS 引擎线程
  • 负责 JS 脚本代码的执行
  • 负责准执行准备好待执行的事件,即定时器计数结束,或异步请求成功并正确返回的事件
  • 与 GUI 渲染线程互斥,执行时间过长将阻塞页面的渲染
  1. 事件触发线程
  • 负责将准备好的事件交给 JS 引擎线程执行
  • 多个事件加入任务队列的时候需要排队等待(JS 的单线程)
  1. 定时器触发线程
  • 负责执行异步的定时器类的事件,如 setTimeout、setInterval
  • 定时器到时间之后把注册的回调加到任务队列的队尾
  1. HTTP 请求线程
  • 负责执行异步请求
  • 主线程执行代码遇到异步请求的时候会把函数交给该线程处理,当监听到状态变更事件,如果有回调函数,该线程会把回调函数加入到任务队列的队尾等待执行

6.同步任务和异步任务

简单的介绍一下同步任务和异步任务的概念。

  1. 同步任务:必须等到结果来了之后才能做其他的事情,举例来说就是你烧水的时候一直等在水壶旁边等水烧开,期间不做其他的任何事情。
  2. 异步任务:不需要等到结果来了才能继续往下走,等结果期间可以做其他的事情,结果来了会收到通知。举例来说就是你烧水的时候可以去做自己想做的事情,听到水烧开的声音之后再去处理。

从概念就可以看出来,异步任务从一定程度上来看比同步任务更高效一些,核心是提高了用户体验。

7.异步是怎么实现的

看到这里,总算是进入正题了,先讲讲浏览器端的 Event Loop 是什么样的。

上图是一张 JS 的运行机制图,Js 运行时大致会分为几个部分:

  1. Call Stack:调用栈(执行栈),所有同步任务在主线程上执行,形成一个执行栈,因为 JS 单线程的原因,所以调用栈中每次只能执行一个任务,当遇到的同步任务执行完之后,由任务队列提供任务给调用栈执行。
  2. Task Queue:任务队列,存放着异步任务,当异步任务可以执行的时候,任务队列会通知主线程,然后该任务会进入主线程执行。任务队列中的都是已经完成的异步操作,而不是说注册一个异步任务就会被放在这个任务队列中。

具体讲解参看:Horace 的 juejin.cn/post/684490…

参考文章

[1]博客链接: tearill.github.io/

[2]Wikipedia: en.wikipedia.org/wiki/Event_…

[3]JS 大会: www.bilibili.com/video/BV1bE…

[4]github: github.com/tearill/Rea…

[5]掘金: juejin.cn/post/684490…