Android开发|别人的H5页面为什么飞快（之 Webview 优化） webview|android|java|性能优化|And

别人的H5页面为什么飞快？之 Webview 优化前言：我们在做一些native+H5应用开发时，常常会遇到Webview的性能问题，所谓Webview性能问题，就是从打开Webview页面开始到可以和用户交互，这期间花费的时间相对于原生页面来说过长，从而导致用户等待应用时间变长。

文章图片

一丶为什么要优化？
1.而用户的耐心是有限的，如果几秒钟之内页面仍是白屏，很有可能就会关闭此页面，那么可能会造成用户损失。
2.通常情况下，公司的活动页往往都用H5来实现，因此如果页面展现速度过慢的话，还会造成公司损失。
所以， Webview优化做好是很有必要的。
二丶分析H5页面慢及优化
图下是webview加载的过程：

文章图片

1.WebView初始化当App首次打开时，默认是并不初始化浏览器内核的；只有当创建WebView实例的时候，才会创建WebView的基础框架。
所以与浏览器不同，App中打开WebView的第一步并不是建立连接，而是启动浏览器内核。
分析：
针对WebView的初始化时间，我们可以定义两个指标：
首次初始化时间：客户端冷启动后，第一次打开WebView，从开始创建WebView到开始建立网络连接之间的时间。
二次初始化时间：在打开过WebView后，退出WebView，再重新打开WebView，从开始创建WebView到开始建立网络连接之间的时间。
经过测试后得出：以网页做对比，页面打开时间都是以网络连接开始作为起点的。而WebView中用户体验到的打开时间需要再增加70~700ms。
WebView慢的原因：

在浏览器中，我们输入地址时（甚至在之前），浏览器就可以开始加载页面。
而在客户端中，客户端需要先花费时间初始化WebView完成后，才开始加载。

优化方法：
1.全局WebView

在客户端刚启动时，就初始化一个全局的WebView待用，并隐藏。
当用户访问了WebView时，直接使用这个WebView加载对应网页，并展示。

这种方法可以比较有效的减少WebView在App中的首次打开时间。当用户访问页面时，不需要初始化WebView的时间。
2.客户端代理数据请求

在客户端初始化WebView的同时，直接由native开始网络请求数据；
当页面初始化完成后，向native获取其代理请求的数据。

此方法虽然不能减小WebView初始化时间，但数据请求和WebView初始化可以并行进行，总体的页面加载时间就缩短了；缩短总体的页面加载时间。
2.建立连接/服务器处理页面请求的数据返回之前，会有DNS；connection；服务器处理等耗费时间。
优化方法：
1.同步渲染采用chunk编码：
同步渲染时如果后端请求时间过长，可以考虑采用chunk编码，将数据放在最后，并优先将静态内容flush。对于传统的后端渲染页面，往往都是使用的【浏览器】–> 【Web API】 --> 【业务 API】的加载模式，其中后端时间就指的是Web API的处理时间了。在这里Web API一般有两个作用：

确定静态资源的版本。
根据用户的请求，去业务API获取数据。

而一般确定静态资源的版本往往是直接读取代码版本，基本无耗时；而主要的后端时间都花费在了业务API请求上面。那么怎么优化利用这段时间呢？
【Android开发|别人的H5页面为什么飞快（之 Webview 优化）】在HTTP协议中，我们可以在header中设置 transfer-encoding:chunked 使得页面可以分块输出。如果合理设计页面，让head部分都是确定的静态资源版本相关内容，而body部分是业务数据相关内容，那么我们可以在用户请求的时候，首先将Web API可以确定的部分先输出给浏览器，然后等API完全获取后，再将API数据传输给浏览器。
chunk输出和一起输出的区别：

如果采用普通方式输出页面，则页面会在服务器请求完所有API并处理完成后开始传输。浏览器要在后端所有API都加载完成后才能开始解析。
如果采用chunk-encoding: chunked，并优先将页面的静态部分输出；然后处理API请求，并最终返回页面，可以让后端的API请求和前端的资源加载同时进行。
两者的总共后端时间并没有区别，但是可以提升首字节速度，从而让前端加载资源和后端加载API不互相阻塞

3. H5动态数据拉取并行正常的顺序是在html，css，js拉取下来之后，才开始由js发起前端的ajax请求，获取到数据后才开始进行填充。
优化：
其实我们可以把前端的ajax请求提前到和页面加载同时进行，由客户端请求数据，等到H5加载完毕，直接向客户端索要即可，如此一来，便缩短了总体的页面加载时间。
4.H5页面拉取优化：

我们可以把html，css，js，image等资源预置在客户端本地，并和服务端协商好前端的版本控制和增量更新策略，如此一来Webview就可以先快速加载本地缓存页面资源，剩下的就只需要拉取那些需要更新的增量资源即可。
而针对这些需要拉取的增量资源，可以对它们进行webpack+gzip数据压缩和CDN加速处理，以提升拉取速度。并且在建立网络连接时，可以让前端请求的域名和客户端API接口域名一致，以减少DNS解析时间。
最后，对于H5页面来说，图片资源的拉取是最为耗时的，一个比较好的解决方案就是先加载并展示非图片内容，延迟这些图片的加载，以提升用户体验。
WebView有一个setBlockNetworkImage(boolean)方法，该方法的作用是是否屏蔽图片的加载。可以利用这个方法来实现图片的延迟加载：在onPageStarted时屏蔽图片加载，在onPageFinished时开启图片加载。

5.JS解析、编译、执行在PC互联网时代，人们似乎都快忘记了JS的解析和执行还需要消耗时间。确实，在几年前网速还在用kb衡量的时代里，JS的解析时间在整个页面的打开时间里只能算是九牛一毛。
然而，随着网速越来越快，而CPU的速度反而没有提升（从PC到手机），JS的时间开销就成为问题了。
优化：

高性能要求页面还是需要后端渲染。
React还是太重了，面向用户写系统需要谨慎考虑。
JS代码的编译和执行会有缓存，同App中网页尽量统一框架。

三丶结尾：
除了以上所叙述的优化方法外，还有许多的方式方法。而Webview优化是一个长期的、综合性的工作，有许多细节可以考虑，需要根据业务需求来不断升级优化策略。
自己也是从事Android开发5年有余了；整理了一些Android开发技术核心笔记
T10级工程师必会的Android优化解析
想有收获必须有努力，知识在于积累。不进则退。