CN115640093A - 一种页面渲染方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明实施例关于一种页面渲染方法、装置、电子设备及存储介质，应用于网页客户端，包括：从缓存数组中确定游标数组；根据游标数组构建文档对象模型树；对文档对象模型树中的目标元素进行监听，在监听到目标元素进入视图区域的情况下，从缓存数组中获取与目标元素对应的章节相邻且不包括在游标数组中的待更新章节，将待更新章节添加至游标数组，并在游标数组中存储的章节的数量大于预设阈值的情况下，删除游标数组中距离待更新章节最远的章节，得到更新后的游标数组；基于更新后的游标数组更新文档对象模型树，对预设页面进行渲染。这样，将文档对象模型树中元素的数量控制在游标数组中存储的章节数量之内，有利于提升网页客户端的渲染性能。

Description

一种页面渲染方法、装置、电子设备及存储介质

技术领域

本发明实施例涉及计算机技术领域，尤其涉及一种页面渲染方法、装置、电子设备及存储介质。

背景技术

随着互联网以及移动端阅读的发展，阅读功能在web(网页)端的应用越来越频繁，与应用程序客户端相比，web端具有灵活、高效、迭代方便等优势，能够更好的提升用户体验。

现有技术中，书籍阅读功能具有多种阅读模式，其中，“无限连续滚动”是一种较为常见的阅读模式。这种模式下，用户不需要翻页操作，可以一直向下或向上滑动屏幕。

但是，当用户在web端以无限连续滚动模式进行长时间阅读时，阅读过的内容会在web端的DOM(Document Object Model，文档对象模型)树中一直保留，这样，当用户已阅读内容越来越多时，DOM树的长度会越来越长，在后续阅读时，每一次下拉以及每一次加载新章节都会造成页面回流重构，从而产生页面卡顿等性能问题。

发明内容

本发明实施例提供一种待处理页面渲染方法、装置、电子设备及存储介质，以至少解决相关技术中当用户在web端以无限连续滚动模式进行长时间阅读时，每一次下拉以及每一次加载新章节都会造成页面回流重构，从而产生页面卡顿的问题。

本发明实施例的技术方案如下：

第一方面，本发明实施例提供了一种页面渲染方法，应用于网页客户端，包括：

从预设页面的缓存数组中确定游标数组，其中，所述缓存数组用于存储已获取的所述预设页面对应文档中的章节，所述游标数组用于存储用于构建文档对象模型树的章节；

根据所述游标数组构建所述文档对象模型树，其中，所述游标数组中的章节与所述文档对象模型树中的元素一一对应；

对所述文档对象模型树中的目标元素进行监听，在监听到所述目标元素进入视图区域的情况下，从所述缓存数组中获取与所述目标元素对应的章节相邻且不包括在所述游标数组中的待更新章节，将所述待更新章节添加至所述游标数组，并在所述游标数组中存储的章节的数量大于预设阈值的情况下，删除所述游标数组中距离所述待更新章节最远的章节，得到更新后的游标数组，其中，所述目标元素为所述文档对象模型树中的第一个元素或最后一个元素；

基于所述更新后的游标数组更新所述文档对象模型树，并根据更新后的文档对象模型树对所述预设页面进行渲染。

可选的，所述从预设页面的缓存数组中确定游标数组之前，还包括：

获取预设页面的进度信息，所述进度信息用于指示参考章节，所述参考章节为当前展示的所述预设页面对应文档中的章节；

根据所述进度信息，获取所述参考章节对应的M个候选章节，所述M为非0自然数；

将所述M个候选章节存储至所述预设页面的缓存数组中。

可选的，在未获取到所述预设页面的进度信息的情况下，还包括：

获取所述预设页面对应文档中最前面的N个章节，作为初始章节，所述N为非0自然数，所述N小于或等于所述M；

将所述初始章节存储至所述预设页面的缓存数组中。

可选的，在所述目标元素为所述文档对象模型树中的最后一个元素的情况下，所述待更新章节为所述目标元素对应的章节相邻的下一个章节，所述游标数组中距离所述待更新章节最远的章节为所述游标数组中的第一个章节。

可选的，在所述目标元素为所述文档对象模型树中的第一个元素的情况下，所述待更新章节为所述目标元素对应的章节相邻的前一个章节，所述游标数组中距离所述待更新章节最远的章节为所述游标数组中的最后一个章节。

可选的，所述从所述缓存数组中获取与所述目标元素对应的章节相邻且不包括在所述游标数组中的待更新章节，将所述待更新章节添加至所述游标数组，还包括：

在所述缓存数组中不包括所述待更新章节的情况下，获取所述待更新章节，将所述待更新章节存储至所述缓存数组；

将所述待更新章节添加至所述游标数组。

