写点什么

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

评论

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

AI代码生成器如何降低系统复杂度

伤感汤姆布利柏

飞算JavaAI+开发者:双剑合璧,编程效率倍增!

飞算JavaAI开发助手

当AI遇上代码库,飞算JavaAI让程序员不再孤单

飞算JavaAI开发助手

DevEco Studio构建分析工具Build Analyzer 为原生鸿蒙应用开发提速

HarmonyOS开发者

生产管理思路和方法

易成研发中心

企业要把DeepSeek部署到本地吗?

秃头小帅oi

应用程序中的网络协议:原理、应用与挑战

运维有小邓

协议 #HTTP

HarmonyOS官网上线“稳定性”专栏 助力更稳定流畅的鸿蒙原生应用开发

HarmonyOS开发者

DeepSeek冲击(含本地化部署实践)

京东科技开发者

Spring AI接入DeepSeek:快速打造微应用

京东科技开发者

设计模式3:代理、适配器、装饰器模式

卷福同学

设计模式 代理模式

释放你的创造力:飞算JavaAI,让代码编写不再是负担

飞算JavaAI开发助手

飞算JavaAI:一款改变编程行业格局的智能助手

飞算JavaAI开发助手

MobPush智能推送系统的用户行为分析:驱动精准运营的核心引擎

MobTech袤博科技

知识文档管理系统哪个好?对比25年主流11款

易成研发中心

文档管理系统

YashanDB主备高可用

YashanDB

数据库 yashandb

AI写代码再进化!飞算JavaAI让编程不再属于重复造轮子工程

飞算JavaAI开发助手

两台运行“满血版”DeepSeek,第四范式推出大模型推理一体机解决方案SageOne IA

新消费日报

低代码+ Vue.js:企业级应用开发实践指南

秃头小帅oi

YashanDB内存体系

YashanDB

数据库 yashandb

解剖DeepSeek四把刀,一场深到源码,大到行业,细到人心的手术盛宴

京东科技开发者

报名开启丨Future.Industry 2025线上直播会议:探索AI、仿真与HPC的技术未来

Altair RapidMiner

AI HPC 知识图谱 仿真 hyperworks

YashanDB共享集群

YashanDB

数据库 yashandb

YashanDB实例架构

YashanDB

数据库 yashandb

YashanDB数据库实例

YashanDB

数据库

53 倍性能提升!TiDB 全局索引如何优化分区表查询?

PingCAP

数据库 TiDB

Vue3 基础概念与环境搭建

不在线第一只蜗牛

JavaScript vue.js

告别高配焦虑!三款白菜价云电脑PK

小喵子

阿里云 云电脑 云游戏 ToDesk

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