HTML5学习总结-06 WebWorker
2024-10-19 02:22:14
一 WebWorkder
它允许开发人员编写能够长时间运行而不被用户所中断的后台程序,去执行事务或者逻辑,并同时保证页面对用户的响应。简而言之,就是允许JavaScript创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。从而,可以用webWorker来处理一些比较耗时的计算。
好处:
1 可以加载一个JS进行大量的复杂计算而不挂起主进程,并通过postMessage,onmessage进行通信
2 可以在worker中通过importScripts(url)加载另外的脚本文件
3 可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
4 可以使用XMLHttpRequest来发送请求
局限性:
1 不能跨域加载JS
2 worker内代码不能访问DOM
3 各个浏览器对Worker的实现不大一致,例如FF里允许worker中创建新的worker,而Chrome中就不行
4 IE这个新特性
例子:
index.html
<!DOCTYPE html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<p id="support">你的浏览器不支持 HTML5 Web Workers</p>
<button id="stopButton" >停止任务</button>
<button id="helloButton" >发送消息</button>
<script>
window.onload = function() {
if( typeof (Worker) !== "undefined") {
document.getElementById("support").innerHTML = "你的浏览器支持HTML5 Web Workers";
worker = new Worker("worker.js");
worker.onmessage = function(e) {
console.log(e.data);
}
worker.onerror = function(e) {
console.warn(e.message, e);
}
document.getElementById("helloButton").onclick = function() {
worker.postMessage("ok");
}
document.getElementById("stopButton").onclick = function() {
worker.terminate();
};
}
} </script>
worker.js
onmessage = function(e) {
postMessage("worker says: " + e.data );
}
参考资料:
http://www.w3school.com.cn/html5/html_5_webworkers.asp
http://www.cnblogs.com/giggle/p/5350288.html
http://www.cnblogs.com/giggle/p/5350288.html
最新文章
- Android开发学习之路-记一次CSDN公开课
- Flash: An Efficient and Portable Web Server
- 怎么在MVC中使用自定义Membership
- rem的使用
- 《BI那点儿事》Microsoft 顺序分析和聚类分析算法
- asp.net mvc输出自定义404等错误页面,非302跳转。
- 把nc v6的源码看懂
- c++多线程崩溃错误1
- 用scikit-learn学习LDA主题模型
- 深入探讨List<;>;中的一个姿势。
- 最全Pycharm教程(32)——依据FHS在Linux上安装Pycharm
- Keepalived详解(五):Keepalived集群中MASTER和BACKUP角色选举策略【转】
- UTF8 &; GBK之间的转换
- datanode启动失败
- docker之MySQL主从复制
- SourceTree 关于 .gitignore使用/下载
- 自定义Qt组件-通讯模块(P3)
- 自建 AppRTC
- dcos下rexray服务的配置
- js运行机制(线程)