让网页展现的更快，官方说法叫做首屏绘制，First Paint 或者简称 FP，直白的说法叫做白屏时间，就是从输入 URL 到真的看到内容（不必可交互，那个叫 TTI, Time to Interactive）之间经历的时间。当然这个时间越短越好。 但这里要注意，和首屏相关的除…

2017年11月份，谷歌在上海举办了一个开发者大会，期间在很多会场都有关于PWA的介绍，王二认为谷歌在致力于推行这项技术，那么技术上还是很先进的，于是有了如下分享。 PWA的中文名叫做渐进式网页应用，早在2014年， W3C 公布过 Service Worker 的相关草案，但…

Skeleton Screen,中文称之为骨架屏。表示在页面数据没有加载完成之前，用一些简单的图形描绘页面内容的大致布局，让用户感知页面正在加载；当数据加载完成后，用真实的数据渲染页面，把它替换掉。 在骨架屏诞生之前，业界大多数都是用菊花图之类的loading效果去做数据等待期…

1. 什么是 PWA？ 2. 首屏优化 2.1. 静态资源优化 2.2. 动态数据优化 2.3. 直出html优化 3. 替代离线包 但是离线包系统是非常成熟的系统，要完全替换掉它还需要考虑许多方面的问题。 3.1. 更新机制 离线包有个自动更新的机制，每隔一段时间就会去请求离…

天下武功，唯 (wei) 快(fu) 不(bu) 破(po)。 随着近几年的前端技术的高速发展，越来越多的团队使用 React、Vue 等 MVVM 框架作为其主要的技术栈。以 React 应用为例，从性能角度，其最重要的指标可能就是首屏渲染所花费的时间了。那么今天，我们要给大…

在 iOS 11.3 版本中，苹果公司悄悄地增加了基于“渐进增强 Web 应用程序”（Progressive Web Apps，PWA）概念的新技术。本文带你看看 PWA 是如何工作的？它的能力和挑战是什么？以及如果你有已发布的 PWA 应用，那么你需要知道些什么。 PWA 还…

当谈到移动用户体验，移动网站是不是很糟糕？您已经听到了很多关于构建专用原生应用程序的好处，但如果用户不接受它，这可能会成为令人难以置信的代价高昂的博弈。那么，渐进式网络应用程序是最佳选择吗？它是否最终将取代移动网页和原生应用吗？本文探讨了这个想法。 我的一位开发人员朋友决定为他…

本文是《PWA学习与实践》系列的第十篇文章。也许你还没有听说过或不了解Resource Hint，但是通过本文，你会快速学习到这一件页面加载性能利器。本系列相关demo的代码都可以在github repo中找到。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能…