• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5:web socket 和 web worker

HTML5:web socket 和 web worker

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含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()

var worker =new Worker("worker_job.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL

 worker.postMessage("hello world");     //向worker发送数据
 
 worker.onmessage =function(evt){     //接收worker传过来的数据函数
   console.log(evt.data);              //输出worker发送来的数据
 }

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

self.addEventListener('message', function(e) {
    var data = e.data;
    if(data == 'init')
        init();
    else
        ...
}, false);

self.postMessage("hello worker");

参考文档:

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

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

七种web socket框架的性能比较

您可能想查找下面的文章:

相关文章

  • 2018-12-03html5手机触屏touch事件的详细介绍
  • 2018-12-03HTML5 CANVAS:绘制文字
  • 2018-12-03HTML5中标签和常用规则有哪些?html5标签以及规则的介绍
  • 2018-12-03HTML5Web 存储实例详解
  • 2018-12-03HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍_html5教程技巧
  • 2018-12-03canvas多边形的画法示例
  • 2018-12-03如何看待B站 (bilibili) 开源 HTML5 播放器内核 flv.js?
  • 2018-12-03分享一个video标签无法播放mp4的问题以及解决方案
  • 2018-12-03HTML5实战教程———开发一个简单漂亮的登录页面
  • 2018-12-03HTML5实现留言和回复的页面

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 为什么Html5前端开发那么难招?
    • 有关页面访问速度的文章推荐10篇
    • H5怎么实现文件断点续传
    • HTML5/CSS3 经典案例-无插件拖拽上传图片(一)
    • HTML5新增加的标签和表单新增属性的代码实例
    • HTML5游戏开发-Box2dWeb应用(一)-创建各种各样的刚体
    • HTML5边玩边学(1)画布实现方法
    • App三年内是否将被HTML5顶替彻底消失?
    • HTML5的Canvas实现绘制曲线的方法
    • canvas游戏开发学习之一:初识<canvas>标签

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有