可选的，所述对所述文档对象模型树中的目标元素进行监听，包括：

调用预设监听接口，对所述文档对象模型树中的目标元素进行监听。

可选的，在所述基于所述更新后的游标数组更新所述文档对象模型树之后，还包括：

返回所述对所述文档对象模型树中的目标元素进行监听的步骤。

第二方面，本发明实施例提供了一种页面渲染装置，应用于网页客户端，包括：

确定单元，被配置为执行从预设页面的缓存数组中确定游标数组，其中，所述缓存数组用于存储已获取的所述预设页面对应文档中的章节，所述游标数组用于存储用于构建文档对象模型树的章节；

构建单元，被配置为执行根据所述游标数组构建所述文档对象模型树，其中，所述游标数组中的章节与所述文档对象模型树中的元素一一对应；

监听单元，被配置为执行对所述文档对象模型树中的目标元素进行监听，在监听到所述目标元素进入视图区域的情况下，从所述缓存数组中获取与所述目标元素对应的章节相邻且不包括在所述游标数组中的待更新章节，将所述待更新章节添加至所述游标数组，并在所述游标数组中存储的章节的数量大于预设阈值的情况下，删除所述游标数组中距离所述待更新章节最远的章节，得到更新后的游标数组，其中，所述目标元素为所述文档对象模型树中的第一个元素或最后一个元素；

渲染单元，被配置为执行基于所述更新后的游标数组更新所述文档对象模型树，并根据更新后的文档对象模型树对所述预设页面进行渲染。

第三方面，本发明实施例提供了一种电子设备，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现上述任一项所述的页面渲染方法。

第四方面，本发明实施例提供了一种计算机可读存储介质，当所述计算机可读存储介质中的指令由页面渲染电子设备的处理器执行时，使得页面渲染电子设备能够执行上述任一项所述的页面渲染方法。

本发明实施例的实施例提供的技术方案至少带来以下有益效果：

网页客户端从预设页面的缓存数组中确定游标数组，其中，缓存数组用于存储已获取的预设页面对应文档中的章节，游标数组用于存储用于构建文档对象模型树的章节；根据游标数组构建文档对象模型树，其中，游标数组中的章节与文档对象模型树中的元素一一对应；对文档对象模型树中的目标元素进行监听，在监听到目标元素进入视图区域的情况下，从缓存数组中获取与目标元素对应的章节相邻且不包括在游标数组中的待更新章节，将待更新章节添加至游标数组，并在游标数组中存储的章节的数量大于预设阈值的情况下，删除游标数组中距离待更新章节最远的章节，得到更新后的游标数组，其中，目标元素为文档对象模型树中的第一个元素或最后一个元素；基于更新后的游标数组更新文档对象模型树，并根据更新后的文档对象模型树对预设页面进行渲染。

这样，通过对游标数组的动态更新，使得游标数组中的章节数量不大于预设阈值，同时，将文档对象模型树中元素的数量控制在游标数组中存储的章节数量之内，这样，文档对象模型树中元素的数量也不会超过预设阈值，那么，在预设页面进行刷新或展示时，对文档对象模型树进行渲染所需的时间和资源较少，有利于提升网页客户端的渲染性能，提升用户体验。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本发明实施例。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明实施例的实施例，并与说明书一起用于解释本发明实施例的原理，并不构成对本发明实施例的不当限定。

图1是根据一示例性实施例示出的一种页面渲染方法的流程图。

图2是根据一示例性实施例示出的一种元素与视图区域的交叉示意图。

图3是根据一示例性实施例示出的一种游标数组动态变化的示意图。

图4是根据一示例性实施例示出的一种游标数组动态变化的示意图。

图5是根据一示例性实施例示出的一种文档对象模型树变化示意图。

图6是根据一示例性实施例示出的一种文档对象模型树变化示意图。

图7是根据一示例性实施例示出的一种文档对象模型树变化示意图。

图8是根据一示例性实施例示出的一种页面渲染方法的逻辑示意图。

图9是根据一示例性实施例示出的一种页面渲染装置的框图。

图10是根据一示例性实施例示出的一种用于页面渲染的电子设备的框图。

图11是根据一示例性实施例示出的一种用于页面渲染的装置的框图。

具体实施方式

为了使本领域普通人员更好地理解本发明实施例的技术方案，下面将结合附图，对本发明实施例实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本发明实施例的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明实施例的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本发明实施例相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本发明实施例的一些方面相一致的装置和方法的例子。

图1是根据一示例性实施例示出的一种页面渲染方法的流程图，如图1所示，该待处理页面渲染方法应用于网页客户端，包括以下步骤：

在步骤S11中，从预设页面的缓存数组中确定游标数组，其中，缓存数组用于存储已获取的预设页面对应文档中的章节，游标数组用于存储用于构建文档对象模型树的章节。

