重学js之同步异步

末蓝、 2023-01-05 12:44 187阅读 0赞

### 了解异步 ###

> 要比较同步和异步，可以将调用函数的过程分成两部分：**执行操作和返回结果**  
> 程序在**同步**调用函数的时候，会**立即执行**操作并等待**得到返回结果后再继续运行，也就是说同步执行是阻塞的。**  
> 而**异步**会将操作和结果在时间上分隔开来，在当下执行操作，在未来某个时刻返回结果，在这个等待返回结果的过程中，程序将继续执行后面的代码。也就是说**异步执行是非阻塞的。**

> 举一个例子：

function syncAdd(a, b) { 
    	return a + b;
    }
    asyncAdd(1, 2) // 立即得到结果: 3
    function asyncAdd(a, b, cb) { 
    	setTimeout(function() { 
    		console(a + b)
    	}, 1000)
    }
    asyncAdd(a, 2) // 1s后得到结果: 3

> 从上面例子可以看出  
> 异步操作一般情况下都是采用回调函数的形式

var a = { 
    	counter: { 
    		index: 1
    	}
    }
    console.log(a) // 2
    a.counter.index++
    这时候我们会想:为什么会是2呢，这明明是同步的操作，
    原因是由于浏览器在运行代码的时候,把控制台打印这种涉及I/O的操作进行了延迟执行
    这nm竟然是异步的？

> 这里抛出两个问题:  
> 并非所有的异步都是回调函数, 那么反过来问, 所有的回调函数也并非都是异步执行的  
> 如高阶函数中forEach, call

### 异步原理 ###

#### 事件循环 ####

> 众所周知, javascript是一门单线程语言, 但是浏览器又能够很好的处理异步请求?这是为什么?

#### 浏览器执行线程 ####

浏览器是多进程的, 浏览器每一个tab标签都代表一个独立的进程,其中浏览器渲染进程(浏览器内核)属于浏览器多进程中的一种, 主要负责页面渲染,脚本执行,事件处理等操作
    其包含的线程有：GUI 渲染线程（负责渲染页面，解析 HTML，CSS 构成 DOM 树）、JS 引擎线程、事件触发线程、定时器触发线程、http 请求线程等主要线程

#### 任务队列 ####

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
    
    如果排队是因为计算量大，CPU忙不过来，倒也算了，但是很多时候CPU是闲着的，因为IO设备（输入输出设备）
    很慢（比如Ajax操作从网络读取数据），不得不等着结果出来，再往下执行。
    
    JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务。
    等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。
    
    所以所有的人物可以分为两种,一个是同步任务(synchronous)，另一种是异步任务(asynchronous)，
    同步任务指的是,在主线程上排队执行的任务, 只有上一个任务执行完毕才能执行后一个任务;
    异步任务指的是,不进入主线程，而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行
    了之后,该任务才会进入主线程执行。

![任务队列][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTg2ODQw_size_16_color_FFFFFF_t_70]

用一个永不停止的while循环来表示事件循环,每一次循环称为一个tick。
    对每个 tick 而言，如果在队列中有等待事件，那么就会从队列中获取一个事件并执行，这些事件通常是回调函数的形式。
    
    var eventLoop = [] // 事件队列, 先进先出
    var event; // 事件执行成功的回调函数
    while(true) { 
    	// 一次tick
    	if (eventLoop.length > 0) { 
    		// 队列中取出回调函数
    		event = eventLoop.shift()
    		try { 
    			event();
    		} catch (err) { 
    			reportError(err)
    		}
    	}
    }
    那么这个事件队列里面的事件是怎么来的呢?
    以AJAX请求为例,当我们发出一个 AJAX 请求时，浏览器会将请求任务分派给网络线程来进行处理
    ，当对应的网络线程拿到返回的数据之后，就会把回调函数插入到事件队列中。
    setTimeout 和 setInterval 也是同样的道理，当我们执行 setTimeout 的时候并不是直接把回调函数放入事件队列中。
    它所做的是交给定时器线程来处理，当定时器到时后，再把回调函数放在事件队列中，
    这样，在未来的某轮 tick 中获取并执行这个回调函数。
    
    这么做有一个隐性的问题，如果事件队列中已经有其他事件，那么这个回调就会排队等待。
    
    所以说 setTimeout/setInterval 定时器的精度并不高。准确地说，它只能确保回调函数不会在指定的时间间隔之前运行，
    但可能会在那个时刻运行，也可能在那之后运行，这就要根据事件队列的状态而定。

