文：元芳
挪动端加载网页介绍
当咱们加载一个网页时，并不是发送一个url申请所有的内容都下载下来了，而是除了主URL申请外，还有其余很多的申请，比方JS、CSS、图片等文件，每一个都是独立的申请，局部申请还是串行的，须要将这些资源文件下载实现后能力渲染 。
挪动端应用WebVeiw加载现状
挪动端应用WebView影响用户体验，次要就是加载工夫过长（发的申请比拟多），造成显示空白页面过久，这就反馈到上面webview加载的过程中-加载工夫久长，次要包含以下三步：
- WebView的初始化
- 下载HTML并解析 c
- css、js资源的下载和渲染
如何缩小这三大步骤中的耗时，成为了钻研的重点。
WebView加载过程
以社区征询页面为例在4G网络条件较好的状况下，随机取五组数据，得下图，html申请工夫均匀506ms,申请js、css 的工夫783ms，这个不包含图片申请的工夫。
申请例子：比方我应用WebView加载了一个申请 https://h5plus.dewu.com/post?...
从chales抓包的申请瀑布流能够看到加载WebView的url时，先申请到html当前，通过解析，才去加载css、jss等一些资源，同时也能够看到加载一个WebView页面，除了一个主HTML的URL以外，css、js的申请发送了7个申请，这还是一个不太简单的webview页面，如果过于简单，可想而知申请的数量。如何缩小css、js申请也是H5端优化的形式之一。而对于客户端而言，同样通过提前把js、css一些资源放在本地，也能够优化WebView的加载速度。
WebView加载HTML形式
通过服务器,以url的模式返回
这种也是传统的加载形式，弊病就是网络不好的状况下，会呈现较长时间的白屏，用户体验不好 。加载本地的html模板，通过本地注入内容的形式这种形式，是大多数公司钻研的重点，能够实现WebView秒开，比方头条的新闻详情页，实用于不太关注实时变动的页面，简直感触不到白屏，能达到原生的体验，原理就是提前把所需的js、css、html模板下载到本地，提前渲染好WebView，只需关上时，客户端注入内容数据即可，极大的进步了WebView的加载速度，这个也是本文钻研的重点。 间接加载带标签的字符串（以富文本的形式加载） 这中计划实用于简略、纯展现的UI界面，实现比价简略，性能比拟繁多。
得物社区征询页面现状
目前社区征询专栏页面，页面上半局部应用的是WebView，下半局部是原生的评论页面，加载WebView的形式也是传统的通过url加载的形式，用户体验不是很好，均匀关上一个页面须要2s左右，为了晋升用户体验，缩小WebView的加载耗时，对WebView的优化做了调研。
最终通过调研和计划比照，客户端选用了调研了加载本地的html模板，通过注入内容的形式加载WebView页面。
因为在社区征询页面加载列表的时候，都曾经拿到了渲染webview的内容数据，因而点击进入征询详情页的时候，其实内容数据也在本地了，相当于缩小WebView发送申请的个数，把 js、css的数据以及html模板提前放到本地，通过file协定，提前加载，当关上WebView时，间接把内容注入本地HTML模板，极大节俭了WebView申请和加载的工夫。
最终的WebView加载申请示意图如上图所示，省去了两头html、css、js 申请的工夫，通过加载离线本地的形式，大大提高了速度，本地加载html、css、js的工夫能够忽略不计。
离线包下载逻辑：
无奈复制加载中的内容
获取注入的内容数据的形式：
- 如果列表曾经有了内容数据，进入WebView无需再发送申请，能够间接把内容数据注入本地的html模板
- 如果列表没有内容数据，进入WebView依据不同的内容，申请不同的URL获取内容数据，而后注入本地的html模板
最终以demo的模式应用chales模仿4G网络条件优化前后的比照成果如下：
优化前
4G优化前征询专栏.mp4
优化后
4G优化后征询专栏.mp4
优化前后的数据比照，就demo而言;
WebView加载到渲染完结的工夫比照如下
由上图数据能够显著的看到，WebView从加载到渲染完结，进步幅度达到了98%左右，优化成果还是很显著的。
接下来咱们再细化分WebView各个阶段的申请工夫：
css、js资源网络申请的工夫
html网络申请工夫
因为css、js还有html模板都能够以离线资源的模式，提前放在本地，所以申请资源的工夫都能够省了，这样的话，就会大大减少WebView加载过程中的工夫。
并且图片的加载工夫也有显著的晋升，相干数据如下，这个进步幅度也是十分主观的。
对于技术而言，优化无止境，始终在路上，目前还处于demo阶段，下阶段咱们会依照计划施行，优先优化社区的征询专栏详情页，具体成果如何，大家刮目相待吧。