动静分离项目改造

参考文章：
     - https://zh.wikipedia.org/wiki/HTTP/2
     - https://zh.nuxtjs.org/guide
     - https://nextjs.org/learn/basics/getting-started
     - https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
     - https://dev.w3.org/html5/pf-summary/offline.html
     - https://html.spec.whatwg.org/#applicationcache
     - https://github.com/wanbei/Blog/blob/aaf9f07a0d5f91c0274a045c58a24d49bb39fa92/docs/contents/html5-manifest.md

当我们做spa项目越做越大的时候，JS bundle会越来越大，单页面不能承载那么多的逻辑，我们可能会选择多个单页面（也就是多页面）。每次加载都会存在空白加载的情景，虽然性能优化上，我们能把这个时间减少到很少很少，但是没法完全把它“干掉”。pwa的service-worker技术很好地弥补这片“空白”。“app-shell”也就是web app中的应用壳将会缓存在浏览器端，让它的加载速度更加快速。而可变的内容则是异步加载，这个技术细节很多。
第一期我们对主流技术做评估，设计出一套简单可行的方案(先上图)。

1111.jpg

思考

1. 有些页面跳转需要后端返回地址，在和后端请求到跳转无法控制，是否需要有跳转过度页设计。

方案要点

* application cache
* pwa技术
* 降低io请求
* 使用离线存储存储静态html
* 合理利用浏览器缓存
* 使用预渲染技术，实现对当先项目的二级页面进行预渲染，提升用户体验

技术细节

此方案为治标方案，治本方案在于为什么慢？所以本方案中本本地存储中增加了一段前端通用js，主要作用有两个。
1、上报请求过程中的耗时，通过数据优化耗时的地方。
2、通用的耗时过长的页面处理，优化用户体验。

需要使用以下方法去控制离线存错的文件

cache = window . applicationCache
(In a window.) Returns the ApplicationCache object that applies to the active document of that Window.

cache = self . applicationCache
(In a shared worker.) Returns the ApplicationCache object that applies to the current shared worker.

cache . status
Returns the current status of the application cache, as given by the constants defined below.

cache . update()
Invokes the application cache update process.
Throws an INVALID_ACCESS_ERR exception if there is no application cache to update.

cache . swapCache()
Switches to the most recent application cache, if there is a newer one. If there isn't, throws an INVALID_ACCESS_ERR exception.

参考

6. 1.1事件摘要
   当用户访问声明清单的页面时，浏览器将尝试更新缓存。它通过获取清单的副本来实现这一点，如果自从用户代理最后一次看到清单就改变了，重新下载它所提到的所有资源并重新缓存它们。
   随着这一过程的进行，许多事件被触发以保持脚本更新到缓存更新的状态，从而可以适当地通知用户。事件如下：

Event name	Occasion	Next events
checking	用户代理正在检查更新，或者尝试首次下载清单。	noupdate, downloading, obsolete, error
noupdate	The manifest hadn't changed.	(Last event in sequence.)
downloading	用户代理已经找到更新并正在获取它，或者正在第一次下载清单所列出的资源。	progress, error, cached, updateread
cached	清单中列出的资源已被下载，应用程序现在被缓存。	Last event in sequence.
updateready	清单中列出的资源已重新下载，脚本可以使用。SavaCpCh（）切换到新的缓存。	Last event in sequence.
obsolete	发现清单已成为404或410页，因此正在删除应用程序缓存。	Last event in sequence.
error	发现清单已成为404或410页，因此正在删除应用程序缓存。清单未更改，但引用清单的页面未能正确下载. 获取清单中列出的资源时发生致命错误。.在运行更新时，清单发生了更改	The user agent will try fetching the files again momentarily.