1. 程式人生 > >前端學習(八十八) DOM-Web Worker(Dom)

前端學習(八十八) DOM-Web Worker(Dom)

Web Worker是H5中一個重量級的功能,但是,因為其常駐記憶體,會影響效能,不推薦大量使用,雖然不推薦使用,但是不能掩蓋其強大的功能

web worker可以在獨立的執行緒中執行,這樣可以在worker中執行一些耗時操作,而不會阻塞應用的主執行緒

侷限性

  • web worker中無法操作dom元素
  • 某些window物件中的方法和屬性無法使用

另外,注意:主執行緒和worker執行緒之間的資料互動,傳遞的是資料的副本,而不是共享資料

web worker分為:

  • Dedicated worker:專用worker,只能被首次生成的指令碼使用
  • shared worker:共享woker,可以被多個指令碼使用
  • service worker:服務worker
  • chrome worker:在firewoker中使用
  • auduo worker:專業音訊worker

web worker語法

雖然分為多個worker,但是語法是一樣的

var myWorker = new Worker(aURL,option)

aURL:執行指令碼的地址,需要符合同源策略

options:可選,包含一些屬性,用來設定要建立的worker

 type:woker型別,值為classic或module,預設為classic

credentials:worker的認證型別,值為omit,same-orgin,include,如果沒有指定,預設為omit

name:worker的名稱

目前規範中有這幾個屬性,但是瀏覽器基本都沒有支援

worker的屬性和方法

屬性 說明
onerror 發生錯誤時觸發
onmessage 收到訊息時觸發
onmessageerror 收到的訊息無法反序列化時觸發
方法 說明
postMessage() 傳送訊息給worker執行緒
terminate() 立即終止woker

SharedWorker

SharedWorker可以被多個指令碼使用,即使這些指令碼正在被不同的window,iframe或者worker訪問