CN108427597A - 加速页面渲染的方法及装置 - Google Patents

Abstract

本申请提供了加速页面渲染的方法及装置，其中，该加速页面渲染方法包括：响应于页面请求，触发所述页面上添加的原生视图控件渲染预设页面内容，以及，向服务器请求下载所述页面的文档；响应于所述服务器返回所述页面的文档，从所述文档中解析得到所述页面的全部内容；将所述页面的内容进行展示。采用本申请实施例，因为下载页面的文档以及从文档中解析得到页面的全部内容需要一定的时间，而原生视图控件渲染的预设页面内容就能提前被用户看到，从而缩短用户看到页面内容的时间，提升用户浏览网页的体验。

Description

加速页面渲染的方法及装置

技术领域

本申请涉及互联网数据处理技术领域，特别涉及一种加速页面渲染的方法及装置，以及，一种计算机可读介质。

背景技术

Web页面是基于浏览器可访问的网站页面。用户通常可以使用浏览器等客户端浏览网页，一般情况下，在用户加载网页的时候，服务器会先将页面的Document(文档)发送至客户端，由客户端对该文档进行解析，从而得到网页的内容，并加载在浏览器上展示给用户。

但是采用这种浏览网页的方法，加载页面的内容的速度较慢，会导致用户体验较差。例如，假设用户触发了商品详情的页面，由于下载和解析文档还需要一定的时间，就会导致用户在浏览网页的时候，网页上可能出现白屏状态。

发明内容

发明人在研究过程中发现，现有技术中因为web页面需要等待服务器端的Document完全下载完成后，才能启动对Document的解析和渲染，所以无法实现分区域渲染。此外，在web页面包括有图片资源的情况下web页面在下载Document后，还需要根据Document中的<img>标签的src属性去异步加载图片资源，故在web页面中一般会先看到文字，然后再逐渐看到图片。并且，若web页面内容不是服务器端渲染的，是前后端分离的，则需要先下载Document文档对象，解析Document文档并获得封装业务逻辑的js文件地址，请求下载js文件，js文件下载完毕后再由js发起业务请求，故用户看到页面内容的时间更晚。

因此，可以采用在web页面中添加原生视图控件的方式。首先，原生视图控件可以利用本地资源提前绘制部分内容，无需等待网络请求；浏览器等客户端软件可以预先获取并存储(或预置)原生视图控件配置资源，在用户触发打开web页面的新窗口时，使用本地存储的原生视图配置资源渲染原生视图控件上的部分页面内容，让用户提前看到这部分页面内容，避免整体白屏的现象。并且，原生视图控件无需等待页面Document的下载即可直接加载图片资源，故原生视图控件的图片显示会早于web页面上的图片显示。此外，原生视图控件上需展现的动态页面内容，可以预先获取业务逻辑实现代码并存储(或预置)在客户端本地，无需等待Document文档对象下载及业务逻辑js文件下载，可以比浏览器等客户端更早地发起动态页面内容的请求。

基于此，本申请提供了一种加速页面渲染的方法，用以采用在web上可以预先添加原生视图控件的方式，在用户请求页面的内容之后，触发原生视图控件先渲染预设页面内容，同时向服务器请求下载页面的文档，因为下载页面的文档以及从文档中解析得到页面的全部内容需要一定的时间，而原生视图控件渲染的预设页面内容就能提前被用户看到，从而提升用户浏览网页的体验。

本申请还提供了一种加速页面渲染的装置，用以保证上述方法在实际中的实现及应用。

为了解决上述问题，本申请公开了一种加速页面渲染的方法，该方法包括：

响应于页面请求，触发所述页面上添加的原生视图控件渲染预设页面内容，以及，向服务器请求下载所述页面的文档；

响应于所述服务器返回所述页面的文档，从所述文档中解析得到所述页面的全部内容；

将所述页面的内容进行展示。

