HTML5:web socket 和 web worker


做練習遇到了一個選擇題,是關於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() 

1  var worker =new Worker("worker_job.js"); //創建一個Worker對象並向它傳遞將在新線程中執行的腳本的URL
2 
3  worker.postMessage("hello world");     //向worker發送數據
4  
5  worker.onmessage =function(evt){     //接收worker傳過來的數據函數
6    console.log(evt.data);              //輸出worker發送來的數據
7  }

(2)通過添加事件監聽器來處理message,在worker內部通過self.函數來和主線程通信:

1 self.addEventListener('message', function(e) {
2     var data = e.data;
3     if(data == 'init')
4         init();
5     else
6         ...
7 }, false);
8 
9 self.postMessage("hello worker");

如有錯誤,請您指正!

 

參考文檔:

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

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

七種web socket框架的性能比較


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM