web worker原理 SSE原理

第一部分

什么是 web worker? 

  我们一直强调JavaScript是单线程的,但是web worker的出现使得JavaScript可以在多线程上跑,只是web worker本身适合用于一些复杂的、耗费cpu的运算,不能操作window、document、parent对象,所以说本质上的JavaScript还是单线程的。

  这里,我们仅仅举一个简单的例子,看看web worker是怎么运行的,毕竟是html5的规范,目前浏览器的支持还不是很好。

  web worker就是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能。您还可以做任意想做的事情,不会影响点击等操作。

 

 

 

为什么需要web worker?

  对于耗时而不操作DOM的JavaScript,我们就可以使用web worker,增强性能。 

 

 

web worker有什么要注意的地方?  

  • 不是所有的浏览器都支持,使用前要检查浏览器是否支持。 
  • web worker运行于外部文件中,所以他们无法访问下面的JavaScript对象。
  • 理解好 worker,worker在计算机领域通常被翻译为线程或者是进程。而这里的worker意义也是如此。 我们需要将之正确对待。 

 

 

web worker实例

创建worker.js外部文件:

var i = 0; 
setInterval(function () {postMessage(i++);
}, 1000);

 

html文件如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><p>计数:<span id="result"></span></p><button οnclick="start()">web worker开始工作</button><button οnclick="stop()">web worker结束工作</button><script>var w;function start() {if (typeof Worker != 'undefined') {w = new Worker('worker.js');w.onmessage = function (event) {document.getElementById('result').innerHTML = event.data;}} else {document.getElementById('result').innerHTML = '您的浏览器不支持web worker';}}function stop() {w.terminate();w = undefined;}</script>
</body>
</html>

即首先判断:是否支持Worker构造函数,如果支持,就传递一个js文件创建这个文件的实例,然后就可以调用 message 事件,接收从 worker.js 中获得的数据。 

注意: 必须在服务器上测试,否则会有跨域问题。

最终,我就可以看到效果了。 

代码地址: https://github.com/zzw918/cross-origin/tree/master/webWorker

  

 

 

 

第二部分:

HTML5 服务器发送事件(Server-Sent Events)

HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。

 

Server-Sent 事件 - 单向消息传递

Server-Sent 事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。

例子:Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

 

 

接收 Server-Sent 事件通知

EventSource 对象用于接收服务器发送事件通知:

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{document.getElementById("result").innerHTML+=event.data + "<br>";
};

 

 

    • 创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php")
    • 每接收到一次更新,就会发生 onmessage 事件
    • 当 onmessage 事件发生时,把已接收的数据推入 id 为 "result" 的元素中

 

检测 Server-Sent 事件支持

 

if(typeof(EventSource)!=="undefined")
{// 浏览器支持 Server-Sent// 一些代码.....
}
else
{
// 浏览器不支持 Server-Sent..
}

 

 

 

 

 

  

  

转载于:https://www.cnblogs.com/zhuzhenwei918/p/7440038.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/253632.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何寻回xp盘符丢失的数据

分区丢失是比较常见的数据恢复案例&#xff0c;需要注意&#xff0c;分区丢失后不要再重建新的分区。保护好资料丢失现场&#xff0c;可以最大程度的恢复出资料。具体的恢复方法看正文了解。 工具/软件&#xff1a;星空数据恢复软件 步骤1&#xff1a;先百度搜索并下载程序打开…

afx_msg函数意思

应用程序框架产生的消息映射函数 例如&#xff1a;afx_msg void OnBnClickedButton1(); 其中 afx_msg为消息标志&#xff0c;它向系统声明&#xff1a;有消息映射到函数实现体&#xff1b; 而在map宏定义中&#xff0c;就有具体消息和此函数的映射定义&#xff08;可以是自定义…

文件得编码和文件名的编码是不一样的

1.新知识&#xff0c;通过文件后坠名的编码判断文件类型&#xff0c;可以有效的防止脚本文件伪装为正常得文件。 2.拦截器和过滤器。 过滤器只能够在http请求和回复的时候进行处理。 但是拦截器可以在很多地方拦截&#xff0c;例如程序抛异常等都可以捕获的到。还可以进行权限得…

Visual computing——概述

Visual Computing&#xff08;视觉计算&#xff09;是所有处理二维图像和三维模型的计算机科学学科的总称&#xff0c;即计算机图形学、图像处理、可视化、计算机视觉、虚拟和增强现实、视频处理&#xff0c;但也包括模式识别、人机交互、机器学习等方面。核心挑战是视觉信息&a…

推荐!手把手教你使用Git

一&#xff1a;Git是什么&#xff1f; Git是目前世界上最先进的分布式版本控制系统。 二&#xff1a;SVN与Git的最主要的区别&#xff1f; SVN是集中式版本控制系统&#xff0c;版本库是集中放在中央服务器的&#xff0c;而干活的时候&#xff0c;用的都是自己的电脑&#xff0…

I2C协议学习

I2C Bus(Inter-Integrated Circuit Bus) 最早是由Philips半导体&#xff08;现被NXP收购&#xff09;开发的两线式串行总线&#xff0c;常用于微控制器与外设之间的连接。 一、概述 以下是 I2C 总线的一些特性&#xff1a; 只需要两条总线&#xff1b;一条串行数据线 (SDA) 和…

ajax的简单介绍

