一种页面显示方法和装置与流程

文档序号:15047388发布日期:2018-07-27 22:59阅读:133来源:国知局

本公开涉及计算机技术领域,特别涉及一种页面显示方法和装置。



背景技术:

在移动端页面的性能优化中,提升页面的显示速度是一项十分重要的事情,页面显示速度直接影响用户的使用体验,是页面性能的重要参考指标。相关技术中,为了提高页面的显示速度,可以将页面中的静态资源打包成离线包,在页面访问之前就分发到客户端本地,当用户访问页面的时候,优先由本地离线包获取静态资源进行渲染,并由远端的业务服务器获取页面的动态资源,静态资源和动态资源都获得后可以显示完整的页面。



技术实现要素:

有鉴于此,本公开提供一种页面显示方法和装置,以提高页面显示速度。

具体地,本说明书一个或多个实施例是通过如下技术方案实现的:

第一方面,提供一种页面显示方法,所述方法包括:

在页面被访问之前,获得所述页面的离线包,所述离线包中包括:html页面、以及页面中的静态资源,所述html页面中包括:数据获取标签,所述数据获取标签用于触发获取页面中的动态资源;

解析所述数据获取标签,并根据所述数据获取标签由业务服务器获取所述动态资源,将所述动态资源添加至所述离线包;

当接收到页面访问请求时,根据所述离线包中的静态资源和动态资源渲染显示所述页面。

第二方面,提供一种页面显示装置,所述装置包括:

数据获取模块,用于在页面被访问之前,获得所述页面的离线包,所述离线包中包括:html页面、以及页面中的静态资源,所述html页面中包括:数据获取标签,所述数据获取标签用于触发获取页面中的动态资源;

标签处理模块,用于解析所述数据获取标签,并根据所述数据获取标签由业务服务器获取所述动态资源,将所述动态资源添加至所述离线包;

渲染显示模块,用于当接收到页面访问请求时,根据所述离线包中的静态资源和动态资源渲染显示所述页面。

第三方面,提供一种页面显示设备,所述设备包括存储器、处理器,以及存储在存储器上并可在处理器上运行的计算机指令,所述处理器执行指令时实现以下步骤:

在页面被访问之前,获得所述页面的离线包,所述离线包中包括:html页面、以及页面中的静态资源,所述html页面中包括:数据获取标签,所述数据获取标签用于触发获取页面中的动态资源;

解析所述数据获取标签,并根据所述数据获取标签由业务服务器获取所述动态资源,将所述动态资源添加至所述离线包;

当接收到页面访问请求时,根据所述离线包中的静态资源和动态资源渲染显示所述页面。

本说明书一个或多个实施例的页面显示方法和装置,通过在离线包页面中增加了数据获取标签,使得客户端能够根据该标签定义的动作,提前去业务服务器获取页面所需的动态资源,从而在用户访问页面时能够更加快速的展示页面,提升了页面显示速度。

附图说明

为了更清楚地说明本说明书一个或多个实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本说明书一个或多个实施例中记载的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。

图1为本说明书一个或多个实施例提供的一种页面显示方法的流程图;

图2为本说明书一个或多个实施例提供的一种页面显示方法的流程图;

图3为本说明书一个或多个实施例提供的一种页面显示装置的结构图。

具体实施方式

为了使本技术领域的人员更好地理解本说明书一个或多个实施例中的技术方案,下面将结合本说明书一个或多个实施例中的附图,对本说明书一个或多个实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是一部分实施例,而不是全部的实施例。基于本说明书一个或多个实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都应当属于本公开保护的范围。

提升页面的显示速度是移动端页面性能优化中的一项重要工作。一个页面通常包括两类资源,静态资源和动态资源。

其中,静态资源可以包括页面样式css(cascadingstylesheets,层叠样式表)、图片image等,静态资源可以是用于渲染页面格式的一些数据,通常可以与访问页面的用户无关。

动态资源可以是与一定的入参对应的数据,比如,可以与访问页面的用户自身的情况相关,比如,会员积分、用户资产余额等,不同的用户可以对应不同的积分或资产。又比如,动态资源还可以是与时间参数对应的数据,随着时间的不同,资源的数值有所变化。再比如,动态资源还可以是与地理纬度相关的数据,随着地理位置的不同而不同。总之,动态资源可以是动态变化的,在获取动态资源时,可以指示对应的入参,以使得业务服务器依据入参返回对应的动态资源。

为了提升页面显示速度,静态资源可以打包成离线包,在页面访问之前提前分发到客户端本地,在用户访问页面时,优先本地获取静态资源,而动态资源则向业务服务器请求获取。

