CN103399866A - 一种网络页面的渲染方法、装置及设备 - Google Patents

Abstract

本发明实施例提供了一种网络页面的渲染方法、装置及设备，其中，所述方法包括：确定当前加载网络页面的渲染数据的数据量；所述渲染数据包括至少一个渲染数据子项；依据所述渲染数据的数据量，在网络页面中创建相应高度的画布空间；在所述画布空间中渲染出首屏区域对应的渲染数据子项；当定位到所述首屏区域以外的指定区域时，在所述画布空间中渲染出所述指定区域对应的渲染数据子项。本发明可以避免在渲染数据量较大时添加大量的DOM节点到页面中的操作，从而避免频繁的引发浏览器回流（reflow）的问题，不会导致浏览器回流造成的渲染速度变慢。

Description

一种网络页面的渲染方法、装置及设备

技术领域

本发明涉及页面渲染的技术领域，特别是涉及一种网络页面的渲染方法，一种网络页面的渲染装置和一种设备。

背景技术

随着互联网行业技术的发展，在浏览器（如位于移动设备端和PC端等的浏览器）上显示的数据越来越多，丰富的媒体信息和较低的浏览器脚本执行速度与渲染效率形成了鲜明的对比，如何快速渲染和显示大量的数据成为一个亟待解决的技术问题。

浏览器最重要的部分是“Rendering Engine”，可大概译为“解释引擎”，一般习惯将之称为“浏览器内核”。浏览器内核负责对网页语法的解释（如HTML、JavaScript）并渲染（显示或展现）网页。所以，通常所谓的浏览器内核也就是对页面进行下载、解析、执行、渲染的引擎，该引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

浏览器内核在渲染网页时从服务器获取的渲染数据往往包含文字和图片等，数据量大小的界定很难量化，在本发明实施例中，一次数据渲染产生的超文本标记语言文档对象模型（HTML DOM）节点数超过10000个就可以认为是大数据量的渲染数据。

目前，当浏览器内核进行大数据量的网页渲染时，常用的处理方法为：在接收到用户特定操作的情况下，将大量数据分批次加载到浏览器，然后分批次进行渲染，例如，在接收用户在浏览器中打开网页并拖拽浏览器的滚动条至最底端时，触发浏览器内核进行数据的分批次加载和渲染。这种处理方法可以将web页面的渲染计算量分配到不同的时间段，但会使得单次web页面的渲染时间缩短。

这种处理方法最大的问题在于，用户无法直接使用浏览器的滚动条，即用户必须等到浏览器内核分批次渲染完成后，才能获得数据队列（即所需渲染数据形成的队列，如联系人列表）中靠后的数据，因而对于没有时间属性的数据队列来说非常不适宜，使用户无法直接定位到其想要的页面数据；同时，在进行大数据量的网页渲染时，由于需要添加大量的文档对象模型（DOM）节点到HTML页面中，会频繁地引发浏览器回流操作（回流操作指的是当页面DOM节点的数量或已经存在的DOM节点大小发生变化时，浏览器内核需要对这些节点重新应用定义在样式表中的样式），导致浏览器渲染速度变慢，降低页面的可用性。

发明内容

本发明实施例提供一种网络页面的渲染方法，以解决浏览器数据渲染速度慢，效率低的问题。

相应的，本发明实施例还提供了一种网络页面的渲染装置以及一种设备，用以保证上述方法在实际中的应用。

为了解决上述技术问题，本发明实施例公开了一种网络页面的渲染方法，包括：

确定当前加载网络页面的渲染数据的数据量；所述渲染数据包括至少一个渲染数据子项；

依据所述渲染数据的数据量，在网络页面中创建相应高度的画布空间；

在所述画布空间中渲染出首屏区域对应的渲染数据子项；

当定位到所述首屏区域以外的指定区域时，在所述画布空间中渲染出所述指定区域对应的渲染数据子项。

较佳地，在所述确定当前加载web页面的渲染数据的数据量的步骤之前，还包括：

获取当前加载网络页面的渲染数据。

较佳地，各个渲染数据子项具有一致的高度，所述确定当前加载网络页面的渲染数据的数据量的步骤包括：

获取所述渲染数据中渲染数据子项的数量，以及，单个渲染数据子项的高度；

将所述渲染数据子项的数量乘以所述单个渲染数据子项的高度，获得所述当前加载网络页面的渲染数据的数据量；

或者，

获取所述渲染数据中渲染数据子项的数量，以及，各个渲染数据子项的高度；

按照所述渲染数据子项的数量累加所述各个渲染数据子项的高度，获得所述当前加载网络页面的渲染数据的数据量。

较佳地，所述在画布空间中渲染出首屏区域对应的渲染数据子项的步骤包括：

获取用于显示所述网络页面的屏幕高度；

根据所述画布空间的高度确定所述画布空间的顶部位置；

根据所述画布空间的顶部位置和所述屏幕高度，在画布空间中定位首屏区域；

依据所述首屏区域的高度和单个渲染数据子项的高度，确定所述首屏区域对应的渲染数据子项；

在所述画布空间的首屏区域中，渲染出所述首屏区域对应的渲染数据子项。

较佳地，所述当定位到所述首屏区域以外的指定区域时，在所述画布空间中渲染出所述指定区域对应的渲染数据子项的步骤包括：

获取用于显示所述网络页面的屏幕高度；

根据所述画布空间的高度确定所述画布空间的顶部位置；

当定位到所述首屏区域以外的指定区域时，确定所述指定区域相对于所述画布空间的顶部位置在垂直方向上的偏移量；

根据所述偏移量和屏幕高度，在画布空间中定位所述指定区域；

依据所述指定区域的高度和单个渲染数据子项的高度，确定所述指定区域对应的渲染数据子项；

在所述画布空间的指定区域中，渲染出所述指定区域对应的渲染数据子项。

较佳地，所述当定位到所述首屏区域以外的指定区域时，在所述画布空间中渲染出所述指定区域对应的渲染数据子项的步骤包括：

当定位到所述首屏区域以外的指定区域时，确定所述指定区域相对于所述首屏区域在垂直方向上的偏移量；

根据所述偏移量和屏幕高度，在画布空间中定位所述指定区域；

依据所述指定区域的高度和渲染数据子项的高度，确定所述指定区域对应的渲染数据子项；

在所述画布空间的指定区域中，渲染出所述指定区域对应的渲染数据子项。

较佳地，所述在画布空间的首屏区域中，渲染出所述首屏区域对应的渲染数据子项的子步骤为：

采用预置的绘图接口从所述画布空间的顶部位置开始，自上而下地在所述首屏区域中渲染出所述首屏区域对应的渲染数据子项；其中，所述预置的绘图接口包括用于绘制背景图，边框和前景图的图像绘制接口drawImage，以及，用于绘制文本的文本填涂接口fillText。

较佳地，所述在画布空间的指定区域中，渲染出所述指定区域对应的渲染数据子项的子步骤为：

采用预置的绘图接口从所述画布空间的指定区域的顶部位置开始，自上而下地在所述指定区域中渲染出指定区域对应的渲染数据子项；其中，所述预置的绘图接口包括用于绘制背景图，边框和前景图的图像绘制接口drawImage，以及，用于绘制文本的文本填涂接口fillText。

本发明实施例还公开了一种网络页面的渲染装置，包括：

数据量计算模块，用于确定当前加载网络页面的渲染数据的数据量；所述渲染数据包括至少一个渲染数据子项；

Canvas创建模块，用于依据所述渲染数据的数据量，在网络页面中创建相应高度的画布空间；

