web workers介紹
1.一個webAPI -> 瀏覽器能力 -> 提供一個js可以運行的環(huán)境
- web應用程序可以在獨立于主線程的后臺線程中，運行一個腳本操作
3.關鍵點：性能考慮
啟動 node server加載本地文件
browser -sync start -s
驗證程序耗時時間：
console.time('fibTime');fibonacci(40);console.timeEnd('fibTime');
worker的能力是受限的
1.與主線程腳本同源
2.與主線程上下文不同
3.不能讀取本地文件
無法操作dom
不能執(zhí)行alert等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script id="worker" type="javascript/worker">
function fibonacci(n) {
if(n == 1 || n == 2){
return 1;
}
return fibonacci(n-2) + fibonacci(n-1);
}
postMessage(fibonacci(40));
</script>
<script>
var workerScript = document.querySelector("#worker").textContent;
var blob = new Blob([workerScript],{type:'text/javascript'});
var worker = new Worker(window.URL.createObjectURL(blob));
worker.onmessage = function(e){
console.log("worker通知的message",e);
worker.postMessage("message收到了");
}
</script>
</body>
</html>
worker 方法
- onerror
- onmessage
- onmessageerror
- postMessage
- importScripts
- close
web workers場景
解決的痛點是什么
-- js執(zhí)行復雜運算時候阻塞了頁面渲染
使用場景
- 復雜運算
- 渲染優(yōu)化 -- cavas畫圖 可以用離線的api加上web workers
- 流媒體數(shù)據(jù)處理
哪些項目用到了web worker?
webworkify
flv.js -- bilibili開源的音視頻依賴
解碼http-flv格式的視頻，通過media source extensions API 喂到video播放器，解碼的步驟是放在web workers處理
作業(yè)：
了解SharedWorker和ServiceWorker--做頁面緩存優(yōu)化