然而,正是由于动态资源要向服务器远程获取,那么可能会由于获取过程经过的网络状态,影响到动态资源的获取速度。如果网络状态较差,动态资源获取速度较慢,将直接影响到页面的显示速度,尤其影响到页面首屏的显示速度。而首屏时间对用户体验有着很大的影响,考验着用户的忍耐度,首屏时间(firstscreentime)是指用户看到第一屏显示完整的时间,该第一屏即整个网页顶部大小为当前窗口的区域。提高页面显示速度,缩短首屏时间,是其中一项重要的页面性能提升的参考指标。

本说明书一个或多个实施例的页面显示方法,考虑到当页面的离线包分发到客户端本地后,也许要间隔相当一段时间才会被用户访问,那么这之间的时间差可以充分利用来提前获取动态资源。即客户端可以在获取到更新的离线包后,就提前由业务服务器获取动态资源,而不用等到用户访问页面时再获取,这样用户访问页面时就可以直接使用,进行页面的渲染显示即可。

图1为本说明书一个或多个实施例提供的一种页面显示方法的流程,该方法可以是由存储页面离线包的客户端执行。该方法可以包括:

在步骤100中,在页面被访问之前,获得页面的离线包,离线包中包括:html(hypertextmarkuplanguage,超文本标记语言)页面、以及页面中的静态资源,所述html页面中包括:数据获取标签。

本步骤中,客户端获取页面离线包的方式可以有多种,例如,可以定期更新离线包,或者,在每次用户登录客户端时触发离线包的更新,或者,可以由服务器向客户端在进行离线包更新时主动推送至客户端,等。离线包的更新触发机制可以根据业务需求来定,并不是唯一的。

该离线包中除了包括通常的html页面、静态资源,还可以包括数据获取标签,该数据获取标签的作用可以是触发客户端去获取页面中的动态资源。比如,客户端在获取到离线包后,可以解析html页面,当解析到页面中的数据获取标签时,可以根据标签中定义的动作、参数去业务服务器获取页面中的动态资源。此外,该数据获取标签的格式和包括的参数可以进行自定义,只要能指示客户端去业务服务器获取到页面显示所需要的动态资源即可。

在步骤102中,解析所述数据获取标签,并根据所述数据获取标签由业务服务器获取所述动态资源,将所述动态资源添加至所述离线包。

本步骤中,客户端可以解析标签、执行标签,比如,客户端可以解析离线包中的html页面,并根据页面中的数据获取标签,由业务服务器获取到所需的动态资源,比如,会员积分。该动态资源可以存储在离线包中。

此外,客户端在获取到离线包后,可以在用户访问页面之前,执行离线包中的页面的遍历解析,解析和执行页面中的标签。例如,可以在获得离线包之后尽快的启动页面的解析,以大概率保证用户要访问的页面能够在访问时得到加速,即尽快的获取页面中的动态资源。

在步骤104中,当接收到页面访问请求时,根据所述离线包中的静态资源和动态资源渲染显示所述页面。

由于静态资源和动态资源都已经存储在本地,因此,当用户要访问页面时,可以直接由本地获取资源渲染页面即可,显著提升了页面的显示速度。

此外,提前获取到的动态资源,在用户访问页面时,可能仍然是最新的,比如,最新的会员积分值,或者,也可能在用户访问页面时又发生了变化,比如,会员积分值在业务服务器向客户端反馈动态资源时直至用户访问页面时之间的时间段内又进行了更新,那么也可以由客户端在用户访问页面时再去业务服务器获取一次。具体如何处理可以根据实际业务需求确定,并可以在html页面中进行业务执行逻辑的设定。

本例子的页面显示方法,通过在离线包页面中增加了数据获取标签,使得客户端能够根据该标签定义的动作,提前去业务服务器获取页面所需的动态资源,从而在用户访问页面时能够更加快速的展示页面,提升页面显示速度。

图2描述了本说明书一个或多个实施例提供的一种页面显示方法的流程,所述方法由存储页面离线包的客户端执行;并且,在该例子中,离线包服务器可以存储页面的静态资源页面的动态资源可以存储在业务服务器客户端可以分别由上述两个服务器获取资源以显示页面。如图2所示,该流程可以包括如下处理步骤,但是在实际实施中并不局限于下面的步骤顺序。

在步骤200中,客户端由业务服务器获取登录用户的用户标识。

例如,用户在客户端登录时,可以输入自己的用户账号、密码等登录信息,发送至业务服务器请求审核,业务服务器审核通过后,可以允许用户在客户端登录。此时,客户端可以获取到当前登录的用户的用户标识,比如,该用户标识可以是用户账号。

本步骤中,客户端获取用户标识,可以是用于后续步骤中根据该用户标识获取动态资源。动态资源可以是与用户相关的资源,不同的用户可以具有不同的动态资源,比如,不同的用户账号对应的会员积分可以不同。

在步骤202中,客户端由离线包服务器拉取离线包,更新本地的离线包,离线包中包括:html页面、以及页面中的静态资源,所述html页面中包括:数据获取标签。

