前端面试：js同步与异步问题

前言

我原本是打算写一篇co源码精读(为啥读co，由于它短)，然鹅发现本身存在一系列基础问题没有搞透彻，打算写一个js基础系列文章，总结本身的理解(copy)，但愿与你在学习路上一同进步。首先问问本身当面试官问到js中的同步和异步，这个问题该怎么回答？理解一个问题无非是what-why-how js同步和异步问题是什么-->为何会产生异步问题-->如何解决。

1、JavaScript起源

技术的出现,和应用场景密切相关的。JavaScript诞生于1995年。当时，它的主要目的是处理之前由服务器端语言（如Perl）负责的一些输入验证操做。在JavaScript问世以前，必须把表单数据发送到服务器端才能肯定用户是否没有填写某个必填域，是否输入了无效的值。Netscape Navigator但愿经过JavaScript来解决这个问题。起初名字为livescript，可是后来Netscape(网景)与Sun公司成立了一个开发联盟。Netscape为了搭上媒体热炒Java的顺风车，临时把LiveScript更名为JavaScript，因此从本质上来讲JavaScript和Java没什么关系（趁热度）。 现在，JavaScript的用途早已再也不局限于简单的数据验证，而是具有了与浏览器窗口及其内容等几乎全部方面交互的能力。今天的JavaScript已经成为一门功能全面的编程语言

总结:js最初的用途是为来实现用户与浏览器的交互

2、JS为什么是单线程的？

JavaScript的单线程，与它的用途有关。做为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操做DOM。这决定了它只能是单线程，不然会带来很复杂的同步问题。好比，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另外一个线程删除了这个节点，这时浏览器应该以哪一个线程为准？

因此，为了不复杂性，从一诞生，JavaScript就是单线程，这已经成这门语言的核心特征，未来也不会改变。

注：所谓单线程，是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个。

3、计算机的同步与异步（重点）

计算机领域中的同步（Synchronous）和异步（Asynchronous）和咱们生活中的同步和异步的概念是刚好相反的，感受是翻译要背这个锅。生活中的同步，突出的是‘同’，相同的步伐，是咱俩一块儿行动，好比一块儿去逛街吃饭饭睡觉觉。异步则是你忙你的，我忙个人，步调不致且互不干扰。难到计算机里的同步和异步不是这样？确实不是。

"计算机的同步"就比如：你去外地上学人生地不熟，忽然生活费不够了；此时你决定打电话回家，通知家里转生活费过来，但是当你拨出电话时，对方一直处于待接听状态(即：打不通，联系不上)，为了拿到生活费，你就不停的oncall、等待，最终可能不能及时要到生活费，致使你今天要作的事都没有完成，而白白花掉了时间。

"计算机的异步"就是：在你打完电话发现没人接听时，猜测：对方可能在忙，暂时没法接听电话，因此你发了一条短信(或者语音留言，亦或是其余的方式)通知对方后便忙其余要紧的事了；这时你就不须要持续不断的拨打电话，还能够作其余事情；待必定时间后，对方看到你的留言便回复响应你，固然对方可能转钱也可能不转钱。可是整个一天下来，你还作了不少事情。或者说你找室友临时借了一笔钱，又开始happy的上学时光了。

总结：计算机中的同步就是排队等待，假如你是第一百零一个备胎，那你只能等前面的一百个爆了以后才能‘处理’你。异步就是，尽管你是第一百零一个，她仍是能照顾到你的感觉。

4、js单线程为何会有'异步'问题

看完前面的铺垫你是否会产生这些疑问，JS是单线程的，那么他是如何是实现异步操做的？AJAX异步发送和回调请求，还有setTimeout也看起来像是多线程的？不急慢慢来

• js是同步的？

是的，单线程，那确定只能同步(排队)执行咯

• js为何须要异步?

若是JS中不存在异步,只能自上而下执行,万一上一行解析时间很长,那么下面的代码就会被阻塞。 对于用户而言,阻塞就意味着"卡死",这样就致使了不好的用户体验

• js单线程又是如何实现异步的呢?

经过事件循环(event loop) 实现'异步'

经典问题：

console.log('1')
setTimeout(function(){
 console.log('2')
},0)
console.log('3')  
//       1，3，2
复制代码

也就是说,setTimeout里的函数并无当即执行,而是延迟了一段时间,知足必定条件后,才去执行的,这类代码,咱们叫异步代码。

因此,这里咱们首先知道了JS里的一种分类方式,就是将任务分为: 同步任务和异步任务

虽然JS是单线程的可是浏览器的内核是多线程的，在浏览器的内核中不一样的异步操做由不一样的浏览器内核模块调度执行，异步操做会将相关回调添加到任务队列中。而不一样的异步操做添加到任务队列的时机也不一样，如 onclick, setTimeout, ajax 处理的方式都不一样，这些异步操做是由浏览器内核的 webcore 来执行的，webcore 包含上图中的3种 webAPI，分别是 DOM Binding、network、timer模块。

按照这种分类方式:JS的执行机制是

• 首先判断js代码是同步仍是异步,同步就进入主进程,异步就进入event table
• 异步任务在event table中注册函数,当知足触发条件后,被推入event queue
• 同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,若是有就推入主进程中 以上三步循环执行,这就是event loop

总结：同步能够保证顺序一致，可是容易致使阻塞；异步能够解决阻塞问题，可是会改变顺序性，根据不一样的须要去写你的代码。

每周都会持续更新，您的点赞，收藏，关注三连击是个人动力，决定了前方的路怎么走,就不要总回头看，peace&love。