限时领|《AI 百问百答》专栏课+实体书(包邮)! 了解详情
写点什么

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

评论

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

软件测试/人工智能丨逻辑运算符

测试人

人工智能 软件测试

大模型发展的前景与挑战 主赛道:技术人的 2023 总结

不叫猫先生

大模型 ChatGPT #技术人的2023总结

SVN管理工具Cornerstone for Mac入门教程 Cornerstone永久破解资源

Rose

010 Editor 十六进制编辑器 注册激活版 mac/win

Rose

010 Editor下载 010 Editor破解版 010 Editor注册码 16进制编辑器

mac强大的音频处理工具Ableton Live 12 中文版最新

胖墩儿不胖y

Mac软件 mac音频编辑器

MongoDB和阿里云携手驱动WeLab 引领超千万用户迈向智能金融未来

极客天地

华为云助力企业引领数字化时代

YG科技

Fusion Studio 18 v18.6.4完美兼容破解版 附Fusion Studio激活补丁

Rose

mac视频后期特效处理 Fusion Studio 18下载 Fusion Studio激活秘钥 Blackmagic Fusion Studio

Q-learning 入门:以 Frozen Lake 游戏环境为例

Baihai IDP

人工智能 程序员 AI 强化学习 白海科技

Web网页端IM产品RainbowChat-Web的v6.0版已发布

JackJiang

网络编程 即时通讯 IM

万界星空科技低代码平台:搭建MES系统的优势

万界星空科技

低代码 数字化 MES系统 低代码开发 mes

开源MES/免费MES/开源MES生产流程管理

万界星空科技

开源 开源代码 开源软件 免费开源 开源mes

NFTScan | 12.04~12.10 NFT 市场热点汇总

NFT Research

NFT NFTScan nft工具

SmartGit for Mac(老牌Git客户端)v23.1.1中文注册版 支持M/intel

Rose

SmartGit破解版 SmartGit许可证 Git 客户端 SmartGit for Mac SmartGit 中文

拓扑排序实现循环依赖判断 | 京东云技术团队

京东科技开发者

后端 排序算法 循环依赖 拓扑排序

CloudQuery x 达梦,国产数据库正当时

BinTools图尔兹

数据库 数据库管理 数据库安全 达梦 兼容适配

Wireshark中的http协议包分析

小齐写代码

基于FFmpeg实现一个数据流风格的视频处理工具 | 社区征文

为自己带盐

ffmpeg #技术人的2023总结

Atlassian发布四个CVSS风险评分9.0或更高漏洞,影响多个产品

龙智—DevSecOps解决方案

Atlassian

Amazon CodeWhisperer 免费的 AI 代码生成助手!最新体验反馈~

亚马逊云科技 (Amazon Web Services)

人工智能 亚马逊云科技 云上探索实验室 Amazon CodeWhisperer

【数据安全】金融行业数据安全保障措施汇总

行云管家

金融 数据安全 运维安全 数据安全运维

Nacos 配置中心源码 | 京东物流技术团队

京东科技开发者

源码 nacos 源码剖析 配置中心

Sermant:无代理服务网格架构解析及无门槛玩转插件开发

华为云开发者联盟

云原生 后端 华为云 华为云开发者联盟 DTSE Tech Talk

零基础也能搞定文案生成应用,半小时包教包会!「大模型摇摇乐」硬核教程来啦!

飞桨PaddlePaddle

人工智能 代码 零基础 开发教程 文案生成

Topaz Video AI for mac v4.0.7注册激活版 人工智能视频增强 支持M/Intel

Rose

mac软件下载 人工智能视频增强 Video Enhance AI 下载 Video Enhance AI 注册

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