初识H5开启多线程与服务器推送事件

webworker

在以前的javascript中我们常用回调函数，来实现单线程异步。在H5中webworker解决了以前单线程性能。webworker是实现javascript真正的多线程机制。

什么是webworker，W3C手册是这样说的：

webworker是运行在后台的javascript，独立于其他脚本，不会影响页面的性能。你可以继续做任何愿意做的事：点击、选取内容等等，而此时webworker在后台运行。与setTimeout的单线程延迟异步不同，webworker是真正的多线程机制。

webworker不能做的事：

不能访问document对象

不能访问window对象

不能访问parent对象

webworker的API：

方法：

importScripts('webworker.js'); 引入外部JS文件，因为在webworker中无法访问dom所以用此方法可以帮助我们引用外部JS

postMessage(data)；传送处理好的数据

worker.terminate(); 停止webworker；

事件

message：用于监听webworker传送的数据

error:用于监听webworker失败

例子：

主线程代码

webworker.js代码

在webworker.js中 ，我们使用循环来模拟实际情况中需要大量计算，或者需要大量时间执行的脚本。如果把这段代码直接放到我们的常规JS中，那在我们计算没有执行完毕之前我们不能做任何操作，影响了页面渲染，阻塞了之后的JS代码的执行。如最开始介绍的使用webwork线程将不影响主线的进行，提高了用户体验。所以，WebWorker最适合的场景就是CPU密集型的计算操作。

server-sent-event

先简单了解服务器与客户端交互的几种方式

1、form表单提交：主动向服务器发送请求，需要刷新页面，通信方向是单向的；

2、ajax：主动向服务器发送请求，无需刷新页面，通信方向是单向的；

3、server-sent-event：服务器主动向客户端发送数据，客户端监听并接受，通信方向是单向的。

4、websocket：服务器和客户端相互发送数据，通信方向是双向的，只要连接建立，双方都可以向对方发送数据。

在以前，推送消息我都使用长轮询的方式去模拟服务器推送消息，缺点在于很多无用的请求，实时性也不是很好。在对比了四种方式后，我们可以看到，server-sent-event是解决服务器推送消息的，server-sent-event直接从服务器推送到客户端，无需不断请求。

server-sent-event事件：message 用于接收服务器推送消息

客户端：

服务器端把 "Content-Type" 报头设置为 "text/event-stream"，然后取消缓存就可以实现简单的服务器推送当时间的功能了：