首屏区域渲染模块，用于在所述画布空间中渲染出首屏区域对应的渲染数据子项；

指定区域渲染模块，用于当定位到所述首屏区域以外的指定区域时，在所述画布空间中渲染出所述指定区域对应的渲染数据子项。

较佳地，还包括：

渲染数据获取模块，用于获取当前加载网络页面的渲染数据。

较佳地，所述各个渲染数据子项具有一致的高度，所述数据量计算模块包括：

渲染数据子项数量获取子模块，用于获取所述渲染数据中渲染数据子项的数量；

第一渲染数据子项高度获取子模块，用于获取单个渲染数据子项的高度；

第一数据量计算子模块，用于将所述渲染数据子项的数量乘以所述单个渲染数据子项的高度，获得所述当前加载网络页面的渲染数据的数据量；

或者，

渲染数据子项数量获取子模块，用于获取所述渲染数据中渲染数据子项的数量；

第二渲染数据子项高度获取子模块，用于获取各个渲染数据子项的高度；

第二数据量计算子模块，用于按照所述渲染数据子项的数量累加所述各个渲染数据子项的高度，获得所述当前加载网络页面的渲染数据的数据量。

较佳地，所述首屏区域渲染模块包括：

屏幕高度获取子模块，用于获取用于显示所述网络页面的屏幕高度；

画布顶部确定子模块，用于根据所述画布空间的高度确定所述画布空间的顶部位置；

首屏区域定位子模块，用于根据所述画布空间的顶部位置和所述屏幕高度，在画布空间中定位首屏区域；

首屏数据查找子模块，用于依据所述首屏区域的高度和单个渲染数据子项的高度，确定所述首屏区域对应的渲染数据子项；

第一渲染子模块，用于在所述画布空间的首屏区域中，渲染出所述首屏区域对应的渲染数据子项。

较佳地，所述指定区域渲染模块包括：

屏幕高度获取子模块，用于获取用于显示所述网络页面的屏幕高度；

画布顶部确定子模块，用于根据所述画布空间的高度确定所述画布空间的顶部位置；

第一偏移量确定子模块，用于在定位到所述首屏区域以外的指定区域时，确定所述指定区域相对于所述画布空间的顶部位置在垂直方向上的偏移量；

第一指定区域定位子模块，用于根据所述偏移量和屏幕高度，在画布空间中定位所述指定区域；

第一指定数据查找子模块，用于依据所述指定区域的高度和单个渲染数据子项的高度，确定所述指定区域对应的渲染数据子项；

第二渲染子模块，用于在所述画布空间的指定区域中，渲染出所述指定区域对应的渲染数据子项。

较佳地，所述指定区域渲染模块包括：

第二偏移量确定子模块，用于在定位到所述首屏区域以外的指定区域时，确定所述指定区域相对于所述首屏区域在垂直方向上的偏移量；

第二指定区域定位子模块，用于根据所述偏移量和屏幕高度，在画布空间中定位所述指定区域；

第二指定数据查找子模块，用于依据所述指定区域的高度和渲染数据子项的高度，确定所述指定区域对应的渲染数据子项；

第二渲染子模块，用于在所述画布空间的指定区域中，渲染出所述指定区域对应的渲染数据子项。

本发明实施例还公开了一种设备，包括：

一个或多个处理器；

存储器；和

一个或多个模块，所述一个或多个模块存储于所述存储器中并被配置成由所述一个或多个处理器执行，其中，所述一个或多个模块具有如下功能：

确定当前加载网络页面的渲染数据的数据量；所述渲染数据包括至少一个渲染数据子项；

依据所述渲染数据的数据量，在网络页面中创建相应高度的画布空间；

在所述画布空间中渲染出首屏区域对应的渲染数据子项；

当定位到所述首屏区域以外的指定区域时，在所述画布空间中渲染出所述指定区域对应的渲染数据子项

与背景技术相比，本发明实施例包括以下优点：

第一，本发明实施例采用了HTML5Canvas技术，由于在HTML5中的Canvas只是一块画布，画布中的内容并没有相应的文档对象模型（DOM）节点，渲染web页面时只会在页面中产生一个创建Canvas的DOM节点，因此可以避免在渲染数据量较大时添加大量的DOM节点到页面中的操作，从而避免频繁的引发浏览器回流（reflow）的问题，不会导致浏览器回流造成的渲染速度变慢；

第二，在针对某一web站点或web页面渲染时，本发明实施例将用户打开某一web站点或web页面后呈现的首屏页面优先渲染，符合用户打开web站点或web页面的直观感知，提高了web站点或web页面的展示速度，从而减少了用户打开web站点或web页面的等待时间；

第三，当定位到web站点或web页面中任何位置（特指相对于Canvas中所述首屏区域以外的指定区域）时，通过相应位置的偏移量即可快速定位该定位的指定区域，在提取到该指定区域对应的渲染数据子项后，即可直接在该指定区域采用该渲染数据子项进行渲染；应用本发明实施例，无需在对该指定区域渲染之前，之后或同步对其它区域（除所述指定区域之外的其它区域）进行渲染；由于仅需要针对指定区域进行渲染，可以在保证web站点或web页面的渲染流畅程度的基础上，加快web站点或web页面的渲染速度，大大提高了渲染效率，提高了页面响应时间，从而减少了用户等待时间，实现快速的页面定位；

第四，本发明实施例在web页面的渲染数据准备完成后，通过数据项的高度建立渲染页面所用的Canvas，将Canvas高度设置为所有数据渲染完成时网页的真实高度，方便用户使用页面的滚动条拖拽、滚动或采用任一种定位方式定位到页面中任何位置，并由Canvas在垂直方向上与用户的交互确定用户的可视区域（指定区域），并采用Canvas预置的绘图接口渲染可视区域，可视区域外的数据不渲染，能进一步加快web站点或web页面的渲染速度，大大提高了渲染效率，提高了页面响应时间，从而减少了用户等待时间，实现快速的页面定位。

附图说明

图1示出了一种网络页面的渲染方法实施例1的步骤流程图；

图2示出了一种网络页面的渲染方法实施例2的步骤流程图；

图3示出了一种网络页面的渲染装置实施例1的结构框图；

图4示出了一种网络页面的渲染装置实施例2的结构框图；

图5示出了一种终端设备结构示意图。

具体实施方式

为使本发明实施例的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明实施例作进一步详细的说明。

本发明实施例的一种核心构思在于：基于HTML5Canvas技术，加载当前用户请求的web站点或web页面的所有渲染数据，再按照这些渲染数据的数据量创建相应高度的Canvas（画布空间），然后在该Canvas中进行首屏页面的渲染；当定位到该首屏页面以外的其它指定区域时，在Canvas中直接进行该指定区域的渲染。

参照图1，示出了本发明实施例一种网络页面的渲染方法实施例1的步骤流程图，可以包括以下步骤：

步骤101，确定当前加载网络页面的渲染数据的数据量；

其中，当前加载网络页面的渲染数据可以包括至少一个渲染数据子项，在实际中，当前加载网络页面的渲染数据通常包括多个渲染数据子项。

在本发明实施例中，当前加载网络页面可以包括依据用户请求或其它操作触发加载的web站点或web页面。

作为本发明实施例具体应用的一种示例，渲染数据可以为采用JSON（Javascript Object Notation）格式的列表数据，由于JSON是基于JavaScript语言的轻量级数据的交换格式，一个JSON数据项即为一个渲染数据子项，在实际中，一个JSON数据项都有一个对应的高度，具体可以为由web站点或web网页的显示要求所决定的高度，在本发明实施例中，所有渲染数据子项具有相同的高度。在这种情况下，在本发明的一种优选实施例中，步骤101可以包括如下子步骤：

