CN112667330A - 一种页面显示方法及计算机设备 - Google Patents

Abstract

本申请涉及互联网技术领域，提供了一种页面显示方法、页面显示装置、计算机设备及计算机可读存储介质。其中，一种页面显示方法，通过浏览器基于对HTML文件解析得到的节点树进行渲染，得到包含目标显示区域的访问页面，由于节点树用于描述在目标显示区域内显示的数据元素，因此在目标显示区域内触发滚动操作时，能够通过响应该目标显示区域内的滚动操作，对节点树进行更新得到新的节点树，进而基于该新的节点树在目标显示区域内显示新的数据元素，得到新的访问页面，从而避免在显示访问页面时因直接对海量数据进行渲染，导致在对访问页面进行操作时出现页面卡顿的现象，提高了页面显示效率。

Description

一种页面显示方法及计算机设备

技术领域

本发明属于涉及互联网技术领域，尤其涉及一种页面显示方法、页面显示装置、计算机设备及计算机可读存储介质。

背景技术

如今，用户在使用终端访问服务器的数据时，通常是利用浏览器向服务器发送数据访问请求，进而接收服务器返回的超文本标记语言(HTML，Hyper Text MarkupLanguage)文件。终端通过浏览器对该HTML文件进行解析，获取该 HTML文件中所有的DOM节点也即DOM节点树，同时通过解析层叠样式表(CSS，Cascading Style Sheets)得到CSSOM树，将DOM节点树与CSSOM树进行结合，得到渲染树。终端通过浏览器基于该渲染树进行回流重绘等操作，完成对页面的渲染，进而显示相应的访问页面。

然而，在访问具有海量数据的页面时，直接通过浏览器渲染大量的数据元素容易导致渲染过程用时太长，且在渲染后，因此数据元素太多，用户在对显示数据元素的页面进行拖拽操作或滚动操作时，容易令浏览器因渲染的数据元素过多使得回流与重绘的过程耗时较长，进而导致页面出现卡顿现象，由此可见，现有的页面显示方案存在显示效率较低的问题。

发明内容

有鉴于此，本申请实施例提供了一种页面显示方法、页面显示装置、计算机设备及计算机可读存储介质，以解决现有的页面显示方案存在显示效率较低的问题。

本申请实施例的第一方面提供了一种页面显示方法，包括：

通过浏览器基于对超文本标记语言HTML文件进行解析得到的节点树，渲染得到包含目标显示区域的访问页面；其中，所述节点树用于描述在所述目标显示区域内显示的数据元素；

响应于所述目标显示区域内的滚动操作，对所述节点树进行更新，得到新的节点树；

基于所述新的节点树在所述目标显示区域内显示新的数据元素，得到新的访问页面。

本申请实施例的第二方面提供了一种页面显示装置，包括：

渲染单元，用于通过浏览器基于对超文本标记语言HTML文件进行解析得到的节点树，渲染得到包含目标显示区域的访问页面；其中，所述节点树用于描述在所述目标显示区域内显示的数据元素；

更新单元，用于响应于所述目标显示区域内的滚动操作，对所述节点树进行更新，得到新的节点树；

显示单元，用于基于所述新的节点树在所述目标显示区域内显示新的数据元素，得到新的访问页面。

本申请实施例的第三方面提供了一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现第一方面的各个步骤。

本申请实施例的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现第一方面的各个步骤。

实施本申请实施例提供的一种页面显示方法、页面显示装置、计算机设备及计算机可读存储介质具有以下有益效果：

本申请实施例，通过浏览器基于对HTML文件解析得到的节点树进行渲染，得到包含目标显示区域的访问页面，由于节点树用于描述在目标显示区域内显示的数据元素，因此在目标显示区域内触发滚动操作时，能够通过响应该目标显示区域内的滚动操作，对节点树进行更新得到新的节点树，进而基于该新的节点树在目标显示区域内显示新的数据元素，得到新的访问页面，能够避免在显示访问页面时因直接对海量数据进行渲染，导致访问页面的渲染时长较长，同时也避免了因为渲染海量数据元素导致在对访问页面进行操作时出现页面卡顿的现象，提高了页面显示效率。

附图说明

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

图1是本申请实施例提供的一种页面显示方法的实现流程图；

图2是本申请实施例提供的一种页面显示方法中步骤S11的具体实现流程图；

图3是本申请实施例提供的一种页面显示装置的结构框图；

