现在大多数学习前端的小伙伴都在迷茫一个问题, 当遇到自己决绝不了的问题怎么办? 这些也是小猿圈 web 前端讲师担心的, 以后每天小猿圈都会为大家分享一些关于学习前端中的一些知识点, 今天分享的是 html5 多线程开发之 WebWorkers.
WebWorkers 是运行在后台的 JS 代码, 独立于其他脚本, 不会影响页面的性能. 我们可以继续做任何愿意做的事情: 点击, 选取内容等等, 而此时 WebWorkers 在后台运行.
所有主流浏览器均支持 Web worker, 除了 Internet Explorer.
第一步: 生成 worker.
调用 Worker()构造函数, 指定一个要在 worker 线程内运行的脚本的 URI, 例子是当前页面指定 worker 线程执行的脚步为 script-worker.JS.
var myWorker = new Worker("script-worker.js");
在 script-worker.JS 里面我们可以执行额外的代码, 这些代码的执行不会影响页面去干别的你想干的事情, 这听起来很棒.
第二步: 传递数据.
页面可以和 worker 交互传递数据, 这样 worker 在不影响页面干有意义的事情的情况下可以默默去计算, 好了告诉一下页面, 使用这些数据.
- //[主页面代码]
- myWorker.postMessage("data-from-mainpage");
- //[worker 代码]
- onmessage = function (oEvent) {
- console.log("主页面发送过来的数据是:"+oEvent.data));
- };
上面是[主页面发送数据给 worker 脚本] 的情况, 是的, 你看见了非常亲切的 postMessage.
- //[主页面代码]
- myWorker.onmessage = function (oEvent) {
- console.log("worker 脚本发送过来的数据是:"+oEvent.data));
- };
- //[worker 代码]
- postMessage("data-from-mainpage");
上面是[worker 脚本发送数据给主页面] 的情况, 依旧很简单, 不过这些只是 API, 关键在于巧妙的使用才是有益的.
此外, 可能 worker 执行会出错, 主页面通过:
myWorker.onerror=function(oEvent){};
可以监听 worker 发生错误.
第三步: 重要几点.
worker 线程能够在不干扰 UI 的情况下执行任务, 所执行的 JavaScript 代码完全在另一个作用域, 与当前网页中的代码不共享作用域.
Worker 的全局作用域中提供了 importScripts()方法, 接收一个或多个指向 JavaScript 文件的 URL, 加载过程都是异步进行.
importScripts()只会在您提供绝对 URI 的情况下生效, 执行过程也是异步的.
当我们创建 WebWorkers 对象后, 它会继续监听消息 (即使在外部脚本完成之后) 直到其被终止为止, 使用 myWorker.terminate()方法可以终止 WebWorkers, 并释放浏览器 / 计算机资源.
第四步: 重要限制.
1, 无法访问 DOM 节点, 无法访问全局变量或是全局函数, 法调用 alert()或者 confirm 之类的函数和无法访问 Windows,document 之类的浏览器全局变量;
2, 不过 Web Worker 中的 JavaScript 依然可以使用 setTimeout(),setInterval()之类的函数, 也可以使用 XMLHttpRequest 对象来做 Ajax 通信.
今天的知识点就分享到这里了, 有需要的朋友欢迎点赞评论转发, 想了解更对 Web 前端内容的朋友可以关注小猿圈的每天的动态, 会不定时更新很多更好的内容奉献给大家 Web 前端自学2群: 738735873, 希望对你的学习有所帮助.
来源: http://www.jianshu.com/p/bb018b256489