H5页面的跨webview预拉取数据尝试

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

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

对于上面的优化方式,我们可以用于独立页面的首屏数据渲染中,但是对于由手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获取数据并渲染。

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

时间: 2024-10-21 13:22:35

H5页面的跨webview预拉取数据尝试的相关文章

jquery+thinkphp实现跨域抓取数据的方法

jquery的$.post发送数据到服务器后台,在由后台的PHP代码执行远程抓取,存到数据库ajax返回数据到前台,前台用JS接受数据并显示. //远程抓取获取数据$("#update_ac").click(function() {$username = $("#username").text();$("#AC,#rank,#Submit,#solved,#solved2,#solved3").ajaxStart(function(){$(thi

nodejs--实现跨域抓取数据

最近公司安排给我一个任务,抓取页面数据:http://survey.finance.sina.com.cn/static/20205/20131120.html?pid=20205&dpc=1,身为一个前端,还没搞过后台的东西,硬着头皮接下之后,就到网上各种找方法了.最终找到一个nodejs的方法,经过实践之后,觉得非常好用,所以分享给大家.此教程从0开始 ,适用于从来还没接触过nodejs的童鞋!1.先下载 nodejs,这个不多说,然后双击安装文件安装.下载地址:http://www.nod

移动端h5页面的头

1 <head lang="zh"> 2     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 3     <meta charset="utf-8" />  4     <meta content="yes" name="apple-mobile-web-app-capable"/&

客户端相关知识学习(十一)之Android H5交互Webview实现localStorage数据存储

前言 最近有一个需求是和在app中前端本地存储相关的,所以恶补了一下相关知识 webView开启支持H5 LocalStorage存储 有些时候我们发现写的本地存储没有起作用,那是因为默认WebView没有开启LocalStorage存储.开启方法如下 首先得有Webview控件: 有人问我是不是需要写布局文件,不写行不行,现在我就告诉你们,不写没问题,需要写就写不写直接创建New一个也行. 下面我就介绍一个,我new一个Webview实现localStorage. WebView mywebV

python自然语言处理1——从网络抓取数据

python自然语言处理1--从网络抓取数据 写在前面 本节学习python2.7 BeautifulSoup库从网络抽取数据的技术,检验之简而言之就是爬虫技术.网络编程是一门复杂的技术,在需要基础的地方,文中给出的链接地址,都是很好的教程,可以参考,我在这里不在重复发明轮子.本节的主旨在于: 帮助快速掌握基本爬虫技术,形成一条主线,能为自己的实验构造基础数据.掌握爬虫技术后,可以从网络抓取符合特定需求的数据供分析,这里学习的爬虫技术适用于数据挖掘.自然语言处理等需要从外部挖掘数据的学科. 1.

PHP Curl模拟登录并抓取数据

使用PHP的Curl扩展库可以模拟实现登录,并抓取一些需要用户账号登录以后才能查看的数据.具体实现的流程如下(个人总结): 1. 首先需要对相应的登录页面的html源代码进行分析,获得一些必要的信息: (1)登录页面的地址: (2)验证码的地址: (3)登录表单需要提交的各个字段的名称和提交方式: (4)登录表单提交的地址: (5)另外要需要知道要抓取的数据所在的地址. 2. 获取cookie并存储(针对使用cookie文件的网站): $login_url = 'http://www.xxxxx

网页滚动到底部,拉取数据

网页滚动模式 //滚到到底部自动拉取数据 //页面滚到底部异步加载下一页数据 $(window).scroll(function () { //已经滚动到上面的页面高度 var scrollTop = parseFloat($(this).scrollTop()), //页面高度 scrollHeight = $(document).height(), //浏览器窗口高度 windowHeight = parseFloat($(this).height()), totalHeight = scr

【2017-05-21】WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性、Js中getAttribute和超链接点击弹出警示框。

一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值,方式: href="地址?key=value&key=value"            用&可以实现传递多个值. 通过这种方式就把要传递的值传到要跳转的页面去了. 2.跨页面取值: 在跳转到的页面的C#代码服务端进行取值 用:  string value = Request["key"]; 二.

关于Jquery跨域请求php数据

什么引起了ajax不能跨域请求的问题? ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告. 跨域的安全限制都是指浏览器端来说的,服务器端是不存在跨域安全限制的.所以针对这2种情况衍生出2类跨域解决方案,一类是服务器端做中转类似代理方式,一类是js处理浏览器端的真正跨域访问. <script type="text/javascript" src="./jquery-1.6.4.min.j