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 = ;
setInterval(function () {
postMessage(i++);
}, );
html文件如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>计数:<span id="result"></span></p>
<button onclick="start()">web worker开始工作</button>
<button onclick="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..
}
web worker原理 && SSE原理的更多相关文章
- web worker,SSE,WebSocket,AJAX 与后端交互的方式
一 web worker web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您可以继续做任何愿意做的事情:点击.选取内容等等,而此时 web worker ...
- web worker技术-js新线程
web worker的小例子,用来入门很合适,建议启动服务来开发.可以使用node的anywhere. <!DOCTYPE html> <html lang="en&quo ...
- Web服务器的工作原理
Web服务器的工作原理 Web服务器工作原理概述 很多时候我们都想知道,web容器或web服务器(比如Tomcat或者jboss)是怎样工作的?它们是怎样处理来自全世界的http请求的?它们在幕后做了 ...
- Web程序的运行原理及流程(一)
自己做Web程序的开发也有两年多了 从最开始跟风学框架 到第一用上框架的欣喜若狂 我相信每个程序员都是这样过来的 在大学学习一门语言 学会后往往很想做一个实际的项目出来 我当时第一次做WEB项目看 ...
- Python Web框架 tornado 异步原理
Python Web框架 tornado 异步原理 参考:http://www.jb51.net/article/64747.htm 待整理
- Java Web文件上传原理分析(不借助开源fileupload上传jar包)
Java Web文件上传原理分析(不借助开源fileupload上传jar包) 博客分类: Java Web 最近在面试IBM时,面试官突然问到:如果让你自己实现一个文件上传,你的代码要如何写,不 ...
- 前端面试---常见的web安全及防护原理
一.常见的web安全及防护原理 1.sql注入原理 就是通过把sql命令插入到web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令. 防护,总的来说有以下几点: 1. ...
- Nginx作为静态资源web服务之缓存原理
Nginx作为静态资源web服务之缓存原理 大致理一下http浏览器缓存原理: 浏览器第一次请求服务器,此时浏览器肯定没有缓存,则直接调用服务器端,服务器在返回的信息的信息头中添加 ETag和Last ...
- Web 安全 & 反爬虫原理
Web 安全 & 反爬虫原理 数据加密/解密 HTTPS ip 封锁 请求限制 爬虫识别,canvas 指纹 refs https://segmentfault.com/a/119000001 ...
随机推荐
- 24. Indoor Air pollution 室内空气污染
. Indoor Air pollution 室内空气污染 ① Priscilla Ouchida's "energy-efficient"house turned out to ...
- cxf-rs 、spring 和 swagger 环境配置切换【github 有项目】
环境切换的目的是 准生产和生产环境切换时,只修改一个文件就可以达到效果 在spring bean 文件中 配置: <bean class="cn.zno.common.context. ...
- scanf和fscanf读取文件
这篇是针对推箱子游戏而写的,某个时候在学C语言,最近转到windows设计,不知道是否有同样的感受,后面的东西学了,前面的就有点生疏了.其实,我的理解是,注意力转移了,当集中于当前问题的时候就会忽略以 ...
- Swift中的闭包(Closure)[转]
闭包在Swift中非常有用.通俗的解释就是一个Int类型里存储着一个整数,一个String类型包含着一串字符,同样,闭包是一个包含着函数的类型.有了闭包,你就可以处理很多在一些古老的语言中不能处理的事 ...
- python关键的语法
python关键的语法 1.标准类型分类
- 比较分析 Spring AOP 和 AspectJ 之间的差别
面向方面的编程(AOP) 是一种编程范式,旨在通过允许横切关注点的分离,提高模块化.AOP提供方面来将跨越对象关注点模块化.虽然现在可以获得许多AOP框架,但在这里我们要区分的只有两个流行的框架:Sp ...
- 开源WebGIS实施方案(六):空间数据(PostGIS)与GeoServer服务迁移
研发环境的变更,或者研发完成进行项目现场实施.运维的时候,经常就会面临数据及服务的迁移,这其中就包含空间数据以及GeoServer服务的迁移工作. 这里需要提醒的是:如果采用的是类似的开源WebGIS ...
- SQL SERVER 2008 附加数据库出现只读问题。
问题描述 在附加数据库时出现的图片: 解决办法 步骤一,修改文件夹的 1.打开该数据库文件存放的目录或数据库文件的属性窗口,选择"属性"菜单->选择"安全&qu ...
- js插件开发的一些感想和心得
起因 如果大家平时做过一些前端开发方面的工作,一定会有这样的体会:页面需要某种效果或者插件的时候,我们一般会有两种选择:1.上网查找相关的JS插件,学习其用法2.自己造轮子,开发插件. 寻找存在的插件 ...
- Unity/C#基础复习(3) 之 String与StringBuilder的关系
参考资料 [1] @毛星云[<Effective C#>提炼总结] https://zhuanlan.zhihu.com/p/24553860 [2] <C# 捷径教程> [3 ...