一种提升加载网页速度的方法与流程

文档序号:15399720发布日期:2018-09-11 17:11阅读:707来源:国知局

本发明涉及页面加载处理领域,特别是一种能够提升加载网页速度的方法。



背景技术:

由于h5页面具有快速迭代、灵活配置运营等优势,在当今的移动端主流app里,h5页面所占比重越来越大。传统的ios终端加载h5页面的方式是完全依赖原生的webview组件,先完成一系列的webview初始化流程,等webkit内核准备就绪后,再由webview完全依赖网络去请求加载页面的相关资源、数据。

此方式具有以下缺点,1)对页面的请求加载需要等原生的webview组件初始化就绪后才开始,而这个初始化过程耗时不少,造成请求时机相对滞后;2)加载页面的资源和数据完全依赖网络,造成页面出现长时间的白屏现象,影响用户体验。



技术实现要素:

为解决上述技术问题,本发明的目的是提供一种webview组件初始化就绪的流程链以及加载页面数据的流程链通过并行处理后流式桥接以提高加载页面速度的方法。

本发明采用的技术方案是:

一种提升加载网页速度的方法,包括并行处理的第一流程链和第二流程链;

第一流程链包括以下步骤:

a1、注册用于拦截webview请求的nsurlprotocol自定义子类;

a2、创建webview并初始化;

a3、webview发起页面请求;

a4、nsurlprotocol自定义子类拦截webview发出的页面请求;

第二流程链包括以下步骤:

b1、构建原生的基于nsurlsession的网络连接,根据需加载的页面请求页面数据;

b2、接收步骤b1发出请求后响应的页面数据,生成内存流;

所述步骤s4之后与步骤b2之后流式桥接,并且还包括步骤:

c、nsurlprotocol自定义子类加载页面数据,开启子线程,从内存流中获取页面数据,并返回给webkit内核;

d、webview根据页面数据渲染页面。

在步骤b2之后还包括b21、在接收页面数据完毕后,写入本地缓存。

所述步骤b1中在接收全量页面数据后,根据页面格式对全量页面数据进行分析,将全量页面数据分离出模板部分和数据部分,并且分别将相对应的全量页面数据、模板部分、数据部分写入本地缓存。

所述步骤b1中,先判断需加载的页面中是否有存在本地缓存的部分,若存在则在步骤b2中优先加载本地缓存中的全量页面数据,并流式桥接到步骤c中,同时,将不存在本地缓存的部分通过网络请求页面数据,若不存在本体缓存的部分,则均通过网络请求页面数据。

所述步骤b1后还包括

步骤b31、对发出请求后响应的页面数据进行分析,判断目前的模板部分与原有的模版部分相比是否更新变化,若目前的模板部分存在更新变化,则进入步骤b32,若目前的模板部分不存在更新变化,则进入步骤b33;

所述步骤b32包括

步骤b321、重新分析页面数据,分离出更新后的模板部分和数据部分;

步骤b322、分别将相对应的全量页面数据、模板部分、数据部分更新本地缓存;

步骤b323、通知webview进行整体刷新;

所述步骤b33包括

步骤b331、将目前的数据部分与本地缓存中原有的数据部分进行对比,分析出数据差异部分;

步骤b332、将目前的数据部分更新本地缓存中原有的数据部分,同时将目前的数据部分与模版部分合并为全量页面数据,并更新本地缓存中原有的全面页面数据;

步骤b333、将数据差异部分回调到webview进行部分刷新。

本发明的有益效果:

本发明加载网页的方法,对webview创建、初始化、webkit就绪的第一流程链以及加载页面数据的第二流程链并行处理,同时处理后通过流式桥接,nsurlprotocol自定义子类加载数据时,开启子线程,不断从内存流中获取数据,再返回到webkit内核,webview渲染页面,本设计在创建webview等准备工作的同时,已经基于nsurlsession的网络连接加载页面数据,使得请求时机较佳,加载速度加快,提升用户的应用体验。

附图说明

下面结合附图对本发明的具体实施方式做进一步的说明。

图1是本发明加载网页的方法的基本流程图。

图2是本发明加载网页的方法的在具备本地缓存的情况下的流程图。

具体实施方式

如图1、图2所示,本发明提升加载网页速度方法,可应用于ios端并且用于加载h5等页面,此处加载网页的方法包括并行处理的第一流程链和第二流程链;

第一流程链包括以下步骤:

