写点什么

移动端本地 H5 如何做到秒开?

2019 年 10 月 29 日

移动端本地 H5 如何做到秒开?

企业微信移动端项目中有需求要展示数据趋势的可视化图表,经过调研,最终决定以单页面 H5 来完成,对 APP 里的一些使用 H5 实现的功能模块,一般体验都比原生差,那么怎么提高 H5 加载速度?优化 H5 体验?

适用场景:需要快速迭代、客户端难实现的、用作展示的功能模块,例如可视化图表。


一、为什么 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 即可,这样体验岂不是很完美?


三、具体怎么实现?

整体思路看起来比较清晰,但是其中有几个关键问题需要解决:


3.1 本地 H5 页面如何和 native 通信:

本地 H5 页面如何和 native 通信的方式基本有三种:jsapi、URL Scheme 和 字符串替换。具体不同方式适合使用场景有所不同:


jsapi :客户端提供接口,注入 API 让 Javascript 调用,直接执行相应 Native 代码,适用于需要通过交互,进行数据请求的场景


URL Scheme : Web 端发送 URL Scheme 请求,之后 Native 拦截到请求并根据 URL Scheme 及所带的参数进行相关操作。适用于进行页面跳转的场景。


字符串替换: 客户端读取本地 H5 后,通过对 H5 中的约定的标记位进行字符串替换,然后加载展示页面。适用于没有复杂交互,只通过页面渲染数据的场景。


3.2 如何开发调试和维护

开发本地 H5 模块,很容易想到在本地通过模拟数据开发,然后将 H5 给到各客户端打包后进行联调。然而这样的方案实现起来十分繁琐,原因是 H5 资源给到客户端打包时很分散,不统一,管理困难。


那么我们改进一下,将使用本地 H5 实现模块的页面建立一个统一 git 仓库,IOS 和 android 客户端通过 git submodule 将本地 H5 的 git 外链到项目中,这样客户端中的资源就可以统一管理,解放了每次都手动繁琐的替换打包工作。


但是这种方法其实也并不完美,H5 代替原生实现的优势,一个在于开发成本低,另一个在于 H5 可以更加快捷的更新迭代,如果打包在客户端中的 H5 页面就像客户端一样,没法快速更新了。很容易想到将 H5 资源给到后台,客户端按照业务模块预下载整个离线包,离线包根据版本做增量更新。这种的方案,就可以较好的解决上面的问题了。



四、细节优化

解决了上面的问题,本地 H5 确实可以达到秒开的加载速度,不过要达到和客户端一样的体验,还需要配上一些细节优化:


预加载 webView,预拉取数据

在联调本地 H5 页面过程中,发现首次加载页面时间比后续打开时间都慢很多,原因预计是 webView 首次初始化时候需要启动资源和服务较多,于是尝试客户端在预先初始化 webView 方案,果然这样第一次打开页面时候就变快了。同时为了 H5 在第一次打开时能直接展示数据,客户端在页面打开前就预拉取数据并缓存,这样来减少请求数据时间导致的白屏。


屏蔽 webview HTML 内容自动识别

在 IOS webView 中默认会自动检测 HTML 中手机号、email、地址格式并标记。 解决方法:通过添加 meta 头来禁止默认行为


  <meta name="format-detection" content="telephone=no,email=no,adress=no"
复制代码


从外部引入

在 WebView 中,click 通常会有大约 300ms 的延迟(同时包括链接的点击,表单的提交,控件的交互等任何用户点击行为)。


解决方法:使用 fastclick/touchend 一般可以解决这个问题。


国际化

客户端内的 H5 也需要国际化,前端国际化方案有很多,通常情况下都是根据项目框架选择相应的国际化插件,然而在本地 H5 的页面中,再引入额外插件会增加客户端打包大小,略显冗余。适合自己的才是最好的,这里采用了一种适合轻量级的国际化方案。


1.提取语言文案


2.页面和 js 中引用提取的文案


3.根据配置切换语言方案


 $('.i18n').each(function() {     var key = $(this).attr('name');     $(this).html(language[key]); });
var language = getQueryVariable('en') ? i18n.en : i18n.zh
复制代码


WKWebView 兼容

WKWebView 性能比 UIViewView 性能好很多,所以客户端开发一般都推荐使用 WKWebView。


但是使用 WKWebView 加载本地的 HTML 时也有一些兼容问题,在 iOS8 不能在 HTML 文件中引用本地的 css 或者 js 或者图片文件,IOS8 以上的是正常的,可以引用远程资源。为了兼顾兼容性和秒开体验,所以做降级方案,通过系统版本动态加载 JS, IOS8 使用网络资源,IOS8 以上使用本地资源。