随着互联网以及移动端阅读的发展，阅读功能在web端的应用越来越频繁，“无限连续滚动”是阅读功能的一种较为常见的模式，这种模式下，用户在预设页面不需要翻页操作，可以一直向下或向上滑动屏幕进行阅读。在本发明实施例中，预设页面中需要进行渲染的可以是阅读产品中的文档章节，另外，可以将章节换成列表项，从而实现对列表的无限滚动加载方案。

在本发明实施例中，通过设立预加载以及缓存机制，可以对预设页面对应文档中的章节进行预加载，并将获取到的章节缓存到缓存数组中。其中，可以将localStorage(本地存储)作为缓存数组的媒介，localStorage是在HTML5(HyperText Markup Language 5，超文本语言5.0)中新加入的属性，主要是用来作为本地存储使用，具有永久性和容量大的特点。通常，localStorage的容量大小为5M，在不同的浏览器中，容量大小会有所不同。可以根据实际书籍以及用户阅读习惯等情况，制定相应的缓存和预加载方案。

一种实现方式中，从预设页面的缓存数组中确定游标数组之前，还包括：获取预设页面的进度信息，进度信息用于指示参考章节，参考章节为当前展示的预设页面对应文档中的章节；根据进度信息，获取参考章节对应的M个候选章节，M为非0自然数；将M个候选章节存储至预设页面的缓存数组中。

举例而言，如果获取到进度信息，表示用户有阅读进度，则可以选取用户当前阅读章节以及前后各两个章节，作为预加载的章节，保存到缓存数组中。进而，随着用户阅读进度的更新，可以获取到新的进度信息，随之，可以获取到新的章节，保存到缓存数组中，缓存数组中存储的章节会不断增加，越来越多。这样，在用户的阅读过程中，预设页面中已经展示过以及后续最可能被展示的前后几个章节都提前存储在缓存数组中，有利于提高后续阅读过程中的页面渲染速度。

另外，在未获取到预设页面的进度信息的情况下，还包括：获取预设页面对应文档中最前面的N个章节，作为初始章节，N为非0自然数，N小于或等于M；将初始章节存储至预设页面的缓存数组中。

举例而言，如果未获取到进度信息，表示用户无阅读进度，那么，可以选取最前面的3个章节作为首次预加载的章节。可以理解，在没有进度信息的情况下，表示用户很可能还没有阅读预设页面对应文档中的任何内容，在这情况下，通常用户会按照从前到后的顺序依次阅读各个章节，因此，当用户初始阅读时，预先加载第1～3章的内容保存在缓存数组中，这样，在用户阅读时，最可能阅读的章节已经被预加载，可以从缓存数组中读取，有利于提高页面渲染速度。

游标数组是从缓存数组中确定的，游标数组中存储的章节用于构建文档对象模型树。在本发明实施例中，与缓存数组中存储的章节会随着进度信息的更新而不断增加不同，为游标数组设定了最大长度，游标数组的长度也就是存储在游标数组中的章节的数量，当游标数组达到最大长度之后，针对不同的用户阅读进度，游标数组会在缓存数组中上下移动。其中，游标数组的最大长度可以是预先设定的，也可以根据机型性能，动态自动设置，具体不做限定。

比如，可以将游标数组的长度设定为5，此时分两种情况：

第一种情况，未获取到进度信息，表示用户无阅读进度，这种情况下，缓存数组中只存储了最前面的3个章节，即文章的前三章，那么，游标数组中也只存储了这3个章节。

第二种情况，获取到进度信息，表示用户有阅读进度，这种情况下，可以根据进度信息，从缓存数组中获取当前阅读的章节及其前后各两章节，存储在游标数组中，也就是说，用户当前阅读的章节对应于长度为5的游标数组的中间位置。

这样，即可以保证上下滚动动态加载时不会造成空白区域的效果，又不会使DOM树中元素过多而导致性能问题。

在步骤S12中，根据游标数组构建文档对象模型树，其中，游标数组中的章节与文档对象模型树中的元素一一对应。

在本步骤中，可以根据前一步骤中所确定的游标数组构建文档对象模型树，文档对象模型树即为DOM树。文档对象模型树提供了对文档的访问模型，文档对象模型树中包括根节点及各级子节点，其中，根节点对应于文档本身，子节点则对应于文档中的各类对象。

元素是文档对象模型树中一种特定类型的子节点，每个元素分别对应于文档中的一个章节，也就是说，文档对象模型树中元素的增删与游标数组的变化保持一致，文档对象模型树中的第一个元素对应于游标数组头部的第一个章节，文档对象模型树中的最后一个元素对应于游标数组尾部的最后一个章节。可以简单地理解为游标数组是真实文档对象模型树的一个虚拟表示，文档对象模型树中的元素是通过对游标数组进行渲染得到的。

