前端性能优化-静态文件客户端离线缓存1.前言上一篇分享给大家分享的是如何在webpack打包阶段把自己的项目优化到极致。文章链接：【将webpack打包优化到极致_20180619】()2.探索业务瓶颈H5页面的性能瓶颈，网络因素几乎可以占到80%。无论是减小输出文件的大小，还是使用HTTP2.0或PWA等，都会降低网络对H5页面加载的影响。我司产品主要用于拉美国家。拉美国家的用户有一个比较明显的特点：网络环境差（2G、3G用户依然存在）；用户手机型号以Android为主，型号比较老（代表旧的webview）；下图是从公司的h5性能监控平台上查询到的信息。从上图可以看出大部分用户所在的网络环境还是很好的。但是经常有一线同事反映我们的H5页面在用户手机上打开速度慢。经过我们的讨论，我们有两个猜测：在优化了文件大小的前提下，是不是因为我们的页面域名（html域名）和静态域名（静态文件）在本地CDN的解析时间慢？CDN的Nginx虽然对静态文件设置了HTTP缓存（max-age等字段），但是由于某些原因，在用户手机上并没有像预期的那样缓存足够的时间；3.网络因素的探索猜测和因为，我们针对上述问题，通过技术手段进行了研究。探究依赖关系的理论知识如下：上图展示了页面从我们在浏览器地址栏输入地址并按下回车键到页面加载完成的整个生命周期。浏览器（或webview）提供了PerformanceAPI让我们获取每个阶段的执行时间。查看文档根据PerformanceAPI，写了一个上报数据的脚本。【脚本链接请点这里】()我把代码的主要部分和需要注意的地方都拿出来了。大家在使用的时候可以注意一下：//注意一些老的Android机型在实践中是没有getEntries方法的，所以脚本一定要兼容constentryList=performance&&performance.getEntries&&performance.getEntries();//一般我们会把css放在head标签，js放在body标签的底部。如果静态文件使用单独的CDN域名，只需要获取第一个加载的CSS对象for(leti=0;i