其中，所述预设页面内容为静态页面内容，所述触发所述页面上添加的原生视图控件渲染预设页面内容，包括：

触发所述原生视图控件确定在屏幕上的显示位置；

触发所述原生视图控件在所述显示位置上绘制所述静态页面内容。

其中，所述预设页面内容为动态页面内容，所述触发所述页面上添加的原生视图控件渲染预设页面内容，包括：

触发所述原生视图控件确定在屏幕上的显示位置，以及，向服务器发送动态页面内容的请求；

响应于所述服务器返回所述动态页面内容，触发所述原生视图控件在所述显示位置上绘制所述动态页面内容。

其中，该方法还包括：

响应于接收到所述页面的全部内容加载完毕的通知事件，或者，响应于在所述页面上触发的用户操作，在页面上删除所述原生视图控件；其中，所述用户操作包括：点击、滑动、触摸和/或滚动操作。

其中，该方法还包括：

响应于用户触发所述页面的内容滚动的操作，触发所述原生视图控件随着所述内容滚动而滚动，或者，所述原生视图控件在屏幕上的位置保持不变。

其中，同一个页面上的原生视图控件的个数为一个或多个。

本申请实施例还公开了一种加速页面渲染的装置，包括：

触发模块，用于响应于页面请求，触发所述页面上添加的原生视图控件渲染预设页面内容；

下载模块，用于向服务器请求下载所述页面的文档；

解析模块，用于响应于所述服务器返回所述页面的文档，从所述文档中解析得到所述页面的全部内容；

展示模块，用于将所述页面的内容进行展示。

其中，所述预设页面内容为静态页面内容，所述触发模块包括：

第一触发子模块，用于触发所述原生视图控件确定在屏幕上的显示位置；

第二触发子模块，用于触发所述原生视图控件在所述显示位置上绘制所述静态页面内容。

其中，所述预设页面内容为动态页面内容，所述触发模块包括：

第三触发子模块，用于触发所述原生视图控件确定在屏幕上的显示位置；

发送子模块，用于向服务器发送动态页面内容的请求；

第四触发子模块，用于响应于所述服务器返回所述动态页面内容，触发所述原生视图控件在所述显示位置上绘制所述动态页面内容。

其中，该装置还包括：

删除模块，用于响应于接收到所述页面的全部内容加载完毕的通知事件，或者，响应于在所述页面上触发的用户操作，在页面上删除所述原生视图控件；其中，所述用户操作包括：点击、滑动、触摸和/或滚动操作。

其中，该装置还包括：

响应于用户触发所述页面的内容滚动的操作，触发所述原生视图控件随着所述内容滚动而滚动，或者，所述原生视图控件在屏幕上的位置保持不变。

本申请实施例还公开了一种计算机可读介质，其上存储有指令，当由一个或多个处理器执行时，使得装置执行如前所述的加速页面渲染的方法。

与现有技术相比，本申请实施例包括以下优点：

在本申请实施例中，在web上可以预先添加原生视图控件，在用户请求页面的内容之后，触发原生视图控件先渲染预设页面内容，同时向服务器请求下载页面的文档，因为下载页面的文档以及从文档中解析得到页面的全部内容需要一定的时间，而原生视图控件渲染的预设页面内容就能提前被用户看到，从而缩短用户看到页面内容的时间，提升用户浏览网页的体验。并且原生视图控件可以设置一个或多个，其上渲染的预设页面内容可以是静态页面内容，也可以是实时请求的动态页面内容，从而使得提前展示给用户的预设页面内容更贴合用户的需求。

当然，实施本申请的任一产品并不一定需要同时达到以上所述的所有优点。

附图说明

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

图1是本申请的加速页面渲染的方法实施例的示例性流程图；

图2是本申请的方法实施例中添加原生view控件的示意图；

图3是本申请的方法实施例中静态页面内容的示例性示意图；

