[发明专利]一种网络页面的渲染方法、装置及设备

说明书

技术领域

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

背景技术

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

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

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

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

或者，

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

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

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

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

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

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

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

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

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

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

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