2017补全计划-多线程Worker-学习笔记
2017-02-08 17:31
232 查看
参考资料:
【转向Javascript系列】深入理解Web Worker
使用Web Workers - Web API 接口| MDN
深入 HTML5 Web Worker 应用实践:多线程编程
Web Worker在WebKit中的实现机制
使用专用线程进行数学运算,Web Worker最简单的应用就是用来做后台计算,而这种计算并不会中断前台用户的操作
图像处理,通过使用从或者元素中获取的数据,可以把图像分割成几个不同的区域并且把它们推送给并行的不同Workers来做计算
大量数据的检索,当需要在调用 ajax后处理大量的数据,如果处理这些数据所需的时间长短非常重要,可以在Web Worker中来做这些,避免冻结UI线程
背景数据分析,由于在使用Web Worker的时候,我们有更多潜在的CPU可用时间,我们现在可以考虑一下JavaScript中的新应用场景。例如,我们可以想像在不影响UI体验的情况下实时处理用户输入。利用这样一种可能,我们可以想像一个像Word(Office Web Apps 套装)一样的应用:当用户打字时后台在词典中进行查找,帮助用户自动纠错等等。
Web Worker 简单Demo :
main.html
worker.js
注: chrome浏览器可能会报错,因为chrome要求worker.js必须存在服务器端,建议练习多线程时候使用firefox
深入了解Web Worker:
HTML5 中的 Web Worker 可以分为两种不同线程类型,一个是专用线程 Dedicated Worker,一个是共享线程 Shared Worker
(后续补充,目前学习概念觉得太模糊)
补充概念点:
超时与间隔
Worker 能够像主线程一样使用超时与间隔。这会十分有用,比如说,如果你想让 worker 线程周期性而并非不间断的运行代码。
终止 worker
如果你想立即终止一个运行中的 worker,可以调用 worker 的 terminate()方法:
处理错误
当 worker 出现运行时错误时,它的 onerror 事件处理函数会被调用。它会收到一个实现了 ErrorEvent 接口名为 error的事件。该事件不会冒泡,并且可以被取消;为了防止触发默认动作,worker 可以调用错误事件的 preventDefault() 方法。
错误事件拥有下列三个它感兴趣的字段:
message
可读性良好的错误消息。
filename
发生错误的脚本文件名。
lineno
发生错误时所在脚本文件的行号。
访问 navigator 对象
Workers 可以在它的作用域内访问 navigator 对象。它含有如下能够识别浏览器的字符串,就像在普通脚本中做的那样:
引入脚本与库
Worker 线程能够访问一个全局函数,importScripts() ,该函数允许 worker 将脚本或库引入自己的作用域内。你可以不传入参数,或传入多个脚本的 URI 来引入;以下的例子都是合法的:
【转向Javascript系列】深入理解Web Worker
使用Web Workers - Web API 接口| MDN
深入 HTML5 Web Worker 应用实践:多线程编程
Web Worker在WebKit中的实现机制
Web Worker的用处:Web Worker带来后台计算能力
Web Worker 部分典型的应用场景:使用专用线程进行数学运算,Web Worker最简单的应用就是用来做后台计算,而这种计算并不会中断前台用户的操作
图像处理,通过使用从或者元素中获取的数据,可以把图像分割成几个不同的区域并且把它们推送给并行的不同Workers来做计算
大量数据的检索,当需要在调用 ajax后处理大量的数据,如果处理这些数据所需的时间长短非常重要,可以在Web Worker中来做这些,避免冻结UI线程
背景数据分析,由于在使用Web Worker的时候,我们有更多潜在的CPU可用时间,我们现在可以考虑一下JavaScript中的新应用场景。例如,我们可以想像在不影响UI体验的情况下实时处理用户输入。利用这样一种可能,我们可以想像一个像Word(Office Web Apps 套装)一样的应用:当用户打字时后台在词典中进行查找,帮助用户自动纠错等等。
Web Worker 简单Demo :
main.html
<html> <head> <script type="text/javascript"> var worker = new Worker('worker.js'); var obj = {"first":1, "second":2}; worker.postMessage(obj); worker.onmessage = function (event) { alert(event.data); } function postMsg(){ if (worker) worker.postMessage(obj); } </script> </head> <body> <button onclick="postMsg()">post</button> </body> </html> //并不需要使用script标签引入worker.js
worker.js
//当main.html里的js调用worker.postMessage()方法时 //线程到这里会自动调用onmessage 的callback函数 onmessage = function (event) { var data = event.data; var first=data.first; var second=data.second; handleTask(first,second); }; function handleTask(a, b) { var out = a + b; postMessage("Worker Done! out = " + out); }
注: chrome浏览器可能会报错,因为chrome要求worker.js必须存在服务器端,建议练习多线程时候使用firefox
深入了解Web Worker:
HTML5 中的 Web Worker 可以分为两种不同线程类型,一个是专用线程 Dedicated Worker,一个是共享线程 Shared Worker
(后续补充,目前学习概念觉得太模糊)
补充概念点:
超时与间隔
Worker 能够像主线程一样使用超时与间隔。这会十分有用,比如说,如果你想让 worker 线程周期性而并非不间断的运行代码。
终止 worker
如果你想立即终止一个运行中的 worker,可以调用 worker 的 terminate()方法:
处理错误
当 worker 出现运行时错误时,它的 onerror 事件处理函数会被调用。它会收到一个实现了 ErrorEvent 接口名为 error的事件。该事件不会冒泡,并且可以被取消;为了防止触发默认动作,worker 可以调用错误事件的 preventDefault() 方法。
错误事件拥有下列三个它感兴趣的字段:
message
可读性良好的错误消息。
filename
发生错误的脚本文件名。
lineno
发生错误时所在脚本文件的行号。
访问 navigator 对象
Workers 可以在它的作用域内访问 navigator 对象。它含有如下能够识别浏览器的字符串,就像在普通脚本中做的那样:
引入脚本与库
Worker 线程能够访问一个全局函数,importScripts() ,该函数允许 worker 将脚本或库引入自己的作用域内。你可以不传入参数,或传入多个脚本的 URI 来引入;以下的例子都是合法的:
importScripts(); /* 什么都不引入 */ importScripts('foo.js'); /* 只引入 "foo.js" */ importScripts('foo.js', 'bar.js'); /* 引入两个脚本 */
相关文章推荐
- 2017补全计划-前端AOP编程-学习笔记
- 2017补全计划-JS引擎,UI引擎-学习笔记
- 2017补全计划-JS的工厂模式-学习笔记
- 2017补全计划-持久化缓存-学习笔记
- 2017补全计划-事件队列-学习笔记
- 【Linux学习笔记二十四】管理计划任务crontab
- linux计划任务cron学习笔记
- Linux学习笔记_Crontab计划任务实例详解教程
- live555学习笔记4-计划任务(TaskScheduler)深入探讨
- [学习笔记]批次需求计划-十一大量
- 我的嵌入式学习之路——笔记计划
- PMBOK学习笔记-项目与战略计划
- jquery学习笔记-文本框的占位字符与ajax自动补全提示框
- openerp学习笔记 计划动作、计划执行(维护计划)
- crond——Linux下的计划任务学习笔记
- Linux学习笔记:进程管理和任务计划
- Introduction to Materials Management 学习笔记--编制主计划
- live555学习笔记4-计划任务(TaskScheduler)深入探讨
- live555学习笔记4-计划任务(TaskScheduler)深入探讨
- C\C++ 程序员从零开始学习Android - 个人学习笔记(一) - 计划和书籍