图4是本申请实施例提供的一种计算机设备的结构框图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本实施例提供的一种页面显示方法，执行主体为终端设备，具体可以是配置有该方法功能，且同时具有访问数据页面功能的终端设备，如计算机设备、手机、平板电脑等。在本申请的所有实施例中，终端设备在进行访问页面的显示时，通过浏览器对页面文件进行解析并渲染得到，其中，页面文件是利用超文本标记语言编辑得到的文件，也被称为HTML文件。这里，HTML文件中定义了数据显示页面的元素内容，以及元素与文本内容的位置关系、排版布局等，通过浏览器对HTML文件进行解析，能够得到所有元素内容对应的DOM节点，以及用于描述元素位置关系、排版格式的CSS文件。

需要说明的是，由于通过浏览器渲染访问页面的过程中是将DOM节点组成的节点树，与解析CSS文件得到的CSSOM树进行结合，得到渲染树，并基于该渲染树进行页面渲染，得到访问页面，因此在对访问页面进行滚动操作时，通过更新节点树使得浏览器能够将更新后的节点树与CSSOM树进行结合，进而得到与滚动操作前不同的渲染树，再根据不同的渲染树实现回流和重绘，完成访问页面的刷新显示，实现了滚动操作与页面刷新之间的同步。

此外，由于通过浏览器解析HTML文件，得到相应的DOM节点与CSS文件，DOM节点组成了节点树，且通过进一步对CSS文件进行解析得到CSSOM 树，均属于现有技术，且对HTML文件进行解析的方式可以是与现有技术中对 HTML文件进行解析的方式相同，故本申请所有实施例不再就如何对HTML文件进行解析进行赘述。

以下通过具体实现方式对本实施例提供的一种页面显示方法进行详细说明。

图1示出了本申请实施例提供的一种页面显示方法的实现流程图，详述如下：

S11：通过浏览器基于对超文本标记语言HTML文件进行解析得到的节点树，渲染得到包含目标显示区域的访问页面；其中，所述节点树用于描述在所述目标显示区域内显示的数据元素。

在S11中，浏览器是预先安装在终端设备上的应用程序，终端设备通过运行该浏览器，即可根据服务器的网址实现对服务器的的访问。在通过浏览器访问服务器时，终端设备通过浏览器向服务器发送访问请求，服务器根据该访问请求将相应的HTML文件返回给终端设备，再由终端设备通过浏览器对该 HTML文件进行解析后加载得到访问页面。这里，访问页面中包含有目标显示区域，该目标显示区域用于显示服务器中存储的数据元素。

在本实施例中，HTML文件是能够被浏览器读取进而在浏览器中生成访问页面的文件。这里，HTML文件可以被存储在服务器中，且该HTML文件中配置有相应的内容，如访问页面中的元素、文本内容等。终端设备通过浏览器对 HTML文件进行解析得到节点树，再基于该节点树进行访问页面渲染操作，进而得到包含目标显示区域的访问页面。

需要说明的是，终端设备通过浏览器对HTML文件进行解析，能够得到 DOM节点与CSS文件，其中，DOM节点包括无可见DOM节点与可见元素DOM 节点。

本申请所有实施例中，节点树指的是由可见元素DOM节点组成的树状结构，也即节点树中的每个节点均为可见元素DOM节点。由于节点树用于描述在目标区域内的显示内容，因此在通过浏览器基于可见元素DOM节点组成的节点树，渲染得到包含目标显示区域的访问页面的过程中，访问页面的目标显示区域内显示的内容是节点树所描述的内容，也是该节点树上所有可见元素DOM节点所表征的内容。这里，由于节点树用于描述目标显示区域的显示内容，因此节点树中的可见元素DOM节点的个数远小于对HTML文件进行解析得到的可见元素DOM节点的总数。

在实际应用中，对HTML文件进行解析得到的可见元素DOM节点的总数 P1,节点树中的可见元素DOM节点的个数P2，其中，节点树中的可见元素DOM 节点的个数远小于对HTML文件进行解析得到的可见元素DOM节点的总数。这里，还可以利用相应的节点个数配置公式确定P1与P2之间的对应关系。

