写点什么

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

评论

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

《中国移动算力网络数据库白皮书》正式发布,NineData叶正盛分享

NineData

数据库 中国移动 叶正盛 NineData 算力网络数据库白皮书

BPM(业务流程管理)的最佳开源工具

NocoBase

开源 项目管理 低代码 BPM 无代码

“AI+Security”系列第3期(一):AI 安全智能体,重塑安全团队工作范式

云起无垠

【理论篇】关于聚合根,领域事件的那点事---深入浅出理解DDD

京东科技开发者

币圈项目为什么要做cmc+cg(双c)?

区块链项目一站式包装孵化

NetFlow Analyzer:精准流量洞察,引领网络安全新纪元

Geek_a83400

中文区块链媒体自媒体哪些发起来最有性价比?(非权威勿喷)

区块链项目一站式包装孵化

Facebook养号与推广技巧

Ogcloud

facebook 云手机 海外云手机 FB推广 FB引流

漆包线工厂生产管理MES系统功能介绍

万界星空科技

mes 万界星空科技 漆包线mes 铜线mes 漆包线

机构加仓生态良好 比特币牛市延续有戏

区块链软件开发推广运营

交易所开发 dapp开发 链游开发 NFT开发 代币开发

“数据思维人才培养论坛” 于大湾区大学举行,和鲸科技受邀共话产教创新路径

ModelWhale

人工智能 大数据 人才培养 高等教育

AI赋能美好生活,OpenVINO™技术成果助力多领域发展

E科讯

SaaS业务架构:业务能力分析

不在线第一只蜗牛

架构 SaaS

BOE(京东方)携故宫博物院举办2024“照亮成长路”公益项目落地仪式以创新科技赋能教育可持续发展

科技汇

如何免费调用有道翻译API实现多语言翻译

幂简集成

翻译软件 API

如何确定性能测试指标

老张

软件测试 性能测试 技术指标 高性能高可用

中国可观测日「成都站」圆满落幕

观测云

可观测性

数据结构与算法之间有何关系?

不在线第一只蜗牛

数据结构 算法

【XIAOJUSURVEY& 北大】实现数据导出的前后端全流程

XIAOJUSURVEY

数据分析 Vue Node 问卷 数据导出

一位架构师的自述:在尚未踏入的世界成为你自己

京东科技开发者

谷歌发布新 RL 方法,性能提升巨大;苹果前设计总监正与 OpenAI 合作开发 AI 设备丨 RTE 开发者日报

声网

mac苹果电脑游戏推荐:暗黑2:毁灭之王 for Mac(含各职业存档)

你的猪会飞吗

Mac游戏下载 Mac游戏推荐

精彩回顾|博睿数据Bonree ONE 3.0产品发布会圆满落幕:三城联动 共襄盛举!

博睿数据

海外云手机解决IP、成本、稳定性问题

Ogcloud

云手机 海外云手机 云手机海外版 海外原生IP 海外IP

参与滴滴开源项目,获得精美礼品

XIAOJUSURVEY

GitHub 开源 活动 PR Issue

如何保持telegram电报群活跃?

区块链项目一站式包装孵化

总裁,这是一份覆盖50家媒体的区块链发文套餐,请您收下!

区块链项目一站式包装孵化

座无虚席!首期流程挖掘实践训练营火爆收官

望繁信科技

数字化转型 流程挖掘 流程资产 流程智能 望繁信科技

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