Web Worker 概述

Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。等到 Worker 线程完成计算任务,再把结果返回给主线程。这样的好处是,一些计算密集型或高延迟的任务,被 Worker 线程负担了,主线程(通常负责 UI 交互)就会很流畅,不会被阻塞或拖慢。

你可能会问:“JavaScript不是一个单线程的语言吗?”

事实上 JavaScript 是一种不定义线程模型的语言。Web Workers 不是 JavaScript 的一部分,而是可以通过 JavaScript 访问的浏览器特性。历史上,大多数浏览器都是单线程的(当然,这已经改变了),大多数 JavaScript 实现都是发生在浏览器中。Web Workers 不是在 Node.JS 中实现的。Node.js 中有类似的集群(cluster)、子进程概念(child_process),他们也是多线程,但是和 Web Workers 还是有区别 。

值得注意的是,规范中提到了三种类型的 Web Workers:

  • 专用 Workers (Dedicated Workers)
  • 共享 Workers (Shared Workers)
  • 服务 Workers (Service workers)

Dedicated Workers

专用 Workers 只能被创建它的页面访问,并且只能与它通信。以下是浏览器支持的情况:

Shared Workers

共享 Workers 在同一源(origin)下面的各种进程都可以访问它,包括:iframes、浏览器中的不同tab页(一个tab页就是一个单独的进程,所以Shared Workers可以用来实现 tab 页之间的交流)、以及其他的共享 Workers。以下是浏览器支持的情况:

Service workers

Service Worker 功能:

  • 后台消息传递
  • 网络代理,转发请求,伪造响应
  • 离线缓存
  • 消息推送

在目前阶段,Service Worker 的主要能力集中在网络代理和离线缓存上。具体的实现上,可以理解为 Service Worker 是一个能在网页关闭时仍然运行的 Web Worker。以下是浏览器支持的情况:

本文主要讨论 专用 Workers,没有特别声明的话,Web Workers、Workers都是指代的专用 Workers。

Web Workers 是如何工作

Web Workers 一般通过脚本为 .js 文件来构建,在页面中还通过了一些异步的 HTTP 请求,这些请求是完全被隐藏了的,你只需要调用 Web Worker API

Worker 利用类线程间消息传递来实现并行性。它们保证界面的实时性、高性能和响应性呈现给用户。

Web Workers 在浏览器中的一个独立线程中运行。因此,它们执行的代码需要包含在一个**单独的文件中**。这一点很重要,请记住!

让我们看看基本 Workers 是如何创建的:

 var worker = new Worker('task.js');

Worker() 构造函数的参数是一个脚本文件,该文件就是 Worker 线程所要执行的任务。由于 Worker 不能读取本地文件,所以这个脚本必须来自网络。如果下载没有成功(比如404错误),Worker 就会默默地失败。

为了启动创建的 Worker,需要调用 postMessage 方法:

 worker.postMessage();

Web Worker 通信

为了在 Web Worker 和创建它的页面之间进行通信,需要使用 postMessage 方法或 Broadcast Channel

postMessage 方法

新浏览器支持JSON对象作为方法的第一个参数,而旧浏览器只支持字符串。

来看一个示例,通过将 JSON 对象作为一个更“复杂”的示例传递,创建 Worker 的页面如何与之通信。传递字符串跟传递对象的方式也是一样的。

让我们来看看下面的 HTML 页面(或者更准确地说是它的一部分):

然后这是 worker 中的 js 代码:

当单击该按钮时,将从主页调用 postMessage。postMessage 行将 JSON 对象传给 Worker。Worker 通过定义的消息处理程序监听并处理该消息。

当消息到达时,实际的计算在worker中执行,而不会阻塞事件循环。Worker 检查传递的事件参数 `e`,像执行 JavaScript 函数一样,处理完成后,把结果传回给主页。

在 Worker 作用域中,this 和 self 都指向 Worker 的全局作用域。

有两种方法可以停止 Worker:从主页调用 worker.terminate()或在 worker 内部调用 self.close()。

Broadcast Channel

Broadcast Channel API 允许同一原始域和用户代理下的所有窗口,iFrames 等进行交互。也就是说,如果用户打开了同一个网站的的两个标签窗口,如果网站内容发生了变化,那么两个窗口会同时得到更新通知。

还是不明白?就拿 Facebook 作为例子吧,假如你现在已经打开 了Facebook 的一个窗口,但是你此时还没有登录,此时你又打开另外一个窗口进行登录,那么你就可以通知其他窗口/标签页去告诉它们一个用户已经登录了并请求它们进行相应的页面更新。

可以从下面这张图,在视觉上来清晰地感受 Broadcast Channel:

Broadcast Channel 浏览器支持比较有限:

消息的大小

有两种方式发送消息给Web Workers:

