HTML5技术

HTML5:web socket 和 web worker - 奔跑的铃铛

字号+ 作者:H5之家 来源:H5之家 2016-10-19 15:00 我要评论( )

做练习遇到了一个选择题,是关于web worker的,问web worker会不会影响页面性能?补习功课之后,答案是不会影响。 查阅了相关资料学习web worker,又遇到了web socket,整理如下: web socket 和 worker 的作用:为构建高效能的web应用提供了新的参考方案。

做练习遇到了一个选择题,是关于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() 

worker.postMessage("hello world"); worker.onmessage =console.log(evt.data); }

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

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

如有错误,请您指正!

 

参考文档:

web socket and web worker 基础原理及使用

HTTP协议之chunk编码(分块传输编码)

七种web socket框架的性能比较

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5新增元素、标签总结 - 奔跑的铃铛

    HTML5新增元素、标签总结 - 奔跑的铃铛

    2016-10-19 12:00

  • 基于html5,父级块中添加video,不能全屏播放的问题解决。 - 猕猴桃姑娘

    基于html5,父级块中添加video,不能全屏播放的问题解决。 - 猕猴桃

    2016-10-18 18:00

  • 【HTML5】Canvas 实现放大镜效果 - zhangjk

    【HTML5】Canvas 实现放大镜效果 - zhangjk

    2016-10-15 17:00

  • html5学习笔记6-- canvas - tuohaibei

    html5学习笔记6-- canvas - tuohaibei

    2016-10-15 16:00

网友点评
t