对于传统的页面模型来说,数据的拉取+渲染模型如下:

1

在页面的head部分,使用jsonp预拉取cgi资源,然后在资源加载完成之后,检查预拉取的数据是否已经返回,如果已返回,则直接用该数据渲染(避免了先用缓存数据渲染再用cgi数据渲染导致的二次刷新),否则才用缓存数据渲染。

3

 

 

 

 

对于上面的优化方式,我们可以用于独立页面的首屏数据渲染中,但是对于由手Q中一个webview内打开的新webview里的H5页面,是否有更好的方法呢?

 

当我们通过点击操作,在webview内调用手Q的openUrl接口打开新的webview并加载页面,新页面对于我们来说是可被预知的,也就是说我们点击打开新webview的时候,其实是知道要打开的页面是什么。

因此对于cgi预拉取的逻辑,我们其实可以提前到前一个webview点击的操作时就发起。

 

统计了一下手Q创建webview到开始请求页面url之间的耗时,android端耗时大约在1.5-2秒之间。

 

因此其实我们可以利用这段时间,在点击前一个webview的同时,让新页面的首屏cgi请求提前发起,在等待下一个webview打开并load页面的期间,如果cgi请求已经返回,数据可以暂存在前一个webview中,等新webview页面资源ready之后,通过手Q的webview通信接口mqq.addEventListener/mqq.dispatchEvent从上一个webview获取数据并渲染。

 

由于客户端接口通信速度比网络通信要快,因此可借此减少首屏数据渲染的等待时间,另外也同时可以改善二次渲染的问题:

 

2

 

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2015/06/h5-ye-mian-di-kua-webview-yu-la-qu-shu-ju-chang-shi/

  1. 加载主资源过程中的一些回调问题怎么解决?比如shouldInterceptRequest、onPageStart等?

  2. 各位大神,我想问一下android使用WebView加载有动画的HTML5,为什么有时候能正常显示,有时候却显示不全呢(图片没加载完,导致布局混乱)?

  3. 什么是cgi 资源。。。使用jsonp预拉取cgi资源,jsonp 到时是用过,但是jsonp预拉取cgi资源,没有玩过

    • cgi资源可以理解为发送一个请求拉取数据 预拉取的意思是在head阶段就发起数据请求,而不是等所有页面资源加载完成之后发起数据请求

  4. 不会提前加载下一个页面的资源 只是在点击打开一个页面的时候 提前发起下一个页面的首屏cgi数据请求预拉取数据

  5. 这样是不是会浪费很多资源呢?就是把下一个可能跳转的页面 提前加载下来?如果这个页面链接很多会加载很多??