webWorker初识
来源:互联网 发布:jo malone推荐知乎 编辑:程序博客网 时间:2024/05/17 21:55
webWorker相当于为js创建了多线程一样,注意!!!这里只是相当于,js一定是单线程的!那么,当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。也就是说,在这段js代码运行完毕之前,页面是无法响应用户操作的。
而HTML5引入了一个工作线程(webWorker)的概念, 我们可以在浏览器后台运行Javascript,那么页面在Javascript运行期间依然可以响应用户操作。后台会启动一个worker线程来执行这段代码(一些比较耗时的运算),用户也可以创建多个worker线程。
Web Worker可以提高应用的总体性能,并且提升用户体验。不过Web Worker有以下一些使用限制:
Web Worker无法访问DOM节点;
Web Worker无法访问全局变量或是全局函数;
Web Worker无法调用alert()或者confirm之类的函数;
Web Worker无法访问window、document之类的浏览器全局变量;
简而言之,就是允许JavaScript创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。不过Web Worker中的Javascript依然可以使setTimeout(),setInterval()之类的函数,也可以使XMLHttpRequest对象来做Ajax通信。
Web workers可分为两种类型:专用线程dedicated web worker,以及共享线程shared web worker。 Dedicated web worker随当前页面的关闭而结束;这意味着Dedicated web worker只能被创建它的页面访问。与之相对应的Shared web worker可以被多个页面访问。在Javascript代码中,“Work”类型代表Dedicated web worker,而“SharedWorker”类型代表Shared web worker。这里我们大概说一下work的api。
1.创建一个Worker对象,并向它传递将在新线程中执行的脚本url
var worker = new Worker('worker.js');
2.postMessage(data)
子线程与主线程之间互相通信使用方法,传递的data为任意值。
//worker = new Worker('url');//worker.postMessage传递给子线程数据,对象worker.postMessage({first:1,second:2});//子线程中也可以使用postMessage,如传递字符串postMessage(‘test’);
3.terminate()
主线程中终止worker,此后无法再利用其进行消息传递。注意:一旦terminate后,无法重新启用,只能另外创建。
//worker = new Worker('url');worker.terminate();
4.message
当有消息发送时,触发该事件。且,消息发送是双向的,消息内容可通过data来获取。
worker.onmessage = function(event){ document.getElementById('result').innerHTML+=event.data+"<br/>" ; };
5.error
出错处理。且错误消息可以通过e.message来获取。
//worker = new Worker('url');worker.onerror = function(e){ //打印出错消息 console.log(e.message); //中断与子线程的联系 worker.terminate();}
另: worker线程从上到下同步运行它的代码,然后进入异步阶段来对事件及计时器响应,如果worker注册了message事件处理程序,只要其有可能触发,worker就一直在内存中,不会退出,所以通信完毕后得手动在主线程中terminate或者子线程中close掉,但如果worker没有监听消息,那么当所有任务执行完毕(包括计数器)后,他就会退出。
此处再乱入一个WebSocket(只因名字像)
WebSocket API是下一代客户端-服务器的异步通信方法。该通信取代了单个的TCP套接字,使用ws或wss协议.WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信,因为Ajax技术需要客户端发起请求,而WebSocket服务器和客户端可以彼此相互推送信息;XHR受到域的限制,而WebSocket允许跨域通信。
- webWorker初识
- WebWorker
- webworker
- webWorker
- webWorker
- webWorker操作
- webworker 探秘
- 浅谈webWorker
- 浅谈webWorker
- html5 多线程处理webWorker
- html5 webworker的应用
- WebWorker(工作线程)笔记
- 【面向HTML5--WebWorker】
- WebWorker 工作线程
- http://hi.baidu.com/webworker
- WebWorker 100%前端基础应用
- 解密 Angular WebWorker Renderer (一)
- 关于html5的webworker的简单示例
- 计蒜客 2017 NOIP 提高组模拟赛(一)Day2
- Java连接redis小程序
- 如何用Tensorflow训练模型成pb文件(一)——基于原始图片的读取
- S0.2 灰度图
- GCtf2017---Forbidden(山路十八弯各种要求报文格式+加解密)
- webWorker初识
- 利用PYTHON快速统计数字|单词在文本中出现的次数
- 历史的碎片,一页页飘落,好事者拣起自己中意的那页--马云的早年故事
- 深入理解Java虚拟机--上
- 里面的div怎么撑开外面的div,让高度自适应
- java多线程学习笔记(三)
- C语言简单通讯录模板
- C语言 单链表
- C# 16进制与字符串、字节数组之间的转换