首頁  >  文章  >  web前端  >  關於JavaScript同步與非同步程式設計實例用法

關於JavaScript同步與非同步程式設計實例用法

伊谢尔伦
伊谢尔伦原創
2017-06-16 10:20:012184瀏覽

如果你想深入學習下javascript,就看看下面這篇文章吧,或許對你有幫助喔。

前言

如果你有志於成為優秀的前端工程師,或是想要深入學習JavaScript,非同步程式設計是不可或缺的知識點,這也是區分初級,中級或高階前端的依據之一。如果你對非同步程式設計沒有太清晰的概念,那麼我建議你花點時間學習JavaScript非同步編程,如果你對非同步程式有自己的獨特理解,也歡迎閱讀本文,一起交流。

同步與非同步

介紹非同步之前,回顧一下,所謂同步編程,就是電腦一行一行依序執行程式碼,目前程式碼任務耗時執行會阻塞後續程式碼的執行。

同步編程,也就是典型的請求-回應模型,當請求呼叫函數或方法後,需等待其回應返回,然後執行後續程式碼。

一般情況下,同步編程,代碼按順序依次執行,能很好的保證程序的執行,但是在某些場景下,比如讀取文件內容,或請求伺服器接口數據,需要根據返回的資料內容執行後續操作,讀取檔案和請求介面直到資料返回這一過程是需要時間的,網路越差,耗費時間越長,如果按照同步程式設計方式實現,在等待資料返回這段時間,JavaScript是不能處理其他任務的,此時頁面的交互,滾動等任何操作也會被阻塞,這顯然是及其不友好,不可接受的,而這正是需要異步編程大顯身手的場景,如下圖,耗時任務A會阻塞任務B的執行,等到任務A執行完才能繼續執行B:

關於JavaScript同步與非同步程式設計實例用法

當使用非同步程式設計時,在等待目前任務的回應返回之前,可以繼續執行後續程式碼,即目前執行任務不會阻塞後續執行。

非同步編程,不同於同步編程的請求-回應模式,其是一種事件驅動編程,請求呼叫函數或方法後,無需立即等待回應,可以繼續執行其他任務,而之前任務回應返回後可以透過狀態、通知和回呼來通知呼叫者。

多執行緒

前面說明了非同步程式設計能很好的解決同步程式阻塞的問題,那麼實現非同步的方式有哪些呢?通常實現非同步方式是多線程,如C#, 即同時開啟多個線程,不同操作能並行執行,如下圖,耗時任務A執行的同時,在線程二中任務B也可以執行:

關於JavaScript同步與非同步程式設計實例用法

JavaScript單執行緒

JavaScript語言執行環境是單執行緒的,單執行緒在程式執行時,所走的程式路徑依照連續順序排下來,前面的必須處理好,後面的才會執行,而使用非同步實作時,多個任務可以並發執行。那麼JavaScript的非同步程式設計如何實現呢,下一節將詳細闡述其非同步機制。

並行與並發

前文提到多執行緒的任務可以並行執行,而JavaScript單執行緒非同步程式設計可以實現多任務並發執行,這裡有必要說明一下並行與並發的差異。

  • 並行,指同一時刻內多任務同時進行;

  • 並發,指在同一時間段內,多任務同時進行著,但是某一時刻,只有某一任務執行;

通常所說的並發連接數,是指瀏覽器向伺服器發起請求,建立TCP連接,每秒鐘伺服器建立的總連接數,而假如,伺服器處10ms能處理一個連接,那麼其並發連接數就是100。

JavaScript非同步機制

本節介紹JavaScript非同步機制,首先來看一個範例:

    for (var i = 0; i < 5; i ++) {
        setTimeout(function(){
            console.log(i);
        }, 0);
    }
    console.log(i);
    //5 ; 5 ; 5 ; 5; 5

應該要明白最後輸出的全是5:

  1. i在此處是for迴圈所在上下文環境的變量,有且只有一個i;

  2. #循環結束時i==5;

  3. #JavaScript單執行緒事件處理器在執行緒空閒前不會執行下一事件。

如上第三個所述,如果要真正理解上述範例中的setTimeout(),以及JavaScript非同步機制,就需要理解JavaScript的事件循環和並發模型。

並發模型(Concurrency model)

目前,我們已經知道,JavaScript執行非同步任務時,不需要等待回應返回,可以繼續執行其他任務,而在回應返回時,會得到通知,執行回調或事件處理程序。那麼這一切具體是如何完成的,又以什麼規則或順序運作呢?接下來我們需要解答這個問題。

註:回呼和事件處理程序本質上並無差別,只是在不同情況下,不同的叫法。

前文已經提到,JavaScript非同步程式設計使得多個任務可以並發執行,而實現這項功能的基礎是JavScript擁有一個基於事件循環的並發模型。

堆疊與佇列

介紹JavaScript並發模型之前,先簡單介紹堆疊與佇列的差異:

  • 堆疊(heap):記憶體中某一未被阻止的區域,通常儲存物件(引用類型);

  • 堆疊(stack):後進先出的順序儲存資料結構,通常儲存函數參數和基本類型值變量(按值存取);

  • 佇列(queue):先進先出順序儲存資料結構。

事件循環(Event Loop)

JavaScript引擎負責解析,執行JavaScript程式碼,但它並不能單獨運行,通常都得有一個宿主環境,一般如瀏覽器或Node伺服器,前文說到的單線程是指在這些宿主環境中創建單一線程,提供一種機制,調用JavaScript引擎完成多個JavaScript程式碼區塊的調度,執行(是的,JavaScript程式碼都是按塊執行的),這種機制就稱為事件循環(Event Loop)。

