参考文章:
- 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中的应用壳将会缓存在浏览器端,让它的加载速度更加快速。而可变的内容则是异步加载,这个技术细节很多。
第一期我们对主流技术做评估,设计出一套简单可行的方案(先上图)。
思考
- 有些页面跳转需要后端返回地址,在和后端请求到跳转无法控制,是否需要有跳转过度页设计。
方案要点
* 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.
参考
- 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. |