WebWork（在主線程建立子進程）

WebWork淺談

• 前言：

1. 都知道JS是單線程語言，最讓人頭疼的莫過於在網絡正常的狀況下常常出現頁面的假死，
2. 以及在進行大量的for循環計算時會致使線程阻塞,因爲要進行大量的計算JS後面的運行會被阻隔在此處，使得性能較差，代碼維護性差等一系列的問題發生。
3. 本人也看了不少關於webwork的demo和官方的講解，都說是官方不少都不是很容易讀懂，在最近幾天的學習過程我也針對這個作了些功課發現了webwork的做用非同通常！

• 先上代碼：

let worker = new Worker("work.js")//此處寫待處理的地址
         let data = [1, 2, 3, 4, 5, 6, 7]
         worker.postMessage(data);

         worker.onmessage = function(event) {
             console.log(event.data)
             document.querySelector("ul").innerHTML = event.data
         }
         
         //此部分是work.js中
         this.addEventListener("message", (data) => {
                let str = render(data.data)
                this.postMessage(str)
         })


    function render(data) {
            let str = ''
            data.forEach(i => {
                str += `<li>${i}</li>`
            });
          return str
    }

1. 正如您所看到的，這就是一個簡單的Demo：
2. 可是你在以後再補一句簡單的console.log（1）就可以看出結果了，
3. 打開F12(傳說中的開發者模式)你會驚奇的發現單線程語言竟然先輸出了1而後在UL中添加了節點，

• 思考？

1. 照之前的寫法咱們確定會這樣作：

let str = "";
data.forEach(i => {
                str += `<li>${i}</li>`
});

document.querySelector("ul").innerHTML = str;

1. 是否是發現了其中的好處？
2. 簡單來講咱們把一套本該同步的代碼該成了異步，也就是在主線程中開闢了一條子線程，這樣的好處就是不會影響主線程，線程任務的執行，具體步驟在子線程中進行，最後返回結果給主線程中，很巧妙的解決了以前上文提到的，假如在主線程中我有個任務循環了10000次（固然是開玩笑！）這時webwork是否是很巧妙的處理了這個問題呢？

結尾：

1. 爲何要這麼作？

隨着web的發展，時代愈來愈講究優化二字，可以用更加優雅的代碼，更加簡潔的代碼去完成任務是相當重要的。

• 用戶需求一直是咱們開發者比較密切關心的問題，試想一下若是在某一天有個用戶訪問了你的網站因爲你代碼的到至了頁面的假死的現象的發生那是一件多麼可怕的事情，在深層次的探究中，每個優秀的前端工做者都應該去努力解決這些問題。

做者寄語：劉某人，寫文章很少，不喜勿噴，只是發表我的看法，若是有更好的建議但願能夠互相幫助，相互學習