a1、注册用于拦截webview请求的nsurlprotocol自定义子类;

a2、创建webview并初始化;

a3、webview发起页面请求;

a4、nsurlprotocol自定义子类拦截webview发出的页面请求;

第二流程链包括以下步骤:

b1、构建原生的基于nsurlsession的网络连接,根据需加载的页面请求页面数据;

b2、接收步骤b1发出请求后响应的页面数据,生成内存流;

所述步骤s4之后与步骤b2之后流式桥接,并且还包括步骤:

c、nsurlprotocol自定义子类加载页面数据,开启子线程,从内存流中获取页面数据,并返回给webkit内核;

d、webview根据页面数据渲染页面。

其中,webkit内核、基于webkit内核来展现wed页面的webview组件、nsurlprotocol的自定义子类以及基于nsurlsession的网络连接均属于在智能终端浏览网络页面领域中常规的技术手段,其基本构架、构建关系、程序具体编写等不在此赘述,而流式桥接为在步骤b2中将页面数据生产内存流,nsurlprotocol进而在数据流中进行读取。

本设计对webview创建、初始化、webkit就绪的第一流程链以及加载页面数据的第二流程链并行处理,同时处理后通过流式桥接,nsurlprotocol自定义子类加载数据时,开启子线程,不断从内存流中获取数据,再返回到webkit内核,webview渲染页面,本设计在创建webview等准备工作的同时,已经基于nsurlsession的网络连接加载页面数据,使得请求时机较佳,加载速度加快,提升用户的应用体验。

上述的第一流程链、第二流程链、步骤c、步骤d中为实现本设计的最基本方法,进一步地,本设计可增设本地缓存,在步骤b2之后还包括b21、在接收页面数据完毕后,将接收的全量页面数据写入本地缓存。

如图2所示,其中,步骤b1中在接收全量页面数据后,根据页面格式对全量页面数据进行分析,将全量页面数据分离出模板部分和数据部分,并且分别将相对应的全量页面数据、模板部分、数据部分写入本地缓存。

当具有本地缓存后,本设计的方法还可以进行延伸,基于步骤b1对全量页面数据的分析方式以及写入本地缓存的方式,在下一次加载页面数据时,此处将新一次的页面数据、模板部分、数据部分叙述成目前的全量页面数据、模板部分、数据部分。

步骤b1中,先判断需加载的页面中是否有存在本地缓存的部分,若存在则在步骤b2中优先加载本地缓存中的全量页面数据,并流式桥接到步骤c中,同时,将不存在本地缓存的部分通过网络请求页面数据,若不存在本体缓存的部分,则均通过网络请求页面数据。

所述步骤b1后还包括步骤b31、对发出请求后响应的页面数据进行分析,判断目前的模板部分与原有的模版部分相比是否更新变化,若目前的模板部分存在更新变化,则进入步骤b32,若目前的模板部分不存在更新变化,则进入步骤b33;

所述步骤b32包括

步骤b321、重新分析页面数据,分离出更新后的模板部分和数据部分;

步骤b322、分别将相对应的全量页面数据、模板部分、数据部分更新本地缓存;

步骤b323、通知webview进行整体刷新;

所述步骤b33包括

步骤b331、将目前的数据部分与本地缓存中原有的数据部分进行对比,分析出数据差异部分;

步骤b332、将目前的数据部分更新本地缓存中原有的数据部分,同时将目前的数据部分与模版部分合并为全量页面数据,并更新本地缓存中原有的全面页面数据;

步骤b333、将数据差异部分回调到webview进行部分刷新。

在nsurlsession的网络连接下,根据需加载的页面请求页面数据后,对服务端响应的结果进行判定,如果发现模板部分不变,只是更新数据部分,那就进一步得出数据的差异部分,通过js回调给webview组件做局部刷新;如果模板部分发生变化,就按首次加载的逻辑执行来全量刷新网页和更新缓存,此处的全量页面数据可通过分析拆分成相对应的模板部分、数据部分,相对应的模板部分、数据部分也可以通过合并得出全量页面数据,进而经过上述步骤后webview是对渲染页面进行全面刷新和部分刷新。

进一步避免了页面加载时长时间出现白屏的现象,提升用户体验。

以上所述仅为本发明的优先实施方式,本发明并不限定于上述实施方式,只要以基本相同手段实现本发明目的的技术方案都属于本发明的保护范围之内。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1