【APP加载H5页面加载流程概述及提速方案】

APP加载H5页面加载流程概述

在深入研究了H5加载流程后，粗略画了一个从打开网页到显示完全的流程图。如下图所示。

原生打开一个网页到完全显示粗略可以分为上图显示的几个流程（忽略了很多细节，比如请求页面前进行网络连接、脚本解析等技术细节），从上图可以看出加载流程可以分为一下三个阶段：
（1）WebView无响应状态
（2）白屏状态
（3）加载状态

WebView无响应状态

无响应表示这时候WebView并没有准备好，这时候是完全阻塞的状态。WebView初始化是后续其他任何任务的前提。现在普遍认为无响应态即WebView是否初始化，但在实际原生开发背景下，可将这一时间点提前到进入页面之前。

1.1进入WebView页面

研究如何提速WebView，需要将起始点尽量提前。 Android通过Intent进入一个页面也是需要花费时间的，这个时间平均在30～60ms之间，如果有耗时的操作时间可能会更长。这个过程看似简单但在实际开发中可能会包含一些耗时的操作，比如页面初始化包含UI的初始化等等。

1.2 WebView初始化

WebView初始化即加载浏览器内核，这是和直接在游览器打开一个H5页面最大的不同。在App中打开一个H5页面首先是要加载游览器内核，尤其是第一次打开。从美团技术团队WebView性能、体验分析与优化一文可知这个时间消耗也在几百毫秒之间。再次打开系统会缓存WebView相关资源速度会比第一次要快。

白屏状态

浏览器内核初始化已完成，开始建立连接请求url对应的主html页面以及相关css样式、js资源，并开始边加载边渲染、直到界面上开始出现内容的这段时间。
W3c提供的navigation Timing交互性能监测指标可以帮助我们量化这个指标参数。

具体文字定义说明（参考来自网上）：

navigationStart 加载起始时间
redirectStart 重定向开始时间
redirectEnd 重定向结束时间
fetchStart 浏览器发起资源请求时间
domainLookupStart 查询DNS的开始时间
domainLookupEnd 查询DNS的结束时间
connectStart 开始建立TCP请求的时间
secureConnectionStart 如果在进行TLS或SSL，则返回握手时间
connectEnd 完成TCP链接的时间
requestStart 发起请求的时间
responseStart 服务器开始响应的时间
domLoading 开始渲染dom的时间
domInteractive 未知
domContentLoadedEventStart 开始触发DomContentLoadedEvent事件的时间
domContentLoadedEventEnd DomContentLoadedEvent事件结束的时间
domComplete dom渲染完成时间
loadEventStart 触发load的时间
loadEventEnd load事件执行完的时间

从上图浏览器加载网页的时序图中稍加整理得到性能指标的重要参数，业界衡量移动web app交互性能的优劣主要也是通过以下几个性能指标：

dns解析时间： domainLookupEnd - domainLookupStart
tcp建立连接时间： connectEnd - connectStart
白屏时间： responseStart - navigationStart
dom渲染完成时间： domContentLoadedEventEnd - navigationStart
页面onload时间： loadEventEnd - navigationStart

加载状态

加载状态是页面已经开始渲染，人眼已经可见页面轮廓和部分元素。加载状态并不是等到整个html或是css、js等加载完成，而是加载到一部分就开始渲染，即边加载边渲染。

APP加载H5页面提速可行性方案

在以上研究的基础上，提出改造后的WebView加载方案如下图。和图一相比其核心思想是尽可能将整个串行动作变成并行来缩短时间。