子步骤S11，获取该渲染数据中渲染数据子项的数量，以及，单个渲染数据子项的高度；

子步骤S12，将该渲染数据子项的数量乘以该单个渲染数据子项的高度，获得该当前加载网络页面的渲染数据的数据量。

例如，假设每一个渲染数据子项的高度都是20像素，如果当前加载网络页面的渲染数据为1000条渲染数据子项，那么，当前加载网络页面的渲染数据的数据量即为渲染数据子项的高度与数目的乘积：20*1000为20000像素。

或者，在本发明的另一种优选实施例中，步骤101可以包括如下子步骤：

子步骤S13，获取该渲染数据中渲染数据子项的数量，以及，各个渲染数据子项的高度；

子步骤S14，按照该渲染数据子项的数量累加该各个渲染数据子项的高度，获得该当前加载网络页面的渲染数据的数据量。

可以理解，本实施例是上一实施例的计算方式变形而已。由于本发明实施例限定在各个渲染数据子项的高度一致的情形之下，故此二种处理方式可由本领域技术人员任选其一采用即可。

当然，上述确定当前加载网络页面的渲染数据的数据量的方法仅仅用作示例，本领域技术人员采用任一种方式确定均是可行的，本发明对此无需加以限制。

步骤102，依据该渲染数据的数据量，在网络页面中创建相应高度的画布空间；

该画布空间即指HTML5中的Canvas。应用本发明实施例，由于在HTML5中的Canvas只是一块画布，画布中的内容并没有相应的DOM节点，渲染web页面时只会在页面中产生一个创建Canvas的DOM节点，因此可以避免在渲染数据量较大时添加大量的DOM节点到页面中的操作，从而避免频繁的引发浏览器回流（reflow）的问题，不会导致浏览器回流造成的渲染速度变慢。

真实的网页是构建该网页的所有渲染数据被渲染完成后的结果，为真实表达web站点或web页面，在本发明实施例中，通过当前加载网络页面的渲染数据的数据量来设置Canvas的高度，即若当前加载的是某个web站点，则基于该web站点的所有渲染数据的数据量来设置Canvas的高度；若当前加载的是某个web页面，则基于该web站点的所有渲染数据的数据量来设置Canvas的高度。例如，假设某个web站点或web页面的渲染数据的数据量为20000像素，就可以采用脚本语言（如JavaScript语言）在web页面中创建一个高度为20000像素的Canvas，而Canvas的宽度则可以由web站点或web网页的产品设计需求所决定。

创建了Canvas之后，就可以在web页面上创建相应长度的垂直方向滚动条以及水平方向滚动条，方便用户通过滚动鼠标滚轮或拖拽滚动条的方式，快速定位到web站点或web网页上的任意位置。

步骤103，在该画布空间中渲染出首屏区域对应的渲染数据子项；

在具体应用中，用户在浏览器端发起web站点或web页面的访问请求后，在该用户没有进行其它额外操作的情况下，浏览器可以迅速加载该web站点或web网页的渲染数据，并按默认的顺序，即自上而下、从左到右的顺序进行web页面渲染，进而展现web站点或web页面的内容，其所展现的第一屏的页面即对应Canvas中的首屏区域。通过在用户请求某一web站点或web网页时优先渲染首屏区域，符合用户打开web站点或web页面的直观感知，提高了web站点或web页面的展示速度，从而减少了用户打开web站点或web页面的等待时间。

在本发明的一种优选实施例中，步骤103可以包括以下子步骤：

子步骤S131，获取用于显示该网络页面的屏幕高度；

在具体实现中，该屏幕高度可以从屏幕分辨率中提取获得。如屏幕分辨率为1024*800，即屏幕宽度为1024像素，屏幕高度为800像素。

子步骤S132，根据该画布空间的高度确定该画布空间的顶部位置；

子步骤S133，根据该画布空间的顶部位置和该屏幕高度，在画布空间中定位首屏区域；

子步骤S134，依据该首屏区域的高度和单个渲染数据子项的高度，确定该首屏区域对应的渲染数据子项；

子步骤S135，在该画布空间的首屏区域中，渲染出该首屏区域对应的渲染数据子项。

例如，通过浏览器脚本可以获得用户当前设备的屏幕分辨率为1024*800，即屏幕宽度为1024像素，屏幕高度为800像素；如果服务器返回了1000项作为渲染数据的列表数据，单个渲染数据子项的高度为20像素，则Canvas的高度为20*1000=20000像素；依据该Canvas的高度可以在数据中直接定位到该Canvas的顶部位置，首屏区域就是从Canvas的顶部位置开始向下延伸的第1像素至第800像素的区域。因单个渲染数据子项的高度为20像素，故首屏区域对应的渲染数据子项为800/20=40项，即首屏区域对应的渲染数据子项为第1项至第40项渲染数据子项，进而可以在Canvas第1像素至第800像素的区域渲染第1项至第40项渲染数据子项。

当然，上述在Canvas中渲染出首屏区域对应的渲染数据子项的方法仅仅用作示例，本领域技术人员采用任一种方式均是可行的，本发明实施例对此无需加以限制。

需要说明的是，采用HTML5Canvas技术的浏览器，对于web页面的渲染方式不同于传统的DOM节点创建后添加到HTML页面中的方法，而是使用Canvas提供的绘图接口将列表样式和数据绘制在Canvas上，其中，列表样式和数据都要先于Canvas的创建。

在实现中，子步骤S135可以为采用预置的绘图接口从该画布空间的顶部位置开始，自上而下地在该首屏区域中渲染出该首屏区域对应的渲染数据子项。其中，该预置的绘图接口可以包括用于绘制背景图，边框和前景图的图像绘制接口drawImage，以及，用于绘制文本的文本填涂接口fillText。

在实际中，Canvas提供的绘图接口有图像绘制接口drawImage、文字填涂接口fillText等。数据渲染时，可以首先使用Canvas的图像绘制接口drawImage绘制背景图，在Canvas中，绘制图像数据是按像素进行的，也就是按从左往右、从上至下的顺序逐像素绘制；然后渲染数据的边框（列表项分割线）和图片部分，例如联系人列表中的联系人头像；最后使用Canvas的文本填涂接口fillText渲染数据的文字部分。

步骤104，当定位到该首屏区域以外的指定区域时，在该画布空间中渲染出该指定区域对应的渲染数据子项。

当用户利用某浏览器上网，拖拽或滚动浏览器的滚动条至页面的任一位置或采用任一种定位方式定位至页面的任一位置时，可以根据该被选定的位置映射到Canvas中的对应区域（首屏区域以外的指定区域）。在实际中，定位到的web站点或web网页的页面中的任意一个位置都可以映射到Canvas中的对应区域，然后读取指定区域的渲染数据子项，就可以在该Canvas的对应区域进行渲染。

在本发明的一种优选实施例中，步骤104可以包括以下子步骤：

子步骤S141，获取用于显示该网络页面的屏幕高度；

子步骤S142，根据该画布空间的高度确定该画布空间的顶部位置；

子步骤S143，当定位到该首屏区域以外的指定区域时，确定该指定区域相对于该画布空间的顶部位置在垂直方向上的偏移量；

子步骤S144，根据该偏移量和屏幕高度，在画布空间中定位该指定区域；

子步骤S145，依据该指定区域的高度和单个渲染数据子项的高度，确定该指定区域对应的渲染数据子项；

