前端性能优化（四）

今天主要讲的是 浏览器存储

Cookie

因为普通的http请求是无状态的，所以需要cookie去维护客户端状态，生成发放 setCookie, 限制：4kb，需要设置过期时间，cdn的流量损耗

document.cookie = “key=value”

注意点：将cdn和主站分开，不然就会在请求cdn的请求头上带着cookie浪费流量

LocalStorage

利用localStorage做缓存，主要思路就是去访问缓存，如果没有就通过XHR去请求，请求到存储到localStorage中

sessionStorage

主要用来做表单的保存

sessionStorage.setItem(name, value)

sessionStorage.getItem(name)

indexedDB

主要可以做离线版（用的比较少），可以参考https://www.jianshu.com/p/d18536b3362f学习

PWA

一个移动端Webapp的标准

Service worker

使用拦截和处理网络请求的能力，去实现开一个离线应用，使用service worker在后台运行同时能和页面通信的能力，去实现大规模后台数据的处理，从而可以不阻塞js，可以参考https://www.jianshu.com/p/94cae70645a8

Pasted Graphic.png

上图主要是他的生命周期

Pasted Graphic 2.png

上述链接可以查看chrome中相应的service-worker

lighthouse

一个Chrome的插件，用来给网络平分，主要就是按照PWA标准，但是由于目前这个标准提出时间比较短，很多网页都不遵循