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

jiezi

6 年前

前言
我本来是打算写一篇 co 源码精读(为啥读 co，因为它短)，然鹅发现自己存在一系列基础问题没有搞透彻，打算写一个 js 基础系列文章，总结自己的理解(copy)，希望与你在学习路上一同进步。首先问问自己当面试官问到 js 中的同步和异步，这个问题该怎么回答？理解一个问题无非是 what-why-howjs 同步和异步问题是什么 –> 为什么会产生异步问题 –> 如何解决。
一、JavaScript 起源
技术的出现, 和应用场景密切相关的。JavaScript 诞生于 1995 年。当时，它的主要目的是处理以前由服务器端语言（如 Perl）负责的一些输入验证操作。在 JavaScript 问世之前，必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域，是否输入了无效的值。Netscape Navigator 希望通过 JavaScript 来解决这个问题。起初名字为 livescript，但是后来 Netscape(网景)与 Sun 公司成立了一个开发联盟。Netscape 为了搭上媒体热炒 Java 的顺风车，临时把 LiveScript 改名为 JavaScript，所以从本质上来说 JavaScript 和 Java 没什么关系（趁热度）。如今，JavaScript 的用途早已不再局限于简单的数据验证，而是具备了与浏览器窗口及其内容等几乎所有方面交互的能力。今天的 JavaScript 已经成为一门功能全面的编程语言
 总结:js 最初的用途是为来实现用户与浏览器的交互 
二、JS 为何是单线程的？
JavaScript 的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript 的主要用途是与用户互动，以及操作 DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定 JavaScript 同时有两个线程，一个线程在某个 DOM 节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？
所以，为了避免复杂性，从一诞生，JavaScript 就是单线程，这已经成这门语言的核心特征，将来也不会改变。
注：所谓单线程，是指在 JS 引擎中负责解释和执行 JavaScript 代码的线程只有一个。
三、计算机的同步与异步（重点）
计算机领域中的同步（Synchronous）和异步（Asynchronous）和我们生活中的同步和异步的概念是恰好相反的，感觉是翻译要背这个锅。生活中的同步，突出的是‘同’，相同的步伐，是咱俩一起行动，比如一起去逛街吃饭饭睡觉觉。异步则是你忙你的，我忙我的，步调不致且互不干扰。难到计算机里的同步和异步不是这样？确实不是。
” 计算机的同步 ” 就好比：你去外地上学人生地不熟，突然生活费不够了；此时你决定打电话回家，通知家里转生活费过来，可是当你拨出电话时，对方一直处于待接听状态 (即：打不通，联系不上)，为了拿到生活费，你就不停的 oncall、等待，最终可能不能及时要到生活费，导致你今天要做的事都没有完成，而白白花掉了时间。” 计算机的异步 ” 就是：在你打完电话发现没人接听时，猜想：对方可能在忙，暂时无法接听电话，所以你发了一条短信(或者语音留言，亦或是其他的方式) 通知对方后便忙其他要紧的事了；这时你就不需要持续不断的拨打电话，还可以做其他事情；待一定时间后，对方看到你的留言便回复响应你，当然对方可能转钱也可能不转钱。但是整个一天下来，你还做了很多事情。或者说你找室友临时借了一笔钱，又开始 happy 的上学时光了。

总结：计算机中的同步就是排队等待，假如你是第一百零一个备胎，那你只能等前面的一百个爆了之后才能‘处理’你。异步就是，尽管你是第一百零一个，她还是能照顾到你的感受。
四、js 单线程为什么会有 ’ 异步 ’ 问题
看完前面的铺垫你是否会产生这些疑问，JS 是单线程的，那么他是如何是实现异步操作的？AJAX 异步发送和回调请求，还有 setTimeout 也看起来像是多线程的？不急慢慢来
js 是同步的？
是的，单线程，那肯定只能同步 (排队) 执行咯
js 为什么需要异步?
如果 JS 中不存在异步, 只能自上而下执行, 万一上一行解析时间很长, 那么下面的代码就会被阻塞。对于用户而言, 阻塞就意味着 ” 卡死 ”, 这样就导致了很差的用户体验
js 单线程又是如何实现异步的呢?
通过 事件循环(event loop) 实现 ’ 异步 ’
经典问题：
setTimeout(function(){
console.log(‘1’)
},0)
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。