例如，P1与P2之间的对应关系可以通过以下公式描述：P1＝INT(P2*α)；其中，P1为浏览器对HTML文件进行解析得到的可见元素DOM节点的总数， P2为节点树中的可见元素DOM节点的个数，α为预设比例值，且0<α<1；INT 表示取整数。这里，预设比例值α可以根据P1的数量级确定，令最终所得P1 表征的节点树中的可见元素DOM节点的个数，不会导致页面在刷新过程中(回流与重绘操作)出现卡顿即可，如P1的数量级为百位，则α可以是小数点后两位的小数，也即P1的数量级越大，则α越小，且α的小数点后数位越多。此外，还可以通过对节点树进行配置，进而规定或限制目标显示区域内的显示内容。

以HTML文件携带有海量数据元素为例，当用户利用终端设备通过浏览器访问服务器中的数据时，服务器向终端设备返回携带有海量数据元素的HTML 文件，终端设备通过浏览器对HTML文件进行解析后，虽然能够得到解析出所有的数据元素，但为了避免在渲染时因为数据元素的数量过多，导致渲染过程需要耗费大量时间，以及避免渲染得到访问页面后回流与重绘过程因数据元素过多导致需要占用过多系统资源，使得访问页面出现卡顿，通过节点树描述目标区域内的显示内容，进而限定了在目标区域内进行显示的数据元素的数量或数据元素的范围，使得浏览器在对显示访问页面时能够基于节点树所描述的内容只渲染HTML文件中携带的部分数据元素，避免因为一次性渲染所有数据元素使访问页面在回流与重绘过程需要消耗大量资源，导致画面卡顿等其他影响用户操作体验的现象。

应当理解的是，由于在实际应用中，节点树可以通过浏览器对HTML文件进行解析得到，因此可以在配置HTML文件时，通过配置节点树的生成方式与更新方法，使得浏览器通过解析HTML文件后，能够得到相应的节点树，并基于该节点树渲染得到包含目标显示区域的访问页面。

图2示出了本申请实施例提供的一种页面显示方法中步骤S11的具体实现流程图。如图2所示，作为本申请一实施例，步骤S11具体包括：

S111：通过浏览器对HTML文件进行解析得到可见元素DOM节点集合与 CSSOM树；

S112：通过所述浏览器按照预设的节点树生成策略，基于所述可见元素 DOM节点集合与所述CSSOM树生成节点树；

S113：通过所述浏览器基于所述节点树与所述CSSOM树结合得到的渲染树，渲染得到包含目标显示区域的访问页面。

在本实施例中，可见元素DOM节点集合中包含多个可见元素DOM节点，每个可见元素DOM节点用于描述相应的数据元素，且该数据元素可由浏览器通过渲染加载可见元素DOM节点的方式可在目标显示区域中进行显示。CSSOM 树是通过对HTML文件中携带的CSS文件进行解析得到。这里，对CSS文件进行解析得到CSSOM树，具体可以是通过调用相应的解析脚本语句实现。

预设的节点树生成策略，用于描述根据可见元素DOM节点集合生成节点树的方法或逻辑执行过程。在实际应用中，预设的节点树生成策略可以是由执行环境脚本描述，该执行环境脚本可以是利用JAVA语言配置得到的JavaScript脚本文件(简称JS脚本文件)。例如，通过配置第一JS脚本文件并将该第一JS 脚本文件嵌套于HTML文件中，令浏览器在对HTML文件进行解析得到可见元素DOM节点集合后，通过执行该第一JS脚本文件，即可按照该第一JS脚本文件中所描述的节点树生成策略，根据可见元素DOM节点集合生成相应的节点树。

这里，预设的节点树生成策略还用于描述节点树中的节点个数，也即定义了在构建得到渲染树时，需要考虑的可见元素DOM节点的个数，且节点树中的节点个数(可见元素DOM节点的个数)小于可见元素DOM节点集合中的节点个数。

在一些已有的方案中，生成渲染树的方式是通过遍历每个DOM节点，进而确定出所有可见元素DOM节点，针对每个可见元素DOM节点找到在CSSOM 树中对应的规则与样式，进而将所有可见元素DOM节点与其相应的规则与样式进行结合，得到渲染树。

需要说明的是，本实施例中的渲染树是由节点树与CSSOM树进行结合得到的树形结构，因此节点树中的可见元素DOM节点，并非是对HTML文件进行解析得到的可见元素DOM节点集合中的全部可见元素DOM节点，而是可见元素DOM节点集合中的部分可见元素DOM节点。由于该节点树中只包含了可见元素DOM节点集合中的部分可见元素DOM节点，因此浏览器在基于该节点树与CSSOM树结合得到的渲染树进行渲染操作，所得到的访问页面中，于目标显示区域内也只显示与节点树中各可见元素DOM节点对应的数据元素。

