写点什么

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

评论

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

数字化转型失败,有哪些原因?

禅道项目管理

数字化转型

10个问题让你快速避开java中的jdbc常见坑

华为云开发者联盟

Java 数据库 JDBC fetchSize Prepared Statement

dperf: 一款基于DPDK的千万级HTTP CPS的开源网络压力测试仪

ArtNowBen

性能测试 LVS DPDK 压力测试仪 DPVS

「自我检验」熬夜总结50个Vue知识点,全都会你就是神!!!

Sunshine_Lin

面试 Vue 前端 进阶 ES6

潘娟:Keep open,Stay tuned 开源为我打开的全新世界 | TiDB Hackathon 2021 评委访谈

PingCAP

想知道LVS的性能吗?

ArtNowBen

性能测试 LVS 压力测试 DPDK DPVS

Hive on Spark和Spark sql on Hive,你能分的清楚么

华为云开发者联盟

sql 分布式计算 Sparksql hive on spark 数据源

nodejs 异步I/O和事件驱动

编程江湖

nodejs

科技驱动经济发展的时代全面到来

CECBC

spring源码搭建

派大星

Spring5源码解析

书单 | 学习数据可视化?看这些书就够了!

博文视点Broadview

网络安全好学吗?基础入门篇,NMAP高级使用技巧和漏洞扫描发现

学神来啦

网络安全 渗透测试 kali基础 nmap kali Linux

SphereEx 完成近千万美元 Pre-A 轮融资,加速构建新一代数据库生态引擎

SphereEx

开源 融资 ShardingSphere SphereEx 嘉御资本

测试阻碍交付,如何破解这一难题?

SoFlu软件机器人

作业4

施正威

作业5

施正威

SpringMVC框架基础知识(03)

海拥(haiyong.site)

28天写作 1月月更

百分点数据科学实验室:零售行业新店品类配比测算方案

百分点科技技术团队

【量化】量化交易入门系列3:经典的量化交易策略(中)

恒生LIGHT云社区

量化投资 量化交易 量化

架构营模块八作业

GTiger

架构实战营

一文整理区块链技术为企业带来的九大好处

CECBC

带你认识7种云化测试武器

华为云开发者联盟

测试 接口测试 华为云DevCloud 云化测试 Mock 服务

What's new in dubbo-go-pixiu 0.4.0

apache/dubbo-go

EMQ 映云科技入围 Venture50 行业榜单,数字科技企业风向标!

EMQ映云科技

物联网 Venture50

大数据开发之Hive SQL的优化分享

@零度

大数据 Hive SQL

Flink类型系统的根及相关接口

编程江湖

flink

千万级HTTP CPS的压力测试仪是怎么设计的?

ArtNowBen

性能测试 LVS 压力测试 DPDK DPVS

一文了解区块链如何帮助打击虚假信息

CECBC

Java开发之测试框架知识分享

@零度

Java

今天你的静态变量和静态代码块执行了吗?

华为云开发者联盟

Java 类加载 静态 静态变量 静态代码块

前端开发Vue中的v-指令的使用

@零度

Vue 前端开发

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