还有在 iOS8 中,使用一些远程的 cdn 的 css 或者 js 文件,必须注意在引用标签上加上 charset 属性,不然 css 和 js 库将会乱码


五、最后

从前端优化,到客户端缓存,到离线包,到更多的细节优化,做到上述这些点,H5 页面在启动上差不多可以媲美原生的体验了。


总结起来,大体优化思路就是:减少一切网络请求,做好预加载和缓存,尽量在用户打开之前就加载好所有内容。这里有些优化手段也要根据项目和实际需求来评估,需要跟开发成本和效率权衡。上述讨论的仅针对功能模块类的单页面 H5 页面秒开的优化方案,其他一些交互较复杂的 H5 页面可能并不适用,还需要视实际情况和需求而定。


本文转载自公众号云加社区(ID:QcloudCommunity)。


原文链接:


https://mp.weixin.qq.com/s/DEOP6i0vFWoE-eZGGDTkKA


2019 年 10 月 29 日 10:55986

评论

发布
暂无评论
发现更多内容

8. 格式化器大一统 -- Spring的Formatter抽象

YourBatman

Spring Framework Converter Formatter

握草,这些研发事故30%我都干过!

小傅哥

Java 小傅哥 28天写作 线上事故 系统秒杀

IndexedDB详解

程序那些事

程序那些事 indexedDB webtech 浏览器技术 前端技术

HDFS SHELL详解(4)

罗小龙

hadoop 28天写作 hdfs shell

软件测试--数据库基础知识

测试人生路

数据库 软件测试

探索 Vue.js 响应式原理

pingan8787

vue.js Vue 前端 响应式 28天写作

拍乐云语音聊天室SDK,助力非洲版陌陌“Mochat”打造粉丝经济

拍乐云Pano

音视频 RTC 语音聊天室 出海社交 社交泛娱乐

Java 并发编程之 JMM & volatile 详解

vivo互联网技术

Java volatile JMM 指令重排序

公安合成作战指挥中心系统开发解决方案,智慧警务平台搭建

WX13823153201

智慧警务平台搭建

Java 程序经验小结:剖析方法重载

后台技术汇

28天写作

人脸识别门禁系统搭建,智慧小区实施方案

t13823115967

智慧平安小区平台开发

网络请求是如何发送出去的

kof11321

网络

第十二周课后练习

dll

让机器有温度:带你了解文本情感分析的两种模型

华为云开发者社区

自然语言处理 神经网络 机器学习 深度学习

Elasticsearch 的正式介绍

escray

elasticsearch elastic 28天写作 死磕Elasticsearch 60天通过Elastic认证考试

十八般武艺玩转GaussDB(DWS)性能调优:SQL改写

华为云开发者社区

数据库 sql 性能优化 GaussDB 算子

springboot多模块配置问题

原来不悔

springboot Spring Frame

SpringCloud 微服务实现数据权限控制

Barry的异想世界

SpringCloud SpringBoot 2 权限认证 数据权限

如何轻松简便地在电脑上制作视频&数据更新 | 视频号 28 天 (04)

赵新龙

28天写作

一名分布式存储工程师的技能树是怎样的?

焱融科技

分布式 存储 分布式存储 分布式文件

STM32标准库开发实战指南

华为云开发者社区

SMT32处理器 stm32 内核 寄存器

第十三周课后作业

dll

你真的会正确使用日志吗?

xcbeyond

Java 代码规范 28天写作 日志级别

人与人需要保持边界

熊斌

读书笔记 成长笔记 28天写作

【JS】防止浏览器控制台被直接查看(1)

学习委员

JavaScript 前端 js 28天写作

从标准到开发,解读基于MOF的应用模型管理

华为云开发者社区

模型 ROMA 应用模型 mof

DAPP软件开发|DAPP系统APP开发

开發I852946OIIO

系统开发

《破壁MySQL》 - MySQL概述

haxianhe

MySQL 破壁MySQL 破壁

开发效率提升15倍!批流融合实时平台在好未来的应用实践

Apache Flink

流计算 fink

智能停车管理系统搭建,智慧小区智能化解决方案

t13823115967

智慧小区

什么是ReadWriteMany?

焱融科技

Kubernetes 云原生 存储 焱融科技 持久化存储

移动端本地 H5 如何做到秒开?-InfoQ