移动端本地 H5 秒开

本文探讨了H5页面在移动端为何存在加载延迟问题,并提出了通过本地化H5页面和与客户端通信优化首屏加载速度的方法。详细介绍了本地H5与native通信的几种方式,如jsapi、URL Scheme和字符串替换。此外,还阐述了开发调试、维护的解决方案,以及预加载WebView、国际化、点击延迟等细节优化策略,旨在实现接近原生应用的用户体验。
摘要由CSDN通过智能技术生成

一、为什么 H5 体验糟糕

为什么打开一个 H5 页面会有一长段白屏时间?因为它做了很多事情,大概是:

初始化 webview -> 请求页面 -> 下载数据 -> 解析HTML -> 请求 js/css 资源 -> dom 渲染 -> 解析 JS 执行 -> JS 请求数据 -> 解析渲染 -> 下载渲染图片



一般页面在 dom 渲染后才能展示,可以发现,H5 首屏渲染白屏问题的原因关键在于,如何优化减少从请求下载页面到渲染之间这段时间的耗时。


二、如何优化

上述打开一个页面的过程有很多优化点,包括前端和客户端,常规的前端和后端的性能优化已有前辈们总结过最佳实践,主要的是:

  • 降低请求量:合并资源,减少 HTTP 请求数,minify / gzip 压缩,webP,lazyLoad。

  • 加快请求速度:预解析DNS,减少域名数,并行加载,CDN 分发。

  • 缓存:HTTP 协议缓存请求,离线缓存 manifest,离线数据缓存 localStorage。

  • 渲染:JS/CSS优化,加载顺序,服务端渲染模板直出。


一般情况下,我们只要对照这个列表,对比差异就基本能搞定绝大部分前端性能问题了。不过我们在里面仔细再分析下,对首屏启动速度影响最大的就是网络请求,包括请求 HTML、css、image 等静态资源和展示数据的请求。

那么将 H5 相关页面和资源打包到客户端中,然后客户端将展示数据传给页面,通过webView加载展示,这样几乎不需要网络请求,webview 只要渲染页面,执行js即可,这样体验岂不是很完美?


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值