这样，可以保证文档对象模型树中的元素数量不会超过游标数组的最大长度，那么，当用户无限翻滚浏览时，可以有效地控制文档对象模型树中的元素数量，从而显著的提升渲染性能，尤其是当浏览时长越长时，提升效果越明显。

在步骤S13中，对文档对象模型树中的目标元素进行监听，在监听到目标元素进入视图区域的情况下，从缓存数组中获取与目标元素对应的章节相邻且不包括在游标数组中的待更新章节，将待更新章节添加至游标数组，并在游标数组中存储的章节的数量大于预设阈值的情况下，删除游标数组中距离待更新章节最远的章节，得到更新后的游标数组，其中，目标元素为文档对象模型树中的第一个元素或最后一个元素。

在本步骤中，通过对文档对象模型树中最新进入视图区域(viewport)的目标元素进行监听，当用户进行阅读时，可以随着用户的操作，动态从缓存数组中获取后续章节内容，并对游标数组进行更新，同时，可以维持游标数组的长度不超过预设阈值，也就是说，预设阈值表示游标数组的最大长度，即游标数组存储的章节数量不会超过预设阈值。

视图区域是一个预设的略大于预设页面的展示区域的虚拟窗口，进入视图区域的元素接下来很可能会进入预设页面的展示区域，被用户看到。在本步骤中，对文档对象模型树中的目标元素进行监听，包括：调用预设监听接口，对文档对象模型树中的目标元素进行监听。

其中，预设监听接口可以为IntersectionObserver接口，IntersectionObserver接口从属于Intersection Observer API(交叉观察接口)，是HTML5中新加入的属性，可以用于异步监听目标元素与视图区域交叉状态的函数。

如图2所示，为元素与视图区域的交叉示意图，通过调用该函数，可以对一个元素是否进入视图区域进行监听，如果该元素没有与视图区域交叉，表示该元素没有进入视图区域，反之，如果该元素与视图区域发生了交叉，表示该元素进入了视图区域。

具体来说，可以通过IntersectionObserver接口提供的一个构造函数进行文档对象模型树元素的监听，该构造函数可以表示为：

var io＝new IntersectionObserver(callback,options)

其中，callback是一个自定义的处理函数，当元素与视图区域交叉状态发生改变时，会触发该元素传入的callback函数。

另外，通过io.observe(document.querySelector(‘.oberver_item’))函数，可以启动对目标元素是否进入视图区域进行监听，通过io.unobserve(document.querySelector(‘.oberver_item’))函数，可以停止对目标元素是否进入视图区域进行监听，其中，“oberver_item”表示目标元素。

在本步骤中，可以根据目标元素的选取，确定用户不同的阅读顺序。一种情况下，如果目标元素为文档对象模型树中的最后一个元素，表示文档对象模型树中的最后一个元素是最新进入视图区域的，也就是说，游标数组尾部的最后一个章节是最新进入视图区域的，那么，可以推断用户在进行正向阅读，即从前面的章节读到后面的章节，则待更新章节为目标元素对应的章节相邻的下一个章节，游标数组中距离待更新章节最远的章节为游标数组中的第一个章节。

这样，可以从缓存数组中获取目标元素对应的章节相邻的下一个章节，作为更新章节，将待更新章节添加至游标数组，同时，在游标数组中存储的章节的数量大于预设阈值的情况下，删除游标数组中的第一个章节，从而对游标数组进行更新，并维持游标数组不超过其最大长度。

举例而言，如图3所示，为一种游标数组动态变化的示意图，其中，实线表示缓存数组，虚线表示游标数组。如果初始设定游标数组长度为3，游标数组的最大长度为5，那么，当用户无阅读进度时，首先可以将缓存数组中的前三个章节存储至游标数组；当用户有阅读进度时，可以初始获取阅读章节及前后各两章，分别存入缓存数组以及游标数组中。随着用户的正向阅读，会动态加载后续章节存入缓存数组中，并随之动态扩充游标数组的长度，直到游标数组长度为5，接下来，继续阅读下一章节时，将下一章节内容保存至游标数组尾部，并将游标数组头部第一个元素弹出，以使游标数组在缓存数组上以固定长度5向下滑动。

一种情况下，如果目标元素为文档对象模型树中的第一个元素，表示文档对象模型树中的第一个元素是最新进入视图区域的，也就是说，游标数组头部的第一个章节是最新进入视图区域的，那么，可以推断用户在进行倒向阅读，即从后面的章节读到前面的章节，则待更新章节为目标元素对应的章节相邻的前一个章节，游标数组中距离待更新章节最远的章节为游标数组中的最后一个章节。

