美文网首页HTML5Web前端之路前端开发那些事
初识H5开启多线程与服务器推送事件

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

作者: _Gary | 来源:发表于2017-01-23 12:33 被阅读277次

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

    相关文章

      网友评论

        本文标题:初识H5开启多线程与服务器推送事件

        本文链接:https://www.haomeiwen.com/subject/wjrabttx.html