这篇文章给大家分享的是有关JavaScript Web Workers的构建块及5个使用场景是什么的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
这次我们会逐步讲解<强> Web Workers 强,先说个简单的概念,接着讨论不同类型的<强> Web Workers 强,他们的组成部分是如何一起工作的,以及不同场景下它们各自优势和限制。最后,提供5个正确使用<强> Web Workers 强的场景。
正如我们前面文章讨论的那样,你应该知道JavaScript语言采用的是单线程模型。然而,JavaScript也为开发人员提供了编写异步代码的机会。
异步编程的局限性
以前的文章讨论过异步编程,以及应该在什么时候使用它。
异步编程可以让UI界面是响应式(渲染速度快)的,通过“代码调度“,让需要请求时间的代码先放到在事件循环中晚一点再执行,这样就允许UI先行渲染展示。
异步编程的一个很好的用例就<强> AJAX 请求。由于请求可能花费大量时间,因此可以使用异步请求,在客户端等待响应的同时还可以执行其他代码。
然而,这带来了一个问题,请求是由浏览器的Web API处理的,但是如何使其他代码是异步的呢?例如,如果成功回调中的代码非常占用CPU:
如果<代码> performCPUIntensiveCalculation> UI 渲染就会被阻塞,页面无法及时响应给用户。
这意味着异步函数只能解决一小部分JavaScript语言单线程中的局限性问题。
在某些情况下,可以使用<代码> setTimeout> setTimeout> setTimeout> 渲染/响应强的执行时间。
看一个简单的函数,计算一个数字数组的平均值:
以下是重写上述代码并“模拟“异步性的方法:
共享工人
共享工人在同一源(起源)下面的各种进程都可以访问它,包括:iframes,浏览器中的不同标签页(一个标签页就是一个单独的进程,所以共享工人可以用来实现选项卡页之间的交流),以及其他的共享工人。以下是浏览器支持的情况:
服务工人服务工人功能:
- <李>后台消息传递李 <>李网络代理,转发请求,伪造响应李 <>李离线缓存李 <>李消息推送李
在目前阶段,服务职工的主要能力集中在网络代理和离线缓存上。具体的实现上,可以理解为服务工人是一个能在网页关闭时仍然运行的网络工作者。以下是浏览器支持的情况:
本文主要讨论专用工人,没有特别声明的话,网络工作者,工人们都是指代的专用工人。
Web Workers是如何工作
Web Workers一般通过脚本为<代码>。js代码文件来构建,在页面中还通过了一些异步的HTTP请求,这些请求是完全被隐藏了的,你只需要调用网络工作者API。
工人利用类线程间消息传递来实现并行性。它们保证界面的实时性,高性能和响应性呈现给用户。
Web Workers在浏览器中的一个独立线程中运行,因此,它们执行的代码需要包含在一个<强>单独的文件中强。这一点很重要,请记住!
让我们看看基本工人是如何创建的:
