HTML5 开发Web,MobileWeb & Apps范圣刚安博中程在线
Web WorkersJAVASCRIPT CONCURRENCY
无响应的脚本当在 HTML 页面中执行脚本时,页面会变得没有响应直到脚本执行完成。安博中程在线 3/20
什么是 Web Workers ?安博中程在线Web Workers 是在后台运行的 JavaScript,独立于其他脚本,不会影响页面的性能。你可以继续执行你想做的任何事情:点击,选取等等,同时 Web Workers 就在后台运行。浏览器实...
检测浏览器是否支持 Web Workers方法1: 检测检测 如果浏览器支持 Web Worker API 的话,全局 window 对象会有一个名为 Worker 的属性,反之,window 对象上该属性的值为 undefined 。方法2:...
HTML5 Web Workers Example一个简单的示例:创建一个简单的 Web Worker,在后台计数计数:启动启动 WorkerWorker 停止停止 WorkerWorker安博中程在线 6/20
创建一个 Web Worker 文件因为实例化 Worker 对象的时候需要传入要执行的 JavaScript 文件名,所以我们需要在外部创建一个 JavaScript 文件:安博中程在线vari=0;functiontimedCount(){...
实例化一个 Web Worker 对象下面的代码创建了一个新的 Web Worker 对象,如果指定的 JavaScript 文件存在的话,浏览器会生成一个新的 Worker 线程,"worker.js"文件文件被异步下载,其中的代码被运行。安...
Worker 和页面之间的通信Worker 是通过 message 事件和页面通信的,来自 Worker 的数据保存在 event.data 中。在下面的代码中,我们给 Web Worker 对象添加了一个"onmessage"事件监听器。在 ...
使用 JSON 对象传递消息在所有支持的浏览器中,postMessage() 都能支持对象参数,也就是说可以序列化为 JSON 结构的任何值都可以作为参数传递给 postMessage()。安博中程在线<button onclick="sayH...
使用 JSON 对象传递消息worker.js代码安博中程在线self.addEventListener(message, function(e) {var data = e.data;switch (data.cmd) {case start...
使用 JSON 对象传递消息DemoSay HISay HI Send unknown commandSend unknown command Stop workerStop worker安博中程在线 12/20
停止 Web WorkerWeb Worker 对象创建以后,直到被终止掉之前会一直监听有没有消息(即使外部的脚本已经执行完成)。我们可以使用 terminate() 方法来终止一个 Web Worker, 同时释放浏览器和计算机资源。在 Wo...
Web Worker 的作用域安博中程在线Web Worker 中的代码不能访问 DOM,也无法通过任何方式影响页面的外观。Web Worker 中的全局对象是 Worker 对象本身,this 和 self 引用的都是 Worker 对象。当...
Web Worker 的限制由于 Web Worker 多线程的特点,Web Worker 只能访问 JavaScript 的一些特性:Web Worker 不能访问:安博中程在线navigator 对象(仅限 appCodeName, app...
Web Worker 错误处理Worker 内部的 JavaScript 在执行过程中碰到错误时就会触发 error 事件。error 事件的三个属性:安博中程在线filename: 发生错误的文件名。lineno: 代码行号。message:...
Web Worker 的应用场景凡是比较消耗时间的操作,都可以转交给 Worker 来做而不会阻塞用户界面安博中程在线排序图像处理加密解密......····17/20
Web Workers 的未来Web Workers 标准目前在 W3C 的状态是 CandidateRecommendation(2012/05/01),还在继续制定和改进之中。安博中程在线目前我们讨论的 Workers 属于"专用 Work...
扩展阅读安博中程在线Shared WorkersWeb Workers in IE10: Background JavaScript Makes Web Apps FasterWeb Workers - Multithreaded Progra...
<Thank you!>微博 @范圣刚博客 www.tfan.orggithub github.com/princetoad
Upcoming SlideShare
Loading in …5
×

HTML5 Web workers

403 views
307 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
403
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 Web workers

  1. 1. HTML5 开发Web,MobileWeb & Apps范圣刚安博中程在线
  2. 2. Web WorkersJAVASCRIPT CONCURRENCY
  3. 3. 无响应的脚本当在 HTML 页面中执行脚本时,页面会变得没有响应直到脚本执行完成。安博中程在线 3/20
  4. 4. 什么是 Web Workers ?安博中程在线Web Workers 是在后台运行的 JavaScript,独立于其他脚本,不会影响页面的性能。你可以继续执行你想做的任何事情:点击,选取等等,同时 Web Workers 就在后台运行。浏览器实现 Web Workers 的方式有很多种,可以使用线程,后台进行,或者运行在其他处理器核心上的进程等。目前支持 Web Workers 的浏览器有 IE10+, Firefox3.5+, Safari4+, Opera10.6+, Chrome 和 iOS 版的 Safari,Android 版的手机QQ浏览器等。···4/20
  5. 5. 检测浏览器是否支持 Web Workers方法1: 检测检测 如果浏览器支持 Web Worker API 的话,全局 window 对象会有一个名为 Worker 的属性,反之,window 对象上该属性的值为 undefined 。方法2: 使用 Modernizr 库提供的方法 检测检测安博中程在线<script type=text/javascript>function supports_web_workers() {return !!window.Worker;}</script>JAVASCRIPT<script type=text/javascript>function modernizr_web_workers() {if (Modernizr.webworkers) {// window.Worker 存在} else {// 浏览器没有提供 Web Workers 的原生支持}}</script>JAVASCRIPT5/20
  6. 6. HTML5 Web Workers Example一个简单的示例:创建一个简单的 Web Worker,在后台计数计数:启动启动 WorkerWorker 停止停止 WorkerWorker安博中程在线 6/20
  7. 7. 创建一个 Web Worker 文件因为实例化 Worker 对象的时候需要传入要执行的 JavaScript 文件名,所以我们需要在外部创建一个 JavaScript 文件:安博中程在线vari=0;functiontimedCount(){i=i+1;postMessage(i);setTimeout("timedCount()",500);}timedCount();JAVASCRIPT7/20
  8. 8. 实例化一个 Web Worker 对象下面的代码创建了一个新的 Web Worker 对象,如果指定的 JavaScript 文件存在的话,浏览器会生成一个新的 Worker 线程,"worker.js"文件文件被异步下载,其中的代码被运行。安博中程在线varworker=newWorker("worker.js"); JAVASCRIPT注意:Worker 脚本必须是和它们的调用页面同样 scheme 的外部文件。也就是说,第一,不能从一个 data URL 加载脚本第二,一个 HTTPS 页面不能启动以 HTTP URLs 开始的 worker 脚本。···8/20
  9. 9. Worker 和页面之间的通信Worker 是通过 message 事件和页面通信的,来自 Worker 的数据保存在 event.data 中。在下面的代码中,我们给 Web Worker 对象添加了一个"onmessage"事件监听器。在 Worker 内部调用 postMessage() 就可以发送消息到页面。安博中程在线worker.onmessage = function (event) {var data = event.data;// 对数据进行处理document.getElementById("result").innerHTML=data;};JAVASCRIPTvar i=0;function timedCount() {i=i+1;postMessage(i);setTimeout("timedCount()", 500);}timedCount();JAVASCRIPT9/20
  10. 10. 使用 JSON 对象传递消息在所有支持的浏览器中,postMessage() 都能支持对象参数,也就是说可以序列化为 JSON 结构的任何值都可以作为参数传递给 postMessage()。安博中程在线<button onclick="sayHI()">Say HI</button><button onclick="unknownCmd()">Send unknown command</button><button onclick="stop()">Stop worker</button><output id="result"></output><script>function sayHI() {worker.postMessage({cmd: start, msg: Hi});}function stop() {// Calling worker.terminate() from this script would also stop the worker.worker.postMessage({cmd: stop, msg: Bye});}function unknownCmd() {worker.postMessage({cmd: foobard, msg: ???});}var worker = new Worker(worker.js);worker.addEventListener(message, function(e) {document.getElementById(result).textContent = e.data;}, false);</script>JAVASCRIPT10/20
  11. 11. 使用 JSON 对象传递消息worker.js代码安博中程在线self.addEventListener(message, function(e) {var data = e.data;switch (data.cmd) {case start:self.postMessage(WORKER STARTED: + data.msg);break;case stop:self.postMessage(WORKER STOPPED: + data.msg + . (buttons will no longer work));self.close(); // Terminates the worker.break;default:self.postMessage(Unknown command: + data.msg);};}, false);JAVASCRIPT11/20
  12. 12. 使用 JSON 对象传递消息DemoSay HISay HI Send unknown commandSend unknown command Stop workerStop worker安博中程在线 12/20
  13. 13. 停止 Web WorkerWeb Worker 对象创建以后,直到被终止掉之前会一直监听有没有消息(即使外部的脚本已经执行完成)。我们可以使用 terminate() 方法来终止一个 Web Worker, 同时释放浏览器和计算机资源。在 Worker 内部,调用 close() 方法也可以停止工作。就像在页面中调用 terminate() 方法一样,Worker 停止工作后就不会有事件发生了。安博中程在线// 立即停止worker 的工作worker.terminate();JAVASCRIPT// Web Worker 内部的代码self.close();JAVASCRIPT13/20
  14. 14. Web Worker 的作用域安博中程在线Web Worker 中的代码不能访问 DOM,也无法通过任何方式影响页面的外观。Web Worker 中的全局对象是 Worker 对象本身,this 和 self 引用的都是 Worker 对象。当页面在 Worker 对象上调用 postMessage() 时,数据会被以异步方式传递给 Worker,进而触发 Worker 中的 message 事件;同样,为了处理来自页面的数据,在 Worker 内部也需要创建一个 onmessage 事件处理程序···// 页面 的内部代码,发送数据给workerworker.postMessage(data);JAVASCRIPT·// Web Worker 的内部代码self.onmessage = function(event) {var data = event.data;//......各种数据处理self.postMessage(data); // 把数据再发回给页面}JAVASCRIPT14/20
  15. 15. Web Worker 的限制由于 Web Worker 多线程的特点,Web Worker 只能访问 JavaScript 的一些特性:Web Worker 不能访问:安博中程在线navigator 对象(仅限 appCodeName, appName, appVersion, cookieEnabled, platform, userAgent)location 对象(只读, hash, host, hostname, href, pathname, port, protocol, search)XMLHttpRequest, importScript()setTimeout(), setInterval(), clearTimeout() 和 clearInterval()方法访问 Application cache 以及派生出其他 workers·····DOM(不是线程安全的)window 对象document 对象parent 对象····15/20
  16. 16. Web Worker 错误处理Worker 内部的 JavaScript 在执行过程中碰到错误时就会触发 error 事件。error 事件的三个属性:安博中程在线filename: 发生错误的文件名。lineno: 代码行号。message: 完整的错误信息。···worker.onerror = function(event) {console.log("ERROR: " + event.filename + " (" + event.lineno + "): " + event.message);}JAVASCRIPT16/20
  17. 17. Web Worker 的应用场景凡是比较消耗时间的操作,都可以转交给 Worker 来做而不会阻塞用户界面安博中程在线排序图像处理加密解密......····17/20
  18. 18. Web Workers 的未来Web Workers 标准目前在 W3C 的状态是 CandidateRecommendation(2012/05/01),还在继续制定和改进之中。安博中程在线目前我们讨论的 Workers 属于"专用 Worker"(dedicated worker)范畴,专门为某个特定页面服务,不能在页面间共享。Web Workers 的另外一个概念是“共享 Worker”(shared worker),可以在浏览器中打开同一个页面间的多个标签之间共享。Worker 内部能访问什么,是不是能够像页面一样访问任何数据?大家还需要关注标准的进展。···18/20
  19. 19. 扩展阅读安博中程在线Shared WorkersWeb Workers in IE10: Background JavaScript Makes Web Apps FasterWeb Workers - Multithreaded Programs in JavaScriptHTML5 Web WorkersW3C - workersComputing with JavaScript Web WorkersThe Basics of Web WorkersWikipedia: Web workerWHATWGMD: Using web workers使用 jQuery 和 Web Workers 实现的一个 visualization framework···········19/20
  20. 20. <Thank you!>微博 @范圣刚博客 www.tfan.orggithub github.com/princetoad

×