本实施例中，通过浏览器对HTML文件进行解析，能够得到可见元素DOM 节点集合，但在渲染时由于按照预设的节点树生成策略，根据可见元素DOM节点集合生成了相应的节点树，使得浏览器在基于该节点树与CSSOM树结合得到的渲染树进行访问页面的渲染时，无需对可见元素DOM节点集合中的所有可见元素DOM节点集合进行渲染，而是只对节点树中描述的可见元素DOM节点进行渲染，避免了因为渲染大量的数据元素导致耗时过长的问题，同时也避免了因为渲染了所有可见元素DOM节点，导致后续对访问页面的刷新过程出现卡顿的现象。

可以理解的是，在实际应用中，终端设备通过对HTML文件进行解析时可以得到CSS文件，通过对CSS文件进一步解析能够得到CSSOM树，由于通过浏览器解析CSS文件的过程并非本申请的改进点所在，且已有技术中给出了通过解析CSS文件得到CSSOM树的相关方案，故此处不再对浏览器如何解析CSS 文件得到CSSOM树的方式进行赘述。

作为本实施例一种可能实现的方式，CSSOM树中包括用于描述所述目标显示区域的视窗规格内容。相应地，上述步骤S112包括：

根据所述可见元素DOM节点集合中全部所述可见元素DOM节点的竖直方向的像素值，构建数据容器；基于所述视窗规格内容，从所述数据容器中确定出目标显示区域竖直方向的目标像素值；基于所述可见元素DOM节点的竖直方向的像素值与所述目标像素值生成节点树。

在本实施例中，数据容器为渲染得到的最底层背景区域，并非用于存放可见元素DOM节点集合中所有可见元素DOM节点，该数据容器在竖直方向上的像素值，等于或大于可见元素DOM节点集合中全部可见元素DOM节点的竖直方向的像素值之和。CSSOM树中包括用于描述目标显示区域的视窗规格内容，该视窗规格内容所描述的目标显示区域竖直方向的目标像素值，小于数据容器的竖直方向的像素值，因此在渲染得到访问页面时，该目标显示区域不仅能够作为访问页面中用于显示数据元素的区域，通过构建数据容器与视窗规格内容，使得目标显示区域中在显示数据元素时，还能够呈现拖动游标效果与数据滚动的效果。

需要说明的是，在浏览器渲染得到访问页面时，由于目标显示区域的视窗规格内容决定目标显示区域的大小，而对于每个可见元素DOM节点来说，通过渲染该可见元素DOM节点得到的数据元素的大小是预先设定的，因此该目标显示区域的视窗规格内容也决定了用户可浏览到的数据元素的数量。本实施例中，基于视窗规格内容从数据容器中确定出目标显示区域竖直方向的目标像素值，相当于确定用户可浏览到的数据元素的数量，基于该目标像素值生成节点树，相当于依据用户实时且实际可浏览到的数据元素的数量确定需要渲染的数据元素的数量，进而生成相应的节点树，进而实现了利用节点树描述当前需要进行渲染的可见元素DOM节点。

作为本实施例一种可能实现的方式，上述步骤：根据所述可见元素DOM节点集合中全部所述可见元素DOM节点的竖直方向的像素值，构建数据容器，包括：

对所述可见元素DOM节点集合中所有所述可见元素DOM节点的竖直方向的像素值进行求和，得到容器高度值；根据所述容器高度值构建数据容器。

在本实施例中，数据容器的容器高度值，等于可见元素DOM节点集合中所有可见元素DOM节点的竖直方向的像素值之和。这里，可见元素DOM节点的竖直方向的像素值，用于描述在访问页面中渲染该可见元素DOM节点所得到的数据元素的像素大小。

作为一个示例，以可见元素DOM节点集合中包括N个可见元素DOM节点，每个可见元素DOM节点的竖直方向的像素值为X为例(N与X均大于0的整数)。对可见元素DOM节点集合中所有可见元素DOM节点的竖直方向的像素值进行求和，得到容器高度值为X*N，也即该数据容器在竖直方向上的像素值为Y等于X*N。

结合上述实施例，作为本实施例一种可能实现的方式，上述步骤：基于所述视窗规格内容，从所述数据容器中确定出目标显示区域竖直方向的目标像素值。

