Html5 web worker 的总结
来源:互联网 发布:日立电梯调试软件 编辑:程序博客网 时间:2024/05/21 19:44
1.使用场景
a.如果开发人员创建的web应用程序需要执行一些后台的数据处理,但是又不希望这些数据处理任务影响web本身的交互性,那么可以通过web workers生成一个web workers去执行数据处理任务,同时添加一个事件监听器去监听它发出的消息。
b.另外一个用途就是监听后台服务器广播的新闻消息,收到后台服务器的消息后,将其显示在web页面上。在与后台服务器的对话场景中,web workers可能会使用到web sockets或者server-sent事件。
2.web workers的使用方法
Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage。
新线程中:
//worker.js onmessage = function(evt){ var d = evt.data; //通过evt.data获得发送来的数据 postMessage(d); //将获取到的数据发送回主线程 }
主线程中:
<script type="text/javascritp"> //web页主线程,创建一个worker对象并向它传递将在新线程中执行的脚本的URL var worker = new worker("worker.js"); //向worker发送数据 worker.postMessage("hello world"); //接收worker传过来的数据函数 worker.onmessage = function(evt){ //输出worker发送过来的数据 console.log(evt.data); }</script>
在主线程中使用web workers前,首先应该检测浏览器的支持情况,
通过这个例子我们可以看出使用web worker主要分为以下几部分
WEB主线程:
1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker,同时返回一个worker实例。
2.通过worker.postMessage( data ) 方法来向worker发送数据。
3.绑定worker.onmessage方法来接收worker发送过来的数据。
4.可以使用 worker.terminate() 来终止一个worker的执行。
worker新线程:
1.通过postMessage( data ) 方法来向主线程发送数据。
2.绑定onmessage方法来接收主线程发送过来的数据。
3.由于web workers没有访问document对象的权限,所以在worker中必须使用importScripts来导入其它的JavaScript文件。
importScripts(“example.js”)
总结:
我们可以做什么:
1.可以加载一个JS进行大量的复杂计算而不挂起主进程,并通过postMessage,onmessage进行通信
2.可以在worker中通过importScripts(url)加载另外的脚本文件
3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
4.可以使用XMLHttpRequest来发送请求
5.可以访问navigator的部分属性
有哪些局限性:
1.不能跨域加载JS
2.worker内代码不能访问DOM
3.各个浏览器对Worker的实现不大一致,例如FF里允许worker中创建新的worker,而Chrome中就不行
4.不是每个浏览器都支持这个新特性
关于web workers的相关文章:
http://blog.jobbole.com/30592/
http://blog.jobbole.com/30445/
- Html5 web worker 的总结
- HTML5 Web Worker的使用方法
- HTML5 Web Worker的使用
- HTML5 Web Worker的使用方法
- HTML5 Web Worker的使用
- HTML5 Web Worker的使用方法
- HTML5 Web Worker的使用
- HTML5 Web Worker的使用
- HTML5 Web Worker的使用
- HTML5 Web Worker的使用方法(转)
- HTML5 API --- Web Worker的高级用法
- html5中的web worker的用法
- HTML5 Web Worker(读书笔记)
- HTML5 Web Worker使用
- HTML5 Web Worker
- HTML5 web Worker 多线程
- HTML5之Web Worker
- HTML5 Web Worker
- Spring Task定时任务
- 易景地球如何加载google等在线地图数据
- git 常用命令
- lubuntu操作及桌面配置(3)
- Android四大组件之Activity
- Html5 web worker 的总结
- Android手机输入法按键监听-dispatchKeyEvent
- 开发自己的PHP MVC框架(一)
- iOS: no such file or directionally ....
- 海量数据网络部署技术
- 看来真不能直接将.so文件直接添加到Android的JAR包了
- 使用RTMP协议实现视频桌面共享功能
- Java实现RabbitMQ以及Jar包的实现
- Android_关于屏幕适配经验总结