子步骤S146，在该画布空间的指定区域中，渲染出该指定区域对应的渲染数据子项。

例如，假设用户当前设备的屏幕高度为800像素，如果服务器返回了1000项作为渲染数据的列表数据，单个渲染数据子项的高度为20像素，则Canvas的高度为20*1000=20000像素；依据该Canvas的高度可以在数据中直接定位到该Canvas的顶部位置，当定位到首屏区域以外的指定区域时，即在垂直方向上产生了一个偏移量Y，将Canvas的顶部位置作为偏移为0的原点位置，就可以通过该偏移量Y确定Canvas中该指定区域的位置，例如假设指定区域是Canvas中第801像素至第1600像素的区域。因单个渲染数据子项的高度为20像素，故指定区域对应的渲染数据子项为800/20=40项，即指定区域对应的渲染数据子项为第41项至第80项渲染数据子项，进而可以在Canvas第801像素至第1600像素的区域渲染第41项至第80项渲染数据子项。

在本发明的另一种优选实施例中，步骤104可以包括以下子步骤：

子步骤S241，当定位到该首屏区域以外的指定区域时，确定该指定区域相对于该首屏区域在垂直方向上的偏移量；

子步骤S242，根据该偏移量和屏幕高度，在画布空间中定位该指定区域；

子步骤S243，依据该指定区域的高度和渲染数据子项的高度，确定该指定区域对应的渲染数据子项；

子步骤S244，在该画布空间的指定区域中，渲染出该指定区域对应的渲染数据子项。

由于首屏区域对应于Canvas的顶部位置至一屏幕高度的区域，而数据渲染往往是自上而下进行的，因此在本实施例中也可以采用首屏区域作为Canvas在垂直方向上的参考位置。

当定位到首屏页面以外的区域时，即在垂直方向上产生了一个偏移量Y，将首屏区域作为偏移为0的原点位置，并从屏幕分辨率中读取屏幕的高度H，由于首屏区域、偏移量Y及屏幕高度H都有对应于Canvas的量，即可采用偏移量Y表示指定区域与首屏区域在Canvas中的相对位置，并用屏幕高度H表示指定区域在垂直方向上的覆盖范围，进而获取该指定区域对应的渲染数据子项，即可在指定区域中完成渲染。

在实际中，也可以将Canvas的其它位置点作为偏移量的原点，例如以Canvas的中部位置点或底部位置点等，本发明实施例在此不作限制。偏移量可以使用浏览器内置方法获得，不同的浏览器获取该偏移量的方式可以不相同。本领域技术人员可以根据实际的情况采用任意一种方式获取偏移量，本发明实施例在此不作限制。此外，本领域技术人员可以采用任意一种具体渲染的方式，本发明实施例在此亦不作限制。

在具体实现中，子步骤S146或子步骤S244可以为，采用预置的绘图接口从该画布空间的指定区域的顶部位置开始，自上而下地在该指定区域中渲染出指定区域对应的渲染数据子项；其中，该预置的绘图接口包括用于绘制背景图，边框和前景图的图像绘制接口drawImage，以及，用于绘制文本的文本填涂接口fillText。

在实际中，Canvas提供的绘图接口有图像绘制接口drawImage、文字填涂接口fillText等。数据渲染时，首先使用Canvas的图像绘制接口drawImage绘制背景图，在Canvas中，绘制图像数据是按像素进行的，也就是按从左往右、从上至下的顺序逐像素绘制；然后渲染数据的边框（列表项分割线）和图片部分，例如联系人列表中的联系人头像；最后使用Canvas的文本填涂接口fillText渲染数据的文字部分。

其它区域与首屏区域可以采用相同的渲染方式，也可以采用不同的渲染方式，本发明实施例对此不作限制。

本发明实施例具体如下有益效果：

第一，本发明实施例采用了HTML5Canvas技术，由于在HTML5中的Canvas只是一块画布，画布中的内容并没有相应的文档对象模型（DOM）节点，渲染web页面时只会在页面中产生一个创建Canvas的DOM节点，因此可以避免在渲染数据量较大时添加大量的DOM节点到页面中的操作，从而避免频繁的引发浏览器回流（reflow）的问题，不会导致浏览器回流造成的渲染速度变慢；

第二，在针对某一web站点或web页面渲染时，本发明实施例将用户打开某一web站点或web页面后呈现的首屏页面优先渲染，符合用户打开web站点或web页面的直观感知，提高了web站点或web页面的展示速度，从而减少了用户打开web站点或web页面的等待时间；

第三，当定位到web站点或web页面中任何位置（特指相对于Canvas中该首屏区域以外的指定区域）时，通过相应位置的偏移量即可快速定位该定位的指定区域，在提取到该指定区域对应的渲染数据子项后，即可直接在该指定区域采用该渲染数据子项进行渲染；应用本发明实施例，无需在对该指定区域渲染之前，之后或同步对其它区域（除该指定区域之外的其它区域）进行渲染；由于仅需要针对指定区域进行渲染，可以在保证web站点或web页面的渲染流畅程度的基础上，加快web站点或web页面的渲染速度，大大提高了渲染效率，提高了页面响应时间，从而减少了用户等待时间，实现快速的页面定位；

第四，本发明实施例在web页面的渲染数据准备完成后，通过数据项的高度建立渲染页面所用的Canvas，将Canvas高度设置为所有数据渲染完成时网页的真实高度，方便用户使用页面的滚动条拖拽、滚动或采用任一种定位方式定位到页面中任何位置，并由Canvas在垂直方向上与用户的交互确定用户的可视区域（指定区域），并采用Canvas预置的绘图接口渲染可视区域，可视区域外的数据不渲染，能进一步加快web站点或web页面的渲染速度，大大提高了渲染效率，提高了页面响应时间，从而减少了用户等待时间，实现快速的页面定位。

参照图2，示出了本发明实施例一种网络页面的渲染方法实施例2的步骤流程图，可以包括以下步骤：

步骤201，获取当前加载web页面的渲染数据；

步骤202，确定当前加载网络页面的渲染数据的数据量；该渲染数据包括至少一个渲染数据子项；

步骤203，依据该渲染数据的数据量，在网络页面中创建相应高度的画布空间；

步骤204，在该画布空间中渲染出首屏区域对应的渲染数据子项；

步骤205，当定位到该首屏区域以外的指定区域时，在该画布空间中渲染出该指定区域对应的渲染数据子项。

在实际中，当用户利用各种浏览器访问某一web站点或web页面时，浏览器会向该web站点或web页面的服务器提交渲染数据的下载请求，服务器响应其下载请求，返回渲染该web站点或web页面所需的数据，即本发明实施例所指的渲染数据。

需要说明的是，本发明实施例中，可以一次性获取当前web页面的渲染数据，也可以分批获取当前加载web页面的渲染数据。

应用本发明实施例，无需在对该指定区域渲染之前，之后或同步对其它区域（除该指定区域之外的其它区域）进行渲染；由于仅需要针对指定区域进行渲染，可以在保证web站点或web页面的渲染流畅程度的基础上，加快web站点或web页面的渲染速度，大大提高了渲染效率，提高了页面响应时间，从而减少了用户等待时间，实现快速的页面定位，因而本发明实施例尤其适用于大数据量的web站点或web页面的页面渲染处理。

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

参照图3，示出了本发明实施例一种网络页面的渲染装置实施例1的结构框图，可以包括以下模块：

数据量计算模块301，用于确定当前加载网络页面的渲染数据的数据量；该渲染数据包括至少一个渲染数据子项；