这里，由于CSSOM树中包括用于描述所述目标显示区域的视窗规格内容，且视窗规格内容所描述的是目标显示区域的大小，也即基于视窗规格内容能够从数据容器中确定出目标显示区域的范围。

在本实施例中，该范围即为目标显示区域对应的像素值，因此根据视窗规格内容能够确定目标显示区域在竖直方向上的目标像素值。

结合上述实施例，作为一种可能实现的方式，上述步骤：基于所述可见元素DOM节点的竖直方向的像素值与所述目标像素值生成节点树，包括：

根据所述可见元素DOM节点的竖直方向的像素值与目标像素值，测算节点树的节点个数；根据所述节点个数从可见元素DOM节点集合中确定出目标节点集合；根据所述目标节点集合生成所述节点树。

在本实施例中，为了根据可见元素DOM节点的竖直方向的像素值与目标像素值，测算节点树的节点个数，所得到的节点个数为大于0的整数。

节点个数描述了在目标显示区域内显示的数据元素的个数，根据节点个数从可见元素DOM节点中确定出目标节点集合，再根据目标节点集合生成节点树，进而定义目标显示区域内显示的数据元素个数与数据内容，实现在渲染得到访问页面的过程中，无需对数据元素容器内的全部数据元素进行渲染。

结合上述示例，假设目标像素值为Z，且Z为大于0的整数，Z必然小于数据容器在竖直方向上的像素值为Y。根据可见元素DOM节点的竖直方向的像素值X与目标像素值Z，测算节点树的节点个数，具体是用可见元素DOM节点的竖直方向的像素值X，除以目标像素值Z，进而得到节点树的节点个数

且

为大于0的整数。

应当理解的是，在实际应用中，可以根据实际情况修改CSSOM树中用于描述所述目标显示区域的视窗规格内容的数据，进而实现对目标显示区域大小的进行修改，进而实现对节点树规格的修改，从而改变单次回流与重绘需要加载的可见元素DOM节点数量。

S12：响应于所述目标显示区域内的滚动操作，对所述节点树进行更新，得到新的节点树。

在S12中，目标显示区域内的滚动操作可以是用户通过终端设备的输入模组触发的滚动操作，如用户通过鼠标、触摸屏幕等触发的滚动操作；或者是访问页面中预先设定的滚动操作机制，如访问页面根据预设的滚动周期对目标显示区域触发滚动操作。

在本申请的所有实施例中，由于目标显示区域用于显示数据元素，因此当目标显示区域内触发了滚动操作时，需要对该目标显示区域内的内容进行更新，也即需要进行回流与重绘，进而刷新访问页面的内容。这里，响应于目标显示区域内的滚动操作，并非直接通过加载新的节点内容，也即并非直接在目标显示区域内进行数据元素的内容更新，而是通过对节点树进行更新，得到新的节点树后，基于新的节点树在目标显示区域内显示新的数据元素。

在实际应用中，对节点树进行更新包括对节点树进行节点增加，由于节点树用于描述在所述目标显示区域的显示内容，因此当目标显示区域内触发了的滚动操作，表示需要在节点树上增加新的节点，以令浏览器能够加载与新的节点对应的数据元素。

作为本申请一实施例，步骤S12具体包括：

获取滚动操作产生的像素差值；基于所述像素差值对节点树进行更新，得到新的节点树。

在本实施例中，滚动操作为目标显示区域内触发的滚动操作，例如，拉动目标显示区域内的滚动条滚动的过程。像素差值用于描述目标显示区域的视窗相对于数据容器的位置，且该像素差值与滚动操作相关联，滚动操作的持续时长越长则像素差值越大，滚动操作的滚动幅度越大则像素差值越大。

在实际应用中，可以在HTML文件中预先配置对应列表，描述滚动操作的幅度或时长，与像素差值之间的对应关系。此外，还可以通过在HTML文件中嵌套第二JS脚本文件，用于检测目标显示区域内是否触发了滚动操作，当检测到滚动操作时，根据滚动操作查询对应列表，进而确定像素差值。

需要说明的是，通过获取滚动操作产生的像素差值，进而可以计算出目标显示区域的视窗在数据容器竖直方向上的拖动情况，因此基于像素差值能够确定需要进行显示的可见袁术DOM节点有哪些，进而该节点树进行更新，得到新的节点树。

