HTML5:web socket 和 web worker
做练习遇到了一个选择题,是关于web worker的,问web worker会不会影响页面性能?补习功课之后,答案是不会影响。
查阅了相关资料学习web worker,又遇到了web socket,整理如下:
web socket 和 worker 的作用:为构建高效能的web应用提供了新的参考方案。
web socket提供更高效的传输协议,web worker提供多线程提高web应用计算效率。
一.web socket
1.web socket是一种协议,本质上和http,tcp一样。协议是用来说明数据是如何传输的,写过一个小的在线聊天使用了socket.io,之后总结这个项目。
2.web socket的前缀有两种:(1)ws:// 不是加密的。 (2)wss:// 是加密的。
3.客户端和服务端进行web socket交互的方式也可以理解为“http握手 + tcp数据传输”的方式:
(1)浏览器(支持Websocket的浏览器)像HTTP一样,发起一个请求,然后等待服务端的响应;
(2)服务器返回握手响应,告诉浏览器请将后续的数据按照websocket制定的数据格式传过来;
(3)浏览器和服务器的socket连接不中断,此时这个连接和http不同的是它是双工的了;
(4)浏览器和服务器有任何需要传递的数据的时候使用这个长连接进行数据传递。
注:HTTP握手:是因为浏览器和服务器在建立长连接的握手过程是按照HTTP1.1的协议发送的,有Request,Request Header, Response, Response Header。但是不同的是Header里面的字段是有特定含义的。
TCP传输: 主要体现在建立长连接后,浏览器是可以给服务器发送数据,服务器也可以给浏览器发送请求的。当然它的数据格式并不是自己定义的,是在要传输的数据外层有ws协议规定的外层包的。
4.数据传输过程:websocket的数据传输形式是:frame。比如会将一条消息分为几个frame,按照先后顺序传输出去。这样做会有几个好处:
(1)大数据的传输可以分片传输,不用考虑到数据大小导致的长度标志位不足够的情况。
(2)和http的chunk一样,可以边生成数据边传递消息,即提高传输效率。
5.客户端使用web socket的语法:JavaScript。
服务端:多种web框架支持。
二.web worker
1.当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
而web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
除了DOM操作之外,理论上任何JS脚本任务都可放入worker中执行;语法上的限制,则是不能跨域访问JS。worker常用于需要消耗大量时间和CPU资源的复杂计算,以换来前台用户操作的友好型;换句话说,从用户体验上看,提高了服务性能。
2.web worker使用:(当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。)
(1)通过向 web worker 添加一个 "onmessage" 事件监听器来获取接受到的消息。
发送消息:postMessage()
终止 web worker,并释放浏览器/计算机资源: terminate()
var worker =new Worker("worker_job.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL worker.postMessage("hello world"); //向worker发送数据 worker.onmessage =function(evt){ //接收worker传过来的数据函数
console.log(evt.data); //输出worker发送来的数据
}
(2)通过添加事件监听器来处理message,在worker内部通过self.函数来和主线程通信:
self.addEventListener('message', function(e) {
var data = e.data;
if(data == 'init')
init();
else
...
}, false); self.postMessage("hello worker");
如有错误,请您指正!
参考文档:
web socket and web worker 基础原理及使用
HTML5:web socket 和 web worker的更多相关文章
- 【我的前端自学之路】【HTML5】Web Socket
以下为自学笔记内容,仅供参考. 转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10508118.html 什么是Web Socket WebSocket ...
- HTML5与移动端web学习笔记
HTML5 提供了很多新的功能,主要有: 新的 HTML 元素,例如 section, nav, header, footer, article 等 用于绘画的 Canvas 元素 用于多媒体播放的 ...
- HTML5与移动端Web
概述 HTML5 提供了很多新的功能,主要有: 新的 HTML 元素,例如 section, nav, header, footer, article 等 用于绘画的 Canvas 元素 用于多媒体播 ...
- web socket (记录下来方便观看)
Web Sockets HTML5 WebSocket 设计出来的目的就是要取代轮询和 Comet 技术,使客户端浏览器具备像 C/S 架构下桌面系统的实时通讯能力. 浏览器通过 JavaScript ...
- Node.js + Web Socket 打造即时聊天程序嗨聊
前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前 ...
- ASP.NET Web API上实现 Web Socket
1. 什么是Web Socket Web Socket是Html5中引入的通信机制,它为浏览器与后台服务器之间提供了基于TCP的全双工的通信通道.用以替代以往的LongPooling等comet st ...
- web socket 心跳包的实现方案
web socket 心跳包的实现方案05/30/2010 现在网络环境错综复杂,socket心跳包是获得健康强壮的连接的有效解决方案,今天,我们就在web socket中实现心跳包方案,是的,尽管我 ...
- ASP.NET Web API上实现 Web Socket - 转
1. 什么是Web Socket Web Socket是Html5中引入的通信机制,它为浏览器与后台服务器之间提供了基于TCP的全双工的通信通道.用以替代以往的LongPooling等comet st ...
- 基于Spring 4.0 的 Web Socket 聊天室/游戏服务端简单架构
在现在很多业务场景(比如聊天室),又或者是手机端的一些online游戏,都需要做到实时通信,那怎么来进行双向通信呢,总不见得用曾经很破旧的ajax每隔10秒或者每隔20秒来请求吧,我的天呐(),这尼玛 ...
随机推荐
- Hibernate操作指南-搭建一个简单的示例(基于原生API和注解)
- Java 泛型约束
类型约束: import java.util.List; import java.util.ArrayList; import java.util.LinkedList; /** * Created ...
- jQuery 跨域访问的三种方式 No 'Access-Control-Allow-Origin' header is present on the reque
问题: XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present ...
- Spark&Hadoop:scala编写spark任务jar包,运行无法识别main函数,怎么办?
昨晚和同事一起看一个scala写的程序,程序都写完了,且在idea上debug运行是ok的.但我们不能调试的方式部署在客户机器上,于是打包吧.打包时,我们是采用把外部引入的五个包(spark-asse ...
- Dapper
前一段做一个技术分享关于dapper的,现在再总结一下,也好长时间没有更新博客了--,用到的东西 Dapper.AutoFac .AutoMapper.FluentValidation: 下面说一下D ...
- WPF显示Html
1.添加引用 WindowsFormsIntegration.dll System.Windows.Forms.dll 2.界面内容 <UserControl x:Class="HKD ...
- fzuoj Problem 2129 子序列个数
http://acm.fzu.edu.cn/problem.php?pid=2129 Problem 2129 子序列个数 Accept: 162 Submit: 491Time Limit: ...
- paper 120:计算距离矩阵的函数的pdist和pdist2函数
matlab中自带的计算距离矩阵的函数有两个pdist和pdist2.前者计算一个向量自身的距离矩阵,后者计算两个向量之间的距离矩阵.基本调用形式如下: D = pdist(X) D = pdist2 ...
- IP釋放、清除、以及刷新DNS
Windows 10 於桌面按住 Windows + X 按鍵. 選擇 Command Prompt (以管理員執行). 在彈跳視窗中輸入 ipconfig /release. 等待數秒回報此 IP ...
- hadoop 多表join:Map side join及Reduce side join范例
最近在准备抽取数据的工作.有一个id集合200多M,要从另一个500GB的数据集合中抽取出所有id集合中包含的数据集.id数据集合中每一个行就是一个id的字符串(Reduce side join要在每 ...