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的發展，時代越來越講究優化二字，能夠用更加優雅的程式碼，更加簡潔的程式碼去完成任務是至關重要的。

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

作者寄語：劉某人，寫文章不多，不喜勿噴，只是發表個人見解，如果有更好的建議希望可以互相幫助，相互學習

來源：https://segmentfault.com/a/1190000016460349