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

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

【技术实现步骤摘要】
一种页面显示方法及计算机设备


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

技术介绍

[0002]如今，用户在使用终端访问服务器的数据时，通常是利用浏览器向服务器发送数据访问请求，进而接收服务器返回的超文本标记语言(HTML，Hyper TextMarkup Language)文件。终端通过浏览器对该HTML文件进行解析，获取该 HTML文件中所有的DOM节点也即DOM节点树，同时通过解析层叠样式表(CSS，Cascading Style Sheets)得到CSSOM树，将DOM节点树与CSSOM树进行结合，得到渲染树。终端通过浏览器基于该渲染树进行回流重绘等操作，完成对页面的渲染，进而显示相应的访问页面。
[0003]然而，在访问具有海量数据的页面时，直接通过浏览器渲染大量的数据元素容易导致渲染过程用时太长，且在渲染后，因此数据元素太多，用户在对显示数据元素的页面进行拖拽操作或滚动操作时，容易令浏览器因渲染的数据元素过多使得回流与重绘的过程耗时较长，进而导致页面出现卡顿现象，由此可见，现有的页面显示方案存在显示效率较低的问题。

技术实现思路

[0004]有鉴于此，本申请实施例提供了一种页面显示方法、页面显示装置、计算机设备及计算机可读存储介质，以解决现有的页面显示方案存在显示效率较低的问题。
[0005]本申请实施例的第一方面提供了一种页面显示方法，包括：
[0006]通过浏览器基于对超文本标记语言HTML文件进行解析得到的节点树，渲染得到包含目标显示区域的访问页面；其中，所述节点树用于描述在所述目标显示区域内显示的数据元素；
[0007]响应于所述目标显示区域内的滚动操作，对所述节点树进行更新，得到新的节点树；
[0008]基于所述新的节点树在所述目标显示区域内显示新的数据元素，得到新的访问页面。
[0009]本申请实施例的第二方面提供了一种页面显示装置，包括：
[0010]渲染单元，用于通过浏览器基于对超文本标记语言HTML文件进行解析得到的节点树，渲染得到包含目标显示区域的访问页面；其中，所述节点树用于描述在所述目标显示区域内显示的数据元素；
[0011]更新单元，用于响应于所述目标显示区域内的滚动操作，对所述节点树进行更新，得到新的节点树；
[0012]显示单元，用于基于所述新的节点树在所述目标显示区域内显示新的数据元素，得到新的访问页面。
[0013]本申请实施例的第三方面提供了一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现第一方面的各个步骤。
[0014]本申请实施例的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现第一方面的各个步骤。
[0015]实施本申请实施例提供的一种页面显示方法、页面显示装置、计算机设备及计算机可读存储介质具有以下有益效果：
[0016]本申请实施例，通过浏览器基于对HTML文件解析得到的节点树进行渲染，得到包含目标显示区域的访问页面，由于节点树用于描述在目标显示区域内显示的数据元素，因此在目标显示区域内触发滚动操作时，能够通过响应该目标显示区域内的滚动操作，对节点树进行更新得到新的节点树，进而基于该新的节点树在目标显示区域内显示新的数据元素，得到新的访问页面，能够避免在显示访问页面时因直接对海量数据进行渲染，导致访问页面的渲染时长较长，同时也避免了因为渲染海量数据元素导致在对访问页面进行操作时出现页面卡顿的现象，提高了页面显示效率。
附图说明
[0017]为了更清楚地说明本申请实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
[0018]图1是本申请实施例提供的一种页面显示方法的实现流程图；
[0019]图2是本申请实施例提供的一种页面显示方法中步骤S11的具体实现流程图；
[0020]图3是本申请实施例提供的一种页面显示装置的结构框图；
[0021]图4是本申请实施例提供的一种计算机设备的结构框图。
具体实施方式
[0022]为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
[0023]本实施例提供的一种页面显示方法，执行主体为终端设备，具体可以是配置有该方法功能，且同时具有访问数据页面功能的终端设备，如计算机设备、手机、平板电脑等。在本申请的所有实施例中，终端设备在进行访问页面的显示时，通过浏览器对页面文件进行解析并渲染得到，其中，页面文件是利用超文本标记语言编辑得到的文件，也被称为HTML文件。这里，HTML文件中定义了数据显示页面的元素内容，以及元素与文本内容的位置关系、排版布局等，通过浏览器对HTML文件进行解析，能够得到所有元素内容对应的DOM节点，以及用于描述元素位置关系、排版格式的CSS文件。
[0024]需要说明的是，由于通过浏览器渲染访问页面的过程中是将DOM节点组成的节点树，与解析CSS文件得到的CSSOM树进行结合，得到渲染树，并基于该渲染树进行页面渲染，得到访问页面，因此在对访问页面进行滚动操作时，通过更新节点树使得浏览器能够将更
新后的节点树与CSSOM树进行结合，进而得到与滚动操作前不同的渲染树，再根据不同的渲染树实现回流和重绘，完成访问页面的刷新显示，实现了滚动操作与页面刷新之间的同步。
[0025]此外，由于通过浏览器解析HTML文件，得到相应的DOM节点与CSS文件，DOM节点组成了节点树，且通过进一步对CSS文件进行解析得到CSSOM 树，均属于现有技术，且对HTML文件进行解析的方式可以是与现有技术中对 HTML文件进行解析的方式相同，故本申请所有实施例不再就如何对HTML文件进行解析进行赘述。
[0026]以下通过具体实现方式对本实施例提供的一种页面显示方法进行详细说明。
[0027]图1示出了本申请实施例提供的一种页面显示方法的实现流程图，详述如下：
[0028]S11：通过浏览器基于对超文本标记语言HTML文件进行解析得到的节点树，渲染得到包含目标显示区域的访问页面；其中，所述节点树用于描述在所述目标显示区域内显示的数据元素。
[0029]在S11中，浏览器是预先安装在终端设备上的应用程序，终端设备通过运行该浏览器，即可根据服务器的网址实现对服务器的的访问。在通过浏览器访问服务器时，终端设备通过浏览器向服务器发送访问请求，服务器根据该访问请求将相应的HTML文件返回给终端设备，再由终端设备通过浏览器对该 HTML文件本文档来自技高网...

【技术保护点】

【技术特征摘要】
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节点的竖直方向的像素值进行求和，得到容器高度值；根据所述容...

【专利技术属性】
技术研发人员：胡盼盼，
申请(专利权)人：中国平安人寿保险股份有限公司，
类型：发明
国别省市：