阮一峰eventloop,搜一个笑话路标 作者阮一峰

eventloop是哪个大佬设计的

阮一峰。

阮一峰译作:《ECMAScript6入门》、《软件随想录》、《黑客与画家》、《异常流行幻象与群众疯狂》、《下一个大泡泡》等。

EventLoop即事件循环,是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理。

怎样用JS实现异步转同步

源起

小飞是一名刚入行前端不久的新人，因为进到了某个大公司，俨然成为了学弟学妹眼中'大神'，大家遇到js问题都喜欢问他，这不，此时他的qq弹出了这样一条消息

"hi,大神在吗？我有个问题想问，现在我们的代码里面有这样的东西,可是得不到正确的返回结果

1234567

function?getDataByAjax () {return?$.ajax(...postParam)}var?data = getDataByAjax()if?(data) {???console.log(data.info)}

"哦，你这里是异步调用，不能直接获得返回值，你要把if语句写到回调函数中",小飞不假思索的说到，对于一个‘专业’的fe来说，这根本不是一个问题。

“可是我希望只是改造getDataByAjax这个方法，让后面的代码成立。”

“研究这个没有意义，异步是js的精髓，同步的话会阻塞js调用，超级慢的，但是你要一再坚持的话，用async:true就好了”

“不愧是大神，我回去立刻试一试，么么哒”

两天后，她哭丧着脸登上了qq

“试了一下你的方法，但是根本行不通，哭~~”

“别急，我看看你这个postParam的参数行吗”

123456

{...???dataType:?'jsonp',async:?true...}

"这是一个jsonp请求啊，老掉牙的东西了，，jsonp请求是没有办法同步的"

“我知道jsonp请求的原理是通过script标签实现的，但是，你看，script也是支持同步的呀，你看tags/attscriptasync.asp”

“额，那可能是jquery没有实现吧，哈哈”

“大神，你能帮我实现一个jsonp的同步调用方式嘛，拜托了(星星眼)”

虽然他有点奇怪jquery为什么没有实现，但是既然w3school的标准摆在那里，码两行代码又没什么，

1234567891011121314