注:这里的事件与DOM事件不要混淆,可以说这里的事件包括DOM事件,所有异步操作都是一个事件,诸如ajax请求就可以看作一个request请求事件。

JavaScript执行环境中存在的两个结构需要了解:

  • 消息队列(message queue),也叫任务队列(task queue):存储待处理消息及对应的回调函数或事件处理程序;

  • 执行栈(execution context stack),也可以叫执行上下文栈:JavaScript执行栈,顾名思义,是由执行上下文组成,当函数调用时,创建并插入一个执行上下文,通常称为执行栈帧(frame),存储着函数参数和局部变量,当该函数执行结束时,弹出该执行栈帧;

注:关于全局代码,由于所有的代码都是在全局上下文执行,所以执行栈顶总是全局上下文就很容易理解,直到所有代码执行完毕,全局上下文退出执行栈,栈清空了;也即是全局上下文是第一个入栈,最后一个出栈。

任务

分析事件循环流程前,先阐述两个概念,有助于理解事件循环:同步任务和异步任务。

任务很好理解,JavaScript代码执行就是在完成任务,所谓任务就是一个函数或一个代码块,通常以功能或目的划分,比如完成一次加法计算,完成一次ajax请求;很自然的就分为同步任务和异步任务。同步任务是连续的,阻塞的;而异步任务则是不连续,非阻塞的,包含异步事件及其回调,当我们谈及执行异步任务时,通常指执行其回调函数。

事件循环流程

关于事件循环流程分解如下:

  1. 宿主环境为JavaScript创建线程时,会创建堆(heap)和栈(stack),堆内存储JavaScript对象,栈内存储执行上下文;

  2. 栈内执行上下文的同步任务按序执行,执行完即退栈,而当异步任务执行时,该异步任务进入等待状态(不入栈),同时通知线程:当触发该事件时(或该异步操作响应返回时),需向消息队列插入一个事件消息;

  3. 当事件触发或响应返回时,线程向消息队列插入该事件消息(包含事件及回调);

  4. 当栈内同步任务执行完毕后,线程从消息队列取出一个事件消息,其对应异步任务(函数)入栈,执行回调函数,如果未绑定回调,这个消息会被丢弃,执行完任务后退栈;

  5. 当线程空闲(即执行栈清空)时继续拉取消息队列下一轮消息(next tick,事件循环流转一次称为一次tick)。

使用代码可以描述如下:

    var eventLoop = [];    var event;    var i = eventLoop.length - 1; // 后进先出

    while(eventLoop[i]) {        event = eventLoop[i--]; 
        if (event) { // 事件回调存在
            event();
        }        // 否则事件消息被丢弃
    }

这里注意的一点是等待下一个事件消息的过程是同步的。

并发模型与事件循环
    var ele = document.querySelector(&#39;body&#39;);    function clickCb(event) {        console.log(&#39;clicked&#39;);
    }    function bindEvent(callback) {
        ele.addEventListener(&#39;click&#39;, callback);
    }    

    bindEvent(clickCb);

针对如上代码我们可以构建如下并发模型:

關於JavaScript同步與非同步程式設計實例用法

如上图,当执行栈同步代码块依次执行完直到遇见异步任务时,异步任务进入等待状态,通知线程,异步事件触发时,往消息队列插入一条事件消息;而当执行栈后续同步代码执行完后,读取消息队列,得到一条消息,然后将该消息对应的异步任务入栈,执行回调函数;一次事件循环就完成了,也即处理了一个异步任务。

再谈關於JavaScript同步與非同步程式設計實例用法

了解了JavaScript事件循环后我们再看前文关于關於JavaScript同步與非同步程式設計實例用法的例子就比较清晰了:

關於JavaScript同步與非同步程式設計實例用法所表达的意思是:等待0秒后(这个时间由第二个参数值确定),往消息队列插入一条定时器事件消息,并将其第一个参数作为回调函数;而当执行栈内同步任务执行完毕时,线程从消息队列读取消息,将该异步任务入栈,执行;线程空闲时再次从消息队列读取消息。

再看一个实例:

    var start = +new Date();    var arr = [];

    setTimeout(function(){        console.log(&#39;time: &#39; + (new Date().getTime() - start));
    },10);    for(var i=0;i<=1000000;i++){
        arr.push(i);
    }

执行多次输出如下:

關於JavaScript同步與非同步程式設計實例用法

setTimeout异步回调函数里我们输出了异步任务注册到执行的时间,发现并不等于我们指定的时间,而且两次时间间隔也都不同,考虑以下两点:

  • 在读取消息队列的消息时,得等同步任务完成,这个是需要耗费时间的;

  • 消息队列先进先出原则,读取此异步事件消息之前,可能还存在其他消息,执行也需要耗时;

所以异步执行时间不精确是必然的,所以我们有必要明白无论是同步任务还是异步任务,都不应该耗时太长,当一个消息耗时太长时,应该尽可能的将其分割成多个消息。

Web Workers

每个Web Worker或一个跨域的iframe都有各自的堆栈和消息队列,这些不同的文档只能通过postMessage方法进行通信,当一方监听了message事件后,另一方才能通过该方法向其发送消息,这个message事件也是异步的,当一方接收到另一方通过postMessage方法发送来的消息后,会向自己的消息队列插入一条消息,而后续的并发流程依然如上文所述。

JavaScript异步实现

关于JavaScript的异步实现,以前有:回调函数,发布订阅模式,Promise三类,而在ES6中提出了生成器(Generator)方式实现,关于回调函数和发布订阅模式实现可参见另一篇文章,后续将推出一篇详细介绍Promise和Generator。

以上就是javascript同步与异步的全部内容了,感谢大家的阅读。關於JavaScript同步與非同步程式設計實例用法


以上是關於JavaScript同步與非同步程式設計實例用法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn