同步和异步产生的原因
归根到底,JavaScript是一门“单线程”语言,不可以另外开辟线程
js为何是单线程的?
JavaScript的单线程与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是为来实现用户与浏览器的交互。
这就决定了它只能是单线程的,否则会带来很复杂的同步问题,比如:假定有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?
为了避免这种复杂性,从一诞生,JavaScript就是单线程了,这已经成这门语言的核心特征
注:所谓单线程,是指在js引擎中负责解释和执行JavaScript代码的线程只有一个
计算机中的同步和异步
计算机领域的同步(Synchronous)和异步(Asynchronous)和我们生活中的同步和异步的概念是恰好相反的。
生活中的同步:突出的是 “同” 这个字,一起行动,一起做某件事
生活中的异步:你忙你的,我忙我的,互不干扰,没有联系
计算机中的同步:就是排队等候,存在任务队列,不允许插队,必须得等到 前面得任务完成后才执行后面得。
计算机中的异步:排队等候时,挂了号,在等待这期间,可以去执行别的任务,等到叫号时,又回来处理任务
JavaScript的同步和异步
注:JavaScript时单线程的,所以JavaScript同步和异步,无论如何,在做事情的时候就只有一条流水线,同步和异步的差别就在于这条流水线上各个流程的执行顺序不同
同步:
就是指如果有多个任务就必须去排队,前面任务执行完毕后,后面任务再执行,就像一条流水线,仅仅是一条流水线,同时只能做一件事情,要么加工,要么包装,不能同时进行多个任务和流程。
如果一个任务比较耗时,但是其他任务会一致等到这个任务执行完毕后再去执行其他的任务:
function wait(){
var time = (new Date()).getTime();//获取当前时间戳
var time2 = (new Date()).getTime();
while(time2-time > 5000){
time2 = (new Date()).getTime()
}
console.log('5秒过去了')
}
wait();
console.log('太慢了')
上面的代码,函数wait是一个耗时程序,持续五秒,在它执行的过程中,下面的console.log()函数只能等待,这就是同步。
异步:
如果函数返回的时候,调用者还不能够得到预期结果,而是将通过一定手段得到就是异步。也就是排队时挂了号,在等待时先去做其他的事情,等到叫号,回去做等待的事情。setTimeout,setInterval和AJAX就是最基础的异步函数。
function wait() {
setTimeout(function(){
console.log('5秒过去了')
},5000)
}
wait();
console.log('太慢了')
上面代码,setTimeout就是一个异步函数,在执行过程中,先执行了下面的console.log()函数。
JavaScript中的异步:
JavaScript是单线程的,那么它是如何实现异步操作的?为什么需要异步?
如果在JavaScript中不存在异步,只能同步,自上而下执行,万一上一行的解析时间很长,那么下面的代码就会被阻塞,对于用户而言,就意味着 “卡死” ,导致很差的用户体验。
JavaScript如何实现异步:
通过事件循环(event loop)实现 “异步”
首先要了解JS任务分类方式:同步任务和异步任务
虽然JavaScript是单线程的,但是浏览器的内核是多线程的,在浏览器的内核中不同的异步操作由不同的浏览器内核模块调度执行,异步操作会将相关的回调添加到任务队列中。
而不同的异步操作添加到任务队列的时机也不相同,如DOM操作,setTimeout,ajax等,处理方式都不同,这些异步操作是由浏览器内核的Webcore来执行的,webore包含各种API.
按照这种分类方式:JavaScript的执行机制是:
- 首先判断js代码是同步还是异步,同步就进入主线程,形成一个执行栈(execution context stack),异步就进入event table
- 异步任务在event table中注册函数,当满足触发条件时,被推出event queue
- 同步任务进入主线程执行栈后一直执行,直到主线程空闲执行栈中所有同步任务执行完毕,才会去event queue中查看是否有可执行的异步任务,如果有就推入主线程执行栈中
- 上述过程会不断重复,就是 event loop
本文参考:https://blog.csdn.net/qq_22855325/article/details/72958345
https://www.jb51.net/article/158992.htm