HTML5中的Web Workers

时间：2022-10-11 05:36:53

https://www.cnblogs.com/yanan-boke/p/6954390.html

https://segmentfault.com/a/1190000014938305

HTML5 工作线程原理

传统上的线程可以解释为轻量级进程，它和进程一样拥有独立的执行控制，一般情况下由操作系统负责调度。而在 HTML5 中的多线程是这样一种机制，它允许在 Web 程序中并发执行多个 JavaScript 脚本，每个脚本执行流都称为一个线程，彼此间互相独立，并且由浏览器中的 JavaScript 引擎负责管理。下面我们将详细讲解 HTML5 的工作线程原理。

Web Workers 是浏览器内置的线程所以可以被用来执行非阻塞事件循环的 JavaScript 代码。

在 HTML5 中引入的工作线程使得浏览器端的 JavaScript 引擎可以并发地执行 JavaScript 代码，从而实现了对浏览器端多线程编程的良好支持。将可能耗费较长时间的处理交给后台执行，则对用户在前台页面中执行的操作没有影响。

HTML5 中的 Web Worker 可以分为两种不同线程类型，一个是专用线程 Dedicated Worker，一个是共享线程 Shared Worker。两种类型的线程各有不同的用途。

应用场景一：使用工作线程做后台数值复杂（算法）计算

应用场景二：使用共享线程处理多用户并发连接

应用场景三：高频的用户交互

应用场景四：监听由后台服务器广播的消息

例子：

//worker.js
onmessage =function (evt){
  var d = evt.data;//通过evt.data获得发送来的数据
  postMessage( d );//将获取到的数据发送会主线程
}

HTML页面：test.html