图4是本申请的加速页面渲染的装置实施例的结构框图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

参考图1所示，为本申请提供的一种加速页面渲染的方法实施例的示例性流程图，在本实施例中，该方法可以包括：

步骤101：响应于页面请求，触发所述页面上添加的原生视图控件渲染预设页面内容，以及，向服务器请求下载所述页面的文档。

在本实施例中，页面可以是web页面，web页面是万维网上的一个按照HTML(超级文本标记语言，HyperText Markup Language)格式组织起来的文件，在进行信息查询时，web页面以信息页面的形式出现，它可包括图形、文字、声音和视像等信息。

在该web页面上可以预先添加原生视图控件，参考图2所示，为在web页面上添加原生view控件的示意图。原生view控件覆盖于web页面的位置上方，原生view控件上如果有内容，用户会看到原生view控件上的内容，以及，原生view控件覆盖之外的web页面上的页面内容。例如，假设原生view控件所覆盖的区域为A区域，而web页面所覆盖的区域为B区域，则用户可以看到A区域的内容，以及(B-A)区域的内容。

可以理解的是，原生view控件作为在web页面上添加的控件，可以随着web页面的滚动而滚动，并且，在一个web页面上可以添加一个原生view控件，也可以添加多个原生view控件，一个web页面上的原生view控件的个数可以由本领域技术人员自主设置。并且原生View控件上渲染的内容也可以不限制，例如可以设置一个原生View控件，用来提前绘制web页面的顶部标题，或者设置一个原生View控件来显示web页面上的固定按钮，等等。

在原生View控件上的预设页面内容可以为web页面的静态页面内容，即一个web页面上的、不会随着页面的加载而发生内容变化的固定内容，则相应的，触发页面上添加的原生视图控件渲染预设页面内容的过程，就可以包括步骤A1～步骤A2：

步骤A1：触发所述原生视图控件确定在屏幕上的显示位置。

触发web页面上添加的原生View控件确定静态页面内容在屏幕上的显示位置，即确定静态页面内容在显示屏幕上所处的位置。具体的，可以从原生视图控件配置资源中获得前一个链接页面中静态页面内容(例如商品名称)所处的位置，作为原生视图控件在当前web页面所处的屏幕位置。

步骤A2：触发所述原生视图控件在所述显示位置上绘制所述预设页面内容。

接着，触发原生View控件将静态页面内容例如商品名称绘制在步骤A1确定的显示位置上，商品名称等静态页面内容可以从前一个链接页面中获得。当然，静态页面内容还可以为固定出现在某一个区域的地址图片等其他内容。本领域技术人员在web页面上配置原生View控件的时候，根据实际的静态页面内容与其所在的显示位置对原生View控件进行配置即可。

在原生View控件上的预设页面内容可以为web页面的动态页面内容，所述触发所述页面上添加的原生视图控件渲染预设页面内容，可以包括步骤B1～步骤B2：

步骤B1：触发所述原生视图控件确定在屏幕上的显示位置，以及，向服务器发送动态页面内容的请求。

在本实施方式中，触发原生View控件确定动态页面内容在屏幕上的显示位置，即原生View控件所处的屏幕位置，用于展示向服务器请求的动态页面内容。在本实施方式中，因为动态页面内容是不固定的内容，所以步骤B1确定的显示位置的大小也有可能发生变化，即原生视图控件的大小会发生变化，相应的，用屏幕坐标也会发生变化。例如，在确定了原生视图控件上方的屏幕坐标之后，如果动态页面内容发生变化，则原生视图控件的大小随之发生变化，相应的，原生视图控件下方的屏幕坐标也会随之变化。反之亦然，在确定了原生视图控件下方的屏幕坐标之后，如果动态页面内容发生变化，则原生视图控件的大小随之发生变化，相应的，原生视图控件上方的屏幕坐标也会随之变化。因此，显示位置的大小是可变的。