export?const loadJsonpSync = (url) = {var?result;?window.callback1 = (data) = (result = data)let?head = window.document.getElementsByTagName('head')[0]let?js = window.document.createElement('script')?js.setAttribute('type',?'text/javascript')?js.setAttribute('async',?'sync')??// 这句显式声明强调src不是按照异步方式调用的?js.setAttribute('src', url)?head.appendChild(js)return?result}

额，运行起来结果竟然是undefined！w3cshool的文档竟然也不准，还权威呢，我看也不怎么着，小飞暗自想到。

“刚才试了一下，w3school文档上写的有问题，这个异步属性根本就是错的”

“可是我刚还试过一次这个，我确认是好的呀”

12

script src="loop50000 put('frist').js"/scriptscript src="put('second').js"/script

(有兴趣的同学可以实现以下两个js，并且加上async的标签进行尝试。)

“这个，我就搞不清楚了”，小飞讪讪的说到

对方已离线

抽象

关于这个问题，相信不只是小飞，很多人都难以解答。为什么ajax可以做到同步，但jsonp不行，推广到nodejs上，为什么readFile也可以做到同步(readFileSync)，但有的库却不行。

（至于script的async选项我们暂时避而不谈，是因为现在的知识维度暂时还不够，但是不要着急，下文中会给出明确的解释）

现在，让我们以计算机科学的角度抽象这个问题：

我们是否可以将异步代码转化为同步代码呢？(ASYNCCALL = SYNCCALL)

既然是抽象问题，那么我们就可以不从工程角度/性能角度/实现语言等等等方面来看(同步比异步效率低下),每增加一个维度，复杂程度将以几何爆炸般增长下去。

首先，我们来明确一点，==在计算机科学领域==同步和异步的定义

同步（英语：Synchronization），指对在一个系统中所发生的事件（event）之间进行协调，在时间上出现一致性与统一化的现象。在系统中进行同步，也被称为及时（in time）、同步化的（synchronous、in sync）。--摘自百度百科

异步的概念和同步相对。即时间不一致，不统一

明确了这一点，我们可以借助甘特图来表示同步和异步

其中t1和t2是同步的，t1和t3是异步的。

答案就在操作系统原理的大学教材上，我们有自旋锁，信号量来解决问题，伪代码如下

1234567891011121314151617

spinLock () {// 自旋锁??fork Wait 3000 unlock()?//开启一个异步线程，等待三秒后执行解锁动作??loop until unlock?// 不断进行空循环直到解锁动作Put ‘unlock’}?//pv原语，当信号量为假时立即执行下一步，同时将信号量置真//反之将当前执行栈挂起，置入等待唤醒队列//uv原语，将信号量置为假，并从等待唤醒队列中唤醒一个执行栈Semaphore () {??pv()??fork Wait 3000 uv()??pv()??uv()Put?'unlock'}

很好，至此都可以在操作系统原理的教材上翻到答案。于是我们在此基础上添加约束条件

仅仅依赖于js本身，我们是否可以将异步代码转化为同步代码呢？(ASYNCCALL = SYNCCALL)

论证

带着这个问题，我们翻看一下jquery的源码

src/ajax/xhr.js#L42

可以看出, ajax的同步机制本质上是由XMLHttpRequest实现的，而非js原生实现。

同样的道理，我们再翻看一下nodejs的源码

lib/fs.js#L550

从readFileSync-tryReadSync-readSync一路追下去，会追到一个c++ binding， node_file.cc#L1167

123456

if?(req-IsObject()) {???ASYNC_CALL(read, req, UTF8, fd, uvbuf, 1, pos);}?else?{???SYNC_CALL(read, 0, fd, uvbuf, 1, pos)???args.GetReturnValue().Set(SYNC_RESULT);}

同步的奥妙在于c++的宏定义上，这是一种借由c++来实现的底层同步方式。

观察了这两种最广泛的异步转同步式调用，我们发现均没有采用js来实现。

似乎从现象层面上来看js无法原生支持，但是这还不够，我们探究在js语义下上面的自旋锁/信号量的特性模拟实现(我知道你们一定会嗤之以鼻，==js本身就是单线程的，只是模拟了多线程的特性== 我无比赞同这句话，所以这里用的不是实现，而是特性模拟实现)，另外，由于settimeout具有fork相似的异步执行特性，所以我们用setitmeout暂时代替fork

自旋锁

1.第一个实现版本

1234567

var?lock =?truesetTimeout(function?() {lock =?false}, 5000)?while(lock);console.log('unlock')

我们预期在5000ms后执行unlock语句，但是悲剧的是，整个chrome进程僵死掉了。

为了解释清楚这个问题，我们读一下阮一峰老师的event loop模型

event-loop.html

看样子咱们已经清楚的了解了event loop这个js运行顺序的本质（同步执行代码立即执行，异步代码入等待队列），那么，我们可以基于此给出js vm的调度实现（eventloop的一种实现），当然，咱们为了解释自旋锁失败只需要模拟异步操作， 同步操作，和循环就好

123456789101112131415161718192021222324

//taskQueue：任务队列//runPart：当前正在执行的任务(同步指令集)//instruct： 正在执行的指令?function?eventloop (taskQueue) {while(runPart = taskQueue.shift()) {while(instruct = runPart.shift()) {const { type, act, codePart } = instructswitch(type) {case?'SYNC':?????????console.log(act)if?(act ===?'loop')???????????runPart.unshift({?????????????act:?'loop',?????????????type:?'SYNC'})breakcase?'ASYNC':?????????taskQueue.push(codePart)break}}}}

然后转化我们的第一个版本自旋锁

1234567891011121314151617181920

let?taskQueue = [[{act:?'var lock = true', type:?'SYNC'},?//var lock = true{???????act:?'setTimeout',???????type:?'ASYNC',???????codePart: [{act:?'lock = false', type:?'SYNC'}]},?// setTimeout(function () { lock = false }, 5000)/*{???????act: 'loop',???????type: 'SYNC'???},*/?// while(lock);{???????act:?'console.log(\'sync\')',???????type:?'SYNC'}?// console.log('unlock')]]em id="__mceDel"?/em

测试一下，符合evnet loop的定义，然后放开注释，我们成功的让loop block住了整个执行过程，lock = false永远也没有机会执行！！！

（真实的调度机制远比这个复杂的多得多的，有兴趣的可以看看webkit~~~的jscore的实现哈）

知道了原理，我们就来手动的改进这部分代码

2.改进的代码

12345678910111213141516

var?lock =?truesetTimeout(function?() {lock =?false???console.log('unlock')}, 5000)?function?sleep() {var?i = 5000while(i--);}?var?foo = () = setTimeout(function?() {???sleep()lock foo()})foo()

这个版本的改进我们对while(true);做了切块的动作,实际上这种技巧被广泛的应用到改善页面体验的方面，所以，有些人因为时序无法预知而抗拒使用settimeout这种想法是错误的！

6996528，

小测验1： 改写eventloop和taskQueue，使它支持改进后的代码

可是，如果把代码最后的foo() 变成 foo() console.log('wait5sdo'),

我们的代码依然没有成功，why

注意看我们标红的地方，如果你完成了小测验1，就会得到和这张图一致的顺序

==同步执行的代码片段必然在异步之前。==

所以，无论从理论还是实际出发，我们都不得不承认，在js中，把异步方法改成同步方法这个命题是水月镜花

哦对了，最后还需要解释一下最开始我们埋下的坑， 为什么jsonp中的async没有生效，现在解释起来真的是相当轻松，即document.appendChild的动作是交由dom渲染线程完成的，所谓的async阻塞的是dom的解析，而非js引擎的阻塞。实际上，在async获取资源后，与js引擎的交互依旧是push taskQueue的动作，也就是我们所说的async call

推荐阅读： 关于dom解析请大家参考webkit技术内幕第九章资源加载部分

峰回路转

相信很多新潮的同学已经开始运用切了async/await语法，在下面的语法中，getAjax1和console之间的具有同步的特性

1234

async?function?() {var?data = await getAjax1()???console.log(data)}

讲完了event loop和异步的本质，我们来重新审视一下async/await。

老天，这段代码亲手推翻了==同步执行的代码片段必然在异步之前。== 的黄金定律！

惊不惊喜，意不意外，这在我们的模型里如同三体里的质子一样的存在。我们重新审视了一遍上面的模型，实在找不到漏洞，找不到任何可以推翻的点，所以真的必须承认，async/await绝对是一个超级神奇的魔法。

到这里来看我们不得不暂时放弃前面的推论，从async/await本身来看这个问题

相信很多人都会说，async/await是CO的语法糖，CO又是generator/promise的语法糖，好的，那我们不妨去掉这层语法糖，来看看这种代码的本质, 关于CO，读的人太多了，我实在不好老生常谈，可以看看这篇文章，咱们就直接绕过去了,这里给出一个简易的实现

/5800210.html

1234567891011121314151617181920

function?wrap(wait) {var?iter?iter = wait()const f = () = {const { value } = iter.next()???value value.then(f)}?f()}?function?*wait() {var?p = () =?new?Promise(resolve = {?????setTimeout(() = resolve(), 3000)})yield?p()?console.log('unlock1')yield?p()?console.log('unlock2')?console.log('it\'s sync!!')}

终于，我们发现了问题的关键，如果单纯的看wait生成器(注意，不是普通的函数)，是不是觉得非常眼熟。这就是我们最开始提出的spinlock伪代码！！！

这个已经被我们完完全全的否定过了，js不可能存在自旋锁，事出反常必有妖，是的，yield和*就是表演async/await魔法的妖精。

generator和yield字面上含义。Gennerator叫做生成器，yield这块ruby，python，js等各种语言界争议很大，但是大多数人对于‘让权’这个概念是认同的(以前看到过maillist上面的争论，但是具体的内容已经找不到了)

扩展阅读---ruby元编程 闭包章节yield(ruby语义下的yield)

所谓让权，是指cpu在执行时让出使用权利，操作系统的角度来看就是‘挂起’原语，在eventloop的语义下，似乎是暂存起当时正在执行的代码块(在我们的eventloop里面对应runPart)，然后顺序的执行下一个程序块。

我们可以修改eventloop来实现让权机制

小测验2 修改eventloop使之支持yield原语

至此，通过修改eventloop模型固然可以解决问题，但是，这并不能被称之为魔法。

和谐共存的世界

实际上通过babel，我们可以轻松的降级使用yield,（在es5的世界使用让权的概念！！）

看似不可能的事情，现在，让我们捡起曾经论证过的

==同步执行的代码片段必然在异步之前。== 这个定理，在此基础上进行进行逆否转化

==在异步代码执行之后的代码必然不是同步执行的(异步的)。==

这是一个圈子里人尽皆知的话，但直到现在他才变得有说服力（我们绕了一个好长的圈子）

现在，让我们允许使用callback，不使用generator/yield的情况下完成一个wait generator相同的功能！！！

1234567891011121314151617181920

function?wait() {const p = () = ({value:?new?Promise(resolve = setTimeout(() = resolve(), 3000))})let?state = {next: () = {???????state.next = programPartreturn?p()}}function?programPart() {?????console.log('unlocked1')?????state.next = programPart2return?p()}function?programPart2() {?????console.log('unlocked2')?????console.log('it\'s sync!!')return?{value: void 0}}return?state}

太棒了，我们成功的完成了generator到function的转化(虽然成本高昂)，同时，这段代码本身也解释清楚了generator的本质，高阶函数，片段生成器，或者直接叫做函数生成器！这和scip上的翻译完全一致,同时拥有自己的状态(有限状态机)

推荐阅读 计算机程序的构造和解释 第一章generator部分

小测验3 实际上我们提供的解决方式存在缺陷，请从作用域角度谈谈

其实，在不知不觉中，我们已经重新发明了计算机科学中大名鼎鼎的CPS变换

Continuation-passing_style

最后的最后，容我向大家介绍一下facebook的CPS自动变换工具--regenerator。他在我们的基础上修正了作用域的缺陷，让generator在es5的世界里自然优雅。我们向facebook脱帽致敬！！egenerator

后记

同步异步 可以说是整个圈子里面最喜欢谈论的问题，但是，谈来谈去，似乎绝大多数变成了所谓的‘约定俗称’，大家意味追求新技术的同时，却并不关心新技术是如何在老技术上传承发展的，知其然而不知其所以然，人云亦云的写着似是而非的js。

==技术，不应该浮躁==

PS: 最大的功劳不是CO，也不是babel。regenerator的出现比babel早几个月，而且最初的实现是基于esprima/recast的，关于resprima/recast,国内似乎了解的并不多，其实在babel刚刚诞生之际， esprima/esprima-fb/acron 以及recast/jstransfrom/babel-generator几大族系围绕着react产生过一场激烈的斗争，或许将来的某一天，我会再从实现细节上谈一谈为什么babel笑到了最后~~~~

网络请求出错什么意思

一：运营商（传输、交换网络的故障）的责任：运营商必须保证到用户的信号质量（带宽、误码率、信杂比、传输速率、信号电平、输入输出阻抗、信号的稳定度、输入输出阻抗的稳定性）符合国家标准）

二：用户（责任）下列因素会导致你目前的状态，如果经检测上述运营商没有问题，接下来，就是你用户自己的问题了；如果你不存在下列问题，你就可以直接打运营商电话，让运营商给你处运营商自己的相关事宜。

三：网站的问题：1：网站服务器不稳定；2：网站的软件不稳定；3：网站运行维护质量水平较低；不能及时的排除故障；

网络是由若干节点和连接这些节点的链路构成，表示诸多对象及其相互联系。

在1999年之前，人们一般认为网络的结构都是随机的。但随着Barabasi和Watts在1999年分别发现了网络的无标度和小世界特性并分别在世界著名的《科学》和《自然》杂志上发表了他们的发现之后，人们才认识到网络的复杂性。 [1]

网络会借助文字阅读、图片查看、影音播放、下载传输、游戏、聊天等软件工具从文字、图片、声音、视频等方面给人们带来极其丰富的生活和美好的享受。

汉语中，“网络”一词最早用于电学《现代汉语词典》（1993年版）做出这样的解释：“在电的系统中，由若干元件组成的用来使电信号按一定要求传输的电路或这种电路的部分，叫网络。”

在数学上，网络是一种图，一般认为专指加权图。网络除了数学定义外，还有具体的物理含义，即网络是从某种相同类型的实际问题中抽象出来的模型。在计算机领域中，网络是信息传输、接收、共享的虚拟平台，通过它把各个点、面、体的信息联系到一起，从而实现这些资源的共享。网络是人类发展史来最重要的发明，提高了科技和人类社会的发展。

中国公用计算机互联网

CHINANET，又称邮电部互联网、中国公用Internet网，是邮电部经营管理的基于Internet网络技术的电子信息网，1995年初与国际互联网连通，并于5月向社会提供服务。CHINANET由骨干网、接入网组成，骨干网是其主要信息通路，由直辖市和各省会城市的网络节点构成；接入网是各省（区）建设的网络接点形成的网络。CHINANET的灵活接入方式和遍布全国各城市的接入点，可以方便地接入国际Internet, 享用Internet上的丰富信息资源和各种服务，并可为国内的计算机互联，为国内的信息资源共享提供方便的网络环境。

中国教育与科研网

CERNET，1994年启动，1995年底完成首期工程，包括北京（网络中心）、上海、南京、广州、武汉、西安、成都和沈阳等高等学校集中的大城市。有连接美国的国际专线。全国主干网（共11条64KbpsDDN专线）于1995年10月开通。二期工程完成后，全国主干网和国际联网的逐步升级，主干网达到2Kbps以上，国际联网达到8Kbps以上。

中国科学技术网

CSTNET，由中国科学院主持，联合清华、北大共同建设。1994年4月开通了与Internet的专线连接。1994年5月21日完成了我国最高域名CN主服务器的设置，实现了与Internet的TCP/IP连接。1995年底基本完成“百所联网”工程。至1997年底，已连接100多个以太网、3000多台计算机、1万多名用户，成为中国地域广、用量大、性能好、通信量大、服务设施齐全的全国性科研教育网络。

我对JS异步执行机制的理解

说起JS的异步执行机制，如果百度一下，你首先会发现阮一峰的写过一篇关于异步机制的文章（ ），等你津津有味又一头雾水的看完，然后继续看百度的其他结果，然后会发现，阮一峰的这篇被另一个大牛朴灵给批判了

（ ）。

由此可见，关于异步执行机制到底是怎么回事，因为涉及到浏览器底层机制，所以不容易彻底了解清楚，就算是大牛阮一峰，也只是通过英文文献来了解，而且一知半解。我的这篇文章只是试图尽可能简单的描述一下JS的异步执行机制，坦白说，我现在并不能完全弄懂这个机制，所以也不能完全解释清这个机制，所以，如果我写的越严谨，就越容易出错，我只能简单但是较模糊的描述一下：

JS的运行环境是一个很复杂的环境，它里面有非常多的复杂的名词事物，用简单又不严谨的说法来说，运行环境里至少有下面这些事物：

有一个国外的web app，专门用来讲解异步事件的门道 Loupe ，这个更接近真实情况。为什么我不讲解这个？因为更复杂了，我们并不打算研究浏览器的底层，不是么？

然后说一下任务队列里的任务。所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，靠主线程自己就可以执行完成的任务；异步任务指的是，主线程执行开始之后，需要靠主线程之外的线程才能完成的任务。由主线程决定是否要动用其他线程。以下内容，不再提栈，只说主线程。

现在说重点：

异步任务的执行机制是：

当主线程遇到一个异步任务，比如一个ajax请求，当主线程执行到 xhr.send() 的时候，这个send命令是立即执行的， 并不会像一些人想象的，拖到所有同步任务的最后面。 然后主线程向http线程发送指令，要求http线程向服务器发送请求。这里强调一下http线程，显然它不是主线程的一部分，因为它可以并发，如果你有100个ajax请求，每个都需要1秒钟，是不是http线程要花100秒呢？并不是，它会并发100个请求，总共耗时大约1.01秒就完成了。

主线程向以http线程为代表的几个线程发送指令之后，主线程就暂时不再管这个ajax任务了，而是去看任务队列里的下一个任务。

http线程发送了请求之后接收反馈，收到之后，形成一个新的事件（可以叫做“我收到啦！”事件），然后插入到回调函数队列中，因为回调函数队列的优先级很低，所以会排到总队列的最后面，其结果就是：主线程把同步任务都完成了，才开始执行异步事件的 回调 。 注意，并不是异步任务在全体同步任务结束之后才开始，而是异步任务的回调通常在全体同步任务结束之后才开始！异步任务跟异步任务的回调是两回事！是两个任务！一个鲜明的例子就是 setTimeout(fn, 1000) ，计时是从主线程遇到 setTimeout() 任务，然后分配给计时器线程，计时器线程开始干活的时候就开始计时了！只不过要1秒之后 fn 才执行！ setTimeout() 和 fn 是两个任务！ setTimeout() 是立即执行， fn 才是1秒之后执行。但是 setTimeout() 的执行，人眼是感受不到的，因为并没有什么地方有一个秒表告诉你 setTimeout() 开始执行了；而fn的执行，人眼能感受到，所以人们会错误的以为fn才是异步任务，其实fn并不是， fn 是个回调任务，往往 fn 是同步任务，比如 fn 可能是 console.log(123) ，这怎么会是异步任务。

所以，异步机制是浏览器的两个或以上常驻线程共同完成的，异步请求是JS主线程和其他某个线程共同完成的，JS的执行线程发起异步请求（这时浏览器会开一条新的HTTP请求线程来执行请求，这时JS自己的任务已完成，继续执行线程队列中剩下的其他任务），然后在未来的某一时刻"任务队列"线程监视到之前的发起的HTTP请求已完成， "任务队列"就会把完成事件插入到JS执行队列的尾部等待JS处理 。

最后专门说说定时触发（settimeout和setinterval）。

定时触发是由浏览器的定时器线程执行的定时计数， 然后在定时时间到达之后，定时器线程把定时处理函数的执行请求插入到JS回调队列的尾端。

这个1到底是100毫秒之后弹出，还是1000毫秒（或更多时间）后弹出呢？又或是1100毫秒之后弹出？

答案是，1000毫秒多一点点之后弹出。

原因：浏览器会先执行setTimeout，也就是开始计时，然后开始执行sometask，执行了1000毫秒，然后去回调队列里看回调任务，alert(1);早就恭候了，因为定时100毫秒之后alert(1)就可以执行了。所以，等1000毫秒的任务完成，1就会立即弹出，所以答案是1000毫秒多一点点之后弹出。

所以用这两个函数的时候，实际的执行时间是大于或等于指定时间的，不保证能准确定时的。

最后强调一下setInterval。比如我希望每100毫秒打印一个1。然后，又有极端情况，就是sometask耗时1000毫秒。你以为sometask结束之后会打出10个1么？并不会，只会打出1个1，因为setInterval第一次读秒结束之后，回调队列出现了一个alert(1)，根据之前的理论，并不会执行。又过了100毫秒之后，计时器线程会去观察回调队列是不是已经有了alert(1)，如果有，就不再往回调队列里加alert(1)，目的就是为了避免回调叠加执行。

总之，你需要记住，异步任务就是主线程在任务队列里看到了这个任务，看了一眼之后就然后安排别的线程帮忙，然后主线程就忙别的去了，别的线程帮忙完事之后，再在队列末尾放一个新任务叫“帮忙完毕”，到此异步任务本身就完事。主任务看到“帮忙完毕”任务之后，就去执行回调，回调执行完，这个异步任务连同回调就全都完事。然后，如果并没有回调。。。没有就没有呗。