Canvas创建模块302，用于依据该渲染数据的数据量，在网络页面中创建相应高度的画布空间；

首屏区域渲染模块303，用于在该画布空间中渲染出首屏区域对应的渲染数据子项；

指定区域渲染模块304，用于当定位到该首屏区域以外的指定区域时，在该画布空间中渲染出该指定区域对应的渲染数据子项。

在本发明的一种优选实施例中，各个渲染数据子项具有一致的高度，该数据量计算模块301可以包括如下子模块：

渲染数据子项数量获取子模块，用于获取该渲染数据中渲染数据子项的数量；

第一渲染数据子项高度获取子模块，用于获取单个渲染数据子项的高度；

第一数据量计算子模块，用于将该渲染数据子项的数量乘以该单个渲染数据子项的高度，获得该当前加载网络页面的渲染数据的数据量；

或者，在本发明的另一种优选实施例中，该数据量计算模块301可以包括如下子模块：

渲染数据子项数量获取子模块，用于获取该渲染数据中渲染数据子项的数量；

第二渲染数据子项高度获取子模块，用于获取各个渲染数据子项的高度；

第二数据量计算子模块，用于按照该渲染数据子项的数量累加该各个渲染数据子项的高度，获得该当前加载网络页面的渲染数据的数据量。

在具体实现中，该首屏区域渲染模块303可以包括如下子模块：

屏幕高度获取子模块，用于获取用于显示该网络页面的屏幕高度；

画布顶部确定子模块，用于根据该画布空间的高度确定该画布空间的顶部位置；

首屏区域定位子模块，用于根据该画布空间的顶部位置和该屏幕高度，在画布空间中定位首屏区域；

首屏数据查找子模块，用于依据该首屏区域的高度和单个渲染数据子项的高度，确定该首屏区域对应的渲染数据子项；

第一渲染子模块，用于在该画布空间的首屏区域中，渲染出该首屏区域对应的渲染数据子项。

作为本发明实施例具体应用的一种示例，该指定区域渲染模块304可以包括如下子模块：

屏幕高度获取子模块，用于获取用于显示该网络页面的屏幕高度；

画布顶部确定子模块，用于根据该画布空间的高度确定该画布空间的顶部位置；

第一偏移量确定子模块，用于在定位到该首屏区域以外的指定区域时，确定该指定区域相对于该画布空间的顶部位置在垂直方向上的偏移量；

第一指定区域定位子模块，用于根据该偏移量和屏幕高度，在画布空间中定位该指定区域；

第一指定数据查找子模块，用于依据该指定区域的高度和单个渲染数据子项的高度，确定该指定区域对应的渲染数据子项；

第二渲染子模块，用于在该画布空间的指定区域中，渲染出该指定区域对应的渲染数据子项。

作为本发明实施例具体应用的另一种示例，该指定区域渲染模块304可以包括如下子模块：

第二偏移量确定子模块，用于在定位到该首屏区域以外的指定区域时，确定该指定区域相对于该首屏区域在垂直方向上的偏移量；

第二指定区域定位子模块，用于根据该偏移量和屏幕高度，在画布空间中定位该指定区域；

第二指定数据查找子模块，用于依据该指定区域的高度和渲染数据子项的高度，确定该指定区域对应的渲染数据子项；

第二渲染子模块，用于在该画布空间的指定区域中，渲染出该指定区域对应的渲染数据子项。

参照图4，示出了本发明实施例一种网络页面的渲染装置实施例2的结构框图，可以包括以下模块：

渲染数据获取模块401，用于获取当前加载网络页面的渲染数据；

数据量计算模块402，用于确定当前加载网络页面的渲染数据的数据量；该渲染数据包括至少一个渲染数据子项；

Canvas创建模块403，用于依据该渲染数据的数据量，在网络页面中创建相应高度的画布空间；

首屏区域渲染模块404，用于在该画布空间中渲染出首屏区域对应的渲染数据子项；

指定区域渲染模块405，用于当定位到该首屏区域以外的指定区域时，在该画布空间中渲染出该指定区域对应的渲染数据子项。

对于装置实施例而言，由于其与在方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本发明实施例还提供了一种设备，该设备可以包括：

一个或多个处理器；

存储器；和

一个或多个模块，该一个或多个模块存储于该存储器中并被配置成由该一个或多个处理器执行，其中，该一个或多个模块具有如下功能：

确定当前加载网络页面的渲染数据的数据量；该渲染数据包括至少一个渲染数据子项；

依据该渲染数据的数据量，在网络页面中创建相应高度的画布空间；

在该画布空间中渲染出首屏区域对应的渲染数据子项；

当定位到该首屏区域以外的指定区域时，在该画布空间中渲染出该指定区域对应的渲染数据子项。

较佳地，在该确定当前加载web页面的渲染数据的数据量的步骤之前，还包括如下步骤：

获取当前加载网络页面的渲染数据。

较佳地，各个渲染数据子项具有一致的高度，该确定当前加载网络页面的渲染数据的数据量的步骤可以包括如下子步骤：

获取该渲染数据中渲染数据子项的数量，以及，单个渲染数据子项的高度；

将该渲染数据子项的数量乘以该单个渲染数据子项的高度，获得该当前加载网络页面的渲染数据的数据量；

或者，

获取该渲染数据中渲染数据子项的数量，以及，各个渲染数据子项的高度；

按照该渲染数据子项的数量累加该各个渲染数据子项的高度，获得该当前加载网络页面的渲染数据的数据量。

较佳地，该在画布空间中渲染出首屏区域对应的渲染数据子项的步骤可以包括如下子步骤：

获取用于显示该网络页面的屏幕高度；

根据该画布空间的高度确定该画布空间的顶部位置；

根据该画布空间的顶部位置和该屏幕高度，在画布空间中定位首屏区域；

依据该首屏区域的高度和单个渲染数据子项的高度，确定该首屏区域对应的渲染数据子项；

在该画布空间的首屏区域中，渲染出该首屏区域对应的渲染数据子项。

较佳地，该当定位到该首屏区域以外的指定区域时，在该画布空间中渲染出该指定区域对应的渲染数据子项的步骤可以包括如下子步骤：

获取用于显示该网络页面的屏幕高度；

根据该画布空间的高度确定该画布空间的顶部位置；

当定位到该首屏区域以外的指定区域时，确定该指定区域相对于该画布空间的顶部位置在垂直方向上的偏移量；

根据该偏移量和屏幕高度，在画布空间中定位该指定区域；

依据该指定区域的高度和单个渲染数据子项的高度，确定该指定区域对应的渲染数据子项；

在该画布空间的指定区域中，渲染出该指定区域对应的渲染数据子项。

较佳地，该当定位到该首屏区域以外的指定区域时，在该画布空间中渲染出该指定区域对应的渲染数据子项的步骤可以包括如下子步骤：

当定位到该首屏区域以外的指定区域时，确定该指定区域相对于该首屏区域在垂直方向上的偏移量；

根据该偏移量和屏幕高度，在画布空间中定位该指定区域；

依据该指定区域的高度和渲染数据子项的高度，确定该指定区域对应的渲染数据子项；

在该画布空间的指定区域中，渲染出该指定区域对应的渲染数据子项。

较佳地，该在画布空间的首屏区域中，渲染出该首屏区域对应的渲染数据子项的子步骤为：

采用预置的绘图接口从该画布空间的顶部位置开始，自上而下地在该首屏区域中渲染出该首屏区域对应的渲染数据子项；其中，该预置的绘图接口包括用于绘制背景图，边框和前景图的图像绘制接口drawImage，以及，用于绘制文本的文本填涂接口fillText。

