写点什么

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

评论

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

海关监管区域之陆路口岸作业

Geek_XOXO

国际贸易 海关监管 口岸

超27亿人参与!“云上冬奥”背后的技术革新

阿里云弹性计算

阿里云 冬奥会

超硬核攻略!《2022金融云原生落地实用指南》重磅发布(限时免费下载)

York

eBPF 完美搭档:连接云原生网络的 Cilium

火山引擎边缘云

边缘计算 ebpf 云原生网络 cllium

云原生时代,如何保证容器镜像安全?

极狐GitLab

DevSecOps 镜像安全 极狐GitLab

Pulsar 职位广场 | 腾讯、华为云、虾皮、众安保险、StreamNative 等多个热招岗位

Apache Pulsar

开源 架构 云原生 招聘 Apache Pulsar

关于MVVM和MVC,面试看这篇就够了

山河已无恙

mvc 全栈 MVVM 2月月更

存储新图谱:DNA存储的边界与天地

脑极体

三维仿真智慧服务器 —— 信息安全监控平台

一只数据鲸鱼

信息安全 数据中心 数据可视化 智慧城市

一周信创舆情观察(2.14~2.20)

统小信uos

CNCF 沙箱项目 OCM Placement 多集群调度指南

阿里巴巴云原生

阿里云 云原生 OCM Placement

系统学习 TypeScript(二)——开发流程和语法规则

编程三昧

typescript 前端 2月月更

初级工程师建议收藏|企业级APIs安全实践指南

领创集团AdvanceGroup

【元宵节快乐】Apache ShardingSphere 企业行|走进陌陌

SphereEx

数据库 开源 企业 ShardingSphere SphereEx

无需编程,基于PostgreSQL零代码生成CRUD增删改查RESTful API接口

crudapi

postgresql API crud crudapi 抽象工厂设计模式

[Python]介绍

謓泽

Python 2月月更

UMEM:友盟统计自定义事件多应用一键同步 & 批处理工具

SamgeApp

Docker Vue 友盟助手 友盟自定义事件批处理 友盟统计

创新推出 | Serverless 调试大杀器:端云联调

Serverless Devs

百度可观测系列 | 采集亿级别指标,Prometheus 集群方案这样设计

百度开发者中心

人才短缺、成本高昂,制造企业智能化转型路径如何破局?

百度开发者中心

FIddler+Proxifer工具对windows PC客户端进行抓包

喀拉峻

黑客 网络安全

Python 中的数组哪去了?

宇宙之一粟

Python 数组 2月月更

海关监管区域之港口作业

Geek_XOXO

国际贸易 海关监管 港口作业

学生管理系统的架构文档

卡西毛豆静爸

「架构实战营」

『The ShardingSphere Global Echo』Vol.4

SphereEx

数据库 开源 中间件 ShardingSphere SphereEx

工作想法小计(2):2/14 - 2/18

非晓为骁

个人成长

美容机构预约小程序设计方案

CC同学

ZEGO音视频服务的高可用架构设计与运营

ZEGO即构

架构 后台 高可用架构 音视频开发

从 generator 的角度看 Rust 异步代码

SOFAStack

rust Generator

Clusterpedia 加持 kubectl,检索多集群资源

Daocloud 道客

云原生 开源项目 K8s 多集群管理

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