#### 事件队列 ####

> 在讲述 setTimeout/setInterval 原理的时候也暴露了事件队列的一个缺陷：**事件队列按照先进先出的顺序执行，那么如果队列较长时，排在后面的事件即使较为“紧急”，也得需要等待前面的任务先执行完成。**  
> js解决这个问题的思路是: **设置多个队列,按照优先级来执行**

如下:

> 函数 f1 通过定时器 setTimeout 向绿色队列中插入一个控制台打印任务，输出数字 1；  
> 函数 f2 通过 Promise 向红色队列中插入一个控制台打印任务，输出数字 2；  
> 函数 f3 通过定时器 setTimeout 向绿色队列中插入一个回调函数，该回调函数会调用控制台打印数字 3，并且调用函数 f2；  
> 函数 f4 通过 Promise 向红色队列中插入一个回调函数，该回调函数会调用控制台打印数字 4，并且调用函数 f1。

function f1() { 
      setTimeout(console.log.bind(null,1), 0)
    }
    function f2() { 
      Promise.resolve().then(console.log.bind(null,2))
    }
    function f3() { 
      setTimeout(() => { 
        console.log(3)
        f2()
      }, 0)
    }
    function f4() { 
      Promise.resolve().then(() => { 
        console.log(4)
        f1()
      }
    }
    f3()
    f4()

> 结果: 4321 猜到了吧  
> 思路:  
> 先触发f3,f4，其中f3中的**setTimeout**，其回调函数被分发带宏任务的Event Queue中,然后执行f4,遇到**Promise**其then函数被分发到微任务Event Queue中,执行f1,遇到setTimeout,其回调分发到宏任务队列中,  
> 执行顺序: 首先**微任务**遵循先进先出原则，4， 3， 2，1

##### Example 2 #####

console.log('script start');
    
    setTimeout(function() { 
      console.log('timeout1');
    }, 10);
    
    new Promise(resolve => { 
        console.log('promise1');
        resolve();
        setTimeout(() => console.log('timeout2'), 10);
    }).then(function() { 
        console.log('then1')
    })
    
    console.log('script end');

> 首先，事件循环从宏任务 (macrotask) 队列开始，最初始，宏任务队列中，只有一个 scrip t(整体代码)任务；当遇到任务源 (task source) 时，则会先分发任务到对应的任务队列中去。所以，就和上面例子类似，  
> 首先遇到了console.log，输出 script start； 接着往下走，  
> 遇到 setTimeout 任务源，将其分发到任务队列中去，记为 timeout1；  
> 接着遇到 promise，new promise 中的代码立即执行，输出 promise1,  
> 然后执行 resolve ,遇到 setTimeout ,将其分发到任务队列中去，记为 timemout2, 将其 then 分发到微任务队列中去，记为 then1；  
> 接着遇到 console.log 代码，直接输出 script end  
> 接着检查微任务队列，发现有个 then1 微任务，执行，  
> 输出then1 再检查微任务队列，发现已经清空，则开始检查宏任务队列，  
> 执行 timeout1,输出 timeout1；  
> 接着执行 timeout2，输出 timeout2  
> 至此，所有的都队列都已清空，执行完毕。其输出的顺序依次是：script start, promise1, script end, then1, timeout1, timeout2

> 总结:  
> 宏任务: script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)  
> 微任务: Promise、MutaionObserver、process.nextTick(Node.js 环境)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTg2ODQw_size_16_color_FFFFFF_t_70]: /images/20221119/5cdd8a2385f34f4585c15097a5c80432.png