前端性能优化（二）

一.资源缓存方案

1. 浏览器缓存：
   1）强缓存：
         Expires：绝对时间
         Cache-Control： 相对时间
   2）协商缓存：
         Last-Modified If-Modified-Since
         Etag If-None-Match    
2. HTML：no-cache或短缓存，方便更新；
3. CSS、Javascript：MD5/timestmap/version+长缓存，有版本号作为后缀，因为更新文件时，浏览器得不到新的数据，需要加版本号去控制，强制浏览器去更新；
4. Image：随机名字（uid）+长缓存( 半年以上)

二.本地存储

1. Cookies: 缺点:存储数据量有限，占用带宽；
2. localStorage：缺点:数据不安全

                              使用:多个数据分开多个key存储;

                                      localStorage存爆了:错误处理，try catch块包裹住

                                      数据踢出分优先级

   3. sessionStorage：关闭浏览器消失，较少使用；

   4. IndexedDB：持续化存储，可在Web Worker中使用；

                            很少使用，异步的

   5. App Cache：h5离线存储

                            bug太多，不建议用

                            缺点：可能会缓存错误页面，甚至缓存运营商的劫持广告；

                                      更新中有一个文件失败了，就会全部回退上一个版本；

                                      因为是Lazy更新，接口后台有break change会有问题；

                                      manifest文件也有可能被缓存；

   6. service worker

三. Hybrid App缓存

1. 离线包技术：私有service worker

四. Weex和AMP（百度优化seo）

1. 不建议用Weex，渲染能力太差，推荐使用flutter；