登录 | 注册

优就业Html5教程-web socket 和 web worker

首页 > Web前端 > HTML5 2016-10-19 17:48:59 浏览次 共 条评论

收藏赞(分享

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

免责声明:本文来源于博客园,由网友提供或网络搜集,仅供个人研究、交流学习使用,不涉及商业盈利目的。如有版权问题,请联系本站管理员予以更改或删除。优知网会定期发布Web前端相关趋势文章,包括 Web标准 HTML5 CSS JS JQuery Ajax 网页特效 等领域,敬请关注!

分享到
人收藏5 收藏
 
我要评价
相关文章
优就业HTML5教程-HTML5到底有什么用?
优就业HTML5教程-HTML5到底有什么用?
优就业HTML5教程-字中字效果html5实例
优就业HTML5教程-字中字效果html5实例
 优就业HTML5教程-HTML5 10款必备常用工具
优就业HTML5教程-HTML5 10款必备常用工具
优就业HTML5教程-H5 适配 动画animation js touch
优就业HTML5教程-H5 适配 动画animation js touch
 
 

咨询中心

优就业微信扫一扫
微信扫一扫

400-650-7353

加入官方微博