写点什么

在 PWA 中使用 App Shell 模型提升性能和用户感知体验

  • 2019-09-21
  • 本文字数:1001 字

    阅读完需:约 3 分钟

在 PWA 中使用 App Shell 模型提升性能和用户感知体验

GMTC北京2018大会上,潘宇琪讲师做了《在 PWA 中使用 App Shell 模型提升性能和用户感知体验》主题演讲,主要内容如下。


演讲简介


在构建 PWA 应用时,使用 App Shell 模型能够在视觉和首屏加载速度方面带来用户体验的提升。另外,在配合 Service Worker 离线缓存之后,用户在后续访问中将得到快速可靠的浏览体验。在实践过程中,借助流行框架与构建工具提供的众多特性,我们能够在项目中便捷地实现 App Shell 模型及其缓存方案。最后,在常见的 SPA 项目中,我们试图使用 Skeleton 方案进一步提升用户的感知体验。


演讲提纲:


  1. App Shell 模型


在 PWA 中,使用 App Shell 模型将通用的资源与动态内容分离,可以实现对于用户的快速响应。配合 Service Worker 实现 App Shell 的预缓存之后,在弱网甚至离线环境依然能给予用户可靠的浏览体验。另外,借助流行框架与构建工具的先进特性,开发者不必从头实现 App Shell 的全部细节。


(1) 介绍 PRPL 模式和 App Shell 模型思想


(2) 介绍应用该模型后,在用户体验上带来的提升效果


用户浏览站点时,带来近似 Native App 的视觉效果


提升首屏加载速度


(3) 介绍在实际项目开发中,如何借助框架和构建工具实现该模型


(4) 介绍在不同架构(SPA、MPA、SSR)下的 Service Worker 通用预缓存方案


  1. Skeleton 方案


为了进一步提升用户感知体验,在 SPA 中可以使用 Skeleton (骨架屏)减少白屏时间。我们将介绍两种生成方案的实现思路,以及在灵活可用性、展现速度上的优化方式。


(1) 构建阶段的生成方案,包含以下两种:


额外编写组件,使用框架的 SSR (服务端渲染)功能


自动化生成,使用 Headless Chrome 渲染真实页面内容,随后使用占位符进行替换


(2) 解决 SPA 中多页面差异性问题。根据不同页面路由展现不同内容


(3) 优化展现速度。异步加载样式,避免阻塞以进一步减少白屏时间


听众收益


  1. 了解 App Shell 模型的思想,感受应用该模型后对于用户体验的提升效果

  2. 了解使用已有流行框架工具实现 App Shell 的推荐方式

  3. 了解不同项目架构下使用 Service Worker 缓存 App Shell 的通用方案

  4. 了解 SPA 中的 Skeleton 方案,能够使用现有生成工具在项目中应用


讲师介绍


潘宇琪


百度高级研发工程师


潘宇琪,百度高级研发工程师。负责研发 Lavas PWA 解决方案,帮助开发者快速搭建 PWA 应用,解决接入问题。配合团队推进 PWA 在百度内部的推广落地,热爱研究前端新技术与分享。












完整演讲 PPT 下载链接


https://gmtc.infoq.cn/2018/beijing/schedule


2019-09-21 14:50974

评论

发布
暂无评论
发现更多内容

Nydus 镜像扫描加速

SOFAStack

SOFA

架构实战 3 - 外包学生管理详细架构

架构实战营 「架构实战营」

PingCAP 与 Wisconsin-Madison 大学建立科研合作,探索 Key-Value 存储系统的智能管理与自动调整

PingCAP

TiDB

解读重要功能特性:新手入门 Apache SeaTunnel CDC

Apache SeaTunnel

CDC 数据变更捕获

数益工联 x TiDB丨如何运用 HTAP 挖掘工业数据价值?

PingCAP

#TiDB

2023春招最全Java面试八股文,已经帮助512人进入大厂

程序知音

Java java面试 Java面试八股文 后端面试

ES Client性能测试初探

FunTester

TiCDC 源码阅读(一)TiCDC 架构概览

PingCAP

TiCDC

九科信息超级自动化平台前景广阔——Gartner:超级自动化是RPA行业未来发展的必然趋势

九科Ninetech

如何把可观测需求落地为业务大盘?

云布道师

阿里云

极光笔记 | 当前最佳实践:Header Bidding 与瀑布流混合请求技术

极光GPTBots-极光推送

后端 营销 运营

欢迎来到,个人数据安全“世界杯”

脑极体

深入解读Netty 底层核心源码,全面分析Netty特新

程序知音

Java Netty io java架构 后端技术

得物染色环境落地实践

得物技术

测试 研发效能 测试环境 流量预测 企业号 1 月 PK 榜

事件总线 + 函数计算构建云上最佳事件驱动架构应用

阿里巴巴云原生

阿里云 云原生 函数计算 事件总线

探索工业互联网领域中的设备通信协议

JustYan

物联网 工业互联网 物联网协议

澳鹏中国第三年,缘何成为AI训练数据服务行业领头羊?

澳鹏Appen

人工智能 数据采集 数据安全 数据标注 AI向善

TiDB 首批通过信通院 HTAP 数据库基础能力评测

PingCAP

#TiDB

架构训练营模块三作业

现在不学习马上变垃圾

架构训练营10期

北京大数据开发技术培训机构怎么样

小谷哥

什么?比 MySQL 性价比更高的 TiDB Cloud Serverless Tier 来了?

PingCAP

#TiDB

web前端开发课程怎么样

小谷哥

JVM 如何获取当前容器的资源限制?

阿里巴巴云原生

Java 阿里云 容器 云原生

时序数据库 TDengine 3.0 参数体系使用方式汇总

TDengine

数据库 tdengine 时序数据库

基于低代码平台构筑金融行业IT运维服务体系

明道云

TiCDC 在大单表场景下的性能优化:我们如何将吞吐量提升 7 倍?

PingCAP

#TiDB

web前端培训前景怎么样?

小谷哥

TiCDC 源码阅读(二)TiKV CDC 模块介绍

PingCAP

#TiDB

如何确定解决的问题的价值?

珑彧

方法论

大数据培训机构该如何选择?

小谷哥

如何学习大数据开发技术

小谷哥

在 PWA 中使用 App Shell 模型提升性能和用户感知体验_GMTC_潘宇琪_InfoQ精选文章