前端培训之Web Worker 和webSocket

发布时间:2020年05月18日作者:atguigu浏览次数:991

webSocket

websocket是一种协议,本质上和http,tcp一样。协议是用来说明数据是如何传输的。它的url前缀是ws:// 或者wss://,后者是加密的。客户端和服务端进行websocket交互的方式也有人理解为“HTTP握手+TCP数据传输”的方式。

HTTP握手+TCP数据传输:

  1. 浏览器(支持Websocket的浏览器)像HTTP一样,发起一个请求,然后等待服务端的响应;
  2. 服务器返回握手响应,告诉浏览器请将后续的数据按照websocket制定的数据格式传过来;
  3. 浏览器和服务器的socket连接不中断,此时这个连接和http不同的是它是双工的了;
  4. 浏览器和服务器有任何需要传递的数据的时候使用这个长连接进行数据传递

这里说它是HTTP握手,是因为浏览器和服务器在建立长连接的握手过程是按照HTTP1.1的协议发送的,有Request,Request Header, Response, Response Header。但是不同的是Header里面的字段是有特定含义的。

说它是TCP传输,主要体现在建立长连接后,浏览器是可以给服务器发送数据,服务器也可以给浏览器发送请求的。当然它的数据格式并不是自己定义的,是在要传输的数据外层有ws协议规定的外层包的。

web worker

当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

而web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。

除了DOM操作之外,理论上任何JS脚本任务都可放入worker中执行;语法上的限制,则是不能跨域访问JS。worker常用于需要消耗大量时间和CPU资源的复杂计算,以换来前台用户操作的友好型;换句话说,从用户体验上看,提高了服务性能。

worker主线程:

  1. 通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker,同时返回一个worker实例。
  2. 通过worker.postMessage( data) 方法来向worker发送数据。
  3. 绑定worker.onmessage方法来接收worker发送过来的数据。
  4. 可以使用 worker.terminate() 来终止一个worker的执行。

WebSocket是Web应用程序的传输协议,它提供了双向的,按序到达的数据流。他是一个html5协议,WebSocket的连接是持久的,他通过在客户端和服务器之间保持双工连接,服务器的更新可以被及时推送给客户端,而不需要客户端以一定时间间隔去轮询。

想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训,尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习


上一篇:
下一篇:
相关课程

java培训 大数据培训 前端培训 UI/UE设计培训

关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
全国统一咨询电话:010-56253825
地址:北京市昌平区宏福科技园2号楼3层(北京校区)

深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)

武汉市东湖高新开发区东湖网谷(武汉校区)

西安市雁塔区和发智能大厦B座3层(西安校区)