Html5 Worker
来源:互联网 发布:廖雪峰python教程微盘 编辑:程序博客网 时间:2024/05/16 11:18
Html5 Worker
Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。
如何使用Worker
主页面
- 通过在主页面的js中创建 Worker实例来创建新线程.
- 通过postMessage(data)启动线程,并传递参数。
- 通过onmessage(data)回调函数接收数据,并在页面呈现。
- 可通过 terminate() 方法终止线程,被终止的Worker对象不能被重启或重用。
//主页面var worker = new Worker("js/worker.js"); //创建实例同时必须传入需要在新线程中执行的代码路径worker.postMessage(num); //传递参数并启动线程worker.onmessage = function(event){ //线程结束之后回调 console.log(event.data); document.getElementById("sum").innerHTML = event.data; }
- worker.js页面
- 通过onmessage(data) 等待响应主页面的调用。
- 实现运算
- 将运算结果通过postMessage(data)发送回主页面,触发主页面onmessage回调
onmessage = function(event){ //响应主页面调用,并通过参数接收主页面传递的数据
var sum = fibonacci(event.data);
console.log(event);
postMessage(sum); //将运算结果发送至主页面,并触发回调
};
检测可用性
检测浏览器是否支持Worker
if(typeof(Worker)!=="undefined"){ //浏览器支持Worker}else{ //浏览器不支持支持Worker}
限制与支持
- 限制
- Web Worker无法访问DOM节点;
- Web Worker无法访问全局变量或是全局函数;
- Web Worker无法调用alert()或者confirm之类的函数;
- Web Worker无法访问window、document之类的浏览器全局变量;
- 支持
- 可以加载一个JS进行大量的复杂计算而不挂起主进程,并通过postMessage,onmessage进行通信
- 可以在worker中通过importScripts(url)加载另外的脚本文件
- 可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
- 可以使用XMLHttpRequest来发送请求
- 可以访问navigator的部分属性
- 限制
案例
- fibonacci 计算
- 仿抢票系统
0 0
- Html5 Worker
- HTML5之Worker用法
- HTML5之Worker Thread
- HTML5之Worker用法
- HTML5之Worker Thread
- HTML5之Worker用法
- HTML5之Worker用法
- HTML5之Worker用法
- HTML5 Web Worker(读书笔记)
- HTML5 Web Worker使用
- HTML5 Web Worker
- HTML5 web Worker 多线程
- HTML5之Worker
- html5 worker 求素数
- HTML5 worker 多线程
- HTML5 worker 多线程
- HTML5 worker 多线程
- HTML5 worker 多线程
- 数据结构常见问题
- java事件处理模型
- Burp suite基本使用(一)
- java基础第一章_运算符_算数运算符
- Longest Symmetric String (25) 与Manacher算法
- Html5 Worker
- 计算机网络错题(2)
- Android四大组件:Service史上最全面解析
- 百万数据秒级处理
- 存储过程
- Java SPI 机制实现解耦与本地化
- hdu1864——01背包变形
- Spring MVC 教程,快速入门,深入分析
- Spring整合web项目原理