较佳地，该在画布空间的指定区域中，渲染出该指定区域对应的渲染数据子项的子步骤为：

采用预置的绘图接口从该画布空间的指定区域的顶部位置开始，自上而下地在该指定区域中渲染出指定区域对应的渲染数据子项；其中，该预置的绘图接口包括用于绘制背景图，边框和前景图的图像绘制接口drawImage，以及，用于绘制文本的文本填涂接口fillText。

本实施例还提供了一种非易失性可读存储介质，该存储介质中存储有一个或多个模块（programs），该一个或多个模块被应用在具有触摸屏幕的设备时，可以使得该设备执行如下步骤的指令（instructions）：

确定当前加载网络页面的渲染数据的数据量；该渲染数据包括至少一个渲染数据子项；

依据该渲染数据的数据量，在网络页面中创建相应高度的画布空间；

在该画布空间中渲染出首屏区域对应的渲染数据子项；

当定位到该首屏区域以外的指定区域时，在该画布空间中渲染出该指定区域对应的渲染数据子项。

较佳地，在该确定当前加载web页面的渲染数据的数据量的步骤之前，还包括如下步骤：

获取当前加载网络页面的渲染数据。

较佳地，各个渲染数据子项具有一致的高度，该确定当前加载网络页面的渲染数据的数据量的步骤可以包括如下子步骤：

获取该渲染数据中渲染数据子项的数量，以及，单个渲染数据子项的高度；

将该渲染数据子项的数量乘以该单个渲染数据子项的高度，获得该当前加载网络页面的渲染数据的数据量；

或者，

获取该渲染数据中渲染数据子项的数量，以及，各个渲染数据子项的高度；

按照该渲染数据子项的数量累加该各个渲染数据子项的高度，获得该当前加载网络页面的渲染数据的数据量。

较佳地，该在画布空间中渲染出首屏区域对应的渲染数据子项的步骤可以包括如下子步骤：

获取用于显示该网络页面的屏幕高度；

根据该画布空间的高度确定该画布空间的顶部位置；

根据该画布空间的顶部位置和该屏幕高度，在画布空间中定位首屏区域；

依据该首屏区域的高度和单个渲染数据子项的高度，确定该首屏区域对应的渲染数据子项；

在该画布空间的首屏区域中，渲染出该首屏区域对应的渲染数据子项。

较佳地，该当定位到该首屏区域以外的指定区域时，在该画布空间中渲染出该指定区域对应的渲染数据子项的步骤可以包括如下子步骤：

获取用于显示该网络页面的屏幕高度；

根据该画布空间的高度确定该画布空间的顶部位置；

当定位到该首屏区域以外的指定区域时，确定该指定区域相对于该画布空间的顶部位置在垂直方向上的偏移量；

根据该偏移量和屏幕高度，在画布空间中定位该指定区域；

依据该指定区域的高度和单个渲染数据子项的高度，确定该指定区域对应的渲染数据子项；

在该画布空间的指定区域中，渲染出该指定区域对应的渲染数据子项。

较佳地，该当定位到该首屏区域以外的指定区域时，在该画布空间中渲染出该指定区域对应的渲染数据子项的步骤可以包括如下子步骤：

当定位到该首屏区域以外的指定区域时，确定该指定区域相对于该首屏区域在垂直方向上的偏移量；

根据该偏移量和屏幕高度，在画布空间中定位该指定区域；

依据该指定区域的高度和渲染数据子项的高度，确定该指定区域对应的渲染数据子项；

在该画布空间的指定区域中，渲染出该指定区域对应的渲染数据子项。

较佳地，该在画布空间的首屏区域中，渲染出该首屏区域对应的渲染数据子项的子步骤为：

采用预置的绘图接口从该画布空间的顶部位置开始，自上而下地在该首屏区域中渲染出该首屏区域对应的渲染数据子项；其中，该预置的绘图接口包括用于绘制背景图，边框和前景图的图像绘制接口drawImage，以及，用于绘制文本的文本填涂接口fillText。

较佳地，该在画布空间的指定区域中，渲染出该指定区域对应的渲染数据子项的子步骤为：

采用预置的绘图接口从该画布空间的指定区域的顶部位置开始，自上而下地在该指定区域中渲染出指定区域对应的渲染数据子项；其中，该预置的绘图接口包括用于绘制背景图，边框和前景图的图像绘制接口drawImage，以及，用于绘制文本的文本填涂接口fillText。

对于设备实施例而言，由于其与在方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

图5是本发明实施例提供的一种终端设备结构示意图。参见图5，该终端设备可以用于实施上述实施例中提供的网络页面的渲染方法。其中，该终端设备可以为手机、平板电脑pad、穿戴式移动设备（如智能手表）等。优先的：

终端设备700可以包括通信单元110、包括有一个或一个以上计算机可读存储介质的存储器120、输入单元130、显示单元140、传感器150、音频电路160、WiFi(wireless fidelity，无线保真)模块170、包括有一个或者一个以上处理核心的处理器180、以及电源190等部件。本领域技术人员可以理解，图5中示出的终端设备结构并不构成对终端设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

通信单元110可用于收发信息或通话过程中，信号的接收和发送，该通信单元110可以为RF（Radio Frequency，射频）电路、路由器、调制解调器、等网络通信设备。特别地，当通信单元110为RF电路时，将基站的下行信息接收后，交由一个或者一个以上处理器180处理；另外，将涉及上行的数据发送给基站。通常，作为通信单元的RF电路包括但不限于天线、至少一个放大器、调谐器、一个或多个振荡器、用户身份模块（SIM）卡、收发信机、耦合器、LNA（Low Noise Amplifier，低噪声放大器）、双工器等。此外，通信单元110还可以通过无线通信与网络和其他设备通信。所述无线通信可以使用任一通信标准或协议，包括但不限于GSM(Global System of Mobile communication，全球移动通讯系统)、GPRS(General Packet Radio Service，通用分组无线服务)、CDMA(Code Division Multiple Access，码分多址)、WCDMA(WidebandCode Division Multiple Access,宽带码分多址)、LTE(Long Term Evolution,长期演进)、电子邮件、SMS(Short Messaging Service，短消息服务)等。存储器120可用于存储软件程序以及模块，处理器180通过运行存储在存储器120的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器120可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序（比如声音播放功能、图像播放功能等）等；存储数据区可存储根据终端设备700的使用所创建的数据（比如音频数据、电话本等）等。此外，存储器120可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器120还可以包括存储器控制器，以提供处理器180和输入单元130对存储器120的访问。

输入单元130可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。优选地，输入单元130可包括触敏表面131以及其他输入设备132。触敏表面131，也称为触摸显示屏或者触控板，可收集用户在其上或附近的触摸操作（比如用户使用手指、触笔等任何适合的物体或附件在触敏表面131上或在触敏表面131附近的操作），并根据预先设定的程式驱动相应的连接装置。可选的，触敏表面131可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器180，并能接收处理器180发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触敏表面131。除了触敏表面131，输入单元130还可以包括其他输入设备132。优选地，其他输入设备132可以包括但不限于物理键盘、功能键（比如音量控制按键、开关按键等）、轨迹球、鼠标、操作杆等中的一种或多种。