例如,客户端可以在用户登录后,触发更新本地缓存的离线包。如图2所示,客户端可以由离线包服务器拉取最新的离线包数据。

本例子中,离线包中除了包括通常的html页面和静态资源之外,还可以包括:html页面中的数据获取标签。

该数据获取标签可以用于当客户端解析该标签时,触发客户端去业务服务器获取页面的动态资源。该标签的格式可以自定义,可以在该数据获取标签中定义如下几部分内容:

请求入参,用于作为获取页面的动态资源所依据的参数。比如,时间、用户标识等,可以用于获取上述用户标识和时间对应的动态资源。

动作参数,用于指示发送获取动态资源的请求。该动态参数相当于可以指示客户端要执行何种处理动作,指示客户端向业务服务器发送资源获取请求。

数据对象,用于指示所述动态资源赋值的页面节点。该数据对象可以用于指示客户端在接收到业务服务器返回的动态资源后,将该动态资源返回给页面中的哪个节点,比如,可以返回给页面中的分值节点(scorelabel)。

在html页面中,数据获取标签的数量可以为至少一个。例如,可以使用一个数据获取标签,一次性获取页面所需要的全部动态资源,并按照上述描述的标签格式,在标签中定义好返回的动态资源对应的页面节点,这种一次性获取可以节省请求的网络资源。或者,也可以定义多个数据获取标签,不同的数据获取标签可以用于获取对应不同页面节点的动态资源。

在步骤204中,客户端遍历离线包中的html页面,解析页面中的数据获取标签,并将用户标识设置在标签中的请求入参。

本步骤中,客户端在获取到更新的离线包后,可以解析离线包中的数据获取标签,并根据该标签定义的行为进行动态资源的获取。例如,客户端可以设置标签中的请求入参,所述请求入参用于作为获取动态资源所依据的参数。比如,可以设置用户标识、时间作为请求入参,以请求业务服务器返回对应请求入参的动态资源。

在步骤206中,客户端根据所述数据获取标签中的动作参数,向所述业务服务器发送获取所述动态资源的请求,携带所述请求入参。

例如,客户端可以携带用户标识等请求入参,向业务服务器发送请求,以请求获取页面的动态资源,并且是请求返回对应着请求入参的动态资源。

在步骤208中,客户端接收动态资源,并将该动态资源返回至所述数据获取标签中指定的页面节点。

本步骤中,客户端可以将由业务服务器获取的动态资源,返回至数据获取标签中指定的页面节点。该动态资源也存储在客户端本地的离线包中。

如下示例一种数据获取标签的格式:

<actionrpc-name='com.zmxy.custprod.getscore'param='{"year":2016,"month":11}'render-target-id='score-label'/>

上述的标签,其中的actionrpc-name='com.zmxy.custprod.getscore'定义了客户端要发送的请求,要向业务服务器发送一个rpc请求,以请求分值score。其中的param=‘{"year":2016,"month":11}定义了请求入参,要获取2016年11月的分值。其中的render-target-id=‘score-label定义了动态资源对应的页面节点的id是score-label。根据该标签,客户端可以向业务服务器发送一个rpc请求,携带请求入参,并将返回的动态资源赋值给节点score-label。

经过上述处理步骤,客户端本地可以在离线包中存储了页面显示所需的静态资源和动态资源,可以等到用户要访问页面时,直接根据该离线包中的资源进行页面的渲染显示即可。

在步骤210中,客户端接收页面访问请求时,根据所述离线包中的静态资源和动态资源渲染显示所述页面。

本步骤中,当客户端接收到用户对页面的访问请求时,可以根据离线包中的静态资源和动态资源渲染显示所述页面。例如,可以根据静态资源中的css样式数据定义页面各个节点的样式,可以将动态资源中与用户相关的资源比如会员积分显示在页面中的积分对应的节点,并且,还可以生成渲染树、进行布局计算和绘制页面等页面的显示处理。

此外,当页面中的数据获取标签是至少两个时,还可以定义各个数据获取标签的优先级。所述优先级可以是根据用户的行为数据确定,可以是根据行为数据确定的用户访问页面中各个数据的先后顺序,并通过优先级来体现这种数据访问的优先顺序。

比如,用户的行为数据可以是历史采集的用户在客户端登录时访问页面的频次,用户在登录后可以经常查看a页面,并且一般用户特别频繁的查看a页面中的a1数据(并假设a1是动态资源),说明用户特别关注a1数据表示的内容。那么可以在定义优先级时,将a1数据对应的数据获取标签的优先级设置的较高,客户端在解析执行各个数据获取标签时,可以根据优先级,优先执行a1数据对应的数据获取标签,即优先获取优先级高的数据获取标签对应的动态资源,这样可以在页面中更快的显示用户更为关注的页面内容,提升了页面的显示性能,用户体验也更好。