复制消息:消息被序列化、复制、发送,然后在另一端反序列化。页面和 Worker 不共享相同的实例,因此最终的结果是每次传递都会创建一个副本大多数浏览器,在两边都是使用的JSON对值进行编码和解码,这样对数据的解码、编码操作,势必会增加消息传输过程的时间开销。信息越大,发送的时间就越长。

传递消息:这意味着原始发送方在一旦发送后不能再使用它。传输数据几乎是瞬间的,这种传输方式的局限性在于只能用 ArrayBuffer 类型来传递。

Web Workers 可用的特性

Web Workers 由于具有多线程特性,因此只能访问 JavaScript 特性的子集。 以下是可使用特性列表:

  • navigator 对象
  • location 对象(只读)
  • XMLHttpRequest
  • setTimeout()/clearTimeout() and setInterval()/clearInterval()
  • 应用缓存(Application Cache)
  • 使用 importScripts() 导入外部脚本
  • 创建其他的 Web Workers

Web Workers 的局限性

同源限制

分配给 Worker 线程运行的脚本文件,必须与主线程的脚本文件同源。

DOM 限制

Worker 线程所在的全局对象,与主线程不一样,无法读取主线程所在网页的 DOM 对象,也无法使用document、window、parent这些对象。这意味着 Web Worker 不能操作 DOM (因此也不能操作 UI)。有时这可能很棘手,但是一旦你了解了如何正确使用 Web Workers,你就会开始将它们作为单独的“计算机”使用,而所有 UI 更改都将发生在你的页面代码中。 Workers 将为你完成所有繁重的工作,然后一旦完成再把结果返回给 page 页面。

通信联系

Worker 线程和主线程不在同一个上下文环境,它们不能直接通信,必须通过消息完成。

脚本限制

Worker 线程不能执行alert()方法和confirm()方法,但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

文件限制

