Javascript - Event Loop

Javascript - Event Loop

江湖在走, EvenLoop 要懂.

開始用JavaScript嘗試為世界做些什麼之前, 先把Event Loop弄懂可以讓作品更討喜

這次參考的學習資料是 youtube - JSconf的教學影片, 連結如下

Review and respect to:

結論:

最重要的就是實際應用啦

透過影片裡面的例子可以知道

什麼是該去避免跟如何避免

趕時間的朋友可以花5分鐘

把下面精簡過的內容讀過一次

有時間的朋友建議把上面連結的影片看完

真的很有時間的朋友可以先看過我的說明後再去看連結的影片...

名詞介紹:

RunTime: 這邊指的針對javascript的運作環境

Single Threaded: Javascript是單線程的程式語言, 主程式碼(main)會被安排到要執行
的堆疊中(stack). 而且一次只會做一件事情.

Stack: 程式會從底部開始進行堆疊, 而是從最上方開始逐個執行, 執行完後從stack移除

Heap: 被物件占用的記憶體

Web API: 可以簡單理解為瀏覽器以及其背後的伺服器

Task Queue: 這邊可以想像為是一個等待區域. 準備好很多事情要放入Stack裡面去做.
但是TaskQueue很有人性, 它會等Stack手上是空著的時候才會丟任務進去.
而且也是一次丟一項而已. 這麼好的主管去哪裡找.

So, What is Event Loop?

當面試的時候, 如果被問到這個問題. what's event loop of JavaScript.

中文有人稱作事件循環. 但是我覺得有點詞不達意. 我個人是理解為javaScript的作業流程

只要劃出下面這個圖, 至少先拿二十分.

#1 程式碼中的動作會依序放入STACK中 (STACK是唯一做事的人, 所以用大寫給予尊重)

#1.5 STACK中的階段性任務(其中一段程式碼)執行完後
需要變更資料的就變更, 需要輸出的就會直接輸出

#2 需要Web API處理的事項就會移除STACK交付給 Web API處理. 不會卡在STACK

#3 而Web API執行完後還有需要執行任務就會丟到task queue這邊等待派送到stack進行處理

#4 task queue會等STACK清空後, 把等待中的任務一個一個交給STACK處理

範例介紹

影片中: 22:00處

Delay() 這邊表示很龐大的程式碼, 需要較長的時間來處理

如果在stack中安排了這類的程式碼, 程式運行必須要先處理完這個大傢伙才能繼續往後走

當這種大傢伙很多的時候, 就會覺得程式運行起來很卡.

學術一點講就是安排了太多任務在同步處理. (Synchronous)

這邊使用同步不是很多任務同時進行而是說在同一個步驟下進行. 中文很難我知道

影片中用這個範例清楚的說明如果不尊重Event Loop會發生什麼事情

其中一個解決方法就是盡量運用非同步的方式去處理. 影片範例

(Async Callback & Call Stack). 使用非同步語法把任務盡量都丟出去讓別人去做

然後把消化好的CallBack到Task Queue這邊等待處理. 主程式就不會卡住了

by the way. setTimeout()是瀏覽器喔API喔

SteveNoJob