作为本实施例一种实现的方式，上述方案中，步骤：基于所述像素差值对节点树进行更新，得到新的节点树，包括：

基于所述像素差值确定出更新节点列表；

根据所述更新节点列表对所述节点树进行更新，得到新的节点树。

在本实施例中，更新节点列表包括新增节点信息与删除节点信息。这里，新增节点信息用于描述新增可见元素DOM节点，删除节点信息用于描述待删除可见元素DOM节点。根据更新节点列表对节点树进行更新，是根据更新节点列表中的新增节点信息将新增可见元素DOM节点添加至节点树中，且根据更新节点列表中的删除节点信息将节点树中的待删除可见元素DOM节点进行删除，进而得到新的节点树。

在实际应用中，根据更新节点列表对节点树进行更新得到新的节点树时，对待删除可见元素DOM节点进行删除操作，与将新增可见元素DOM节点添加至节点树中的操作，可以是同时执行，也可以是先将新增可见元素DOM节点添加至节点树中，再对待删除可见元素DOM节点进行删除操作，还可以是对待删除可见元素DOM节点进行删除操作，再将新增可见元素DOM节点添加至节点树中。

需要说明的是，由于目标显示区域的视窗规格内容在竖直方向上的像素值为已知常量，所以在目标显示区域内显示的数据元素个数也为常量，也即无论是节点树的可见元素DOM节点的个数还是新的节点树的可见元素DOM节点的个数均为常量。又因为像素差值用于描述目标显示区域的视窗相对于数据容器的位置，因此能够根据该像素差值来确定在目标显示区域内触发了滚动操作触发后，需要对目标显示区域内的内容进行内容更换的范围，也即能够确定出滚动操作触发后新增可见元素DOM节点，该新增的DOM节点对应的数据元素就是滚动操作触发后，应当在目标显示区域内显示的数据元素。由于目标显示区域的视窗规格内容在竖直方向上的像素值为已知常量，因此当有新增可见元素 DOM节点时，必然会导致节点树中原有的部分可见元素DOM节点无需进行显示，该部分可见元素DOM节点即为待删除可见元素DOM节点。

本实施例中，基于像素差值对节点树进行更新得到新的节点树，使得节点树中的可见元素DOM节点对应的数据元素始终能够在目标显示区域内显示，并且能够在视觉上营造数据元素滚动的视觉效果。通过更新节点树得到新的节点树，使得后续的渲染操作能够保持最小的重绘回流，进而避免因为占用过多的系统资源导致画面卡顿，优化了页面显示效果。

S13：基于所述新的节点树在所述目标显示区域内显示新的数据元素，得到新的访问页面。

在S13中，新的节点树用于描述目标显示区域内触发了滚动操作后，对目标显示区域的显示内容进行更新后对应的可见元素DOM节点，也即新的节点树所包含的可见元素DOM节点，为目标显示区域内触发了滚动操作后，应当于目标显示区域内显示的数据元素所对应的可见元素DOM节点。

在本实施例中，新的节点树中的可见元素DOM节点，可以是原有的节点树中的部分可见元素DOM节点，也可以完全不包括原有的节点树中的部分可见元素DOM节点。

需要说明的是，基于新的节点树在目标显示区域内显示新的数据元素，进而得到新的访问页面，相当于对访问页面进行了一次页面刷新。故，新的节点树用于定义新的访问页面中目标显示区域内的显示内容。

在实际应用中，由于新的节点树也是用于定义新的访问页面中目标显示区域内的显示内容，因此基于新的节点树在目标显示区域内显示新的数据元素时，将新的节点树与CSSOM树进行结合，得到新的渲染树，通过浏览器根据该新的渲染树进行渲染，进而得到新的访问页面。

应当理解的是，由于新的节点树用于描述目标显示区域内触发了滚动操作后，对目标显示区域的显示内容进行更新后对应的可见元素DOM节点，因此通过更新节点树的方式对目标显示区域内显示的数据元素进行合理规划，使得在根据新的节点树进行页面刷新时，能够以较小的系统资源完成页面的回流与重绘，避免数据页面因为过多渲染数据元素出现操作卡顿的现象。

