一种终端页面传输方法、装置、介质和电子设备制造方法及图纸

技术编号:24520907 阅读:53 留言:0更新日期:2020-06-17 07:54
本发明专利技术实施例涉及一种终端页面传输方法、装置、介质及电子设备,该方法包括:向服务端发送文件传输请求;接收服务端通过响应文件传输请求而返回的用于构建页面的文件,并存储在本地存储器中;向服务端发送html页面传输服务请求;接收服务端通过响应html页面传输服务请求而返回的纯标记符的html页面;基于纯标记符的html页面从本地存储器中获取并加载用于构建页面的文件,并通过对纯标记符的html页面进行解析和渲染。本发明专利技术通过改变页面传输方式,先将页面加载需要的文件传输给终端并存储,再根据html页面尽快从本地存储的文件进行页面解析和渲染,避免网络故障导致因无法及时记载文件出现白屏的问题。

【技术实现步骤摘要】
一种终端页面传输方法、装置、介质和电子设备
本专利技术涉及互联网
,尤其涉及一种终端页面传输方法、装置、介质及电子设备。
技术介绍
传统的自助终端目前多数用客户端原生本地代码方式进行加载,所以不存在客户端/服务端的通信不稳定因素而导致页面无法加载的情况出现。但随着html5页面技术的普及,自助终端的客户端是通过服务端进行加载页面的,此时需保证自助终端的首页和其他功能性页面需一次加载成功。但是,就当前的自助终端应用使用场景而言,其网络不稳定因素是客观存在,因此自助终端在首次从服务器端加载功能页面时,会偶发性地无法获取需要加载的功能页面而出现白屏的情况,且问题不好重现和修复,导致自助终端的用户体验极速下降。这种问题的原因主要由于自助终端浏览器内核在顺序解析服务端传输过来的页面元素时,若较多的层叠样式表(CascadingStyleSheets,简称CSS)文件和JavaScript代码需要同步解析渲染,此时如果网络不稳定,那么浏览器内核将终止对整个页面进行解析,便导致自助终端出现白屏的情况。基于上述,现有技术中自助终端因网络不稳定出现白屏的问题。上述缺陷是本领域技术人员期望克服的。
技术实现思路
(一)要解决的技术问题为了解决现有技术的上述问题,本专利技术提供一种终端页面传输方法、装置、介质及电子设备,解决现有技术中自助终端在加载服务端页面时出现白屏的问题。(二)技术方案为了达到上述目的,本专利技术采用的主要技术方案包括:根据本专利技术实施例的第一方面,提供了本专利技术提供一种终端页面传输方法,其包括:向服务端发送文件传输请求;接收服务端通过响应所述文件传输请求而返回的用于构建页面的文件,并存储在本地存储器中;向服务端发送html页面传输服务请求;接收服务端通过响应所述html页面传输服务请求而返回的纯标记符的html页面;基于纯标记符的html页面从所述本地存储器中获取并加载所述用于构建页面的文件,并通过对所述纯标记符的html页面进行解析和渲染。在本专利技术的一种示例性实施例中,所述文件传输请求为针对终端的首页和功能页的页面构建所需文件的请求。在本专利技术的一种示例性实施例中,所述用于构建页面的文件包括页面中的图片文件、CSS文件和Javascript文件。在本专利技术的一种示例性实施例中,接收服务端通过响应所述文件传输请求而返回的用于构建页面的文件之后,还包括:针对收到的所述用于构建页面的文件获取版本标识;将所述版本标识与本地存储器中已存储的文件版本标识进行比较,如果所述版本标识与本地存储器中已存储的文件版本标识不同,则更新本地存储器中的文件。在本专利技术的一种示例性实施例中,所述纯标记符的html页面中包括所述本地存储器中存储图片文件、CSS文件和Javascript文件的绝对地址。在本专利技术的一种示例性实施例中,所述基于纯标记符的html页面从所述本地存储器中获取并加载所述用于构建页面的文件包括:按照图片文件的绝对地址从所述本地存储器中加载用于构建页面的图片文件;按照CSS文件的绝对地址从所述本地存储器中加载用于构建页面的CSS文件;按照Javascript文件的绝对地址从所述本地存储器中加载用于构建页面的Javascript文件。在本专利技术的一种示例性实施例中,所述从所述通过对所述纯标记符的html页面进行解析和渲染包括:对所述纯标记符的html页面进行解析构建DOM树;对所述用于构建页面的CSS文件进行解析构建CSS规则树;将所述DOM树和所述CSS规则树进行合成,生成渲染树;基于所述渲染树结合所述用于构建页面的图片文件和所述用于构建页面的Javascript文件,按照浏览器内核渲染规则进行页面绘制。根据本专利技术实施例的第二方面,提供一种终端页面传输装置,包括:文件请求模块,配置为向服务端发送文件传输请求;文件存储模块,配置为接收服务端通过响应所述文件传输请求而返回的用于构建页面的文件,并存储在本地存储器中;页面请求模块,配置为向服务端发送html页面传输服务请求;页面接收模块,配置为接收服务端通过响应所述html页面传输服务请求而返回的纯标记符的html页面;解析渲染模块,配置为基于纯标记符的html页面从所述本地存储器中获取并加载所述用于构建页面的文件,并通过对所述纯标记符的html页面进行解析和渲染。根据本专利技术实施例的第三方面,提供一种计算机可读介质,其上存储有计算机程序,所述程序被处理器执行时实现以上所述的终端页面传输方法的步骤。根据本专利技术实施例的第四方面,提供一种电子设备,包括:一个或多个处理器;存储装置,用于存储一个或多个程序,当所述一个或多个程序被所述一个或多个处理器执行时,使得所述一个或多个处理器实现以上所述的终端页面传输方法。(三)有益效果本专利技术的有益效果是:本专利技术实施例提供的终端页面传输方法、装置、介质及电子设备,通过改变页面传输方式,先将页面加载需要的文件传输给终端并进行存储,然后再获取纯标记符的html页面,进而可以根据html页面尽快从本地存储的文件进行页面解析和渲染,避免网络故障导致因无法及时记载文件出现白屏的问题。附图说明图1为本专利技术相关实施例中提供的传统自助终端进行页面传输的原理示意图;图2为根据一示例性实施例示出的一种终端页面传输方法及装置的系统场景框图;图3为本专利技术一实施例提供的一种终端页面传输方法的流程示意图;图4为为本专利技术一实施例中根据图3所示方法进行自助终端页面传输的原理示意图;图5为本专利技术另一实施例提供的一种基于终端页面传输装置的示意图;图6为本专利技术再一实施例中提供的一种电子设备的计算机系统的结构示意图。具体实施方式为了更好的解释本专利技术,以便于理解,下面结合附图,通过具体实施方式,对本专利技术作详细描述。本文所使用的所有的技术和科学术语与属于本专利技术的
的技术人员通常理解的含义相同。本文中在本专利技术的说明书中所使用的术语只是为了描述具体的实施例的目的,不是旨在于限制本专利技术。本文所使用的术语“和/或”包括一个或多个相关的所列项目的任意的和所有的组合。图1为本专利技术相关实施例中提供的传统自助终端进行页面传输的原理示意图,如图1所示,流程如下:1.1)自助终端在解析和渲染页面过程中自助终端的浏览器内核向服务端发送html页面传输服务请求;1.2)自助终端接收服务器返回的图片、CSS、Javascript等文件。图1中解析和渲染过程中自助终端才从服务端获下载上述文件,由于自助终端下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的,在渲染到页面的某一部分时,需页面中的所有页面元素都已经下载完成。如果解析过程中遇到Javascript脚本或是CSS样式,则下载过程会启用单独的通本文档来自技高网
...

