HTML5：網頁套接字與網頁工作者

做練習遇到了一個選擇題，是關於web worker的，問web worker會不會影響頁面效能？補習功課之後，答案是不會影響。

查閱了相關資料學習web worker，又遇到了web socket，整理如下：

web socket 和 worker 的作用：為建立高效能的web應用提供了新的參考方案。

web socket提供更有效率的傳輸協議，web worker提供多執行緒提高web應用運算效率。

一.web socket

1.web socket是一種協議，本質上和http，tcp一樣。協議是用來說明數據是如何傳輸的,寫過一個小的在線聊天使用了socket.io，之後總結這個項目。

2.web socket的前綴有兩種：（1）ws://  不是加密的。 (2)wss://  是加密的。

3.客戶端和服務端進行web socket互動的方式也可以理解為「http握手+ tcp資料傳輸」的方式：

（1）瀏覽器（支援Websocket的瀏覽器）像HTTP一樣，發起一個請求，然後等待服務端的回應；

（2）伺服器返回握手回應，告訴瀏覽器請將後續的資料按照websocket制定的資料格式傳過來；

（3）瀏覽器和伺服器的socket連線不中斷，此時這個連接和http不同的是它是雙工的了；

（4）瀏覽器和伺服器有任何需要傳遞的資料的時候使用這個長連接進行資料傳遞。

註：HTTP握手：是因為瀏覽器和伺服器在建立長連線的握手過程是按照HTTP1.1的協定發送的，有Request，Request Header， Response， Response Header。但是不同的是Header裡面的欄位是有特定意義的。

     TCP傳輸: 主要體現在建立長連線後，瀏覽器是可以傳送數據，伺服器也可以傳送請求的給瀏覽器。當然它的資料格式並不是自己定義的，是在要傳輸的資料外層有ws協定規定的外層包的。

4.資料傳輸過程:websocket的資料傳輸形式是：frame。例如會將一則訊息分成幾個frame，依照先後順序傳送出去。這樣做會有幾個好處：

（1）大數據的傳輸可以分片傳輸，不用考慮到資料大小導致的長度標誌位元不足夠的情況。

（2）和http的chunk一樣，可以邊產生資料邊傳遞訊息，也就是提高傳輸效率。

5.客戶端使用web socket的語法：JavaScript。

   服務端：多種web框架支援。

二.web worker

1.當在 HTML 頁面中執行腳本時，頁面的狀態是不可回應的，直到腳本已完成。

而web worker 是運行在背景的 JavaScript，獨立於其他腳本，不會影響頁面的效能。您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時 web worker 在後台運行。

除了DOM操作之外，理論上任何JS腳本任務都可放入worker中執行；語法上的限制，則是無法跨域存取JS。 worker常用於需要消耗大量時間和CPU資源的複雜計算，以換來前台用戶操作的友好型；換句話說，從用戶體驗上看，提高了服務性能。

2.web worker使用：(當我們建立web worker 物件後，它會繼續監聽訊息（即使在外部腳本完成之後）直到其被終止為止。)

（1）透過向web worker 添加一個"onmessage " 事件監聽器來取得接受到的訊息。

　　  發送訊息：postMessage()

　　  終止web worker，並釋放瀏覽器/電腦資源: terminate() 

var worker =new Worker("worker_job.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL

 worker.postMessage("hello world");     //向worker发送数据
 
 worker.onmessage =function(evt){     //接收worker传过来的数据函数
   console.log(evt.data);              //输出worker发送来的数据
 }

(2)透過新增事件監聽器來處理內部函數透過新增事件，執行緒通訊:

self.addEventListener('message', function(e) {
    var data = e.data;
    if(data == 'init')
        init();
    else
        ...
}, false);

self.postMessage("hello worker");

參考文件：

web socket and web worker 基礎原理及使用

HTTP協定之chunk編碼(分塊傳輸編碼)

七種web socket框架的效能比較