第一部分

什么是 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原理的更多相关文章

  1. web worker,SSE,WebSocket,AJAX 与后端交互的方式

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

  2. web worker技术-js新线程

    web worker的小例子,用来入门很合适,建议启动服务来开发.可以使用node的anywhere. <!DOCTYPE html> <html lang="en&quo ...

  3. Web服务器的工作原理

    Web服务器的工作原理 Web服务器工作原理概述 很多时候我们都想知道,web容器或web服务器(比如Tomcat或者jboss)是怎样工作的?它们是怎样处理来自全世界的http请求的?它们在幕后做了 ...

  4. Web程序的运行原理及流程(一)

    自己做Web程序的开发也有两年多了 从最开始跟风学框架  到第一用上框架的欣喜若狂 我相信每个程序员都是这样过来的 在大学学习一门语言 学会后往往很想做一个实际的项目出来  我当时第一次做WEB项目看 ...

  5. Python Web框架 tornado 异步原理

    Python Web框架 tornado 异步原理 参考:http://www.jb51.net/article/64747.htm 待整理

  6. Java Web文件上传原理分析(不借助开源fileupload上传jar包)

    Java Web文件上传原理分析(不借助开源fileupload上传jar包) 博客分类: Java Web   最近在面试IBM时,面试官突然问到:如果让你自己实现一个文件上传,你的代码要如何写,不 ...

  7. 前端面试---常见的web安全及防护原理

    一.常见的web安全及防护原理 1.sql注入原理 就是通过把sql命令插入到web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令. 防护,总的来说有以下几点: 1. ...

  8. Nginx作为静态资源web服务之缓存原理

    Nginx作为静态资源web服务之缓存原理 大致理一下http浏览器缓存原理: 浏览器第一次请求服务器,此时浏览器肯定没有缓存,则直接调用服务器端,服务器在返回的信息的信息头中添加 ETag和Last ...

  9. Web 安全 & 反爬虫原理

    Web 安全 & 反爬虫原理 数据加密/解密 HTTPS ip 封锁 请求限制 爬虫识别,canvas 指纹 refs https://segmentfault.com/a/119000001 ...

随机推荐

  1. Linux Bash命令总结

    Bash命令 一:man命令,是manual 手册的意思,如man ps表示查看ps命令的手册,man man查看man命令的手册:也可以通过man xx查看是否有xx命令. 二:cat命令,用来一次 ...

  2. Selenium2+python自动化之读取Excel数据(xlrd)

    前言 当登录的账号有多个的时候,我们一般用excel存放测试数据,本节课介绍,python读取excel方法,并保存为字典格式. 一.环境准备 1.先安装xlrd模块,打开cmd,输入pip inst ...

  3. 几个经典的数学库之一学习---VCGlib(3)

    Camera and shot abstraction for managing views 视图的定义,以及mesh的操作说明. Shot(镜头) and camera(相机) shot摄像结构以及 ...

  4. hdu 4998 矩阵表示旋转

    http://acm.hdu.edu.cn/showproblem.php?pid=4998 http://blog.csdn.net/wcyoot/article/details/33310329 ...

  5. hdu 5000 共存问题->背包

    http://acm.hdu.edu.cn/showproblem.php?pid=5000 每只羊有n个属性 下面n个数字表示每个属性的值范围为[ 0, T[i] ] 对于羊圈里的a羊和b羊,若a羊 ...

  6. spring MVC controller中的方法跳转到另外controller中的某个method的方法

    1. 需求背景     需求:spring MVC框架controller间跳转,需重定向.有几种情况:不带参数跳转,带参数拼接url形式跳转,带参数不拼接参数跳转,页面也能显示. 本来以为挺简单的一 ...

  7. LeetCode145:Binary Tree Postorder Traversal

    题目: Given a binary tree, return the postorder traversal of its nodes' values. For example: Given bin ...

  8. CentOS系统安装遇到的一些问题

    Vi操作:按ESC键 跳到命令模式,然后: :w 保存文件但不退出vi:w file 将修改另外保存到file中,不退出vi:w! 强制保存,不推出vi:wq 保存文件并退出vi:wq! 强制保存文件 ...

  9. 隐式等待-----Selenium快速入门(九)

    有时候,网页未加载完成,或加载失败,但是我们后续的代码就已经开始查找页面上的元素了,这通常将导致查找元素失败.在本系列Selenium窗口切换-----Selenium快速入门(六)中,我们就已经出现 ...

  10. .net mvc使用FlexPaper插件实现在线预览PDF,EXCEL,WORD的方法

    FlexPaper插件可以实现在浏览器中在线预览pdf,word,excel等. 在网上看到很多关于这个插件实现预览的技术,但是很难做到word和excel在线预览. pdf很好实现. 首先下载相关的 ...