这样，可以从缓存数组中获取目标元素对应的章节相邻的前一个章节，作为更新章节，将待更新章节添加至游标数组，同时，在游标数组中存储的章节的数量大于预设阈值的情况下，删除游标数组中的最后一个章节，从而对游标数组进行更新，并维持游标数组不超过其最大长度。

举例而言，如图4所示，为一种游标数组动态变化的示意图，其中，实线表示缓存数组，虚线表示游标数组，如果初始设定游标数组长度为3，游标数组的最大长度为5，那么，当用户无阅读进度时，首先可以将缓存数组中的前三个章节存储至游标数组；当用户有阅读进度时，可以初始获取阅读章节及前后各两章，分别存入缓存数组以及游标数组中。随着用户的倒向阅读，会动态加载前面的章节存入缓存数组中，并随之动态扩充游标数组的长度，直到游标数组长度为5，接下来，继续阅读前一章节时，将前一章节内容保存至游标数组头部，并将游标数组尾部最后一个元素弹出，以使游标数组在缓存数组上以固定长度5向上滑动。

一种实现方式中，从缓存数组中获取与目标元素对应的章节相邻且不包括在游标数组中的待更新章节，将待更新章节添加至所述游标数组，还包括：在缓存数组中不包括待更新章节的情况下，获取待更新章节，将待更新章节存储至缓存数组；将待更新章节添加至游标数组。

这样，随着用户阅读进度的更新，可以及时对缓存数组以及游标数组进行更新，待更新章节不仅可以存储在游标数组中，用于对文档对象模型树进行渲染，还可以永久性地存储在缓存数组中，进一步减少后续渲染的效率。

也就是说，正向阅读时，可以判断游标数组中尾部最后一个章节的下一章节是否存在于缓存数组中，如果存在，则将缓存数组中存储的该章节添加到游标数组尾部；如果不存在，则动态拉取该章节存储至缓存数组中，同时也将该章节存储至游标数组中。倒向阅读时，判断游标数组头部第一个章节的前一章节是否存在于缓存数组中，如果存在，则将缓存数组中存储的该章节添加到游标数组头部；如果不存在，则动态拉取该章节存储至缓存数组中，同时也将该章节存储至游标数组中。

在步骤S14中，基于更新后的游标数组更新文档对象模型树，并根据更新后的文档对象模型树对预设页面进行渲染。

在本步骤中，可以基于更新后的游标数组更新文档对象模型树，由于游标数组的长度不会超过预设阈值，因此，文档对象模型树中元素的数量也不会超过预设阈值，进而，可以根据更新后的文档对象模型树对预设页面进行渲染。由于预设阈值可以根据机型性能等条件动态设置，因此，文档对象模型树中的元素数量可以达到性能和文档对象模型树删减频率的最佳平衡状态，即可以保证上下滚动动态加载时不会造成空白区域的效果，又不会使文档对象模型树中元素过多而导致性能问题。另外，还可以在渲染过程中调用一些渲染器，从而进一步提升性能。

也就是说，可以根据游标数组的动态变化，增加和删除文档对象模型树中的元素，保证文档对象模型树的长度等于游标长度，并且DMO树的元素与游标数组中的章节一一对应，这样，当用户无限滚动阅读时，可以有效地控制节点渲染的数量，从而显著的提升渲染性能，做到了灵活、高效和可扩展，尤其是当浏览时长越长时，提升效果越明显。

一种实现方式中，在基于更新后的游标数组更新文档对象模型树之后，还包括：返回对文档对象模型树中的目标元素进行监听的步骤。这样，在无限连续滚动模式中，随着用户阅读进度的更新，可以持续对目标元素进行监听，并对游标数组及文档对象模型树进行更新，以实现本发明实施例提供的页面渲染方案。

举例而言，一种实现方式中，如图5所示，为阅读过程中的文档对象模型树变化示意图。其中，虚线框表示视图区域，可以看到，初始状态下，如果用户无阅读进度，此时文档对象模型树中元素个数为3，对应于文档中的前三个章节，用户当前阅读章节为游标数组中的第一章节，这种状态下，可以对文档对象模型树中最后一个元素，即对应的第三章内容进行监听，当第三章进入视图区域时，停止对第三章的监听，并对游标数组进行动态改动，获取第四章添加至游标数组中，改动后重新对文档对象模型树中的最后一个元素，即游标数组中存储的第四章进行监听。

进一步的，如图6所示，为阅读过程中的文档对象模型树变化示意图。其中，游标数组的最大长度，即预设阈值设定为5，游标数组中的章节数量不会超过5，比如，可以为文档的第三章至第七章，那么，当用户正向阅读时，当第七章对应的元素进入视图区域，可以获取第八章节，添加至游标数组尾部，同时需要将游标数组头部第一个章节，即第三章弹出，以确保游标数组的长度不超过预设阈值，与此同时，将文档对象模型树中第三章对应的元素删除。继续向下阅读时按照此规则循环操作。