此外，因为动态页面内容是不固定的内容，所以可以触发原生视图控件向服务器发送动态页面内容的请求来下载动态页面内容。例如，商品详情轮播图以及商品价格等，可能会随着时间的推移而有所变更，因此，在原生视图控件加载动态页面内容的时候，可以实时向服务器发送动态页面内容的请求，该请求中可以包括商品的唯一标识，以便服务器将该商品对应的详情轮播图以及价格等信息返回。

步骤B2：响应于所述服务器返回所述动态页面内容，触发所述原生视图控件在显示位置上绘制所述动态页面内容。

在服务器将动态页面内容例如商品详情轮播图等返回至客户端后，可以继续触发原生视图控件在显示位置上绘制动态页面内容。例如，将实时需要展示的商品详情轮播图以及价格等绘制在原生视图控件上。

步骤102：响应于所述服务器返回所述页面的文档，从所述文档中解析得到所述页面的全部内容。

在本步骤中，服务器可以是包括有页面的文档的计算机***等的统称，浏览器等用户使用的浏览网页的客户端将下载页面的文档的请求发送至服务器之后，例如，服务器将该页面的文档发送至客户端，由浏览器等客户端对文档进行解析，从而得到该页面的全部内容。

步骤103：将所述页面的内容进行展示。

在本步骤中，通过解析文档得到的页面的内容，在浏览器上的web页面上进行展示。如果页面的全部内容能够在显示屏幕上一次显示完毕，则可以直接将页面的全部内容进行展示，反之，如果页面的全部内容能够在显示屏幕上不能一次显示完毕，则可以先展示第一屏的页面内容，待用户滚动页面时再根据滚动后的屏幕显示位置来展示页面的其他内容。

在实际应用中，步骤101中触发页面上添加的原生视图控件渲染预设页面内容会更快，而通过解析文档得到页面的全部内容则会比原生视图控件渲染预设页面内容更慢，因此，在用户等候web页面展示页面内容的过程中，因为在web页面上方的原生视图控件上渲染的预设页面内容就会提前展示给用户，所以用户可以先看到原生视图控件上的内容，继而再解析文档并在web页面上展示页面的全部内容之后，用户就可以看到未在原生视图控件上展示的那部分页面的内容。

在本实施例中，原生视图控件也就可以在没有需求的时候删除，则在步骤103之后，还可以包括：

步骤104：响应于接收到所述页面的全部内容加载完毕的通知事件，在页面上删除所述原生视图控件。

例如，如果web页面上的全部内容都已经加载完毕，则浏览器等客户端监听页面上全部内容是否加载完毕，如果监听到页面的全部内容加载完毕，浏览器等客户端可以将该web页面上添加的原生视图控件进行删除。或者，也可以预先设置为在用户滚动页面导致原生视图控件滚动出用户的可见区域的时候，或者在页面上触发了用户操作，例如点击某个页面元素，触发了滑动操作或者触摸操作，等等，则响应于这些操作或者事件等，在页面上删除预先添加的原生视图控件。

此外，预先添加的原生视图控件还可以随着用户对页面的内容滚动的操作，而相应地滚动；或者，所述原生视图控件在屏幕上的位置保持不变。如果原生视图控件随着页面的内容滚动而滚动，则在步骤103之后，还可以响应于用户触发页面的滚动操作，触发原生视图控件与所述页面的滚动保持一致。例如，用户触发了页面自上而下向屏幕下方滚动，则原生视图控件也将随着相同的方向下屏幕下方滚动，直至随着页面的滚动该原生视图控件滚动出用户的可见区域。在具体实现时，可以将原生视图控件嵌入到页面中，从而实现该原生视图控件可以随着页面滚动而适应性的滚动，对用户来说，该原生视图控件与web页面之间是相对静止的。