显示单元140可用于显示由用户输入的信息或提供给用户的信息以及终端设备700的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元140可包括显示面板141，可选的，可以采用LCD(Liquid Crystal Display，液晶显示器)、OLED(Organic Light-Emitting Diode,有机发光二极管)等形式来配置显示面板141。进一步的，触敏表面131可覆盖显示面板141，当触敏表面131检测到在其上或附近的触摸操作后，传送给处理器180以确定触摸事件的类型，随后处理器180根据触摸事件的类型在显示面板141上提供相应的视觉输出。虽然在图5中，触敏表面131与显示面板141是作为两个独立的部件来实现输入和输入功能，但是在某些实施例中，可以将触敏表面131与显示面板141集成而实现输入和输出功能。

终端设备700还可包括至少一种传感器150，比如光传感器、运动传感器以及其他传感器。优选地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板141的亮度，接近传感器可在终端设备700移动到耳边时，关闭显示面板141和/或背光。作为运动传感器的一种，重力加速度传感器可检测各个方向上（一般为三轴）加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用（比如横竖屏切换、相关游戏、磁力计姿态校准）、振动识别相关功能（比如计步器、敲击）等;至于终端设备700还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

音频电路160、扬声器161，传声器162可提供用户与终端设备700之间的音频接口。音频电路160可将接收到的音频数据转换后的电信号，传输到扬声器161，由扬声器161转换为声音信号输出；另一方面，传声器162将收集的声音信号转换为电信号，由音频电路160接收后转换为音频数据，再将音频数据输出处理器180处理后，经RF电路110以发送给比如另一终端设备，或者将音频数据输出至存储器120以便进一步处理。音频电路160还可能包括耳塞插孔，以提供外设耳机与终端设备700的通信。

为了实现无线通信，该终端设备上可以配置有无线通信单元170，该无线通信单元170可以为WiFi模块。WiFi属于短距离无线传输技术，终端设备700通过无线通信单元170可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图5示出了无线通信单元170，但是可以理解的是，其并不属于终端设备700的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。

处理器180是终端设备700的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器120内的软件程序和/或模块，以及调用存储在存储器120内的数据，执行终端设备700的各种功能和处理数据，从而对手机进行整体监控。可选的，处理器180可包括一个或多个处理核心；优选的，处理器180可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器180中。

终端设备700还包括给各个部件供电的电源190（比如电池），优选的，电源可以通过电源管理系统与处理器180逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源190还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

尽管未示出，终端设备700还可以包括摄像头、蓝牙模块等，在此不再赘述。具体在本实施例中，终端设备的显示单元是触摸屏显示器，终端设备还包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行所述一个或者一个以上程序包含用于进行以下操作的指令：

确定当前加载网络页面的渲染数据的数据量；所述渲染数据包括至少一个渲染数据子项；

依据所述渲染数据的数据量，在网络页面中创建相应高度的画布空间；

在所述画布空间中渲染出首屏区域对应的渲染数据子项；

当定位到所述首屏区域以外的指定区域时，在所述画布空间中渲染出所述指定区域对应的渲染数据子项。

可选地，存储器还包括进行以下操作的指令：在所述确定当前加载web页面的渲染数据的数据量的步骤之前，还包括：获取当前加载网络页面的渲染数据。

各个渲染数据子项具有一致的高度，所述确定当前加载网络页面的渲染数据的数据量的步骤包括：

获取所述渲染数据中渲染数据子项的数量，以及，单个渲染数据子项的高度；

将所述渲染数据子项的数量乘以所述单个渲染数据子项的高度，获得所述当前加载网络页面的渲染数据的数据量；

或者，

获取所述渲染数据中渲染数据子项的数量，以及，各个渲染数据子项的高度；

按照所述渲染数据子项的数量累加所述各个渲染数据子项的高度，获得所述当前加载网络页面的渲染数据的数据量。

可选地，存储器还包括进行以下操作的指令：所述在画布空间中渲染出首屏区域对应的渲染数据子项的步骤包括：

获取用于显示所述网络页面的屏幕高度；

根据所述画布空间的高度确定所述画布空间的顶部位置；

根据所述画布空间的顶部位置和所述屏幕高度，在画布空间中定位首屏区域；

依据所述首屏区域的高度和单个渲染数据子项的高度，确定所述首屏区域对应的渲染数据子项；

在所述画布空间的首屏区域中，渲染出所述首屏区域对应的渲染数据子项。

可选地，存储器还包括进行以下操作的指令：所述当定位到所述首屏区域以外的指定区域时，在所述画布空间中渲染出所述指定区域对应的渲染数据子项的步骤包括：

获取用于显示所述网络页面的屏幕高度；

根据所述画布空间的高度确定所述画布空间的顶部位置；

当定位到所述首屏区域以外的指定区域时，确定所述指定区域相对于所述画布空间的顶部位置在垂直方向上的偏移量；

根据所述偏移量和屏幕高度，在画布空间中定位所述指定区域；

依据所述指定区域的高度和单个渲染数据子项的高度，确定所述指定区域对应的渲染数据子项；

在所述画布空间的指定区域中，渲染出所述指定区域对应的渲染数据子项。

可选地，存储器还包括进行以下操作的指令：所述当定位到所述首屏区域以外的指定区域时，在所述画布空间中渲染出所述指定区域对应的渲染数据子项的步骤包括：

当定位到所述首屏区域以外的指定区域时，确定所述指定区域相对于所述首屏区域在垂直方向上的偏移量；

根据所述偏移量和屏幕高度，在画布空间中定位所述指定区域；

依据所述指定区域的高度和渲染数据子项的高度，确定所述指定区域对应的渲染数据子项；

在所述画布空间的指定区域中，渲染出所述指定区域对应的渲染数据子项。

可选地，存储器还包括进行以下操作的指令：所述在画布空间的首屏区域中，渲染出所述首屏区域对应的渲染数据子项的子步骤为：

采用预置的绘图接口从所述画布空间的顶部位置开始，自上而下地在所述首屏区域中渲染出所述首屏区域对应的渲染数据子项；其中，所述预置的绘图接口包括用于绘制背景图，边框和前景图的图像绘制接口drawImage，以及，用于绘制文本的文本填涂接口fillText。

可选地，存储器还包括进行以下操作的指令：所述在画布空间的指定区域中，渲染出所述指定区域对应的渲染数据子项的子步骤为：

采用预置的绘图接口从所述画布空间的指定区域的顶部位置开始，自上而下地在所述指定区域中渲染出指定区域对应的渲染数据子项；其中，所述预置的绘图接口包括用于绘制背景图，边框和前景图的图像绘制接口drawImage，以及，用于绘制文本的文本填涂接口fillText。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

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

本发明实施例是参照根据本发明实施例的方法、移动设备(系统)、和计算机程序产品的流程图和／或方框图来描述的。应理解可由计算机程序指令实现流程图和／或方框图中的每一流程和／或方框、以及流程图和／或方框图中的流程和／或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理移动设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理移动设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的装置。

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

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

尽管已描述了本发明实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明实施例范围的所有变更和修改。

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

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

Claims (15)

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

确定当前加载网络页面的渲染数据的数据量；所述渲染数据包括至少一个渲染数据子项；

依据所述渲染数据的数据量，在网络页面中创建相应高度的画布空间；

在所述画布空间中渲染出首屏区域对应的渲染数据子项；

当定位到所述首屏区域以外的指定区域时，在所述画布空间中渲染出所述指定区域对应的渲染数据子项。

2.根据权利要求1所述的方法，其特征在于，在所述确定当前加载web页面的渲染数据的数据量的步骤之前，还包括：

获取当前加载网络页面的渲染数据。

3.根据权利要求1或2所述的方法，其特征在于，各个渲染数据子项具有一致的高度，所述确定当前加载网络页面的渲染数据的数据量的步骤包括：

获取所述渲染数据中渲染数据子项的数量，以及，单个渲染数据子项的高度；

