2017补全计划-多线程Worker-学习笔记

最新推荐文章于 2023-02-12 18:46:03 发布

早起早睡的少年郎

最新推荐文章于 2023-02-12 18:46:03 发布

阅读量823

点赞数

分类专栏： JavaScript 文章标签： javascript web-worker 多线程

本文链接：https://blog.csdn.net/ReusLi/article/details/54929729

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

参考资料：
【转向Javascript系列】深入理解Web Worker

使用Web Workers - Web API 接口| MDN

深入 HTML5 Web Worker 应用实践：多线程编程

Web Worker在WebKit中的实现机制

Web Worker的用处：Web Worker带来后台计算能力

Web Worker 部分典型的应用场景:

使用专用线程进行数学运算,Web Worker最简单的应用就是用来做后台计算，而这种计算并不会中断前台用户的操作

图像处理,通过使用从或者元素中获取的数据，可以把图像分割成几个不同的区域并且把它们推送给并行的不同Workers来做计算

大量数据的检索,当需要在调用 ajax后处理大量的数据，如果处理这些数据所需的时间长短非常重要，可以在Web Worker中来做这些，避免冻结UI线程

背景数据分析,由于在使用Web Worker的时候，我们有更多潜在的CPU可用时间，我们现在可以考虑一下JavaScript中的新应用场景。例如，我们可以想像在不影响UI体验的情况下实时处理用户输入。利用这样一种可能，我们可以想像一个像Word（Office Web Apps 套装）一样的应用：当用户打字时后台在词典中进行查找，帮助用户自动纠错等等。

Web Worker 简单Demo :

main.html

<html>  
  <head>  
  <script type="text/javascript">  
    var worker = new Worker('worker.js');   
    var obj = {"first":1, "second":2};  
    worker.postMessage(obj);   
    worker.onmessage = function (event) {   
      alert(event.data);  
    }  

    function postMsg(){  
      if (worker)  
        worker.postMessage(obj);   
    }  
  </script>   
  </head>  
  <body>  
     <button onclick="postMsg()">post</button>  
  </body>  
</html> 
//并不需要使用script标签引入worker.js

worker.js

//当main.html里的js调用worker.postMessage()方法时
//线程到这里会自动调用onmessage 的callback函数
onmessage = function (event)   
{   
  var data = event.data;  
  var first=data.first;  
  var second=data.second;  
  handleTask(first,second);   
};   

function  handleTask(a, b)  
 {  
   var out = a + b;  
   postMessage("Worker Done! out = " + out);  
 }

注： chrome浏览器可能会报错，因为chrome要求worker.js必须存在服务器端，建议练习多线程时候使用firefox

深入了解Web Worker:

HTML5 中的 Web Worker 可以分为两种不同线程类型，一个是专用线程 Dedicated Worker，一个是共享线程 Shared Worker
(后续补充，目前学习概念觉得太模糊)

补充概念点：

超时与间隔

Worker 能够像主线程一样使用超时与间隔。这会十分有用，比如说，如果你想让 worker 线程周期性而并非不间断的运行代码。

终止 worker

如果你想立即终止一个运行中的 worker，可以调用 worker 的 terminate()方法：

处理错误

当 worker 出现运行时错误时，它的 onerror 事件处理函数会被调用。它会收到一个实现了 ErrorEvent 接口名为 error的事件。该事件不会冒泡，并且可以被取消；为了防止触发默认动作，worker 可以调用错误事件的 preventDefault() 方法。

错误事件拥有下列三个它感兴趣的字段：

message
可读性良好的错误消息。
filename
发生错误的脚本文件名。
lineno
发生错误时所在脚本文件的行号。

访问 navigator 对象

Workers 可以在它的作用域内访问 navigator 对象。它含有如下能够识别浏览器的字符串，就像在普通脚本中做的那样：

引入脚本与库

Worker 线程能够访问一个全局函数，importScripts() ，该函数允许 worker 将脚本或库引入自己的作用域内。你可以不传入参数，或传入多个脚本的 URI 来引入；以下的例子都是合法的：

importScripts();                        /* 什么都不引入 */
importScripts('foo.js');                /* 只引入 "foo.js" */
importScripts('foo.js', 'bar.js');      /* 引入两个脚本 */