【技术保护点】
1.一种终端页面传输方法,其特征在于,其包括:/n向服务端发送文件传输请求;/n接收服务端通过响应所述文件传输请求而返回的用于构建页面的文件,并存储在本地存储器中;/n向服务端发送html页面传输服务请求;/n接收服务端通过响应所述html页面传输服务请求而返回的纯标记符的html页面;/n基于纯标记符的html页面从所述本地存储器中获取并加载所述用于构建页面的文件,并通过对所述纯标记符的html页面进行解析和渲染。/n

【技术特征摘要】
1.一种终端页面传输方法,其特征在于,其包括:
向服务端发送文件传输请求;
接收服务端通过响应所述文件传输请求而返回的用于构建页面的文件,并存储在本地存储器中;
向服务端发送html页面传输服务请求;
接收服务端通过响应所述html页面传输服务请求而返回的纯标记符的html页面;
基于纯标记符的html页面从所述本地存储器中获取并加载所述用于构建页面的文件,并通过对所述纯标记符的html页面进行解析和渲染。


2.如权利要求1所述的终端页面传输方法,其特征在于,所述文件传输请求为针对终端的首页和功能页的页面构建所需文件的请求。


3.如权利要求1所述的终端页面传输方法,其特征在于,所述用于构建页面的文件包括页面中的图片文件、CSS文件和Javascript文件。


4.如权利要求1所述的终端页面传输方法,其特征在于,接收服务端通过响应所述文件传输请求而返回的用于构建页面的文件之后,还包括:
针对收到的所述用于构建页面的文件获取版本标识;
将所述版本标识与本地存储器中已存储的文件版本标识进行比较,如果所述版本标识与本地存储器中已存储的文件版本标识不同,则更新本地存储器中的文件。


5.如权利要求3所述的终端页面传输方法,其特征在于,所述纯标记符的html页面中包括所述本地存储器中存储图片文件、CSS文件和Javascript文件的绝对地址。


6.如权利要求5所述的终端页面传输方法,其特征在于,所述基于纯标记符的html页面从所述本地存储器中获取并加载所述用于构建页面的文件包括:
按照图片文件的绝对地址从所述本地存储器中加载用于构建页面的图片文件;
按照CSS文件的绝对地址从所述本地存储器中加载...

【专利技术属性】
技术研发人员:马炳佳吴仲坤罗家强冯文王飞连定园
申请(专利权)人:广东金赋科技股份有限公司
类型:发明
国别省市:广东;44

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1