将所述渲染数据子项的数量乘以所述单个渲染数据子项的高度，获得所述当前加载网络页面的渲染数据的数据量；

或者，

获取所述渲染数据中渲染数据子项的数量，以及，各个渲染数据子项的高度；

按照所述渲染数据子项的数量累加所述各个渲染数据子项的高度，获得所述当前加载网络页面的渲染数据的数据量。

4.根据权利要求3所述的方法，其特征在于，所述在画布空间中渲染出首屏区域对应的渲染数据子项的步骤包括：

获取用于显示所述网络页面的屏幕高度；

根据所述画布空间的高度确定所述画布空间的顶部位置；

根据所述画布空间的顶部位置和所述屏幕高度，在画布空间中定位首屏区域；

依据所述首屏区域的高度和单个渲染数据子项的高度，确定所述首屏区域对应的渲染数据子项；

在所述画布空间的首屏区域中，渲染出所述首屏区域对应的渲染数据子项。

5.根据权利要求3所述的方法，其特征在于，所述当定位到所述首屏区域以外的指定区域时，在所述画布空间中渲染出所述指定区域对应的渲染数据子项的步骤包括：

获取用于显示所述网络页面的屏幕高度；

根据所述画布空间的高度确定所述画布空间的顶部位置；

当定位到所述首屏区域以外的指定区域时，确定所述指定区域相对于所述画布空间的顶部位置在垂直方向上的偏移量；

根据所述偏移量和屏幕高度，在画布空间中定位所述指定区域；

依据所述指定区域的高度和单个渲染数据子项的高度，确定所述指定区域对应的渲染数据子项；

在所述画布空间的指定区域中，渲染出所述指定区域对应的渲染数据子项。

6.根据权利要求4所述的方法，其特征在于，所述当定位到所述首屏区域以外的指定区域时，在所述画布空间中渲染出所述指定区域对应的渲染数据子项的步骤包括：

当定位到所述首屏区域以外的指定区域时，确定所述指定区域相对于所述首屏区域在垂直方向上的偏移量；

根据所述偏移量和屏幕高度，在画布空间中定位所述指定区域；

依据所述指定区域的高度和渲染数据子项的高度，确定所述指定区域对应的渲染数据子项；

在所述画布空间的指定区域中，渲染出所述指定区域对应的渲染数据子项。

7.根据权利要求4所述的方法，其特征在于，所述在画布空间的首屏区域中，渲染出所述首屏区域对应的渲染数据子项的子步骤为：

采用预置的绘图接口从所述画布空间的顶部位置开始，自上而下地在所述首屏区域中渲染出所述首屏区域对应的渲染数据子项；其中，所述预置的绘图接口包括用于绘制背景图，边框和前景图的图像绘制接口drawImage，以及，用于绘制文本的文本填涂接口fillText。

8.根据权利要求5或6所述的方法，其特征在于，所述在画布空间的指定区域中，渲染出所述指定区域对应的渲染数据子项的子步骤为：

采用预置的绘图接口从所述画布空间的指定区域的顶部位置开始，自上而下地在所述指定区域中渲染出指定区域对应的渲染数据子项；其中，所述预置的绘图接口包括用于绘制背景图，边框和前景图的图像绘制接口drawImage，以及，用于绘制文本的文本填涂接口fillText。

9.一种网络页面的渲染装置，其特征在于，包括：

数据量计算模块，用于确定当前加载网络页面的渲染数据的数据量；所述渲染数据包括至少一个渲染数据子项；

Canvas创建模块，用于依据所述渲染数据的数据量，在网络页面中创建相应高度的画布空间；

首屏区域渲染模块，用于在所述画布空间中渲染出首屏区域对应的渲染数据子项；

指定区域渲染模块，用于当定位到所述首屏区域以外的指定区域时，在所述画布空间中渲染出所述指定区域对应的渲染数据子项。

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

渲染数据获取模块，用于获取当前加载网络页面的渲染数据。

11.根据权利要求9或10所述的装置，其特征在于，所述各个渲染数据子项具有一致的高度，所述数据量计算模块包括：

渲染数据子项数量获取子模块，用于获取所述渲染数据中渲染数据子项的数量；

第一渲染数据子项高度获取子模块，用于获取单个渲染数据子项的高度；

第一数据量计算子模块，用于将所述渲染数据子项的数量乘以所述单个渲染数据子项的高度，获得所述当前加载网络页面的渲染数据的数据量；

或者，

渲染数据子项数量获取子模块，用于获取所述渲染数据中渲染数据子项的数量；

第二渲染数据子项高度获取子模块，用于获取各个渲染数据子项的高度；

第二数据量计算子模块，用于按照所述渲染数据子项的数量累加所述各个渲染数据子项的高度，获得所述当前加载网络页面的渲染数据的数据量。

12.根据权利要求11所述的装置，其特征在于，所述首屏区域渲染模块包括：

屏幕高度获取子模块，用于获取用于显示所述网络页面的屏幕高度；

画布顶部确定子模块，用于根据所述画布空间的高度确定所述画布空间的顶部位置；

首屏区域定位子模块，用于根据所述画布空间的顶部位置和所述屏幕高度，在画布空间中定位首屏区域；

首屏数据查找子模块，用于依据所述首屏区域的高度和单个渲染数据子项的高度，确定所述首屏区域对应的渲染数据子项；

第一渲染子模块，用于在所述画布空间的首屏区域中，渲染出所述首屏区域对应的渲染数据子项。

13.根据权利要求11所述的装置，其特征在于，所述指定区域渲染模块包括：

屏幕高度获取子模块，用于获取用于显示所述网络页面的屏幕高度；

画布顶部确定子模块，用于根据所述画布空间的高度确定所述画布空间的顶部位置；

第一偏移量确定子模块，用于在定位到所述首屏区域以外的指定区域时，确定所述指定区域相对于所述画布空间的顶部位置在垂直方向上的偏移量；

第一指定区域定位子模块，用于根据所述偏移量和屏幕高度，在画布空间中定位所述指定区域；

第一指定数据查找子模块，用于依据所述指定区域的高度和单个渲染数据子项的高度，确定所述指定区域对应的渲染数据子项；

第二渲染子模块，用于在所述画布空间的指定区域中，渲染出所述指定区域对应的渲染数据子项。

14.根据权利要求12所述的装置，其特征在于，所述指定区域渲染模块包括：

第二偏移量确定子模块，用于在定位到所述首屏区域以外的指定区域时，确定所述指定区域相对于所述首屏区域在垂直方向上的偏移量；

第二指定区域定位子模块，用于根据所述偏移量和屏幕高度，在画布空间中定位所述指定区域；

第二指定数据查找子模块，用于依据所述指定区域的高度和渲染数据子项的高度，确定所述指定区域对应的渲染数据子项；

第二渲染子模块，用于在所述画布空间的指定区域中，渲染出所述指定区域对应的渲染数据子项。

15.一种设备，其特征在于，包括：

一个或多个处理器；

存储器；和

一个或多个模块，所述一个或多个模块存储于所述存储器中并被配置成由所述一个或多个处理器执行，其中，所述一个或多个模块具有如下功能：

确定当前加载网络页面的渲染数据的数据量；所述渲染数据包括至少一个渲染数据子项；

依据所述渲染数据的数据量，在网络页面中创建相应高度的画布空间；

在所述画布空间中渲染出首屏区域对应的渲染数据子项；

当定位到所述首屏区域以外的指定区域时，在所述画布空间中渲染出所述指定区域对应的渲染数据子项。

Images