通信API、使用Web Workers处理线程
1、跨文档消息传输
要想接受从其他的窗口那里发过来的消息,就必须对窗口对象的message事件进行监视。
window.addEventListener("message",function(ev){...},false);
ev.orgin:获取消息的发送源;
ev.data:消息内容;
ev.source:获取消息发送源的窗口对象。
使用window对象的postMessage方法向其他窗口发送消息。
otherWindow.postMessage(message,targerOrigin);
2、Web Sockets通信
HTML5提供的在Web应用程序中客户端与服务器端之间进行的非HTTP的通信机制。
构建连接:var webSocket=new WebSocker("ws://localhost:8081/socket");//URL必须以ws或者wssk开头。
发送消息:webSocket.send("data");
接收服务器消息:
webSocket.onmessage=function(event){
var data=event.data;
}
监听socket打开和关闭事件:
websocket.onopen=function(event){...}
websocket.onclose=function(event){...}
关闭socket:webSocket.close();
readyState属性只可以获取WebSocket对象的状态。
3、使用Web Workers处理线程
创建后台线程:var worker=new Worker("worker.js");//参数为后台线程执行的URL
后台线程不能访问页面或窗口对象。
在后台线程之中接收消息:worker.onmessage=function(event){/*处理收到的消息*/}
对后台线程发送消息:worker.postMessage(message);
在后台线程中,也可以获取worker对象的onmessage事件句柄和postMessage方法在后台进行消息的发送和接收。
与线程进行数据交互:获取数据后动态创建页面元素。
线程嵌套:
单层嵌套:在后台线程中再创建线程。
向主页面线程发送消息用的是postMessage,而向子线程用worker.postMessage。
在多个子线程中进行数据的交互:
线程中可用的变量、函数与类:
self,postMessage(message),onmessage,importScript(urls),nacigator对象,sessionStore/localStore,XMLHttpRequest,Web Workers,setTimeout(),setInterval(),close,eval(),isNan(),escape()等javaScript核心函数,object,WebSorckets.
通信API、使用Web Workers处理线程的更多相关文章
- (92)Wangdao.com_第二十五天_线程机制_H5 Web Workers 分线程任务_事件 Event
浏览器内核 支撑浏览器运行的最核心的程序 IE 浏览器内核 Trident内核,也是俗称的IE内核Chrome 浏览器内核 统称为 Chromium 内核或 ...
- 使用Web Workers处理线程
使用HTML 4和JavaScript创建出来的Web程序中,因为所有的处理都是在单线程中 HTML 5的Web Workers API,HTML 5中,一个Worker实际上为一个后台运行的线程.
- web workers工作线程
web worker工作线程是Html5里面提出来的一个新api,对于JavaScript我们的印象是单线程执行,如果运行复杂运算的时候,页面可能就会失去响应,是运行在后台的javascript,独立 ...
- Webpack 下使用 web workers 及 基本原理 和 应用场景
_ 阅读目录 一:web workers的基本原理 二:web Workers 的基本用法 三:在webpack中配置 Web Workers 四:Web Worker的应用场景 回到顶部 一:web ...
- 通过使用Web Workers,Web应用程序可以在独立于主线程的后台线程中,运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务,从而允许主线程(通常是UI线程)不会因此被阻塞/放慢。
Web Workers API - Web API 接口参考 | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API ...
- 简单了解Web Workers API
1. 为什么使用Web Workers API 通过使用该API,web应用程序可以独立于主线程,运行一个单独的线程来处理脚本. 可以在独立的线程中解决耗时较长的任务,避免主线程阻塞. 2. 应用 1 ...
- html5 Web Workers
虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...
- JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景
摘要: 理解Web Workers. 原文:JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这 ...
- Web Workers文档
Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法.线程可以执行任务而不干扰用户界面.此外,他们可以使用XMLHttpRequest执行 I/O (尽管responseXML和 ...
随机推荐
- 【Pow(x,n)】
题目: Implement pow(x, n). 代码: class Solution { public: double myPow(double x, int n) { double ret = S ...
- CentOS6.5 安装中文输入法
直接转载他人文章:http://hi.baidu.com/dxqt58592/item/a85b96e72c423cc0baf37d3c centos 6.5使用yum安装中文输入法 1.需要root ...
- mybitis中对象字段与表中字段名称不匹配(复制)
开发中,实体类中的属性名和对应的表中的字段名不一定都是完全相同的,这样可能会导致用实体类接收返回的结果时导致查询到的结果无法映射到实体类的属性中,那么该如何解决这种字段名和实体类属性名不相同的冲突呢? ...
- Block Nested-Loop 和 Batched Key Access
官方文档:https://dev.mysql.com/doc/refman/5.7/en/bnl-bka-optimization.html BNL和BKA是MySQL 表关联的两种关联算法 比如t1 ...
- 【bzoj4390】[Usaco2015 dec]Max Flow LCA
题目描述 Farmer John has installed a new system of N−1 pipes to transport milk between the N stalls in h ...
- 【bzoj1415】[Noi2005]聪聪和可可 期望记忆化搜索
题目描述 输入 数据的第1行为两个整数N和E,以空格分隔,分别表示森林中的景点数和连接相邻景点的路的条数. 第2行包含两个整数C和M,以空格分隔,分别表示初始时聪聪和可可所在的景点的编号. 接下来E行 ...
- imx6 PCIE使能加载ath9k无线网卡
imx6q配置pcie无线网卡遇到如下问题: imx6q-pcie 1ffc000.pcie: PCI host bridge to bus 0000:00 pci_bus 0000:00: root ...
- topK问题解法
topK问题的最佳解法是堆排,下面介绍用堆排来解决该问题. 堆排解决topK问题的思路,取出前K个数,最重要的就是要减少比较的次数,用堆排维护一个K大小的堆,比如一个小顶堆,则堆顶为堆中最小的值,将堆 ...
- inux监控平台搭建-监控项
linux监控平台搭建-监控项 本人运维某生态互联网监控平台服务.过程中遇见了很多问题.目前互联网有很多的开源监控工具:nagios.zabbix.falcon.cacti...各有优点.这里不讲解监 ...
- IntelliJ IDEA如何导入Gradle项目
最近学习Gradle,本文来重点介绍一下,如何使用IntelliJ IDEA导入`Gradle项目的一种方法. 选择菜单栏的File->Open. 在打开的窗口选择对应Gradle项目的buil ...