本文摘自PHP中文网,作者黄舟,侵删。
不得不说,HTML5确实提供了大量强大的功能特性甚至颠覆了我们之前理解的JavaScript单线程
它提供了JavaScript多线程的解决方案
这个新特性叫做Web Worker
(在此之前没有多线程,setTimeout等本质仍然是单线程)
虽然是多线程编程
不过我们不用担心传统的多线程语言C++、Java等等遇到的多线程问题
下面我们就来看看什么是Web Worker
专用Worker
专用Worker(Dedicated Worker)是最常用的Web Worker
而且各个浏览器实现的还不错
声明
什么时候我们需要多线程呢
比如说我们需要复杂的计算、
1 2 3 4 5 6 7 8 9 |
|
我们计算了从1加到10亿的值
让页面的渲染停了将近1秒钟
对于用户的体验来说是相当不友好的
虽然开发中不会有这么丧心病狂的计算
但是可能会遇到密集而又复杂的任务
这时我们也许会希望开辟一个独立的新线程来完成
而我们只需要关注结果值
HTML5允许我们使用Worker线程
它的工作内容需要写在一个独立的js文件中
让我们的多个程序块并发运行
1 |
|
通过这种方式来实例化一个worker
参数是js文件的路径(HTML主文件和Worker文件需要满足同源策略)
当程序运行到这里时
这个文件就会被加载到一个Worker中
浏览器就会启动一个独立线程运行该js文件
交互
我们的主线程和工作线程是基于事件的机制来进行交互的
换句话说,
它们都需要订阅事件来互相通信(onmessage事件)
1 2 3 4 5 |
|
1 2 3 4 5 |
|
它们的数据绑定和数据发送时类似的
只不过在worker文件中不需要用对象调用API
这样我们刚才的复杂计算就可以让worker来做
1 2 3 4 5 6 |
|
1 2 3 |
|
在HTML5的Web Worker规范中
worker中还可以实例化它自己的worker(感觉没什么必要啊)
称为subworker(线程嵌套线程)
不过我测试了一下,chrome暂时还不支持subworker
但是据说Firefox支持
终止
既然我们可以创建worker
那么我们也应该可以终止worker让它停止工作
在主线程和工作线程中都可以终止
只需要在worker对象或worker的作用域中调用API
一个是我们让它结束工作
一个是它自己罢工
1 |
|
1 |
|
不过我想我们一般情况下
都会以worker对象上调用terminate方法的来终止它
这样会比较安全
环境
最开始的时候我就说了
我们不必担心传统的多线程语言遇到的多线程问题
比如说为了防止它们抢占资源而引入的…
无比复杂的锁机制
为什么呢?
因为在worker内部
我们根本就不能访问主程序的任何资源
它就是一个完全独立的线程
Web Worker有如下限制:
同源策略限制
不能访问页面DOM和其他资源
浏览器实现程度不同
不过我们可以在worker内部做这些事情:
可以执行网络操作(Ajax、Web Sockets)
可以使用定时器(set/clearTimeout()、set/clearInterval())
访问某些重要全局变量及功能的复本(navigator、location、JSON、applicationCache)
可以使用importScrips()加载额外js脚本
1 |
|
好奇的话,可以在worker内console.log(this);
查看它的作用域内都有什么
应用
关于它的应用
我们会利用Web Worker做这些事情
复杂数学计算
复杂数据排序
数据处理(压缩、图像处理…)
高流量网络通信
共享Worker
除了专用线程外还有一个共享线程Shared Worker
可以了解一下
刚刚我查了一下
到目前为止,只有谷歌、火狐还有欧朋实现了这个技术
相关阅读 >>
更多相关阅读请进入《HTML5》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者