web workers的多线程机制

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--做页面缓存优化