一种实现方式中，如图7所示，为阅读过程中的文档对象模型树变化示意图。其中，游标数组的最大长度，即预设阈值设定为5，游标数组中的章节数量不会超过5，比如，可以为文档的第三章至第七章，那么，当用户倒序阅读时，可以监听文档对象模型树中头部第一个元素，即第三章对应的元素，当第三章对应的元素进入视图区域时，获取第三章之前的一个章节，即第二章添加至游标数组头部，并将游标数组尾部最后一个章节，即第七章弹出，与此同时，将文档对象模型树中第七章对应的元素删除。继续向上倒序阅读时按照此规则循环操作。

如图8所示，为本方案的一种逻辑示意图，当用户开始阅读后，本方案包括如下步骤：

S1：判断是否获取到进度信息。根据进度信息，可以确定缓存数组中预加载的章节。

S2：如果没有获取到进度信息，那么，可以选取前三个章节作为首次预加载的长度，即当用户初始阅读时，预先加载1～3章的内容并将章节信息保存在缓存数组中。进一步的，S3：如果没有获取到进度信息，那么，游标数组初始为缓存数组中前三个章节。

对应的，S4：如果获取到进度信息，则预先加载当前阅读章节以及前后各两章保存到缓存数组中。进一步的，S5：如果获取到进度信息，那么，游标数组初始为缓存数组中前五个章节。

然后，可以调用IntersectionObserver接口，动态监听文档对象模型树中的目标元素，其中，目标元素包括文档对象模型树中的第一个元素或最后一个元素。

具体来说，S6：调用IntersectionObserver接口，监听文档对象模型树中的第一个元素；S7：当第一个元素进入视图区域时，表示用户正在正向阅读；S8：判断缓存数组中是否存储有游标数组最后一章节的下一章节；S9：如果有，则从缓存数组中获取下一章节数据，加入游标数组的尾部，如果没有，则可以进入S20，结束监听；S10：进一步判断游标数组的长度是否大于预设阈值，其中，预设阈值可以取为5；S11：如果大于，则删除游标数组中的第一个章节，如果不大于，则返回S6；S12：同时，删除文档对象模型树中第一个元素。

另外，可以执行S13：调用IntersectionObserver接口，监听文档对象模型树中的最后一个元素；S14：当最后一个元素进入视图区域时，表示用户正在倒向阅读；S15：判断缓存数组中是否存储有游标数组第一章节的前一章节；S16：如果有，则从缓存数组中获取前一章节数据，加入游标数组的头部，如果没有，则可以进入S20，结束监听；S17：进一步判断游标数组的长度是否大于预设阈值，其中，预设阈值可以取为5；S18：如果大于，则删除游标数组中的最后一个章节，如果不大于，则返回S13；S19：同时，删除文档对象模型树中最后一个元素。

由以上可见，本发明实施例的实施例提供的技术方案，通过对游标数组的动态更新，使得游标数组中的章节数量不大于预设阈值，同时，将文档对象模型树中元素的数量控制在游标数组中存储的章节数量之内，这样，文档对象模型树中元素的数量也不会超过预设阈值，那么，在预设页面进行刷新或展示时，对文档对象模型树进行渲染所需的时间和资源较少，有利于提升网页客户端的渲染性能，提升用户体验。

图9是根据一示例性实施例示出的一种页面渲染装置框图，该装置包括：

确定单元201，被配置为执行从预设页面的缓存数组中确定游标数组，其中，所述缓存数组用于存储已获取的所述预设页面对应文档中的章节，所述游标数组用于存储用于构建文档对象模型树的章节；

构建单元202，被配置为执行根据所述游标数组构建所述文档对象模型树，其中，所述游标数组中的章节与所述文档对象模型树中的元素一一对应；

监听单元203，被配置为执行对所述文档对象模型树中的目标元素进行监听，在监听到所述目标元素进入视图区域的情况下，从所述缓存数组中获取与所述目标元素对应的章节相邻且不包括在所述游标数组中的待更新章节，将所述待更新章节添加至所述游标数组，并在所述游标数组中存储的章节的数量大于预设阈值的情况下，删除所述游标数组中距离所述待更新章节最远的章节，得到更新后的游标数组，其中，所述目标元素为所述文档对象模型树中的第一个元素或最后一个元素；

渲染单元204，被配置为执行基于所述更新后的游标数组更新所述文档对象模型树，并根据更新后的文档对象模型树。

