給程序員看的Javascript攻略（完結）－異步

時間 2019-11-25

原文原文鏈接

原文發表在: holmeshe.me , 本文是漢化重製版。javascript

本系列在 Medium上同步連載。html

用ajax胡亂作項目的時候踩過好多坑，而後對JS留下了「很是詭異」的印象。系統學習後，發現這個構建了整個互聯網表層的語言其實很是666。此次的學習已經告一段落，本篇也是這個系列的最後一部分。回頭看來，把學習記錄發出來這個經歷挺奇特的，之前是寫了給本身看，如今隨便搞搞發來掘金就3000＋的總閱讀，頓時感受有意義了不少。因此我也想明白了，你看，我就有動力寫。java

其實沒啥新鮮的

簡單來說，異步有兩層含義，1）讓慢操做不要阻塞；2）非線性觸發事件。稍稍講深一點，在操做系統裏，事件也叫中斷，這裏一次中斷能夠表明一個網絡收包，一次時鐘，或者一次鼠標點擊，等。那從技術上層面看，一個事件能夠中斷當前進程，掛起下一條指令，而且「異步地」調用一個預設好的代碼塊（事件處理函數）。

應用層也同樣。

阻塞操做的問題

狹義來講，異步能夠解決應用阻塞（通常是I/O）的問題。爲啥要聊異步必定要說阻塞呢？那咱們從頭來看看。每個帶UI的應用（不管是嵌入式的，仍是APP，遊戲仍是一個網頁），底下都一個循環在很是快的刷新屏幕，那若是這個循環被阻塞了，好比在這個循環上進行了一次網絡請求，UI就卡了，用戶也就跑了。而JavaScript就跑在這個循環上。

此次要先作點實驗前準備。

首先，下載 Moesif Origin & CORS Changer。這個用來讓Chrome給咱們的跨站請求放行。

而後，咱們用Python來實現一個慢服務（API）：

from flask import Flask
import time
app = Flask(__name__)
@app.route("/lazysvr")
def recv():
  time.sleep(10)
  return "ok"
if __name__ == "__main__":
  app.run(host='***.***.***.***', threaded=True)複製代碼

而後咱們打開 Moesif Origin & CORS Changer，（否則請求直接失敗返回了），而後咱們跑例子：

<html>
<head>
</head>
<body>
  <button type="button">Click Me!</button> 
  <script>
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", "http://***.***.***.***:5000/lazysvr", false ); // false for synchronous request
    xmlHttp.send( null ); // the thread is suspended here
    alert(xmlHttp.responseText);
  </script>
</body>
</html>複製代碼

若是咱們打開開發者面板，能夠很容易觀察到，代碼會卡在下面這行：

xmlHttp.send( null ); // it is the aforementioned blocking operation複製代碼

在卡住的這10秒左右，按鈕是點不動的，而後瀏覽器纔會跳出彈窗：

ok複製代碼

而且，Chrome會抱怨：

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/.複製代碼

暫且把這個看成對這個問題的官方描述吧。

來一波異步

廣義來說，如下的都屬於異步操做：

1）把慢操做放到其它線程執行；

2）由外部觸發的事件；

3）二者的混合。

下面我會舉三個例子來講明

第一個🌰，收包

這個例子的代碼也能夠解決上節的阻塞問題，

打上碼：

<html>
<head>
</head>
<body>
  <button type="button">Click Me!</button> 
  <script>
    var xmlHttp = new XMLHttpRequest();
--  xmlHttp.open( "GET", "http://192.241.212.230:5000/lazysvr", false );
++  xmlHttp.open( "GET", "http://192.241.212.230:5000/lazysvr", true ); // 1) change the param to "true" for asynchronous request

++  xmlHttp.onreadystatechange = function() { // 2) add the callback
++    if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
++      alert(xmlHttp.responseText);
++    }
    }

    xmlHttp.send(); 
--  alert(xmlHttp.responseText);
  </script>
</body>
</html>複製代碼

在上面的代碼裏，咱們1）把open()的第二個參數變成「true」，這樣能夠把慢操做負載到其它線程上去；2）註冊一個回調函數來監聽收報事件。這個回調函數在網絡交互完成後會被當即執行。

此次按鈕就能夠點了，而後

ok複製代碼

也按照預期彈出。

再來一個，時鐘週期

直接先打上碼：

setTimeout(callback, 3000);
function callback() {
  alert(‘event triggered’);
}複製代碼

注意1，JS從一開始就沒有同步的sleep()函數；

注意2，和開始說的OS不同，這個時鐘是絕對不會觸發進程調度的，正如以前提到，全部的JS代碼都是運行在一條線程上。

第三個，點擊鼠標

<html>
<head>
</head>
<body>
  <button type=」button」 onclick=」callback()」>Click Me!</button> 
  <script>
    function callback() {
      alert(‘event triggered’);
    }
  </script>
