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",然后取消缓存就可以实现简单的服务器推送当时间的功能了: