JavaScript的单线程及同步异步

最近在线直播授课时,有非计算机专业的孩子对进程、线程这样的知识没有概念,更加无法理解同步和异步。希望今天我用心整理的一篇文章,能够将这些问题解释清楚。

进程

进程是操作系统分配资源的最小单位,是应用程序运行的载体。
打开window的资源管理器,可以看到进程列表。通常一个应用程序对应一个或多个进程。例如下图中的chrome浏览器就对应多个进程。所以说浏览器是多进程的,而浏览器之所以能够运行,是因为系统给它的进程分配了资源(cpu、内存)。

image.png

线程

在早期的操作系统中并没有线程的概念,进程是能拥有资源和独立运行的最小单位,也是程序执行的最小单位。任务调度采用的是时间片轮转的抢占式调度方式,而进程是任务调度的最小单位,每个进程有各自独立的一块内存,使得各个进程之间内存地址相互隔离。后来,随着计算机的发展,对CPU的要求越来越高,进程之间的切换开销较大,已经无法满足越来越复杂的程序的要求了。于是就发明了线程,线程是程序执行中一个单一的顺序控制流程,是程序执行流的最小单元。
一个进程有一个或多个线程。 可以想想车站的多窗口售票,每个窗口可以看作一个线程,多窗口共同协作完成人售票任务。

流览器中的渲染进程

浏览器的多个进程中有一个渲染进程(浏览器内核)(Renderer进程),它的主要作用为页面渲染,脚本执行,事件处理等。这个渲染进程本身是多线程的,如GUII渲染线程、JS引擎线程等。

JS引擎的单线程机制

JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。
这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?
所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征。

同步任务和异步任务

单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。
如果排队是因为计算量大,CPU忙不过来,倒也算了,但是很多时候CPU是闲着的,因为IO设备(输入输出设备)很慢(比如Ajax操作从网络读取数据),不得不等着结果出来,再往下执行。
JavaScript语言的设计者意识到,这时主线程完全可以不管IO设备,挂起处于等待中的任务,先运行排在后面的任务。等到IO设备返回了结果,再回过头,把挂起的任务继续执行下去。
于是,所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务指的是,不进入主线程、而进入"任务队列"(taskqueue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

问:js为什么需要异步?
答:如果JS中不存在异步,只能自上而下执行,万一上一行解析时间很长,那么下面的代码就会被阻塞。对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验。
问: js单线程又是如何实现异步的呢?
答:通过事件循环(event loop)实现'异步'。
问: 异步任务有哪些呢?
答:定时函数setTimeout和setInterval; DOM事件绑定; Ajax操作; NodeJS中的fs文件读写等。

调用过程分析

image.png

首先,需要理解的是:

  • 同步任务都在主线程上执行,形成一个执行栈
  • 一旦执行栈中的所有同步任务执行完毕(此时JS引擎空闲),系统就会读取任务队列,将可运行的异步任务添加到可执行栈中,开始执行。

程序在第20行调用了b函数,b函数进行执行栈:


image.png

b函数调用setTimeout,setTimeout入栈:

image.png

因为setTimeout是一个异步任务(同步任务会进入主线程执行),浏览器会把setTimeout的回调函数(此例中是a函数)放到Event Table中。Event Table 是个注册站:执行栈让Event Table注册一个函数,该函数会在3秒之后被调用。而当注册完成后,setTimeout从执行栈中弹出。
image.png

一旦回调函数加入到Event Table中,代码不会被block住,浏览器不会等待3秒之后再继续处理接下去的代码,浏览器继续执行b函数的下一行代码,第17行代码,控制台输出BBB。然后b函数执行完毕。从执行栈中弹出。如下图:
image.png

当满足条件(3秒后)时,Event Table会将这个函数推入Event Queue。Event Queue其实就是个缓冲区域,这里的函数等着被移入执行栈。
image.png

那么,什么时候函数会从Event Queue移到执行栈中呢?JavaScript引擎依据一条规则:有一个monitor(可理解为监视器)会持续不断地检查执行栈是否为空,一旦为空,它会检查Event Queue里边是否有等待被调用的函数。如果有,它就会调用这个Queue中第一个函数并将其移到执行栈中。如果Event Queue为空,那么这个monitor会继续不定期的检查。这一整个过程就是Event Loop
image.png

第12行代码执行,控制台输出AAA。

总结

JS的执行机制是:

  • 首先判断js代码是同步还是异步,同步就进入主线程,异步就进入event table。
  • 异步任务在event table中注册函数,当满足触发条件后,被推入event queue。
  • 同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主线程中。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,658评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,482评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,213评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,395评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,487评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,523评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,525评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,300评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,753评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,048评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,223评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,905评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,541评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,168评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,417评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,094评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,088评论 2 352

推荐阅读更多精彩内容