web workers介绍
1.一个webAPI -> 浏览器能力 -> 提供一个js可以运行的环境
- web应用程序可以在独立于主线程的后台线程中，运行一个脚本操作
3.关键点：性能考虑
启动 node server加载本地文件
browser -sync start -s
验证程序耗时时间：
console.time('fibTime');fibonacci(40);console.timeEnd('fibTime');
worker的能力是受限的
1.与主线程脚本同源
2.与主线程上下文不同
3.不能读取本地文件
无法操作dom
不能执行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执行复杂运算时候阻塞了页面渲染
使用场景
- 复杂运算
- 渲染优化 -- cavas画图 可以用离线的api加上web workers
- 流媒体数据处理
哪些项目用到了web worker?
webworkify
flv.js -- bilibili开源的音视频依赖
解码http-flv格式的视频，通过media source extensions API 喂到video播放器，解码的步骤是放在web workers处理
作业：
了解SharedWorker和ServiceWorker--做页面缓存优化