以上方案中，通过浏览器基于对HTML文件解析得到的节点树进行渲染，得到包含目标显示区域的访问页面，由于节点树用于描述在目标显示区域内显示的数据元素，因此在目标显示区域内触发滚动操作时，能够通过响应该目标显示区域内的滚动操作，对节点树进行更新得到新的节点树，进而基于该新的节点树在目标显示区域内显示新的数据元素，得到新的访问页面，能够避免在显示访问页面时因直接对海量数据进行渲染，导致访问页面的渲染时长较长，同时也避免了因为渲染海量数据元素导致在对访问页面进行操作时出现页面卡顿的现象，提高了页面显示效率。

请参阅图3，图3是本申请实施例提供的一种页面显示装置的结构框图。本实施例中该移动终端包括的各单元用于执行图1至图2对应的实施例中的各步骤。具体请参阅图1至图2以及图1至图2所对应的实施例中的相关描述。为了便于说明，仅示出了与本实施例相关的部分。参见图3，页面显示装置30包括：渲染单元31、更新单元32以及显示单元33，其中：

渲染单元31，用于通过浏览器基于对超文本标记语言HTML文件进行解析得到的节点树，渲染得到包含目标显示区域的访问页面；其中，所述节点树用于描述在所述目标显示区域内显示的数据元素；

更新单元32，用于响应于所述目标显示区域内的滚动操作，对所述节点树进行更新，得到新的节点树；

显示单元33，用于基于所述新的节点树在所述目标显示区域内显示新的数据元素，得到新的访问页面。

作为本申请一实施例，渲染单元31具体用于，

通过浏览器对HTML文件进行解析得到可见元素DOM节点集合与CSSOM 树；

通过所述浏览器按照预设的节点树生成策略，基于所述可见元素DOM节点集合与所述CSSOM树生成节点树；

通过所述浏览器基于所述节点树与所述CSSOM树结合得到的渲染树，渲染得到包含目标显示区域的访问页面。

作为本申请一实施例，所述CSSOM树中包括用于描述所述目标显示区域的视窗规格内容；渲染单元31具体还用于，

根据所述可见元素DOM节点集合中全部所述可见元素DOM节点的竖直方向的像素值，构建数据容器；

基于所述视窗规格内容，从所述数据容器中确定出目标显示区域竖直方向的目标像素值；

基于所述可见元素DOM节点的竖直方向的像素值与所述目标像素值生成节点树。

作为本申请一实施例，渲染单元31具体还用于，

对所述可见元素DOM节点集合中所有所述可见元素DOM节点的竖直方向的像素值进行求和，得到容器高度值；

根据所述容器高度值构建数据容器。

作为本申请一实施例，渲染单元31具体还用于，

根据所述可见元素DOM节点的竖直方向的像素值与目标像素值，测算节点树的节点个数；

根据所述节点个数从可见元素DOM节点集合中确定出目标节点集合；

根据所述目标节点集合生成所述节点树。

作为本申请一实施例，更新单元32具体用于，

获取滚动操作产生的像素差值；

基于所述像素差值对节点树进行更新，得到新的节点树。

作为本申请一实施例，更新单元32具体还用于，

基于所述像素差值确定出更新节点列表；

根据所述更新节点列表对所述节点树进行更新，得到新的节点树。

应当理解的是，图3示出的页面显示装置的结构框图中，各单元用于执行图 1至图2对应的实施例中的各步骤，而对于图1至图2对应的实施例中的各步骤已在上述实施例中进行详细解释，具体请参阅图1至图2以及图1至图2所对应的实施例中的相关描述，此处不再赘述。

图4是本申请实施例提供的一种计算机设备的结构框图。如图4所示，该实施例的计算机设备40包括：处理器41、存储器42以及存储在所述存储器42 中并可在所述处理器41上运行的计算机程序43，例如页面显示方法的程序。处理器41执行所述计算机程序43时实现上述各个页面显示方法各实施例中的步骤，例如图1所示的S11至S13，以及图2所示的S111至S113。或者，所述处理器41执行所述计算机程序43时实现上述图3对应的实施例中各单元的功能，例如，图3所示的单元31至33的功能，具体请参阅图3对应的实施例中的相关描述，此处不赘述。

示例性的，所述计算机程序43可以被分割成一个或多个单元，所述一个或者多个单元被存储在所述存储器42中，并由所述处理器41执行，以完成本申请。所述一个或多个单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序43在所述计算机设备40中的执行过程。例如，所述计算机程序43可以被分割成查询单元、显示单元、发送单元以及接收单元，各单元具体功能如上所述。

所述转台设备可包括，但不仅限于，处理器41、存储器42。本领域技术人员可以理解，图4仅仅是计算机设备40的示例，并不构成对计算机设备40的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述转台设备还可以包括输入输出设备、网络接入设备、总线等。

