webSocket 和 webWorker_webworker和websocket区别-优快云博客

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");

如有错误，请您指正！