Web Worker使用初体验
本次 H5 游戏的相关处理不做主要内容,可能会是由于自己处理优化不够导致的问题,请大家勿深究。
分析原因,应该是页面的动画频繁渲染,导致计时器处理事件被阻塞了,这也是JavaScript
处理是单线程的一个直接结果。所以就想到了Web Worker
是否可以解决我的问题,来处理计时器的计算呢?
JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。前面的任务没做完,后面的任务只能等着。
Web Worker
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
Web Worker
是运行在后台的 JavaScript
,独立于其他脚本,不会影响页面的性能。
您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 Web Worker
在后台运行。
Web Worker
的基本原理就是在当前JavaScript
的主线程中,使用Worker
类加载一个JavaScript
文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage
,onmessage
。
所以你可以在前台做一些小规模分布式计算之类的工作,不过 Web Worker 有以下一些使用限制:
- Web Worker 无法访问 DOM 节点;
- Web Worker 无法访问全局变量或是全局函数;
- Web Worker 无法调用 alert()或者 confirm 之类的函数;
- Web Worker 无法访问 window、document 之类的浏览器全局变量;
使用 Web Worker
支持性检测
1 |
|
创建 worker.js
1 |
|
以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。当然,我的应用场景太简单了,web worker 通常不用于如此简单的脚本,而是用于更耗费 CPU 资源的任务。
创建 Worker 对象
1 |
|
消息处理
1 |
|
当 web worker 传递消息时,会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。
错误处理
1 |
|
终止 Web Worker
1 |
|
使用后记
在使用 Web Worker 之后,新开一个线程用于计时器的计算,从而基本解决了游戏时间的问题。由于计时器的间隔时间和发送消息的过程,可能还是和实际的间隔时间会有一定的出入,但是从活动来说已经在接受范围内了。
通过这次简单的使用 Web Worker,初步理解了其基本原理和使用方法,也为以后的相似情景找到了解决的路径,希望能够对遇到同样问题的朋友有所帮助。
- 本文作者:冷星
- 本文链接:http://lengxing.club/2019/01/09/Web%20Worker%E4%BD%BF%E7%94%A8%E5%88%9D%E4%BD%93%E9%AA%8C/index.html
- 版权声明:本博客所有文章均采用 BY-NC-SA 许可协议,转载请注明出处!