欢迎大家到腾讯云+社区获取更多腾讯海量技术实践的干货~企业有可视化图表展示数据趋势的需求微信移动项目。经过研究，最终还是决定使用单页H5来完成。对于APP中H5实现的一些功能模块，总体体验不如原来的，那么如何提高H5的加载速度呢？优化h5体验？适用场景：需要快速迭代，难以在客户端实现，用于展示的功能模块，比如可视化图表。1、为什么H5体验不好？为什么打开H5页面需要很长时间，白屏？因为它做了很多事情，大概是：初始化webview->请求页面->下载数据->解析HTML->请求js/css资源->dom渲染->解析JS执行->JS请求数据->解析渲染->下载并渲染图像。一般只有dom渲染后页面才能显示。可以发现，H5首屏渲染白屏问题的关键是如何优化和减少请求下载页面到渲染的耗时。2、如何优化上述打开页面的流程。有很多优化点，包括前端和客户端。常规前后端的性能优化，前辈们已经总结过了。主要有：减少请求量：合并资源，减少HTTP请求数，minify/gzip压缩，webP，lazyLoad。加速请求：预解析DNS，减少域名数量，并行加载，通过CDN分发。缓存：HTTP协议缓存请求、离线缓存清单、离线数据缓存localStorage。渲染：JS/CSS优化、加载顺序、服务器端直接渲染模板。一般情况下，我们只需要对比这个列表，对比差异就可以基本解决大部分的前端性能问题。但是仔细分析的话，对首屏启动速度影响最大的还是网络请求，包括对HTML、css、图片等静态资源的请求，以及对显示数据的请求。然后将H5相关的页面和资源打包到客户端，然后客户端将展示数据传递给页面，通过webView加载展示，这样几乎不需要网络请求。webview只需要渲染页面和执行js即可。这不是很好的体验吗？完美的？3、如何实现？整体思路似乎比较清晰，但是有几个关键问题需要解决：3.1如何与原生H5页面通信：与原生H5页面通信基本有三种方式：jsapi、URLScheme和字符串替换.不同的方法适用于不同的使用场景：jsapi：客户端提供接口，注入Javascript调用的API，直接执行相应的Native代码，适用于需要交互请求数据的场景。URLScheme：Web端发送URLScheme请求，Native根据URLScheme及其参数拦截请求并进行相关操作。适用于页面跳转的场景。字符串替换：客户端读取本地H5后，将H5中的约定标记替换为字符串，然后加载展示页面。适用于没有复杂交互，只通过页面渲染数据的场景。3.2如何开发、调试和维护要开发本地H5模块，很容易想到通过模拟数据在本地开发，然后将H5打包到各个客户端进行联调。但是，这样的方案实施起来非常繁琐，因为H5资源打包到客户端时是分散的、不一致的、难以管理的。然后让我们改进它。我们将使用本地H5实现模块的页面搭建一个统一的git仓库。IOS和android客户端会通过git子模块将本地的H5git链接到项目中，这样就可以统一管理客户端中的资源，解放了每次繁琐的手动替换和打包工作。但这种方法其实并不完美。H5代替原生实现的好处一是开发成本低，二是H5更新迭代更快。如果客户端中打包的H5页面跟客户端一样，没有Act快速更新。很容易想到后台给H5资源，客户端根据业务模块预下载整个离线包，离线包根据版本增量更新。这种方案可以较好的解决上述问题。4.细节优化解决了以上问题。本地H5确实可以做到秒级加载，但是要达到和客户端一样的体验，还需要做一些细节优化：预加载webView，联调预取数据在本地H5页面过程中，我发现页面首次加载时间比后续打开时间慢很多。原因是webView在第一次初始化的时候需要启动更多的资源和服务，所以我尝试了客户端预初始化webView的方案。果然，它是第一次打开。页面时间变得更快。同时，为了在第一次打开H5时直接显示数据，客户端在页面打开前就对数据进行了预取和缓存，减少了请求数据时间过长导致的白屏。阻止webviewHTML内容自动识别在IOSwebView中，默认情况下会自动检测并标记HTML中的电话号码、邮箱、地址格式。解决方案：通过添加metaheader来禁用默认行为
