首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >技术 | JavaScript的“并发模型”

技术 | JavaScript的“并发模型”

作者头像
icepy
发布2019-06-24 17:32:06
6250
发布2019-06-24 17:32:06
举报
文章被收录于专栏:子曰五溪子曰五溪

说到并发应该很多人会想到多线程或多进程,很遗憾JavaScript是单线程的,但是JavaScript也有一个很有趣的东西,可以让你产生在使用多线程的感受,事件循环(Event Loop)提供了一些很有意思的东西,今天我想和大家一起讨论讨论。

"Event Loop是一个程序结构,用于等待和发送消息和事件。(a programming construct that waits for and dispatches events or mes

简单的来说Event Loop就是在程序中跑了两个线程(参考iOS的Event Loop),一个线程负责自身的运行(主线程),一个线程负责主线程与其它线程通信。这样来描述其实很好理解,换到JavaScript的语境中,当你在使用setTimeout时,添加一个任务(task functon),这个任务交给了你看不见的一个线程在处理,同时主线程继续保持自身的运行,当主线程运行结束后,它就会去Event Loop中拿之前你添加的任务,继续执行。

while(queue.waitForMessage()){ 
  queue.processNextMessage();
}

很多时候它都会被如此实现,如果当前没有任何消息时,Event Loop会被挂起,一直等待到waitForMessage同步传来消息。

抛开现今已知的setTimeout,setInterval,nextTick,setImmediate等,HTML5也提供了一个web worker来处理多个运行时,只不过它只有监听postMessage来进行通信。Event Loop 对于JavaScript来说概念性的东西比较多,而使用层面的Api就那么几个,理解这个最好的收益是在于处理Web应用时的设计,可以考虑不阻塞页面的方式,将一些依赖部分添加到Event Loop中等待,其实很常见的一个是Ajax,前端经常是需要用到Ajax来获取数据,这就是一个很经典的场景例子。

甚至你可以根据Event Loop的特点来设计自己的一些业务场景,如果从一个函数的调用形成的堆栈来看:

function f(b){  
    var a = 12;  
    return a+b+35;
}
function g(x){  
    var m = 4;  
    return f(m*x);
}
g(21);

当函数g被调用时,首先会创建一个堆栈帧,这里会包含g的参数x和g的局部变量m,当g调用f时,第二个堆栈帧被创建,并且置于第一个堆栈帧之上,且包含了f的参数b和局部变量a。当f执行完返回之后,f栈就退出了,接着g开始继续,一直到g返回,g栈退出,这个时候就空了。

大家可以想像一下经常使用的App,特点极其的类似,push完之后进入第二个页面,当第二个页面处理完返回之后,第二个页面栈退出,当然App的栈不会空,因为必然需要一个Root栈。如果你想用Web来处理类似的效果,比如现在我们经常会使用到的vue-router或react-router,基本上都是如此原理来处理。

Event Loop 实际上更像是一个挂起的队列,只有当任务被添加到这个队列中,这个Event Loop才可以说是被激活了,其余时间它应该都一直在等待中。不过在JavaScript中,我们很难可以这么细腻的处理,不过这个特点也可以去处理一些另外的场景,比如在处理Hybrid这样的模式中,App启动时需要去配置一些信息,可能这个页面已经出现,其中有很多处会调用一个方法,这时候,就可以把这些“消息”添加到队列中,等待配置信息成功之后,依次执行。不过这个场景也有一个缺点,就是当一个任务耗时过长,其它任务就需要一直等待了,不过针对这样的缺点,有一些方法可以优化一下,比如将一个耗时过长的任务,分解成多个任务。

说了那么多,Event Loop是一个很抽象的概念描述,用它在我们的应用程序中,可以解决很多问题,时不待你,从速理解吧。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-05-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 子曰五溪 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档