Web Worker 你知道吗?
自 JavaScript 诞生以来,还没有办法在浏览器 UI 线程之外运行代码。Web Worker 线程 API 改变了这种状况,它引入一个接口,使代码运行而不占用浏览器 UI 线程的时间。
Web Worker 线程对网页应用来说是一个潜在的巨大性能提升,因为新的 Web Worker 在自己的线程中运行JavaScript。这意味着,Web Worker 线程中的代码运行不仅不会影响浏览器 UI,而且也不会影响其它 Web Worker 线程中运行的代码。
关于Web Worker,最重要的是要知道它所执行的JavaScript代码完全在另一个作用域中,与当前网页中的代码不共享作用域。在Web Worker中,同样有一个全局对象和其他对象以及方法。但是,Web Worker中的代码不能访问DOM,也无法通过任何方式影响页面的外观。
Web Worker中的全局对象是 worker 对象本身。也就是说,在这个特殊的全局作用域中, this 和 self 引用的都是 worker 对象。为便于处理数据,Web Worker本身也是一个最小化的运行环境。
1. 最小化的 navigator 对象,包括 onLine 、 appName 、 appVersion 、 userAgent 和platform 属性;
2.只读的 location 对象;3.setTimeout() 、 setInterval() 、 clearTimeout() 和 clearInterval() 方法4.XMLHttpRequest 构造函数。
显然,Web Worker的运行环境与页面环境相比,功能是相当有限的。
当页面在 worker 对象上调用 postMessage()
时,数据会以异步方式被传递给 worker ,进而触发 worker 中的 message事件。为了处理来自页面的数据,同样也需要创建一个 onmessage 事件处理程序。
//Web Worker内部的代码
self.onmessage = function(event){var data = event.data;//别忘了,默认的sort()方法只比较字符串data.sort(function(a, b){return a – b;});self.postMessage(data);
};
大家看清楚,这里的 self 引用的是Worker全局作用域中的 worker 对象(与页面中的 Worker 对象不同一个对象)。Worker完成工作后,通过调用 postMessage()
可以把数据再发回页面。例如,下面的例子假设需要Worker对传入的数组进行排序,而Worker在排序之后又将数组发回了页面。
传递消息就是页面与Worker相互之间通信的方式。在Worker中调用 postMessage()
会以异步方式触发页面中Worker实例的 message 事件。如果页面想要使用这个Worker,可以这样:
//在页面中
var data = [23,4,7,9,2,14,6,651,87,41,7798,24],
worker = new Worker(“WebWorkerExample01.js”);
worker.onmessage = function(event){var data = event.data;//对排序后的数组进行操作
};//将数组发送给worker排序
worker.postMessage(data);
排序的确是比较消耗时间的操作,因此转交给Worker做就不会阻塞用户界面了。另外,把彩色图像转换成灰阶图像以及加密解密之类的操作也是相当费时的。
考虑这样一个例子,解析一个很大的 JSON 字符串。假设数据足够大,至少需要 500 毫秒才能完成解析任务。很显然时间太长了以至于不能允许 JavaScript 在客户端上运行它,因为它会干扰用户体验。此任务难以分解成用于定时器的小段任务,所以Worker线程成为理想的解决方案。
总结:之前讲解了解决同步阻塞的问题包括异步与任务分割,今天增加了一种 Web Worker 的方法创建额外线程执行 JavaScript代码。
推荐阅读相关联的文章:《浏览器UI线程更新机制》、《 时间分片》
Web Worker 你知道吗?相关推荐
- 深入理解javascript异步编程障眼法h5 web worker实现多线程
0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 1 2 3 4 ...
- 什么是Web Worker?
简单点说,Web Worker就是一个运行在后台的JavaScript线程,不会影响页面的响应. 我们知道,JavaScript是单线程的脚本语言,即同一时刻只能做一件事情,否则会带来极其复杂的同步问 ...
- JavaScript多线程之HTML5 Web Worker
在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...
- web worker技术-js新线程
web worker的小例子,用来入门很合适,建议启动服务来开发.可以使用node的anywhere. <!DOCTYPE html> <html lang="en&quo ...
- web worker的介绍和使用
文章目录 简介 Web Workers的基本概念和使用 Web Workers的分类 worker和main thread之间的数据传输 简介 什么是web worker呢?从名字上就可以看出,web ...
- HTML5 Web Worker
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>& ...
- 如何debug web worker
Created by Jerry Wang on Aug 12, 2014 Web Workers 为 Web 前端网页上的脚本提供了一种能在后台进程中运行的方法.一旦它被创建,Web Workers ...
- 如何调试 web worker
Created by Jerry Wang on Aug 12, 2014 Web Workers 为 Web 前端网页上的脚本提供了一种能在后台进程中运行的方法.一旦它被创建,Web Workers ...
- Web Worker javascript多线程编程(一)
什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...
- 如何查找历史线程阻塞原因_学习 Web Worker(js中的“多线程”)
昨天部门例会,讨论开发的系统遇到的问题,遇到一个医保上传比较耗时的问题,解决方案提到了Web Worker,学习一波. 首先简单介绍一下什么是web worker.我们都知道在浏览器中javascri ...
最新文章
- 最牛X的GCC 内联汇编
- AEM:众里寻他千百度,用了SIP不迷路-识别污水处理单元中砷氧化细菌的多样性及代谢潜力...
- R绘制直方图(Histogram)
- 12、Struts2表单重复提交
- SpringBoot_日志-日志框架分类和选择
- 22Java之JDBCTemplate总结
- php的数据模型包括,数据库中模型的分类有哪些
- java解析多层嵌套json字符串
- 测带宽的工具_发送端测试的主力设备 - 实时示波器朝向高带宽高位数发展
- oracle服务器支持ipmi带外管理,ipmi带外管理
- mysql5.7.20新特_Mysql5.7新特性
- 各类手机开发平台介绍(转载)
- 苹果一体机电脑计算机图标找不到,mac电脑airplay图标不见了怎么办
- 7分钟学会HTML网页制作
- 如何將人臉變漂亮(三)
- 【图解】什么是拥塞控制,这应该是把拥塞控制讲的最好的文章了
- js中的escape方法有什么用?
- 独立游戏——《爱与正义》准备开工啦!
- 福禄克FLUKE DTX-1800和DSX2-8000系列电缆认证分析仪如何导出测试报告?
- float与double的MAX-MIN
热门文章
- 面试官问我什么是「栈」,我随手画了 10 张图来解释
- B 站 Up 主自制秃头生成器,圆你秃头梦想可好?
- LG 出售中国总部大楼;苹果延长疫情期间 Apple 设备保修期;Linux 5.6 新特性 | 极客头条...
- 通过 .git 目录深入理解 Git!
- 真的,关于 Kafka 入门看这一篇就够了
- 一行Python代码能干什么?惊了!
- 巨头垂涎却不能染指,loT 数据库风口已至
- NB-IoT 备胎转正的背后,究竟意味着什么?
- 任正非回应“华为营收下降300亿美元”;今日头条澄清「通讯录不属于用户隐私」;Kotlin 1.3.40发布 | 极客头条...
- 直接拿来用!盘点四款优秀的开源协作文本编辑器