</body>
</html>複製代碼

在上面的三個例子中，咱們都給特定的事件（由非主循環觸發）註冊了回調函數。在第一個例子裏，咱們還把一個慢操做負載到了其它線程來解決卡死的問題。全部這些操做均可以用一個詞來歸納，異步！

新的fetch()接口

在第一個🌰中，我用回調來舉例是由於比較直觀。其實更好的辦法是用fetch()來進行網絡請求。這個函數會返回一個Promise對象，再用這個對象調用then()函數的話：python

1. 異步操做的代碼就能夠變成線性（更像同步）了；web

2. 回調地獄的問題能夠獲得解決了；ajax

3. 全部的相關異常，能夠在一個代碼塊裏處理了：chrome

<html>
<head>
</head>
<body>
  <button type=」button」 onclick=」callback()」>Click Me!</button>
   <script>
    fetch(‘http://***.***.***.***:5000/lazysvr') .then((response) => { return response.text(); }).then((text) => { alert(text); }).catch(function(error) { console.log(‘error: ‘ + error.message); }); </script> </body> </html>複製代碼

運行結果和第一個🌰同樣，我仍是留了按鈕給你試UI有沒有卡。flask

底層機制，多線程＋事件循環

JS不是單線程嗎？

答案是，便是也不是。什麼意思？vim

var i;
for (i = 0; i < 1000; i++) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open( "GET", "http://***.***.***.***:5000/lazysvr", true );
  xmlHttp.onreadystatechange = function() {
     if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        alert(xmlHttp.responseText);
    }
  } // end of the callback
  xmlHttp.send( null );
}複製代碼

假設瀏覽器的pid是666（巧了，我作這個測試的時候還真是），咱們用一小段腳本（環境是Mac）原本觀察線程狀態：數組

#!/bin/bash
while true; do ps -M 666; sleep 1; done複製代碼

初始值（我把無關的列和行都幹掉了）：

USER     PID ... STIME    UTIME
holmes   666 ... 0:00.42  0:01.47
 ......
         666     0:00.20  0:00.64複製代碼

結束的時候：

USER     PID ... STIME    UTIME
holmes   666 ... 0:00.50  0:01.88
 ......
         666     0:00.37  0:01.28複製代碼

除了主線程，還有一條很是活躍的線程，我估摸着這條是用來監聽網絡的（多路複用）套接字。

因此JS代碼確實是運行在一條線程裏。可是若是從應用程序的角度來看，它實際上是多線程。用一樣的辦法測一下Node吧。

「粗」暴的事件循環

上文提到，操做系統的中斷是以指令爲粒度的，可是這個傳說中的事件循環，粒度就有點大了：

var i;
for (i = 0; i < 3; i++) {
  alert(i);
}
setTimeout(callback, 0);
function callback() {
  alert(‘event triggered’);
}複製代碼

咱們都知道結果是：

1
2
3
event triggered複製代碼

簡單來講呢，雖然咱們註冊了一個定時事件，而且指定它當即執行，可是JS引擎仍是在運行時忠實的把本次循環跑完，纔會去理剛剛註冊的那個事件。

這個表明通常事件中斷是以指令週期爲單位，而JS是以循環週期爲單位的。

有點尷尬了，這麼大粒度的事件處理會不會致使UI響應時間長呢？我以爲其實不會。即便在以指令週期爲單位的事件響應裏，用戶的操做仍是須要在本次"循環週期"結束放到主線程來，而後反映到UI。由於一切UI更新都要在主線程。因此，這個極其簡化的單線程設計自己並不會對UI性能形成影響。你以爲呢？

遲到的總結

這個系列中，我覆蓋了在JS裏被細化的 "等於" 操做符和 "null" 值，被簡化的字符串，數組，對象和字典。而後我在這篇和這篇裏深刻到prototype這一層進一步討論了一下對象。最重要的是，我三次說起了this的坑：

第一次

第二次

第三次

說明真的很重要。

最後就是本篇了，用我理解的角度聊了一下異步。

若是你還記得的話，這個系列是我爲新工做（臨時）學JS準備的。以如今上手程度來看，我以爲這個底子打的還不錯，但願對你也同樣。可是這個文章並不全面，因此我準備了以下的附加閱讀：

JavaScript types

Closure

The debug technique 我用來調試的方法

這篇頗有趣，我第一次讀到，但願有機會能翻譯 interesting topic

Another place to understand 「this」

More about event loop

A good blog, 最重要的事,

常來掘金看篇。

最後要認可第一段的結構是模仿喬幫主在第一次蘋果（iPhone1）發佈會的經典段式。（寫這篇文章的時候，實在被最新的發佈會感動了一把）。若是沒看過去找找吧。

感謝閱讀，後會有期！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

給程序員看的Javascript攻略（完結）－ 異步