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()

1  var worker =new Worker("worker_job.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
2
3  worker.postMessage("hello world");     //向worker发送数据
4
5  worker.onmessage =function(evt){     //接收worker传过来的数据函数
6    console.log(evt.data);              //输出worker发送来的数据
7  }

(2)通过添加事件监听器来处理message，在worker内部通过self.函数来和主线程通信:

1 self.addEventListener('message', function(e) {
2     var data = e.data;
3     if(data == 'init')
4         init();
5     else
6         ...
7 }, false);
8
9 self.postMessage("hello worker");

如有错误，请您指正！

转载于:https://www.cnblogs.com/qingqinglanlan/p/7396435.html

HTML5：web socket 和 web worker相关推荐

HTML 5 Web Socket：下一次Web通信革命揭幕，互联网营销
最近关于HTML 5 Web Socket的流言已经满天飞,它通过Web上的一个单一Socket定义了一个全双工通信信道,HTML 5 Web Socket并不是普通HTTP通信的增强版,它代表着一个 ...
web Worker和web Socket
首先介绍下他们的用途: web socket 可以让服务器主动向客户端发送消息,适合开发聊天,多人游戏等协作类的应用. web Work能够让javascript实现多线程,擅长处理大数据计算具体用 ...
HTML5与移动端web学习笔记
概述 HTML5 提供了很多新的功能,主要有: 全选复制放进笔记新的 HTML 元素,例如 section, nav, header, footer, article 等用于绘画的 Canvas ...
web socket 心跳包的实现方案
web socket 心跳包的实现方案05/30/2010 现在网络环境错综复杂,socket心跳包是获得健康强壮的连接的有效解决方案,今天,我们就在web socket中实现心跳包方案,是的,尽管我 ...
html5 app list,让web app更快的HTML5最佳实践
简介本文重点关注如何充分利用HTML5和CSS让web app运行更加流畅. Tip 1: 使用web storage代替cookie cookie最大的缺陷是在每一次HTTP请求中都会携带所有符合 ...
[前端] Node.js + Web Socket 打造即时聊天程序嗨聊
前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前 ...
javascript学习笔记——Ajax、跨资源共享（CORS）、图像Ping、JSONP、Comet、Web Socket
Ajax(Asynchronous JavaScript+XML) 虽然Ajax名字包含XML成分,但是Ajax通信与数据格式无关:从服务器取得的数据不一定是XML数据: Ajax技术能够向服务器请求 ...
基于Spring 4.0 的 Web Socket 聊天室/游戏服务端简单架构
跟webservice来相比,Web Socket可以做到保持长连接,或者说强连接,一直握手存在两端可以互相发送消息互相收到消息,而webservice是一次性的,你要我响应就必须要请求我一次(黄盖: ...
Web Socket简介
1. Web Socket 是 HTML5 的新协议,允许服务器端向客户端发送数据,是一种全双工.双向的通信方式,并且它可以保持长时间通信. 概念理解: [1]全双工:意思就是服务器向浏览器发送数据的 ...
【Web Socket简介】
Web Socket简介 1. Web Socket 是 HTML5 的新协议,允许服务器端向客户端发送数据,是一种全双工.双向的通信方式,并且它可以保持长时间通信. 概念理解: [1]全双工:意思就 ...

HTML5：web socket 和 web worker

HTML5：web socket 和 web worker相关推荐

最新文章

热门文章