HTML5中的Web Workers
<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <script type="text/javascript">
//WEB页主线程
var worker =new Worker("worker.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
 worker.postMessage("hello world");     //向worker发送数据
 worker.onmessage =function(evt){     //接收worker传过来的数据函数
   console.log(evt.data);              //输出worker发送来的数据
 }
 </script>
 </head>
 <body></body>
</html>
HTML5中的Web Workers

使用web worker主要分为以下几部分：

WEB主线程:

1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。

2.通过worker.postMessage( data ) 方法来向worker发送数据。

3.绑定worker.onmessage方法来接收worker发送过来的数据。

4.可以使用 worker.terminate() 来终止一个worker的执行。

worker新线程：

1.通过postMessage( data ) 方法来向主线程发送数据。

2.绑定onmessage方法来接收主线程发送过来的数据。

Web Workers能够为用户做些什么？

加载一个JavaScript文件，进行大量的复杂计算，而不挂起主进程，并通过postMessage和onMessage进行通信。

可以在WoOer（worker）中通过importScripts（url）方法加载另外的JavaScript脚本文件。

可以使用setTimeout（）、clearTimeout（）、setInterval（）和clearInterval（）。

可以使用XMLHttpRequest进行异步请求。

可以访问navigator的部分属性。

可以使用JavaScript核心对象。

监听由后台服务器广播的消息。

web Workers的局限性：

1.不能跨域加载JS

2.worker内代码不能访问DOM（）、window 对象、document 对象、parent 对象

3.各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker,而Chrome中就不行

4.不是每个浏览器都支持这个新特性

ECMscript规定的一些基本语法以及规定的一些操作。如下操作：

•navgator :  ppVersion、userAgent、platform
•location  :   所有属appName、a性都是只读的
•self  :  指向全局 worker 对象
•所有的ECMA对象，Object、Array、Date等
•XMLHttpRequest构造器
•setTimeout和setInterval方法
•close()方法，立刻停止worker运行
•importScripts方法

Web Workers 最佳使用场景

迄今为止，我们列举了 Web Workers 的长处及其限制。让我们看看他们的最佳使用场景：

  • 射线追踪：射线追踪是一项通过追踪光线的路径作为像素来生成图片的渲染技术。Ray tracing 使用 CPU 密集型计算来模仿光线的路径。思路即模仿一些诸如反射，折射，材料等的效果。所有的这些计算逻辑可以放在 Web Worker 中以避免阻塞 UI 线程。甚至更好的方法即－你可以轻易地把把图片的渲染拆分在几个 workers 中进行（即在各自的 CPU 中进行计算，意思是说利用多个 CPU 来进行计算，可以参考下 nodejs 的 api）。这里有一个使用 Web Workers 来进行射线追踪的简单示例－https://nerget.com/rayjs-mt/r...。
  • 加密：端到端的加密由于对保护个人和敏感数据日益严格的法律规定而变得越来越流行。加密有时候会非常地耗时，特别是如果当你需要经常加密很多数据的时候（比如，发往服务器前加密数据）。这是一个使用 Web Worker 的绝佳场景，因为它并不需要访问 DOM 或者利用其它魔法－它只是纯粹使用算法进行计算而已。一旦在 worker 进行计算，它对于用户来说是无缝地且不会影响到用户体验。
  • 预取数据：为了优化网站或者网络应用及提升数据加载时间，你可以使用 Workers 来提前加载部分数据以备不时之需。不像其它技术，Web Workers 在这种情况下是最棒哒，因为它不会影响程序的使用体验。
  • 渐进式网络应用：即使在网络不稳定的情况下，它们必须快速加载。这意味着数据必须本地存储于浏览器中。这时候 IndexDB 及其它类似的 API 就派上用场了。大体上说，一个客户端存储是必须的。为了不阻塞 UI 线程的渲染，这项工作必须由 Web Workers 来执行。呃，当使用 IndexDB的时候，可以不使用 workers 而使用其异步接口，但是之前它也含有同步接口（可能会再次引入 ），这时候就必须在 workers 中使用 IndexDB。

    这里需要注意的是在现代浏览器已经不支持同步接口了，具体可查看这里。

  • 拼写检查：一个基本的拼写检测器是这样工作的－程序会读取一个包含拼写正确的单词列表的字典文件。字典会被解析成一个搜索树以加快实际的文本搜索。当检查器检查一个单词的时候，程序会在预构建搜索树中进行检索。如果在树中没有检索到，则会通过提供替代的字符为用户提供替代的拼写并检测单词是否是有效－是否是用户需要的单词。这个检索过程中的所有工作都可以交由 Web Worker 来完成，这样用户就只需输入单词和语句而不会阻塞 UI，与此同时 worker 会处理所有的搜索和服务建议。

例子：

实际工作过程会遇到用户需要通过解析远程图片来获得图片 base64 的案例，那么这时候，如果图片非常大，就会造成 canvas 的 toDataURL 操作相当的耗时，从而阻塞页面的渲染。

所以解决思路即把这里的处理图片的操作交由 worker 来处理。以下贴出主要的代码：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

  <meta charset="UTF-8">

  <title>Canvas to base64</title>

</head>

<body>

  <script>

    function loadImageAsync(url) {

      if (typeof url !== 'string') {

        return Promise.reject(new TypeError('must specify a string'));

      }

      return new Promise(function(resolve, reject) {

        const image = new Image();

        // 允许 canvas 跨域加载图片

        image.crossOrigin="anonymous";

        image.onload = function() {

          const $canvas = document.createElement('canvas');

          const ctx = $canvas.getContext('2d');

          const width = this.width;

          const height = this.height;

          let imageData;

          $canvas.width = width;

          $canvas.height = height;

          ctx.drawImage(image, 0, 0, width, height);

          imageData = ctx.getImageData(0, 0, $canvas.width, $canvas.height);

          resolve({image, imageData});

        };

        image.onerror = function() {

          reject(new Error('Could not load image at ' + url));

        };

        image.src = url;

      });

    }

    function blobToDataURL(blob) {

      return new Promise((fulfill, reject) => {

        let reader = new FileReader();

        reader.onerror = reject;

        reader.onload = (e) => fulfill(reader.result);

        reader.readAsDataURL(blob);

      })

    }

    document.addEventListener("DOMContentLoaded", function () {

      loadImageAsync('https://cdn-images-1.medium.com/max/1600/1*4lHHyfEhVB0LnQ3HlhSs8g.png')

        .then(function (image) {

          // jpeg-web-worker.js https://github.com/kentmw/jpeg-web-worker

          const worker = new Worker('jpeg-web-worker.js');

          worker.postMessage({

            image: image.imageData,

            quality: 50

          });

          worker.onmessage = function(e) {

            // e.data is the imageData of the jpeg. {data: U8IntArray, height: int, width: int}

            // you can still convert the jpeg imageData into a blog like this:

            const blob = new Blob( [e.data.data], {type: 'image/png'} );

            blobToDataURL(blob).then((imageURL) => {

              console.log('imageUrl:', imageURL);

            })

          }

        })

        .catch(function (err) {

          console.log('Error：', err.message);

        });

    });

  </script>

</body>

</html>

以上是通过 canvas 来获取图片数据，那么是否有其它方法呢？肯定有的啦，动下脑筋吧少年。

相关文章