如果原生视图控件在屏幕上的显示位置保持不变，在实际应用中，可以单独为web页面添加一个原生视图控件用来提前绘制web页面的标题，则该原生视图控件的位置可以参考屏幕的坐标进行设置，以便该原生视图控件在用户看来是相对屏幕不变的。当然，在web页面上添加的原生视图控件的位置或者个数等都可以由本领域技术人员自主设置，本申请对此不作限定。

此外，在实际应用中，对于在原生视图控件上存在的控件或者按钮等，如果产生了用户操作，例如，点击、触摸或者滑动等用户操作，则该用户操作可以透传至位于原生视图控件下方的页面上相同位置的控件或者按钮，从而使得该用户操作可以被原生视图控件下方的web页面等进行响应。

可见，在本申请实施例中，在web上可以预先添加原生视图控件，在用户请求页面的内容之后，触发原生视图控件先渲染预设页面内容，同时向服务器请求下载页面的文档，因为下载页面的文档以及从文档中解析得到页面的全部内容需要一定的时间，而原生视图控件渲染的预设页面内容就能提前被用户看到，从而加速页面渲染的过程，并缩短用户看到页面内容的时间，提升用户浏览网页的体验。并且原生视图控件可以设置一个或多个，其上渲染的预设页面内容可以是静态页面内容，也可以是实时请求的动态页面内容，从而使得提前展示给用户的预设页面内容更贴合用户的需求。

对于前述的方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。

与上述本申请一种加速页面渲染的方法实施例所提供的方法相对应，参见图4，本申请还提供了一种加速页面渲染的装置实施例，在本实施例中，该装置可以包括：

触发模块401，用于响应于页面请求，触发所述页面上添加的原生视图控件渲染预设页面内容。

下载模块402，用于向服务器请求下载所述页面的文档。

解析模块403，用于响应于所述服务器返回所述页面的文档，从所述文档中解析得到所述页面的全部内容。

展示模块404，用于将所述页面的内容进行展示。

其中，所述预设页面内容为静态页面内容，所述触发模块可以包括：

第一触发子模块，用于触发所述原生视图控件确定在屏幕上的显示位置；以及，第二触发子模块，用于触发所述原生视图控件在所述显示位置上绘制所述静态页面内容。

其中，所述预设页面内容为动态页面内容，所述触发模块可以包括：

第三触发子模块，用于触发所述原生视图控件确定在屏幕上的显示位置；发送子模块，用于向服务器发送动态页面内容的请求；以及，第四触发子模块，用于响应于所述服务器返回所述动态页面内容，触发所述原生视图控件在所述显示位置上绘制所述动态页面内容。

其中，该装置还可以包括：

删除模块，用于响应于接收到所述页面的全部内容加载完毕的通知事件，或者，响应于在所述页面上触发的用户操作，在页面上删除所述原生视图控件；其中，所述用户操作包括：点击、滑动、触摸和/或滚动操作。

其中，该装置还可以包括：

响应于用户触发所述页面的内容滚动的操作，触发所述原生视图控件随着所述内容滚动而滚动，或者，所述原生视图控件在屏幕上的位置保持不变。

在本实施例中，在web上可以预先添加原生视图控件，在用户请求页面的内容之后，触发原生视图控件先渲染预设页面内容，同时向服务器请求下载页面的文档，因为下载页面的文档以及从文档中解析得到页面的全部内容需要一定的时间，而原生视图控件渲染的预设页面内容就能提前被用户看到，从而加速页面渲染的过程，并缩短用户看到页面内容的时间，提升用户浏览网页的体验。并且原生视图控件可以设置一个或多个，其上渲染的预设页面内容可以是静态页面内容，也可以是实时请求的动态页面内容，从而使得提前展示给用户的预设页面内容更贴合用户的需求。