所称处理器41可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列 (Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

所述存储器42可以是所述计算机设备40的内部存储单元，例如计算机设备40的硬盘或内存。所述存储器42也可以是所述计算机设备40的外部存储设备，例如所述计算机设备40上配备的插接式硬盘，智能存储卡(Smart Media Card， SMC)，安全数字(SecureDigital，SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器42还可以既包括所述计算机设备40的内部存储单元也包括外部存储设备。所述存储器42用于存储所述计算机程序以及所述转台设备所需的其他程序和数据。所述存储器42还可以用于暂时地存储已经输出或者将要输出的数据。

以上所述实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围，均应包含在本申请的保护范围之内。

Claims (10)

1.一种页面显示方法，其特征在于，包括：

通过浏览器基于对超文本标记语言HTML文件进行解析得到的节点树，渲染得到包含目标显示区域的访问页面；其中，所述节点树用于描述在所述目标显示区域内显示的数据元素；

响应于所述目标显示区域内的滚动操作，对所述节点树进行更新，得到新的节点树；

基于所述新的节点树在所述目标显示区域内显示新的数据元素，得到新的访问页面。

2.根据权利要求1所述的页面显示方法，其特征在于，所述通过浏览器基于对超文本标记语言HTML文件进行解析得到的节点树，渲染得到包含目标显示区域的访问页面，包括：

通过浏览器对HTML文件进行解析得到可见元素DOM节点集合与CSSOM树；

通过所述浏览器按照预设的节点树生成策略，基于所述可见元素DOM节点集合与所述CSSOM树生成节点树；

通过所述浏览器基于所述节点树与所述CSSOM树结合得到的渲染树，渲染得到包含目标显示区域的访问页面。

3.根据权利要求2所述的页面显示方法，其特征在于，所述CSSOM树中包括用于描述所述目标显示区域的视窗规格内容；

所述通过所述浏览器按照预设的节点树生成策略，基于所述可见元素DOM节点集合与所述CSSOM树生成节点树，包括：

根据所述可见元素DOM节点集合中全部所述可见元素DOM节点的竖直方向的像素值，构建数据容器；

基于所述视窗规格内容，从所述数据容器中确定出目标显示区域竖直方向的目标像素值；

基于所述可见元素DOM节点的竖直方向的像素值与所述目标像素值生成节点树。

4.根据权利要求3所述的页面显示方法，其特征在于，所述根据所述可见元素DOM节点集合中全部所述可见元素DOM节点的竖直方向的像素值，构建数据容器，包括：

对所述可见元素DOM节点集合中所有所述可见元素DOM节点的竖直方向的像素值进行求和，得到容器高度值；

根据所述容器高度值构建数据容器。

5.根据权利要求4所述的页面显示方法，其特征在于，所述基于所述可见元素DOM节点的竖直方向的像素值与所述目标像素值生成节点树，包括：

根据所述可见元素DOM节点的竖直方向的像素值与目标像素值，测算节点树的节点个数；

根据所述节点个数从可见元素DOM节点集合中确定出目标节点集合；

根据所述目标节点集合生成所述节点树。

6.根据权利要求1所述的页面显示方法，其特征在于，所述响应于所述目标显示区域内的滚动操作，对所述节点树进行更新，得到新的节点树，包括：

获取滚动操作产生的像素差值；

基于所述像素差值对节点树进行更新，得到新的节点树。

7.根据权利要求6所述的页面显示方法，其特征在于，所述基于所述像素差值对节点树进行更新，得到新的节点树，包括：

基于所述像素差值确定出更新节点列表；

根据所述更新节点列表对所述节点树进行更新，得到新的节点树。

8.一种页面显示装置，其特征在于，包括：

渲染单元，用于通过浏览器基于对超文本标记语言HTML文件进行解析得到的节点树，渲染得到包含目标显示区域的访问页面；其中，所述节点树用于描述在所述目标显示区域内显示的数据元素；

更新单元，用于响应于所述目标显示区域内的滚动操作，对所述节点树进行更新，得到新的节点树；

显示单元，用于基于所述新的节点树在所述目标显示区域内显示新的数据元素，得到新的访问页面。

9.一种计算机设备，其特征在于，所述计算机设备包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时如权利要求1至7任一项所述方法的步骤。

10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述方法的步骤。

Images