Web Worker 详细介绍_Web Workers的使用

更新日期: 2018-05-21阅读: 3.3k标签: Worker

Web Worker是什么?

当在 html 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。


简单明了的一句话其实就是在Javascript单线程执行的基础上,开启一个子线程,进行程序处理,而不影响主线程的执行,当子线程执行完毕之后再回到主线程上,在这个过程中并不影响主线程的执行过程。 

举个例子: 传统情况下,执行下面的代码后,整个页面都会被冻结,由于javascript是单线程处理,如下代码已经完全组塞了后续的执行。

while(true){}

如果换一种方式,我们通过开启一个新的线程来执行这段代码,将他放在一个单独的worker.js文件中,在主线程执行以下代码。

var worker = new Worker("worker.js")


Service Worker 是一个由事件驱动的 worker,它由源和路径组成。它可以控制它关联的网页,解释且修改导航,资源的请求,以及一种非常细粒度的方式来缓存资源以让你非常灵活地控制程序在某些情况下的行为(比如网络不可用)。  

Web Workers 是以加载 .js 文件的方式实现的,这些文件会在页面中异步加载。使用类线程的消息传输-获取模式。它们非常适合于为用户提供最新的 UI ,高性能及流畅的体验。


Web Worker兼容性

除了IE,主流浏览器一般都支持Web Worker。

 

判断浏览器对Web Worker的支持:

if(typeof(Worker)!=="undefined"){
   //支持
}else{
  //不支持code
}


Web Worker基本使用

1、创建新的Worker
var worker = new Worker("worker.js")
2、传递参数
worker.postMessage("text");
3、接收消息
worker.onmessage = function (e) {
        var message = e.data;
};
4、异常处理
worker.onerror = function(e){
    console.log("error at "+e.filename ":" + e.lineno + e.message)
}
5、结束worker
worker.terminate();
6、载入工具函数
importScripts("./utils/base64.js","./utils/map.js"...)


Web Worker作用域

当我们创建一个新的worker时,改代码会运行在一个全新的javascript的环境中(WorkerGlobalScope)运行,是完全和创建worker的脚本隔离,这时我们可以吧创建新worker的脚本叫做主线程,而被创建的新的worker叫做子线程。

WorkerGlobalScope是worker的全局对象,所以它包含所有核心javascript全局对象拥有的属性如JSON等,window的一些属性,也拥有类似于XMLHttpRequest()等。

但是我们所开启的新的worker也就是子线程,并不支持操作页面的dom


Web Worker共享线程-SharedWorker

共享线程是为了避免线程的重复创建和销毁过程,降低了系统性能的消耗,共享线程SharedWorker可以同时有多个页面的线程链接。

使用SharedWorker创建共享线程,也需要提供一个javascript脚本文件的URL地址或Blob,该脚本文件中包含了我们在线程中需要执行的代码,如下:

var worker = new SharedWorker("sharedworker.js");

共享线程也使用了message事件监听线程消息,但使用SharedWorker对象的port属性与线程通信如下。

worker.port.onmessage = function(e){
    ...
}

同时我们也可以使用SharedWorker对象的port属性向共享线程发送消息如下。

worker.port.postMessage("message");

参考:

《指尖上行》一书  
w3school:http://www.w3school.com.cn/html5/html_5_webworkers.asp
Web Worker 详细介绍:http://xiangzongliang.com/blogContent?blog=82

链接: https://www.fly63.com/article/detial/793

Service Worker的生命周期

service worker的生命周期是它最复杂的部分。如果你不知道它在努力做什么和这么做的优势,你会感到它在跟你对着干。但一旦你知道了它的原理,你就可以给用户提供无缝的,优雅而不突兀的更新。一种同时具备网站应用和原生应用优势的体验。

web worker是什么?理解并使用web worker

Web Worker 是为了解决 JavaScript 在浏览器环境中没有多线程的问题。正常形况下,浏览器执行某段程序的时候会阻塞直到运行结束后在恢复到正常状态,而HTML5的Web Worker就是为了解决这个问题,提升程序的执行效率。

Web Worker模拟选票

思路:五个人(5个div窗口模拟)同时进行抢票,有百分之十的几率可以抢到票,抢到票后对应的窗口(即随机生成的数大于等于0小于9的情况)会编程天蓝色,没抢到票的窗口(即随机生成的数大于9小于100的情况)会变成红色

Node.js中的Worker Threads

想要明白workers,首先需要明白node是怎样构成的。当一个node进程开始,它其实是:一个进程:是指一个全局对象,这个对象能够访问任何地方,并且包含当前处理时的此时信息。

动态创建 Web Worker 实践指南

作为前端,在消费接口提供的数据时,往往由于数据实际分布在不同地方(如一部分存储在 ODPS ,而另一部分可能更适合在应用初始化时从本地载入内存)而需要对数据进行区分处理。当然,交互的实现可能也会需要很重的计算逻辑

关于Web Workers你需要了解的7件事

Web Workers允许你在后台运行JavaScript代码,而不会阻止web用户界面。Web Workers可以提高网页的整体性能,还可以增强用户体验。Web Workers有两种风格 ——专用Web Workers和共享Web Workers

如何使用JS中的webWorker?

作为浏览器脚本语言,如果JavaScript不是单线程,那么就有点棘手了。比如,与用户交互或者对DOM进行操作时,在一个线程上修改某个DOM,另外的线程删除DOM,这时浏览器该如何抉择呢?

Web Worker 现状

Web 是单线程的。这让编写流畅又灵敏的应用程序变得越来越困难。Web Worker 的名声很臭,但对 Web 开发者来说,它是解决流畅度问题的 一个非常重要的工具。让我们来了解一下 Web Worker 吧

浅谈 HTML5 Web Worker,性能优化利器?

多线程是现代软件开发中用于增强应用的性能和响应能力的重要技术。然而,JavaScript 是一门单线程语言,它天生是不支持多线程的。为了克服这一限制,引入了 Web Workers。本文就来探讨 Web Workers 对 Web 多线程的重要性,以及使用它们的限制和注意事项。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!