一种计算机可读介质，其上存储有指令，当由一个或多个处理器执行时，使得装置执行如前所述的加速页面渲染的方法，该加速页面渲染的方法包括：响应于页面请求，触发所述页面上添加的原生视图控件渲染预设页面内容，以及，向服务器请求下载所述页面的文档；响应于所述服务器返回所述页面的文档，从所述文档中解析得到所述页面的全部内容；将所述页面的内容进行展示。

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

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上对本申请所提供的加速页面渲染的方法及装置进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (12)

1.一种加速页面渲染的方法，其特征在于，该方法包括：

响应于页面请求，触发所述页面上添加的原生视图控件渲染预设页面内容，以及，向服务器请求下载所述页面的文档；

响应于所述服务器返回所述页面的文档，从所述文档中解析得到所述页面的全部内容；

将所述页面的内容进行展示。

2.根据权利要求1所述的方法，其特征在于，所述预设页面内容为静态页面内容，所述触发所述页面上添加的原生视图控件渲染预设页面内容，包括：

触发所述原生视图控件确定在屏幕上的显示位置；

触发所述原生视图控件在所述显示位置上绘制所述静态页面内容。

3.根据权利要求1所述的方法，其特征在于，所述预设页面内容为动态页面内容，所述触发所述页面上添加的原生视图控件渲染预设页面内容，包括：

触发所述原生视图控件确定在屏幕上的显示位置，以及，向服务器发送动态页面内容的请求；

响应于所述服务器返回所述动态页面内容，触发所述原生视图控件在所述显示位置上绘制所述动态页面内容。

4.根据权利要求1所述的方法，其特征在于，还包括：

响应于接收到所述页面的内容加载完毕的通知事件，或者，响应于在所述页面上触发的用户操作，在页面上删除所述原生视图控件；其中，所述用户操作包括：点击、滑动、触摸和/或滚动操作。

5.根据权利要求1所述的方法，其特征在于，还包括：

响应于用户触发所述页面的内容滚动的操作，触发所述原生视图控件随着所述内容滚动而滚动，或者，所述原生视图控件在屏幕上的位置保持不变。

6.根据权利要求1所述的方法，其特征在于，同一个页面上的原生视图控件的个数为一个或多个。

7.一种加速页面渲染的装置，其特征在于，包括：

触发模块，用于响应于页面请求，触发所述页面上添加的原生视图控件渲染预设页面内容；

下载模块，用于向服务器请求下载所述页面的文档；

解析模块，用于响应于所述服务器返回所述页面的文档，从所述文档中解析得到所述页面的全部内容；

展示模块，用于将所述页面的内容进行展示。

8.根据权利要求7所述的装置，其特征在于，所述预设页面内容为静态页面内容，所述触发模块包括：

第一触发子模块，用于触发所述原生视图控件确定在屏幕上的显示位置；

第二触发子模块，用于触发所述原生视图控件在所述显示位置上绘制所述静态页面内容。

9.根据权利要求7所述的装置，其特征在于，所述预设页面内容为动态页面内容，所述触发模块包括：

第三触发子模块，用于触发所述原生视图控件确定在屏幕上的显示位置；

发送子模块，用于向服务器发送动态页面内容的请求；

第四触发子模块，用于响应于所述服务器返回所述动态页面内容，触发所述原生视图控件在所述显示位置上绘制所述动态页面内容。

10.根据权利要求7所述的装置，其特征在于，还包括：

删除模块，用于响应于接收到所述页面的全部内容加载完毕的通知事件，或者，响应于在所述页面上触发的用户操作，在页面上删除所述原生视图控件；其中，所述用户操作包括：点击、滑动、触摸和/或滚动操作。

11.根据权利要求7所述的装置，其特征在于，还包括：

响应于用户触发所述页面的内容滚动的操作，触发所述原生视图控件随着所述内容滚动而滚动，或者，所述原生视图控件在屏幕上的位置保持不变。

12.一种计算机可读介质，其上存储有指令，当由一个或多个处理器执行时，使得装置执行如权利要求1～6任意一项所述的加速页面渲染的方法。