引言
书接上文，在上一篇《前端性能优化之统计篇》 我们主要介绍了，评判一个页面性能好坏的一个标准，以及结合各自项目自身特性如何建立完整的性能统计体系，在相关数据的指导下知道哪里需要做？怎么去做这部分方案？做后的效果怎么样？在这样的背景下，我们开始今天的实践之旅。
页面加载全链路 
webview 初始化
-
WebView预加载:正常情况下会先创建系统组件然后再创建WebView并加载URL，整个流程是串行。可以将串行改为并行，也就是说在创建系统组件的同时我们创建WebView并加载URL。
-
WebView缓存:WebView缓存已加载的h5资源，二次打开时直接使用缓存资源。
-
并行请求: 在加载H5页面时，通常会先加载模板文件，然后再获取动态数据填充到模板中。为了提升加载速度，可以在H5加载模板文件的同时，由Native端发起请求获取正文数据。一旦数据获取成功，Native端通过JavaScript将数据传递给H5页面，H5页面再将数据填充到模板中，从而实现并行请求，减少总耗时。
页面模板下载、解析
-
资源请求并发：http1.1 升级 http2。
-
CSS、JS预请求、预加载。
-
离线包：将h5静态资源打包到app中提前下载；该方案是把HTML抽象出模板然后放置在App包内，当使用时直接加载模板即可。把HTML整个文件放置于本地App内当使用时直接从本地加载，该方案优点是首屏加载速度快，用户体验更为接近原生, 可以不依赖网络，离线运行。
-
Service Worker缓存：针对静态资源指定域名相关缓存策略。
-
构建优化：构建产物拆包。
项目核心接口
- 接口并发请求，并且减少非必须接口或者将非必须接口异步改造；
- 数据缓存：缓存部分不变数据，减少请求；
- BFF层：接口聚合。
页面资源
- 特定页面资源异步加载。
- 页面组件动态异步渲染。
页面渲染
- 优先渲染不依赖接口组件。
- 图片压缩。
- 骨架屏（用户体验优化）等。
