web Worker简介、web Worker报错分析、作用

web Worker：

web Worker是运行在后台的javascript，不会影响性能，常用于高耗费CPU的任务，必须部署到线上才可以正常使用，这里有三个方法比较重要，需要注意：

postMessage(),发送消息，指的是在创建的后台web works文件中发送消息，供主页中onmessage()事件接收，此事件的对象将包含要发送过来的值。

terminate()，用来停止web worker,使用方法：在Worker对象调用即可。

onmessage(),使用web worker后，要new 创建Worker对象，如new Worker(worker.js),onmessage是这个对象的一个方法，后面的函数中的事件对象则包含所有信息，如下：

其中data属性即可拿到发送过来的值，具体使用步骤如下：

test.js文件中的web Worker代码：

	// 1.创建一个名为test.js的worker文件，放到test.html相同目录下:
    var sum = 0; //声明全局变量，下面计时器中sum才能完成不断自加：
    
    setInterval(function() {
        sum++;
        postMessage(sum); //2.将sum发送给worker对象
    }, 1000);

html文件中javascript代码：

	<script>
        // 获取DOM元素，供下面操作：
        var spans = document.querySelector('span');
        var start = document.querySelector('.start');
        var stops = document.querySelector('.stop');
    
        var workers; //3.声明全局变量，供后面接收worker对象；若声明为局部变量，后面stop事件中workers.terminate()将不能给undefined设置此方法
    
        // 4.定义一个执行创建worker对象并接收消息的函数：
        function startSum() {
            workers = new Worker('test.js'); // 创建一个web Worker对象，括号中传入web Worker文件的路径，注意实际开发中因做兼容处理，某些浏览器不支持此属性时，因返回相关提示
    
            // 使用onmessage方法将发送的消息接收到此作用域：
            workers.onmessage = function(event) {
                var datas = event.data; // 将接收到的数据赋值给变量datas
                spans.innerText = datas; // 将datas设置给spans元素
            };
        };
    
        // 5.定义一个关闭web worker的函数：
        function stopSum() {
            workers.terminate();//停止workers
        };
    
        // 当点击stops时执行stopSum()函数停止workers：
        stops.onclick = function() {
            stopSum();
        };
    
        // 当点击开始时执行startSum()函数开始workers：
        start.onclick = function() {
            startSum();
        };
    script>

特别提醒：案例必须部署到服务器上才可以正常运行，本地打开会报类似的错误：Uncaught DOMException: Failed to construct ‘Worker’: Script at ‘file:///C:/Users/17121/Desktop/test/test.js’ cannot be accessed from origin ‘null’.

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：[email protected]联系笔者 删除。
笔者：苦海