本例子的页面显示方法,通过在离线包被缓存到本地之后,遍历页面中的数据获取标签,可以提前将页面的动态资源存储在客户端本地,可以在页面访问时更快速的显示页面,提升了页面的显示速度。

此外,在页面的显示中,首屏时间是很重要的一项指标,可以衡量用户的忍耐度,首屏时间太长的话,严重影响用户的使用体验。在本说明书一个或多个实施例的页面显示方法中,获取的动态资源可以包括页面首屏显示所需的动态资源,以提高首屏的显示速度。

再者,有时用户打开客户端的速度可能会较为快速,客户端也许未能及时的更新本地离线包,或者,即使更新了离线包还未及时的解析页面中的数据获取标签来获取动态资源,那么可以采用原有的动态资源的获取流程即可,即可以由打开页面的浏览器解析页面,按照标准的动态资源获取流程执行。此外,当用户访问页面时,客户端可以优先由本地获取离线包资源,如果本地没有所需要的离线包,可以去cdn(contentdeliverynetwork,内容分发网络)上获取页面显示所需的离线包。

为了实现上述的页面显示方法,本说明书一个或多个实施例还提供了一种页面显示装置。如图3所示,该装置可以包括:数据获取模块31、标签处理模块32和渲染显示模块33。

数据获取模块31,用于在页面被访问之前,获得所述页面的离线包,所述离线包中包括:html页面、以及页面中的静态资源,所述html页面中包括:数据获取标签,所述数据获取标签用于触发获取页面中的动态资源;

标签处理模块32,用于解析所述数据获取标签,并根据所述数据获取标签由业务服务器获取所述动态资源,将所述动态资源添加至所述离线包;

渲染显示模块33,用于当接收到页面访问请求时,根据所述离线包中的静态资源和动态资源渲染显示所述页面。

在一个例子中,所述数据获取标签,包括:

请求入参,用于作为获取所述动态资源所依据的参数;

动作参数,用于指示发送获取所述动态资源的请求;

数据对象,用于指示所述动态资源赋值的页面节点。

在一个例子中,所述标签处理模块32,还用于将访问所述页面的用户的用户标识,作为其中一个所述请求入参。

在一个例子中,所述标签处理模块32,用于当所述数据获取标签是至少两个时,根据各个数据获取标签的优先级,优先获取优先级高的数据获取标签对应的动态资源,所述优先级是根据用户的行为数据确定的用户优先访问的数据。

为了描述的方便,描述以上装置时以功能分为各种模块分别描述。当然,在实施本说明书一个或多个实施例时可以把各模块的功能在同一个或多个软件和/或硬件中实现。

上述方法实施例所示流程中的各个步骤,其执行顺序不限制于流程图中的顺序。此外,各个步骤的描述,可以实现为软件、硬件或者其结合的形式,例如,本领域技术人员可以将其实现为软件代码的形式,可以为能够实现所述步骤对应的逻辑功能的计算机可执行指令。当其以软件的方式实现时,所述的可执行指令可以存储在存储器中,并被设备中的处理器执行。

例如,对应于上述方法,本说明书一个或多个实施例同时提供一种页面显示设备,该设备可以包括处理器、存储器、以及存储在存储器上并可在处理器上运行的计算机指令,所述处理器通过执行所述指令,用于实现如下步骤:

在页面被访问之前,获得所述页面的离线包,所述离线包中包括:html页面、以及页面中的静态资源,所述html页面中包括:数据获取标签,所述数据获取标签用于触发获取页面中的动态资源;

解析所述数据获取标签,并根据所述数据获取标签由业务服务器获取所述动态资源,将所述动态资源添加至所述离线包;

当接收到页面访问请求时,根据所述离线包中的静态资源和动态资源渲染显示所述页面。

上述实施例阐明的装置或模块,具体可以由计算机芯片或实体实现,或者由具有某种功能的产品来实现。一种典型的实现设备为计算机,计算机的具体形式可以是个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件收发设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任意几种设备的组合。

本领域内的技术人员应明白,本说明书一个或多个实施例可提供为方法、系统、或计算机程序产品。因此,本说明书一个或多个实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本说明书一个或多个实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

还需要说明的是,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本说明书一个或多个实施例可以在由计算机执行的计算机可执行指令的一般上下文中描述,例如程序模块。一般地,程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本说明书一个或多个实施例,在这些分布式计算环境中,由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中,程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本说明书中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于服务端设备实施例而言,由于其基本相似于方法实施例,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下,在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外,在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中,多任务处理和并行处理也是可以的或者可能是有利的。

以上所述仅为本说明书一个或多个实施例的较佳实施例而已,并不用以限制本公开,凡在本公开的精神和原则之内,所做的任何修改、等同替换、改进等,均应包含在本公开保护的范围之内。

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