webSocket、web woker、service woker、Web Storage

webSocket

WebSocket它是为了解决客户端发起多个http请求到服务器资源浏览器必须要经过长时间的轮训问题而生的，它实现了多路复用，它是全双工通信。

在webSocket协议下客服端和浏览器可以同时发送信息。

建立了WenSocket之后服务器不必在浏览器发送request请求之后才能发送信息到浏览器。这时的服务器已有主动权想什么时候发就可以发送信息到服务器。而且信息当中不必在带有head的部分信息了与http的长链接通信来说，这种方式，不仅能降低服务器的压力。而且信息当中也减少了部分多余的信息。

HTTP的长连接与websocket的持久连接

WebSocket和HTTP的区别

http协议是用在应用层的协议，它是基于tcp协议的，http协议建立链接也必须要有三次握手才能发送信息。

http链接分为短链接，长链接，短链接是每次请求都要三次握手才能发送自己的信息。即每一个request对应一个response。长链接是在一定的期限内保持链接。保持TCP连接不断开。

客户端与服务器通信，必须要有客户端发起然后服务器返回结果。

客户端是主动的，服务器是被动的。

websocket的持久连接

只需建立一次Request/Response消息对，之后都是TCP连接，避免了需要多次建立Request/Response消息对而产生的冗余头部信息。

web woker

Chrome浏览器中发起资源请求的有6个线程；但是只有1个线程负责渲染页面——称为UI主线程——浏览器中所有的代码只能由一个线程来执行。

问题：

若浏览器加载了一个很耗时的JS文件(可能影响DOM树结构)，浏览器必须等待该文件执行完成才会继续执行后续的代码(HTML/CSS/JS等)——如果一个JS文件要执行10s(可能有很深的循环/递归等科学计算/解密)，会发生什么？——执行耗时JS任务过程中，会暂停页面中一切内容的渲染以及事件的处理。

解决：H5新特性——Web Worker

Worker的本质：

就是一个执行指定任务的独立线程；且该线程可以与UI主线程进行消息数据传递。

使用方法：

       HTML文件中：

                var w = new Worker('js/x.js')

                w.postMessage('发送给Worker线程的消息');

                w.onmessage = function(e){
                         e.data; //来自Worker线程的消息

                }

       JS文件中：

                onmessage = function(e){
                         var data = e.data;  //接收UI线程的消息

                         //执行耗时任务....

                         postMessage(result);   //给UI线程发送消息

                }

Worker任务不允许直接操作DOM树，也不允许使用任何的BOM对象！

需要的数据只能由UI主线程来传递，处理的结果也必须交由UI线程来显示。

service woker

service woker的使用

service worker URL 通过 serviceWorkerContainer.register() 来获取和注册。

如果注册成功，service worker 就在 ServiceWorkerGlobalScope 环境中运行； 这是一个特殊类型的 woker 上下文运行环境，与主运行线程（执行脚本）相独立，同时也没有访问 DOM 的能力。
service worker 现在可以处理事件了。

受 service worker 控制的页面打开后会尝试去安装 service worker。最先发送给 service worker 的事件是安装事件(在这个事件里可以开始进行填充 IndexDB和缓存站点资源)。这个流程同原生 APP 或者 Firefox OS APP 是一样的 — 让所有资源可离线访问。

当 oninstall 事件的处理程序执行完毕后，可以认为 service worker 安装完成了。

下一步是激活。当 service worker 安装完成后，会接收到一个激活事件(activate event)。 onactivate 主要用途是清理先前版本的service worker 脚本中使用的资源。

Service Worker 现在可以控制页面了，但仅是在 register() 成功后的打开的页面。也就是说，页面起始于有没有 service worker ，且在页面的接下来生命周期内维持这个状态。所以，页面不得不重新加载以让 service worker 获得完全的控制。

Promise 是一种非常适用于异步操作的机制，一个操作依赖于另一个操作的成功执行。这是 service worker 的核心工作机制。点我promise

Web Storage

Web Storage是HTML5引入的一个非常重要的功能，在前端开发中经常用到，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限制在4KB，Web Storage又分为两种：
sessionStorage、localStorage

sessionStorage将数据保存在session中，浏览器关闭也就没了；
localStorage则一直将数据保存在客户端本地，除非主动删除数据，否则数据是永远不会过期的；
不管是sessionStorage，还是localStorage，可使用的API都相同，常用的有如下几个方法：

1. 保存数据：localStorage.setItem( key, value ); sessionStorage.setItem( key, value );
2. 读取数据：localStorage.getItem( key ); sessionStorage.getItem( key );
3. 删除单个数据：localStorage.removeItem( key ); sessionStorage.removeItem( key );
4. 删除所有数据：localStorage.clear( ); sessionStorage.clear( );
5. 得到某个索引的key：localStorage.key( index ); sessionStorage.key( index );

两个都有属性 length 表示key 的个数，也即 key 长度：

var keyLength1 = localStorage.length; var keyLength2 = sessionStorage.length;

key 和 value 都必须为字符串，换言之，web Storage的API只能操作字符串。

Web项目存储数据常用的方案：

服务器端存储

• 数据库存储，如商品、用户等核心数据
• Session/内存存储，如用户的登录信息

客户端存储

• Cookie存储，如用户偏好、访问历史，浏览器兼容性好但处理麻烦且容量限制
• WebStorage存储，如用户偏好、访问历史等安全要求的数据，老IE不兼容但易使用且容量大

Web Storage存储具体涉及到两个对象：

window.sessionStorage：

类数组对象，通过key=>value对存储字符串数据——会话级存储

• 添加数据：sessionStorage[‘key’] = ‘value’
• 修改数据：sessionStorage[‘key’] = ‘newValue’
• 删除数据：delete sessionStorage[‘key’]
• 获得数据：var v = sessionStorage[‘key’]

window.localStorage：

类数组对象，通过key=>value对存储字符串数据——本地/跨会话级/永久存储

• 添加数据：localStorage[‘key’] = ‘value’
• 修改数据：localStorage[‘key’] = ‘newValue’
• 删除数据：delete localStorage[‘key’]
• 获得数据：var v = localStorage[‘key’]

拜