写点什么

在 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:501036

评论

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

Nacos 3.0 架构全景解读,AI 时代服务注册中心的演进

阿里巴巴云原生

阿里云 云原生 nacos

如何通过ETL进行数据抽取工作

谷云科技RestCloud

数据库 数据处理 ETL 数据集成 数据抽取

6月27日-28日 AICon 北京站,我们在展位等您来!

MatrixOrigin

如何通过ETL把StarRocks中的数据同步到数仓

谷云科技RestCloud

数据库 数据同步 数仓 ETL StarRocks

【KWDB创作者计划】实战指南:KWDB 2.2.0数据分析与性能调优深度对比

KaiwuDB

Dify发布V1.5.0:可视化故障排查!超实用

王磊

PhotoMill X for Mac(图片批量处理工具)

Geek贝

Java中什么是类加载?类加载的过程?

量贩潮汐·WholesaleTide

Java

接口设计的原则:构建优雅API的完整指南

不在线第一只蜗牛

接口 API

【7 月 5 日北京】2025 IoTDB 用户大会,科研学术分论坛深度解密!各大教授最新研究等你来听

Apache IoTDB

低代码开发×物联网:技术融合下的智能系统架构设计与行业实践路径

电子尖叫食人鱼

低代码 物联网

100万QPS短链系统如何设计?

不在线第一只蜗牛

数据库

多模态数据湖焕新升级,企业新一代AI Native的数据基建

火山引擎开发者社区

人工智能

Illustrator 替代品!矢量/像素双模式切换 Affinity Designer中文版

柠檬与橘子

Swift Publisher 5|2000+模板搞定印刷/电子出版

柠檬与橘子

ERP、MES、PLM、CRM、OA等企业常用软件的区别与联系

优秀

ERP mes PLM

AI时代的数据智能跃迁:数据、工具与组织的进化

火山引擎开发者社区

AI

商品中心—商品溯源系统的技术文档

量贩潮汐·WholesaleTide

架构

园区智变时刻,网络该如何为企业撑腰?

脑极体

AI

智源研究院与北大医院达成战略合作

智源研究院

打通数据孤岛:基于对象存储的多云可观测融合实战

阿里巴巴云原生

阿里云 云原生 日志服务

小团队如何选择远控方案?贝锐向日葵“团队版”优势分析

科技热闻

HBase Sync功能导致HBase入库性能下降

天翼云开发者社区

大数据

程序员必冲!飞算 JavaAI 炫技赛,当甲方、赢好礼

飞算JavaAI开发助手

扣子企业交流日最全回顾|数万家企业都在怎么用扣子?

火山引擎开发者社区

AI 扣子

零基础音视频入门:你所不知道的Web前端音视频知识

JackJiang

Beyond Compare 5 中文版|文件对比神器 Git集成+自动化脚本

柠檬与橘子

轻帆云ITSM智能知识库,助力企业运营创新与服务价值提升

云智慧AIOps社区

ITSM 工单系统 企业知识库

外包人员违规访问致使 4 万条数据泄露,金融机构如何实现访问可控、数据不裸奔?

原点安全

数据安全 金融外包 金融数据安全解决方案 数据安全厂商 一体化数据安全平台

在使用Flink CDC时,源表没有主键如何处理

天翼云开发者社区

未来工业4.0下的智能仓储物流

优秀

工业4.0 制造业

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