动静分离项目改造

参考文章:
     - 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.

参考

  1. 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.
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,723评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,080评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,604评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,440评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,431评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,499评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,893评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,541评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,751评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,320评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,890评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2 342

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,081评论 1 32
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,470评论 1 11
  • 一. Java基础部分.................................................
    wy_sure阅读 3,784评论 0 11
  • Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列...
    拉风的老衲阅读 1,831评论 0 1
  • 静倚古窗眺远山,千里烟云密相连。 野花尚有蝴蝶戏,唯有落寞哀自叹。
    三克_2481阅读 52评论 0 0