WebView加载过程(串行过程)
1、WebView初始化
2、webView加载Url。从网络服务器下载html,解析文档标签,开始拉取css,js。此时页面是白屏状态
3、页面模板下载完成, js请求页面数据,页面处于loading状态
4、数据请求完成,完成整个页面的渲染,用户可交互
初始化,建立网络连接,拉取数据恰恰都是比较耗时的操作
优化
一、webview提前初始化
第一次初始化所需要的时间长,Webview所有的逻辑处理都是通过WebViewProvider来实现的,因为它要加载Webview内核,这是一个重量级的操作,内核是以apk的形式存在。而内核加载后在同一页面是共享的,因此后续的初始化时间就很少了
二、H5页面拉取优化
可以把html,css,js,image等资源预置在客户端本地,并和服务端协商好前端的版本控制和增量更新策略,如此一来Webview就可以先快速加载本地缓存页面资源,剩下的就只需要拉取那些需要更新的增量资源即可。
对于H5页面来说,图片资源的拉取是最为耗时的,一个比较好的解决方案就是先加载并展示非图片内容,延迟这些图片的加载,以提升用户体验。
WebView有一个setBlockNetworkImage(boolean)方法,该方法的作用是是否屏蔽图片的加载。可以利用这个方法来实现图片的延迟加载:在onPageStarted时屏蔽图片加载,在onPageFinished时开启图片加载。
三、H5动态数据拉取并行
正常的顺序是在html,css,js拉取下来之后,才开始由js发起前端的ajax请求,获取到数据后才开始进行填充。
其实我们可以把前端的ajax请求提前到和页面加载同时进行,由客户端请求数据,等到H5加载完毕,直接向客户端索要即可,如此一来,便缩短了总体的页面加载时间。