由以上可见，本发明实施例的实施例提供的技术方案，通过对游标数组的动态更新，使得游标数组中的章节数量不大于预设阈值，同时，将文档对象模型树中元素的数量控制在游标数组中存储的章节数量之内，这样，文档对象模型树中元素的数量也不会超过预设阈值，那么，在预设页面进行刷新或展示时，对文档对象模型树进行渲染所需的时间和资源较少，有利于提升网页客户端的渲染性能，提升用户体验。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图10是根据一示例性实施例示出的一种用于页面渲染的电子设备的框图，包括处理器和存储器，其中，存储器用于存放计算机程序；处理器用于执行存储器上所存放的程序。

存储器可以包括随机存取存储器(RanDOM Access Memory，简称RAM)，也可以包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。

上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(Digital Signal Processing，简称DSP)、专用集成电路(Application SpecificIntegrated Circuit，简称ASIC)、现场可编程门阵列(Field－Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

在示例性实施例中，还提供了一种包括指令的计算机可读存储介质，例如包括指令的存储器，上述指令可由电子设备的处理器执行以完成上述方法。可选地，计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

在示例性实施例中，还提供一种计算机程序产品，当其在计算机上运行时，使得计算机实现上述待处理页面渲染的方法。

由以上可见，本发明实施例的实施例提供的技术方案，通过对游标数组的动态更新，使得游标数组中的章节数量不大于预设阈值，同时，将文档对象模型树中元素的数量控制在游标数组中存储的章节数量之内，这样，文档对象模型树中元素的数量也不会超过预设阈值，那么，在预设页面进行刷新或展示时，对文档对象模型树进行渲染所需的时间和资源较少，有利于提升网页客户端的渲染性能，提升用户体验。

图11是根据一示例性实施例示出的一种用于页面渲染的装置800的框图。

例如，装置800可以是移动电话，计算机，数字广播电子设备，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图11，装置800可以包括以下一个或多个组件：处理组件802，存储器804，电力组件806，多媒体组件808，音频组件810，输入/输出(I/O)的接口812，传感器组件814，以及通信组件816。

处理组件802通常控制装置800的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件802可以包括一个或多个处理器820来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件802可以包括一个或多个模块，便于处理组件802和其他组件之间的交互。例如，处理组件802可以包括多媒体模块，以方便多媒体组件808和处理组件802之间的交互。

存储器804被配置为存储各种类型的数据以支持在设备800的操作。这些数据的示例包括用于在装置800上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器804可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件807为装置800的各种组件提供电力。电源组件807可以包括电源管理系统，一个或多个电源，及其他与为装置800生成、管理和分配电力相关联的组件。

多媒体组件808包括在所述装置800和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件808包括一个前置摄像头和/或后置摄像头。当设备800处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的待处理多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件810被配置为输出和/或输入音频信号。例如，音频组件810包括一个麦克风(MIC)，当装置800处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器804或经由通信组件816发送。在一些实施例中，音频组件810还包括一个扬声器，用于输出音频信号。

I/O接口812为处理组件802和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件814包括一个或多个传感器，用于为装置800提供各个方面的状态评估。例如，传感器组件814可以检测到设备800的打开/关闭状态，组件的相对定位，例如所述组件为装置800的显示器和小键盘，传感器组件814还可以检测装置800或装置800一个组件的位置改变，用户与装置800接触的存在或不存在，装置800方位或加速/减速和装置800的温度变化。传感器组件814可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件814还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件814还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件816被配置为便于装置800和其他设备之间有线或无线方式的通信。装置800可以接入基于通信标准的无线网络，如WiFi，运营商网络(如2G、3G、4G或5G)，或它们的组合。在一个示例性实施例中，通信组件816经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件816还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，装置800可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行第一方面和第二方面所述的方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器804，上述指令可由装置800的处理器820执行以完成上述方法。可选地，例如，存储介质可以是非临时性计算机可读存储介质，例如，所述非临时性非临时性计算机可读存储介质计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

在示例性实施例中，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述实施例中任一所述的页面渲染方法。

由以上可见，本发明实施例的实施例提供的技术方案，通过对游标数组的动态更新，使得游标数组中的章节数量不大于预设阈值，同时，将文档对象模型树中元素的数量控制在游标数组中存储的章节数量之内，这样，文档对象模型树中元素的数量也不会超过预设阈值，那么，在预设页面进行刷新或展示时，对文档对象模型树进行渲染所需的时间和资源较少，有利于提升网页客户端的渲染性能，提升用户体验。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本发明实施例的其它实施方案。本发明实施例旨在涵盖本发明实施例的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本发明实施例的一般性原理并包括本发明实施例未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本发明实施例的真正范围和精神由下面的权利要求指出。

应当理解的是，本发明实施例并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本发明实施例的范围仅由所附的权利要求来限制。

Claims (11)

1.一种页面渲染方法，其特征在于，应用于网页客户端，包括：

从预设页面的缓存数组中确定游标数组，其中，所述缓存数组用于存储已获取的所述预设页面对应文档中的章节，所述游标数组用于存储用于构建文档对象模型树的章节；

根据所述游标数组构建所述文档对象模型树，其中，所述游标数组中的章节与所述文档对象模型树中的元素一一对应；

对所述文档对象模型树中的目标元素进行监听，在监听到所述目标元素进入视图区域的情况下，从所述缓存数组中获取与所述目标元素对应的章节相邻且不包括在所述游标数组中的待更新章节，将所述待更新章节添加至所述游标数组，并在所述游标数组中存储的章节的数量大于预设阈值的情况下，删除所述游标数组中距离所述待更新章节最远的章节，得到更新后的游标数组，其中，所述目标元素为所述文档对象模型树中的第一个元素或最后一个元素；

基于所述更新后的游标数组更新所述文档对象模型树，并根据更新后的文档对象模型树对所述预设页面进行渲染。

2.根据权利要求1所述的页面渲染方法，其特征在于，所述从预设页面的缓存数组中确定游标数组之前，还包括：

获取预设页面的进度信息，所述进度信息用于指示参考章节，所述参考章节为当前展示的所述预设页面对应文档中的章节；

根据所述进度信息，获取所述参考章节对应的M个候选章节，所述M为非0自然数；

将所述M个候选章节存储至所述预设页面的缓存数组中。

3.根据权利要求2所述的页面渲染方法，其特征在于，在未获取到所述预设页面的进度信息的情况下，还包括：

获取所述预设页面对应文档中最前面的N个章节，作为初始章节，所述N为非0自然数，所述N小于或等于所述M；

将所述初始章节存储至所述预设页面的缓存数组中。

4.根据权利要求1所述的页面渲染方法，其特征在于，在所述目标元素为所述文档对象模型树中的最后一个元素的情况下，所述待更新章节为所述目标元素对应的章节相邻的下一个章节，所述游标数组中距离所述待更新章节最远的章节为所述游标数组中的第一个章节。

5.根据权利要求1所述的页面渲染方法，其特征在于，在所述目标元素为所述文档对象模型树中的第一个元素的情况下，所述待更新章节为所述目标元素对应的章节相邻的前一个章节，所述游标数组中距离所述待更新章节最远的章节为所述游标数组中的最后一个章节。

6.根据权利要求1所述的页面渲染方法，其特征在于，所述从所述缓存数组中获取与所述目标元素对应的章节相邻且不包括在所述游标数组中的待更新章节，将所述待更新章节添加至所述游标数组，还包括：

在所述缓存数组中不包括所述待更新章节的情况下，获取所述待更新章节，将所述待更新章节存储至所述缓存数组；

将所述待更新章节添加至所述游标数组。

7.根据权利要求1所述的页面渲染方法，其特征在于，所述对所述文档对象模型树中的目标元素进行监听，包括：

调用预设监听接口，对所述文档对象模型树中的目标元素进行监听。

8.根据权利要求1所述的页面渲染方法，其特征在于，在所述基于所述更新后的游标数组更新所述文档对象模型树之后，还包括：

返回所述对所述文档对象模型树中的目标元素进行监听的步骤。

9.一种页面渲染装置，其特征在于，应用于网页客户端，包括：

确定单元，被配置为执行从预设页面的缓存数组中确定游标数组，其中，所述缓存数组用于存储已获取的所述预设页面对应文档中的章节，所述游标数组用于存储用于构建文档对象模型树的章节；

构建单元，被配置为执行根据所述游标数组构建所述文档对象模型树，其中，所述游标数组中的章节与所述文档对象模型树中的元素一一对应；

监听单元，被配置为执行对所述文档对象模型树中的目标元素进行监听，在监听到所述目标元素进入视图区域的情况下，从所述缓存数组中获取与所述目标元素对应的章节相邻且不包括在所述游标数组中的待更新章节，将所述待更新章节添加至所述游标数组，并在所述游标数组中存储的章节的数量大于预设阈值的情况下，删除所述游标数组中距离所述待更新章节最远的章节，得到更新后的游标数组，其中，所述目标元素为所述文档对象模型树中的第一个元素或最后一个元素；

渲染单元，被配置为执行基于所述更新后的游标数组更新所述文档对象模型树，并根据更新后的文档对象模型树对所述预设页面进行渲染。

10.一种电子设备，其特征在于，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至8中任一项所述的页面渲染方法。

11.一种计算机可读存储介质，其特征在于，当所述计算机可读存储介质中的指令由页面渲染电子设备的处理器执行时，使得页面渲染电子设备能够执行如权利要求1至8中任一项所述的页面渲染方法。

Images