close
javascript是一個單一執行緒（thread）的語言，
其concurreny的特性是基於event（像是Button的onclick、Mouse的onfocus......等），
javascript裡面的event存在listener，來監聽事件的發生，而事件的回應處理則是由handler負責。
隨者瀏覽器版本不斷更新，前端已經足以處理許多事情，而不需經由後端，
前端可以做的事情就交給前端處理吧！
然而，由於javascript是單一執行緒（single thread），
當執行較龐大的運算時，這時網頁會鎖住（hang、blocked），
這時網頁上的所有element（例：Button, Input text box）不管你怎麼點都沒有反應，
直到運算完成，網頁的才又恢復了正常的狀態。
咦~那這樣的話使用者在瀏覽網頁不是就會經歷網頁整個blocked，
直到運算完成才恢復正常。
甚至，如果該運算所需的時間較久，
有些瀏覽器還會跳出警告訊息，
提醒使用者「瀏覽器正被龐大的資源佔據，因此暫無回應.....」。
我把前端可以處理的事情交給前端處理了，但卻遇到上述的情況，跟怎麼做呢？
HTML5有定義了讓javascript能實現多執行緒（multi-thread）的標準API，
就是本篇文章的重點Web Worker。
網路上有許多資源介紹甚麼是Web Worke，以及怎麼去使它、使用上的限制。
推薦幾個不錯的網站：
感覺還是有點模糊，來看個例子吧！
網頁上有兩種計算費式數列的按鈕，
一個是使用web worker，另一個是使用main thread。
在input box上輸入較小的數字，使用者可能還感受不到明顯的差異，
但輸入的數字越大（筆者測試大約為30幾時），使用main thread來計算，
會發現按下按鈕後，網頁上的計時短暫停止了，
直到出現result計算完成count才繼續加1。
也就是在計算及果的期間，網頁上所有的元素都被blocked了，
這時不管你怎麼點網頁都不會有反應，
這就是單一執行緒，一件事情完成才能繼續處理其他事情。
甚至，當網頁回應時間太久，瀏覽器還會出現提示訊息，
筆者測試輸入50來計算費氏數列，就出現了提示訊息：
Firefox
Chrome
來看看程式碼吧！
下面是部份的HTML檔，
內容有id為worker的script（或是可以在專案中include .js檔），
這個script供worker使用
下面是js檔，一樣有計算費是數列的函式（第21行），
提供給main thread使用
當按下id為 calBtn1的按鈕（第6行），
是使用web worker多執行緒的做法來計算，
按下id為 calBtn2的按鈕（第26行），
是使用main thread單一執行緒的做法來計算。
可以使用reset按鈕（第32行）將counter歸零，並且在使用範例的過程中，
也可以觀察到當輸入數字較大時，
按下id為 calBtn2的按鈕，counter的加1會有延遲，
直到算完成才繼續。
但若是按下id為 calBtn1的按鈕，無論計算完成與否，
counter還是繼續加1。
範例網址：
https://codepen.io/jialin128/full/NwLYaY/
請不吝指教 =)
文章標籤
全站熱搜
留言列表