响应主体&#xff0c;就是服务器给我们返回的结果内容&#xff08;浏览器里的responsive&#xff09; 请求主体&#xff0c;是我们给服务器的数据 输入域名发起一次请求&#xff0c;得到的可能是标签&#xff0c;标签可能还要在发一次请求 post怎么发请求&#xff1a;form表单 …

DM365 color space

YUV的几种格式 420P&#xff1a;420P数据的存放方式一般是先存放Y&#xff0c;然后存放U&#xff0c;最后存放V的数据&#xff0c;每一个像素使用12bits(1.5BYTE)保存。 422P&#xff1a;422P数据的存放方式也是先存放Y&#xff0c;然后存放U&#xff0c;最后存放V的数据&…

JavaScript 标准参考教程-阅读总结(三)

1、DOM模型 DOM 是 JavaScript 操作网页的接口&#xff0c;全称为“文档对象模型”&#xff08;Document Object Model&#xff09;。它的作用是将网页转为一个 JavaScript 对象&#xff0c;从而可以用脚本进行各种操作&#xff08;比如增删内容&#xff09;。 1&#xff09;do…

P1136 迎接仪式

P1136 迎接仪式 题目描述 LHX教主要来X市指导OI学习工作了。为了迎接教主&#xff0c;在一条道路旁&#xff0c;一群Orz教主er穿着文化衫站在道路两旁迎接教主&#xff0c;每件文化衫上都印着大字。一旁的Orzer依次摆出“欢迎欢迎欢迎欢迎……”的大字&#xff0c;但是领队突然…

云服务器 VNC 远程连接

此服务器买来是为了搭建IC EDA云的&#xff0c;因此选用的是centOS 6的环境&#xff0c;对各EDA软件兼容较好。本人手头拮据&#xff0c;因此买的是腾讯云活动期间的云服务器&#xff0c;只能说够用吧。 一、桌面安装 在云服务器控制台登陆上远程主机&#xff0c;依次执行下列…

Python自动化测试框架有哪些?

作者 | KITTY GUPTA 译者 | 张健欣 令开发者万分高兴的是&#xff0c;开发自己的测试框架的日子终于结束了。以前&#xff0c;开发团队接手一个项目并开始开发时&#xff0c;除了项目模块的实际开发之外&#xff0c;他们不得不为这个项目构建一个自动化测试框架。一个测试框架应…

面试题——4种数组去重的方法

数组去重或者其衍生作为笔试题或者机试题出现的几率也是很大的&#xff0c;写出的方法越多&#xff0c;则让面试官觉得你思维越开阔&#xff0c;那么成功的几率当然就大了。 废话不多说&#xff0c;下面来说说下面我整理的4中数组去重的方法 方法一&#xff1a; findInArr方法s…

MFc消息映射机制理解

何谓消息、消息处理函数、消息映射&#xff1f;消息简单的说就是指通过输入设备向程序发出指令要执行某个操作。具体的某个操作是你的一系列代码。称为消息处理函数。在SDK中消息其实非常容易理解&#xff0c;当窗口建立后便会有一个函数&#xff08;窗口处理函数&#xff09;开…

Effective C++ 条款11:在operator=中处理自我赋值

”自我赋值”发生在对象被赋值给自己时: class Widget { ... }; Widget w; ... w w; // 赋值给自己 a[i] a[j]; // 潜在的自我赋值 *px *py; // 潜在的自我赋值class Base { ... }; class Derived: public Base { ... }; void doS…

Demosaic算法学习

一、概述 由于成本和面积等因素的限定,CMOS图像传感器在成像时,感光面阵列前通常会有CFA (color filter array),CFA过滤不同频段的光,因此,Sensor的输出的RAW数据信号包含了3个通道的信息。 CFA的排列方式一般有以下几种: 现在应用最广泛的是Bayer CFA。…

Sql Server中查询当天,最近三天,本周,本月,最近一个月,本季度的数据的sql语句...

--当天&#xff1a;select * from T_news where datediff(day,addtime,getdate())0--最近三天&#xff1a;select * from T_news where datediff(day,addtime,getdate())< 2 and datediff(day,addtime,getdate())> 0--本周&#xff1a;select * from T_news WHERE (DATEP…

linux设备驱动归纳总结(五):3.操作硬件——IO静态映射【转】

本文转载自&#xff1a;http://blog.chinaunix.net/uid-25014876-id-83299.html linux设备驱动归纳总结&#xff08;五&#xff09;&#xff1a;3.操作硬件——IO静态映射 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 有时候会觉…

UML中关联,聚合,组合的区别及C++实现

类间关系 在类图中&#xff0c;除了需要描述单独的类的名称、属性和操作外&#xff0c;我们还需要描述类之间的联系&#xff0c;因为没有类是单独存在的&#xff0c;它们通常需要和别的类协作&#xff0c;创造比单独工作更大的语义。在UML类图中&#xff0c;关系用类框之间的连…

sql server management studio 快速折叠object explorer中的instance

https://social.msdn.microsoft.com/Forums/sqlserver/en-US/6e20fa7a-c0a9-496b-89b2-19c6bd996ffc/how-to-collapse-object-explorer-tree-in-management-studio?forumsqltools home键&#xff0c;回到top level。 然后F5刷新&#xff0c;就会自动折叠了转载于:https://www.…