《2018年在+PWA+中使用+App+Shell+模型提升性能和用户感知体验.pdf》由会员分享,可在线阅读,更多相关《2018年在+PWA+中使用+App+Shell+模型提升性能和用户感知体验.pdf(53页珍藏版)》请在三个皮匠报告上搜索。
1、在 PWA 中使用 App Shell 模型提升性能和用户感知体验App Shell 模型SPA 中的应用SSR 中的应用App Shell 性能Skeleton 方案Native App快速加载运行基础 UI离线可用App Shell 模型HTML+CSS+JS快速加载运行可缓存动态加载后续路由不同架构下如何应用这一模型?Server-side vs Client-side首屏加载速度快后续页面跳转迅速同构应用&App Shell 模型SPA 中的应用SSR 中的应用App Shell 性能Skeleton 方案SPAPRPL 模式&PRPL 模式Push 推送关键资源 Render 渲染初
2、始路由Precache 预缓存剩余路由Lazyload 延迟加载并按需创建剩余路由https:/ CSSJS entry chunkPushRenderwebpack manifestroutervendorPrecacheJS async chunkJS async chunk后续路由按需加载LazyloadPRPL 相关技术构建工具支持Service Worker 缓存前端路由HTTP/2大量成熟框架&构建工具 PRPL 相关技术构建工具支持Service Worker 缓存前端路由HTTP/2代码分割Polymer 中的代码分割 entrypoint:index.html,shell:s
3、rc/my-app.html,fragments:src/list-view.html,src/detail-view.html,src/404.html Dynamic importimport(/*webpackChunkName:my-view1*/./my-view1).then(myView1)=/.);CommonsChunkPluginjs app.js my-view1.js+PRPL 相关技术构建工具支持Service Worker 缓存前端路由HTTP/2推送静态资源PRPL 相关技术构建工具支持Service Worker 缓存前端路由HTTP/2路由支持var reso
4、lvedPageUrl=this.resolveUrl(my-view1.html);this.importHref(resolvedPageUrl,null,this._importFailedCallback,true);APIconst MyView1=()=import(./MyView1.vue);const router=new VueRouter(routes:path:/my-view1,component:MyView1 );异步组件PRPL 相关技术构建工具支持Service Worker 缓存前端路由HTTP/2资源预取 https:/www.w3.org/TR/reso
5、urce-hints/#prefetchService Worker 预缓存var cacheName=app-shell;var filesToCache=/index.html,/js/main.js,/css/main.css,/js/my-view1.js;self.addEventListener(install,function(e)e.waitUntil(caches.open(cacheName).then(function(cache)return cache.addAll(filesToCache);););App Shell后续重要路由构建时生成预缓存列表Workboxi
6、mportScripts(./workbox-sw.prod.js);importScripts(./precache-manifest.js);workbox.skipWaiting();workbox.clientsClaim();workbox.precaching.precacheAndRoute(self._precacheManifest);构建时生成预缓存列表缓存更新动态缓存SPA PRPL 模式Push HTTP/2 preloadRender RouterPrecache Service Worker+WorkboxLazyload 构建工具+Routerhttps:/ Sh
7、ell 模型SPA 中的应用SSR 中的应用App Shell 性能Skeleton 方案SSR同构思路&模版 Layout+Partial/home/aboutLayoutPartialabouthome模版改造/partial-homeaboutLayoutPartialhome/partial-about/shell模版改造/home/aboutLayoutPartial/partial-about/partial-home/shell在 Service Worker 中执行服务端路由和模版渲染同构思路https:/ templates from./templates;import ro
8、utes from./routes;import shellLayout from./layout/shell.html;app.get(routes.get(home),async(req,res)=res.write(shellLayout);const data=await requestData();res.write(templates.partial(home,data);res.end(););import templates from./templates;import routes from./routes;app.get(routes.get(home),async(req
9、,res)=);const data=await requestData();res.write(templates.partial(home,data);res.end();import shellLayout from./layout/shell.html;res.write(shellLayout);/home请求数据 渲染 partial-home渲染 layoutimport templates from./templates;import routes from./routes;workbox.routing.registerRoute(routes.get(home),workb
10、ox.streams.strategy()=cacheStrategy.makeRequest(request:/shell),async(event,url)=const response=await apiStrategy.makeRequest(event,request:/api );const data=await response.json();return templates.partial(home,data););import templates from./templates;import routes from./routes;workbox.routing.regist
11、erRoute(routes.get(home),);workbox.streams.strategy()=cacheStrategy.makeRequest(request:/shell),)async(event,url)=const response=await apiStrategy.makeRequest(event,request:/api );const data=await response.json();return templates.partial(home,data);/home请求数据 渲染 partial-home从 cache 中取出 layoutApp Shel
12、l 模型SPA 中的应用SSR 中的应用App Shell 性能Skeleton 方案https:/ Hackernews同构应用app.hash.js 253kBFast 3GFMP 2.9sNo service workerNo route-based code splittingapp.hash.js 9.8kBFast 3GFMP 1.2sNo service workerRoute-based code splittingFast 3GFMP 0.22sService workerRoute-based code splitting0.6sApp Shell 模型SPA 中的应用SSR 中的应用App Shell 性能Skeleton 方案感知体验构建时生成CSS+HTML 片段内联到 App Shell 中SSRhttps:/ Skeleton 组件 与框架 SSR 方案相关headless Chromehttps:/ HTML+CSS替换元素为占位符在 Node.js 中打开页面注入 JSSPA 下多个页面差异很大/home/detailIndex.htmlIndex.html/home/detail和 Loading 一样,并不能减少 FMP(first meaningful paint)https:/