1.加载耗时分析

在移动端从用户点 H5 链接到页面渲染完成展示给用户，需要经历的粗略过程，示意如下图：

总耗时(t) = WebView初始化耗时(t1) + 下载静态资源消耗时间(t2) + 请求数据耗时(t3) + 渲染耗时(t4)

其中WebView初始化、静态资源加载及时数据请求耗时是比较多的，切这个耗时页面 一定处于白屏阶段

优化方案:
一、静态资源优化

1. 资源压缩，若有必要可以考虑gzip，获得更大的压缩比
2. 资源合并请求，过多分散的资源包会产生过多的网络请求，但也不能随意合并，最佳的方式是按照页面或者模块进行划分，并配置async属性来异步加载script脚本
3. 按需加载，使用懒加载的方式可以有效提高首页性能
4. 配置浏览器缓存，主要是指强缓存和协商缓存，可以大大减少网络时延、减少服务器压力
5. 骨架屏，在页面数据未准备好的情况，相比于枯燥的白屏页而言，展示骨架屏能够给用户一个好的感官体验，但是如何生成质量高的骨架屏也是一个难点
   

PWA

Service Workers

Service Worker处于不同的线程中，并且可以拦截网络请求

运行在它自己的全局脚本上下文中 不绑定到具体的网页 无法修改页面中的元素，因为它无法访问DOM 只能使用HTTPS

service worker运行在worker上下文中，这意味着它无法访问DOM，它与应用的主要JavaScript在不同的线程，所以它不会被阻塞，它们完全是异步的，因此你无法使用XHR和localStroage 之类的功能

Service Worker生命周期

第一次加载页面时，Service Worker还没有激活，所以它不会处理任何请求
只有当它安装和激活后，才能控制其范围内的一切，这意味着，只有刷新页面或者导航到另一个页面，Service Worker内的逻辑才会启动

Service Worker缓存

Servicer Worker缓存及其强大，无需再由服务器来告知浏览器资源要缓存多久，现在全权掌控，Service Worker缓存是对HTTP缓存的增强，并可以与之配合使用