Worker 线程无法读取本地文件,即不能打开本机的文件系统(file://),它所加载的脚本,必须来自网络。

处理错误

和 JavaScript 代码一样,Web workers 里抛出的错误,你也需要进行处理。当 Worker 执行过程中如果遇到错误,会触发一个 `ErrorEvent` 事件。接口包含了三个有用的属性来帮忙排查问题:

filename - 导致 Worker 的脚本名称

lineno - 发生错误的行号

message - 对错误的描述

例子如下:

在这里,可以看到我们创建了一个 worker 并开始侦听错误事件。

在 worker 内部(在 workerWithError.js 中),我们通过将未定义 x 乘以 2 来创建一个异常。异常被传播到初始脚本,然后通过页面监听 error事件,对错误进行捕获。

Web Workers 应用实例

到目前为止,我们已经列出了 Web Workers 的优点和局限性。现在让我们看看它们最强大的用例是什么:

Ray tracing(光线追踪):光线追踪是一种以像素为单位跟踪光的路径生成图像的渲染技术。光线追踪利用 CPU 密集型的数学计算来模拟光的路径。其思想是模拟一些效果,如反射、折射、材料等。所有这些计算逻辑都可以添加到 Web Worker 中,以避免阻塞 UI线程。更好的是——可以很容易地在多个 workers 之间(以及在多个cpu之间)分割图像呈现。下面是一个使用 Web Workers 的光线追踪的简单演示—https://nerget.com/rayjs-mt/rayjs.html。

Encryption(加密):由于对个人和敏感数据的监管越来越严格,端到端加密越来越受欢迎。加密是一件非常耗时的事情,特别是如果有很多数据需要频繁加密(例如,在发送到服务器之前)。这是一个使用 Web Worker 非常好的场景,因为它不需要访问 DOM 或任何花哨的东西——它是完成其工作的纯算法。只要是在 Web Worker 中工作的,对于端用户就是无缝的,不会影响到体验。

Prefetching data(预取数据):为了优化你的网站或 web 应用程序并改进数据加载时间,你可以利用 Web Workers 提前加载和存储一些数据,以便在需要时稍后使用。Web Workers 在这种情况下非常棒,因为它们不会影响应用程序的UI,这与不使用Workers 时是不同的。

Progressive Web Apps(渐进式Web应用程序):这种渐进式Web应用程序要求,即使在用户网络不稳定的条件下,也能够迅速的加载。这意味着数据必须本地存储在浏览器中。这也是 IndexDB 或类似 api 发挥作用的地方。通常情况下,客户端的存储都是必要的,但使用起来需要不阻塞UI渲染线程,那么工作就需要在 Worker 中进行了。不过,以IndexDB 为例,它提供了一些异步的API,调用它们的话也不需要使用 web worker,但如果是同步的 API,就必须要在 Worker 中使用了。

Spell checking(拼写检查):一个基本的拼写检查程序的工作流程如下-程序读取一个字典文件与一个正确拼写单词列表。字典被解析为一个搜索树,以使实际的文本搜索更有效。当一个单词被提供给检查器时,程序检查它是否存在于预先构建的搜索树中。如果在树中没有找到该单词,可以通过替换替换字符并测试它是否是有效的单词(如果是用户想要写的单词),为用户提供替代拼写。所有的这些处理过程都可以在 Web Worker中进行了,用户可以不被阻塞的输入词汇和句子,Web Worker 在后台校验词汇是否正确以及提供备选词汇。

多线程读取同一个文件_前端进阶:多线程Web Workers的工作原理及使用场景相关推荐

  1. Java多线程读取excel文件_解决springboot 多线程使用MultipartFile读取excel文件内容报错问题...

    springboot项目开启多线程 启动类加注解开启 @EnableAsync,实现类方法加注解 @Async 前端页面 报错信息 java.io.FileNotFoundException: C:\ ...

  2. fetch vue读取json文件_前端笔记——尝试理解并在JavaScript中使用Fetch()

    介绍 Fetch()方法可以发出类似于XMLHttpRequest(XHR)的网络请求.Fetch API和XMLHttpRequest之间的主要区别(也称为XHR)是Fetch API使用Promi ...

  3. java多线程读取文件_java多线程读写同一个文件

    本文提供java多线程分别定时读写同一个文件的样例,其中两个线程,一个每分钟写入当前时间到指定文件,另一个线程读出每分钟新写的内容. 使用简单的Thread.sleep技术实现定时 package t ...

  4. java多线程 文件夹_java多线程读同一个文件

    java多线程同时读取一个文件,这个方法可行吗?不可行. 多线程能够提高效率是因为现在的cpu普遍是多核cpu, 多条线程可以在多个内核中同时执行来提高计算效率.但是计算机磁盘的磁头只有一个,即使多条 ...

  5. 多线程读取大文件,尤其是对日志文件分析很有用。

    我在之前的公司里工作的时候,他们要求我做一个能够分析IIS日志的程序,可我做来做去,也只能做到,1个G的文件读取在140秒左右.愁了很久,想到了用多线程读取大文件的方法,又发现文件读取流可以有很多个, ...

  6. php 多线程写入文件,C#_C#实现多线程写入同一个文件的方法,本文实例讲述了C#实现多线程 - phpStudy...

    C#实现多线程写入同一个文件的方法 本文实例讲述了C#实现多线程写入同一个文件的方法.分享给大家供大家参考.具体实现方法如下: namespace WfpApp { public partial cl ...

  7. java多线程按行读取文件_“java”中多线程按行读取txt且每个线程读的内容不能重复,这么求“demo”?...

    展开全部 你把原来程序中直接读的地62616964757a686964616fe4b893e5b19e31333365646234方,改成调用上面的函数,由该函数统一读行.这样,不管是你有 N 个线程 ...

  8. java线程池读文件_多线程读取Java文件

    我正在创建线程以读取Java中的文件.当我创建2个线程时,每个线程都读取整个文件,而我希望它们读取文件的不同部分.我尝试放入sleep(),join(),yield(),但是在包含它们之后,这只会减慢 ...

  9. JAVA实现环形缓冲多线程读取远程文件

    2019独角兽企业重金招聘Python工程师标准>>> 如果用HttpURLConnection类的方法打开连接,然后用InputStream类获得输入流,再用BufferedInp ...

最新文章

  1. ClickHouse 数据存储原理:MergeTree引擎
  2. windows 中搭建Zookeeper的搭建
  3. 那些上海滩的金融传奇,或许都开始于一份PPT
  4. java 双击_利用java开发一个双击执行的小程序
  5. 谁是赢家_人工智能竞赛正在进行中。 这是赢家。
  6. go语言最好的帮助在哪里?
  7. 小贝拉机器人是朋友_被Angelababy、周震南等摸头杀?机器人贝拉凭什么受宠
  8. centos7 wps安装
  9. Amazon 的IoT之路
  10. Verilog结构描述
  11. linux设置合上电脑,[转载]笔记本上装CentOS 7 设置合上盖子不休眠
  12. 解答为什么@Autowired使用在接口上而不是实现类上
  13. Python爬取豆瓣读书Top250(正则表达式)
  14. 停止等待协议与连续 ARQ 协议
  15. Matlab中feedback函数的用法
  16. python学习基础第一阶段day11
  17. Clock Jitter
  18. FocusBI:租房分析星型模型
  19. 基于SpringBoot+layui研发的后台管理平台
  20. 数据挖掘-实战记录(四)Echarts可视化

热门文章

  1. MyBatis 缓存详解-一级缓存(本地缓存)介绍
  2. 数据库事务原理详解-事务基本概念
  3. 注册注解BeanDefinition
  4. 商业软件中常见的修饰词
  5. 支付宝支付 - 异步通知与同步通知
  6. Function接口练习之按照指定要求操作数据
  7. 微服务网关Gateway中StripPrefix讲解
  8. springboot 切换日志实现
  9. 通过反射获取无参构造方法并使用
  10. 实现java.lang.Runnable接口