CN115659087B - 页面渲染方法、设备及存储介质 - Google Patents

Abstract

本申请提供一种页面渲染方法、系统、设备、存储介质及程序产品，其中方法包括：获取待处理页面的原始节点树，所述原始节点树包括多个原始节点；给所述多个原始节点配置至少一个预设节点，生成所述待处理页面的新节点树，在所述新节点树中，一个所述预设节点包裹至少两个原始节点；根据所述新节点树中的所述预设节点，确定终端的可视区域；根据所述新节点树、渲染后的预设节点和所述可视区域渲染所述待处理页面。本申请实现了不需要将整个节点树中的全部节点都渲染后再确定可视区域，因此，相对减少了实时渲染的节点数量，进而提高渲染效率，有效减少页面卡顿现象，提高用户浏览页面的体验。

Description

页面渲染方法、设备及存储介质

技术领域

本申请涉及计算机技术领域，尤其涉及一种页面渲染方法、系统、设备、存储介质及程序产品。

背景技术

前端即网站前台部分，是运行在PC（Personal Computer，个人计算机）端、移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。

当前，通过终端访问前端页面后再触达业务的场景很多，比如浏览器页面、小程序应用页面、WebApp（是指基于Web网络的系统和应用）手机端应用等。以浏览器页面为例，浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中。这个过程中需要将用户选择的web资源进行页面渲染和重绘过程，才能实现页面显示。

然而，实际过程中只有将整个页面的节点树全部渲染完成后，才能确定哪些在可视区域内进行显示。虽然前端开发页面能提供多终端落地场景，但是随着互联网的发展，前端页面节点越来越多，受限于浏览器的编译机制，当前端页面节点增多时，页面渲染和重绘过程耗时会增加，导致前端页面性能下降。

发明内容

本申请实施例的主要目的在于提供一种页面渲染方法、系统、设备、存储介质及程序产品，实现了不需要将整个节点树中的全部节点都渲染后再确定可视区域，因此，相对减少了实时渲染的节点数量，进而提高渲染效率，有效减少页面卡顿现象，提高用户浏览页面的体验。

第一方面，本申请实施例提供一种页面渲染方法，包括：获取待处理页面的原始节点树，所述原始节点树包括多个原始节点；给所述多个原始节点配置至少一个预设节点，生成所述待处理页面的新节点树，在所述新节点树中，一个所述预设节点包裹至少两个原始节点；根据所述新节点树中的所述预设节点，确定终端的可视区域；根据所述新节点树、渲染后的预设节点和所述可视区域渲染所述待处理页面。

于一实施例中，所述获取待处理页面的原始节点树，所述原始节点树包括多个原始节点，包括：获取待处理的页面数据；解析所述页面数据，得到所述页面数据对应的原始节点树，所述原始节点树中包括多个原始节点。

于一实施例中，所述给所述多个原始节点配置至少一个预设节点，生成所述待处理页面的新节点树，包括：根据所述多个原始节点与所述预设节点之间的预设映射关系，将预设节点作为父节点配置给所述多个原始节点，生成所述待处理页面的新节点树。

于一实施例中，所述原始节点树包括多层原始节点；所述根据所述多个原始节点与所述预设节点之间的预设映射关系，将预设节点作为父节点配置给所述多个原始节点，生成所述待处理页面的新节点树，包括：根据所述预设映射关系，将所述预设节点配置为所述多层原始节点中的第一层原始节点的父节点，生成所述待处理页面的所述新节点树。

于一实施例中，所述根据所述新节点树、渲染后的预设节点和所述可视区域渲染所述待处理页面，包括：遍历所述新节点树中除去所述渲染后的预设节点以外的每个节点，确定位于所述可视区域内的目标节点集合；从所述新节点树中删除其他节点，得到更新后的新节点树，所述其他节点是所述新节点树中除去所述目标节点集合以及每个目标节点的子节点以外的节点；根据所述更新后的新节点树渲染所述目标节点集合中的目标节点和每个所述目标节点的子节点。

于一实施例中，所述遍历所述新节点树中除去所述渲染后的预设节点以外的每个节点，确定位于所述可视区域内的目标节点集合，包括：从所述渲染后的预设节点中确定位于终端的可视区域内的目标预设节点，所述目标节点集合包括所述目标预设节点。

于一实施例中，所述遍历所述新节点树中除去所述渲染后的预设节点以外的每个节点，确定位于所述可视区域内的目标节点集合，还包括：从所述目标预设节点的子节点中确定位于所述可视区域内的目标子节点，所述目标节点集合包括所述目标子节点。

于一实施例中，所述遍历所述新节点树中除去所述渲染后的预设节点以外的每个节点，确定位于所述可视区域内的目标节点集合，还包括：从所述目标子节点的下一层子节点中确定位于所述可视区域内的目标下一层子节点，所述目标节点集合包括所述目标下一层子节点，依次遍历所述新节点树中除去渲染后的预设节点以外的每个节点，得到最终的所述目标节点集合。

于一实施例中，所述确定位于所述可视区域内的目标节点集合，包括：若当前节点的局部或者全部暴露在所述可视区域内时，确定所述当前节点为目标节点。

第二方面，本申请实施例提供一种页面渲染装置，包括：

获取模块，用于获取待处理页面的原始节点树，所述原始节点树包括多个原始节点；

配置模块，用于给所述多个原始节点配置至少一个预设节点，生成所述待处理页面的新节点树，在所述新节点树中，一个所述预设节点包裹至少两个原始节点；

确定模块，用于根据所述新节点树中的所述预设节点，确定终端的可视区域；

渲染模块，用于根据所述新节点树、渲染后的预设节点和所述可视区域渲染所述待处理页面。

于一实施例中，所述获取模块，用于获取待处理的页面数据；解析所述页面数据，得到所述页面数据对应的原始节点树，所述原始节点树中包括多个原始节点。

于一实施例中，所述配置模块，用于根据所述多个原始节点与所述预设节点之间的预设映射关系，将预设节点作为父节点配置给所述多个原始节点，生成所述待处理页面的新节点树。

于一实施例中，所述原始节点树包括多层原始节点；所述配置模块，用于根据所述预设映射关系，将所述预设节点配置为所述多层原始节点中的第一层原始节点的父节点，生成所述待处理页面的所述新节点树。

于一实施例中，所述渲染模块，用于遍历所述新节点树中除去所述渲染后的预设节点以外的每个节点，确定位于所述可视区域内的目标节点集合；从所述新节点树中删除其他节点，得到更新后的新节点树，所述其他节点是所述新节点树中除去所述目标节点集合以及每个目标节点的子节点以外的节点；根据所述更新后的新节点树渲染所述目标节点集合中的目标节点和每个所述目标节点的子节点。

于一实施例中，所述渲染模块，还用于从所述渲染后的预设节点中确定位于终端的可视区域内的目标预设节点，所述目标节点集合包括所述目标预设节点。

于一实施例中，所述渲染模块，还用于从所述目标预设节点的子节点中确定位于所述可视区域内的目标子节点，所述目标节点集合包括所述目标子节点。

于一实施例中，所述渲染模块，还用于从所述目标子节点的下一层子节点中确定位于所述可视区域内的目标下一层子节点，所述目标节点集合包括所述目标下一层子节点，依次遍历所述新节点树中除去渲染后的预设节点以外的每个节点，得到最终的所述目标节点集合。

于一实施例中，所述确定位于所述可视区域内的目标节点集合，包括：若当前节点的局部或者全部暴露在所述可视区域内时，确定所述当前节点为目标节点。

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

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；

其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述电子设备执行上述任一方面所述的方法。

第四方面，本申请实施例提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，当处理器执行所述计算机执行指令时，实现上述任一方面所述的方法。

第五方面，本申请实施例提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述任一方面所述的方法。

本申请实施例提供的页面渲染方法、系统、设备、存储介质及程序产品，当获取到待处理页面的原始节点树时，先将预设节点作为父节点配置给原始节点树的多个原始节点，生成新节点树，然后渲染预设节点，确定出终端的可视区域，基于渲染后的预设节点、新节点树以及可视区域，渲染待处理页面。如此，由于新节点树中，一个预设节点可以作为多个原始节点的父节点，因此预设节点数量小于原始节点树中的节点总数量，而预设节点包裹了所有的原始节点，因此可以确定整个待处理页面的范围，进而当预设节点渲染后就能确定出终端的可视区域所在之处，随后就能依据可视区域进行渲染了，不需要将整个节点树中的全部节点都渲染后再确定可视区域，因此避免了将整个节点树全部渲染带来的资源消耗，相对减少了实时渲染的节点数量，进而提高渲染效率，有效减少页面卡顿现象，提高用户浏览页面的体验。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例提供的一种电子设备的结构示意图；

图2A为本申请实施例提供的一种页面渲染系统的示意图；

图2B为本申请实施例提供的一种页面的原始节点树的应用场景示意图；

图2C为本申请实施例提供的一种页面的原始节点树中一个原始节点的应用场景示意图；

图3为本申请实施例提供的一种页面渲染方法的流程示意图；

图4A至图4B为本申请实施例提供的一种新节点树的场景示意图；

图5为本申请实施例提供的一种页面渲染方法的流程示意图；

图6为本申请实施例提供的一种更新后的新节点树的场景示意图；

图7为本申请实施例提供的一种更新后的新节点树中节点1的场景示意图；

图8为本申请实施例提供的一种更新后的新节点树中节点1-1的场景示意图；

图9为本申请实施例提供的一种更新后的新节点树中节点25的场景示意图；

图10为本申请实施例提供的一种页面渲染装置的结构示意图。

通过上述附图，已示出本申请明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本申请构思的范围，而是通过参考特定实施例为本领域技术人员说明本申请的概念。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。

本文中术语“和/或”，用于描述关联对象的关联关系，具体表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。

为了清楚地描述本申请实施例的技术方案，首先对本申请所涉及的名词进行释义：

HTML：Hyper Text Markup Language，超文本标记语言。

XML：Extensible Markup Language，可扩展标记语言。

API：Application Program Interface，应用程序界面，可用以与计算机操作系统交换信息和命令的标准集。一个标准的应用程序界面为用户或软件开发商提供一个通用编程环境，以编写可交互运行于不同厂商计算机的应用程序。

DOM：Document Object Model，文档对象模型，是一种标准接口规范，是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个节点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了节点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的节点和内容。

JIT：Just-in-time compilation，即时编译，一边解析代码一边编译执行。

JS：JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

CSS：Cascading Style Sheets，层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。

如图1所示，本实施例提供一种电子设备1，包括：至少一个处理器11和存储器12，图1中以一个处理器为例。处理器11和存储器12通过总线10连接。存储器12存储有可被处理器11执行的指令，指令被处理器11执行，以使电子设备1可执行下述的实施例中方法的全部或部分流程，以相对减少实时渲染的节点数量，进而提高渲染效率，有效减少页面卡顿现象，提高用户浏览页面的体验。

于一实施例中，存储器12既可以是独立的，也可以跟处理器11集成在一起。

于一实施例中，电子设备1可以是手机、平板电脑、笔记本电脑、台式计算机或者多个计算机组成的大型运算系统。

图2A为本申请实施例提供的一种页面渲染系统200的示意图。如图2A所示，该系统包括：服务器210和终端220，其中：

服务器210可以是提供数据资源服务的数据平台，比如可以是云端的数据平台。实际场景中，一个数据平台可能有多个服务器210，图2A中以1个服务器210为例。

终端220可以是用户登录数据平台时使用的电脑、手机、平板等设备，终端220也可以有多个，图2A中以2个终端220为例进行示意。

终端220与服务器210之间可以通过互联网进行信息传输，以使终端220可以访问服务器210上的数据。上述终端220和/或者服务器210均可以由电子设备1来实现。

本申请实施例的页面渲染方式可以应用于任意需要页面渲染的领域。

在前端技术领域，前端即网站前台部分，是运行在PC（Personal Computer，个人计算机）端、移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。

当前，通过终端220访问前端页面后再触达业务的场景很多，比如浏览器页面、小程序应用页面、WebApp（是指基于Web网络的系统和应用）手机端应用、视频直播等。以浏览器页面为例，浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器210请求资源，并将其显示在浏览器窗口中。这个过程中需要将用户选择的web资源进行页面渲染和重绘过程，才能实现页面显示。在视频直播场景中，终端实时读取在线视频资源，仍然需要将视频资源经过渲染和重绘过程，才能实现页面显示。另外直播长视频字幕片段模块也需要对视频帧重新渲染才能显示。而当用户需要将长视频裁剪成短视频时，一般通过截取长视频中的视频帧来重新渲染成短视频。这些场景下，都会涉及前端页面的渲染和重绘过程。

如图2B所示，为本实施例一个前端页面数据的初始树结构的场景示意图，该树结构中有由许多个节点组成，每个节点可以包括多个子节点，比如图2B中节点25内还包括了6个子节点，节点25的示意图如图2C所示。节点和子节点构成节点树，其中类似节点1和节点2这样具备相邻关系的节点称作兄弟节点。用户通过终端220访问前端页面时，通常只会看到局部区域，把用户看到页面部分区域称作可视区域，如图2B中虚线区域所示。

实际场景中，以HTML页面为例，用户通过终端220访问前端页面时，会读取HTML内容，并开始页面渲染，渲染过程中，一个当前节点的所有子节点都渲染好之后，才会进行当前节点的下一个兄弟节点的渲染过程，因此节点间渲染是存在阻塞的情况。所以页面中节点和子节点数量越多，整个页面的渲染时长越长，耗时就会越久，在用户侧的直接感受就是页面出现卡顿。

同样的，对于视频直播场景下，用户通过终端220观看视频直播时，终端220实时读取在线视频资源，并开始视频帧页面渲染，渲染过程中，一个当前节点的所有子节点都渲染好之后，才会进行当前节点的下一个兄弟节点的渲染过程，所以视频页面中节点和子节点数量越多，整个视频页面的渲染时长越长，耗时就会越久，用户看到的直播视频内容就越容易出现卡顿，直接影响了用户的观看体验。

并且，实际过程中只有将整个页面的节点树全部渲染完成后，才能确定哪些在可视区域内进行显示。不仅需要复杂的JS计算和CSS样式才能达到效果，如果多节点的情况下，实际JS计算的性能消耗会比页面渲染耗时更长。

虽然前端开发页面能提供多终端220落地场景，但是随着互联网的发展，前端页面节点越来越多，受限于浏览器的编译机制，当前端页面节点增多时，页面渲染和重绘过程耗时会增加，导致前端页面性能下降。

为了解决上述问题，本申请实施例提供一种页面渲染方案，以相对减少实时渲染的节点数量，进而提高渲染效率，有效减少页面卡顿现象，提高用户浏览体验。

下面结合附图，对本申请的一些实施方式作详细说明。在各实施例之间不冲突的情况下，下述的实施例及实施例中的特征可以相互组合。另外，下述各方法实施例中的步骤时序仅为一种举例，而非严格限定。

请参看图3，其为本申请一实施例的页面渲染方法，该方法可由图1所示的电子设备1来执行，并可以应用于图2A至图2C所示的页面渲染的应用场景中，以相对减少需要实时渲染的节点数量，进而提高渲染效率，提高用户浏览页面的体验。该方法包括如下步骤：

步骤301：获取待处理页面的原始节点树，原始节点树包括多个原始节点。

在本步骤中，待处理页面是需要渲染显示的页面，可以是用户通过终端220浏览器访问的网络页面，也可以是终端220通过特定应用程序从服务器210请求的页面，比如静态的网页页面或者动态的直播视频页面。原始节点树可以指待处理页面的前端数据的节点树，可用于反映前端数据内部之间的内在关系，以及反映网页上各图像、文本和视频等前端数据的排列位置。原始节点树可以包括但不限于以下要素：原始节点、父子关系和节点树的层级。原始节点为原始节点树中的数据元素，各原始节点具有相应的属性和数据，原始节点具有的属性可以包括容器属性和控件属性。原始节点具有的数据可以是前端数据，包括与控件属性对应的数据内容，如图像、文本和视频等。父子关系为原始节点树中各上下层节点之间的从属关系。节点树的层级指的是各节点位于原始节点树的层级，如根节点处于原始节点树的第一层级，根节点的子节点处于原始节点树的第二层级，依次类推。

于一实施例中，步骤301具体可以包括：获取待处理的页面数据。解析页面数据，得到页面数据对应的原始节点树，原始节点树中包括多个原始节点。

在本实施例中，首先获取待处理的页面数据，此处页面数据可以是用户通过终端220向服务器210请求来的资源数据，资源的格式可以包括：HTML、PDF、image及其他格式，此处不做限定。然后对页面数据进行解析，根据页面数据定义构建原始节点树，比如构建一棵DOM树，DOM树是由DOM元素及属性节点组成的。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个节点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了节点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的节点和内容。

步骤302：给多个原始节点配置至少一个预设节点，生成待处理页面的新节点树，在新节点树中，一个预设节点包裹至少两个原始节点。

在本步骤中，预设节点是预先设定的容器节点，用以包裹多个原始节点，以使预设节点可以包裹原始节点树中所有的原始节点，因此预设节点覆盖了整个待处理页面的范围。每个预设节点在页面中的位置和/或大小可以预先设定，不同的预设节点之间可以不连接，也可以相互交叠。在渲染之前，可以将预设节点作为父节点配置给多个原始节点，生成新节点树，在新节点树中，预设节点就是第一层节点，一个预设节点用以包裹多个原始节点，因此新节点树中预设节点的数量小于原始节点树中节点总数量。

于一实施例中，步骤302具体可以包括：根据多个原始节点与预设节点之间的预设映射关系，将预设节点作为父节点配置给多个原始节点，生成待处理页面的新节点树。

在本实施例中，预设映射关系是指原始节点树中的原始节点与预设节点之间的绑定关系，比如原始节点树中哪些原始节点需要放置在哪个预设节点下面，都可以预先配置好，然后将配置信息生成预设映射关系保存在JS脚本中。在实际使用时，可以直接将原始节点树中的原始节点与映射关系对比查找，每个原始节点找到自身对应绑定的预设节点，然后按照映射关系将预设节点作为父节点配置给多个原始节点，生成待处理页面的新节点树，如此，保证配置过程顺利进行。

于一实施例中，步骤302具体可以包括：根据预设映射关系，将预设节点配置为多层原始节点中的第一层原始节点的父节点，生成待处理页面的新节点树。

在本实施例中，原始节点树可以包括多层原始节点，假设图2B所示为一个待处理页面的原始节点树，第一层包括从节点1至节点108，共108个第一层原始节点，每个第一层原始节点可以包括自己的子节点（如图2C所示），子节点还可以再包括子节点，以此类推。在根据预设映射关系进行新节点树的配置时，可以将第一层的108个原始节点作为子节点，将预设节点作为父节点进行配置。即将与相同的预设节点具有绑定关系的多个第一层原始节点作为该共同预设节点的子节点，那么这个共同预设节点就是这些第一层原始节点的父节点。假设待处理页面的预设映射关系中，一个预设节点绑定9个第一层原始节点，则新节点树的结构可以如图4A所示。

在设定映射关系时，不同预设节点绑定的原始节点数量可以相同也可以不同，可以基于实际需求设定。如图4B所示的新节点树中，预设节点1包括12个第一层原始节点，而预设节点2可以包括6个第一层原始节点。

步骤303：根据新节点树中的预设节点，确定终端220的可视区域。

在本步骤中，首先可以渲染新节点树中的预设节点，因为预设节点覆盖了整个待处理页面的范围，所以当预设节点渲染后就能确定出终端220的可视区域所在之处。此处可视区域是指用户通过终端220的显示窗口能够看到的区域，比如显示屏幕中的一个窗口区域，该窗口区域可以的尺寸可以预先设定。

步骤304：根据新节点树、渲染后的预设节点和可视区域渲染待处理页面。

在本步骤中，确定了可视区域后，就可以基于新节点树和渲染后的预设节点来渲染待处理页面，并将渲染结果显示在可视区域内。以便于用户查看。

上述页面渲染方法，当获取到待处理页面的原始节点树时，先将预设节点作为父节点配置给原始节点树的多个原始节点，生成新节点树，然后渲染预设节点，确定出终端220的可视区域，基于渲染后的预设节点、新节点树以及可视区域，渲染待处理页面。如此，由于新节点树中，一个预设节点可以作为多个原始节点的父节点，因此预设节点数量小于原始节点树中的节点总数量，而预设节点包裹了所有的原始节点，因此可以确定整个待处理页面的范围，进而当预设节点渲染后就能确定出终端220的可视区域所在之处，随后就能依据可视区域进行渲染了，不需要将整个节点树中的全部节点都渲染后再确定可视区域，因此避免了将整个节点树全部渲染带来的资源消耗，相对减少了实时渲染的节点数量，进而提高渲染效率，不管是静态网页还是动态直播视频帧，都可以有效减少卡顿现象，提高用户浏览页面的体验。

对于电商领域，本申请实施例的方案可以为电商商家用户提供终端短视频生产制作工具，并可以应用在直播长视频裁剪短视频生产制作场景中，提高视频制作效率，提高用户体验。请参看图5，其为本申请一实施例的页面渲染方法，该方法可由图1所示的电子设备1来执行，该方法可由图1所示的电子设备1来执行，并可以应用于图2A至图2C所示的页面渲染的应用场景中，以相对减少需要实时渲染的节点数量，进而提高渲染效率，有效减少页面卡顿现象，提高用户浏览页面的体验。与上述实施例相比，本实施例还包括基于可视区域渲染待处理页面的具体步骤，具体地该方法包括如下步骤：

步骤501：获取待处理页面的原始节点树，原始节点树包括多个原始节点。详细参阅上述实施例中对步骤301的相关描述。

步骤502：给多个原始节点配置至少一个预设节点，生成待处理页面的新节点树，在新节点树中，一个预设节点包裹至少两个原始节点。详细参阅上述实施例中对步骤302的相关描述。

步骤503：根据新节点树中的预设节点，确定终端220的可视区域。详细参阅上述实施例中对步骤303的相关描述。

步骤504：遍历新节点树中除去渲染后的预设节点以外的每个节点，确定位于可视区域内的目标节点集合。

在本步骤中，可视区域是用户可以看到的区域，因此处在可视区域内的节点是需要渲染的节点。实际场景中，用户通过终端220从服务器210请求的页面资源往往超过了可视区域的范围，比如页面资源是一张超长图片，其原始节点树如图4A所示，该图片长度已经超出显示窗口的范围，需要用户上下滑动窗口，才能看得到所有的页面内容，此时，当用户通过可视区域查看的那部分页面节点时，页面中其余的节点是不需要显示的，如果全部渲染则会增加页面渲染时长，表现在用户侧就是页面加载卡顿，不仅消耗终端220的计算资源，而且用户体验不好。因此，不在可视区域内的节点可以不进行渲染，当可视区域滑动到某些节点，使得节点暴露在可视区域内时，再对这些节点就行渲染，进而节约计算资源，降低页面加载卡顿风险。因此新节点树上当前位于可视区域内的节点就是目标节点，可以遍历新节点树中除去渲染后的预设节点以外的每个节点，确定最终的目标节点集合。

于一实施例中，步骤504具体可以包括：从渲染后的预设节点中确定位于终端220的可视区域内的目标预设节点，目标节点集合包括目标预设节点。

在本实施例中，预设节点已经在步骤503中进行全部渲染，由于预设节点覆盖了整个待处理页面的节点，因此落在可视区域内的预设节点中包括的子节点一定也会局部或全部的落在可视区域内，因此落在可视区域内的预设节点的子节点是需要渲染的，首先确定渲染后的预设节点中位于终端220的可视区域内的目标预设节点，才能够进一步确定目标预设节点的子节点，进而渲染目标预设节点的子节点，以使用户可以通过可视区域看到的页面内容是完整。

于一实施例中，步骤504具体还可以包括：从目标预设节点的子节点中确定位于可视区域内的目标子节点，目标节点集合包括目标子节点。

在本实施例中，暴露可视区域内的目标预设节点中包括的子节点也会局部或全部的落在可视区域内，因此暴露在可视区域内的目标预设节点的子节点是需要渲染的，这样才能使用户可以通过可视区域看到的页面内容是完整的。所以从目标预设节点的子节点中确定位于可视区域内的目标子节点，目标子节点加入目标节点结合。

于一实施例中，步骤504具体还可以包括：从目标子节点的下一层子节点中确定位于可视区域内的目标下一层子节点，目标节点集合包括目标下一层子节点，依次遍历新节点树中除去渲染后的预设节点以外的每个节点，得到最终的目标节点集合。

在本实施例中，暴露可视区域内的目标子节点中包括的下一层子节点也会局部或全部的落在可视区域内，因此暴露在可视区域内的目标子节点的下一层子节点也是是需要渲染的，这样才能使用户可以通过可视区域看到的页面内容是完整的。所以从目标子节点的下一层子节点中确定位于可视区域内的目标下一层子节点，目标下一层子节点加入目标节点结合。

待处理页面的原始树结构中可能包括多层节点，那么新节点树中也必定会包含原始节点树中全部的节点，为了将暴露在可视区域内的节点全部找出来，可以依照上述从目标子节点中确定下一层子节点的方式，依次遍历新节点树中除去渲染后的预设节点以外的每个节点，找到位于可视区域内的全部目标节点，得到最终的目标节点集合。目标节点集合中的节点都是需要渲染在当前可视区域内的，以保证用户在当前可视区域内看到的页面内容是完整。

于一实施例中，确定位于可视区域内的目标节点集合，包括：若当前节点的局部或者全部暴露在可视区域内时，确定当前节点为目标节点。

在本实施例中，在上述找目标节点集合的过程中，对于新节点树中的当前节点，如果当前节点的局部或者全部暴露在可视区域，则该节点就是目标节点，有些节点虽然只是局部暴露在可视区域，但是为了不影响用户的观感，仍然需要将该节点渲染，保证可视区域内的内容是完整的。

步骤505：从新节点树中删除其他节点，得到更新后的新节点树，其他节点是新节点树中除去目标节点集合以及每个目标节点的子节点以外的节点。

在本步骤中，目标节点是需要渲染在当前可视区域内的节点，除去目标节点集合以及每个目标节点的子节点以外的其他节点没有必要渲染，因此确定了目标节点集合后，可以将其他节点从新节点树中删掉，得到更新后的新节点树，这样可以减少更新后的新节点树上的节点数量，避免其他节点占用存储资源，提高资源利用率。

以图4A中的新节点树为例，在图4A中，左上角四个预设节点都暴露在可视区域内，其中预设节点1全部暴露在可视区域内，则预设节点1的子节点都是目标节点，都需要渲染，保留在新节点树中。而其余三个预设节点都是局部暴露在可视区域内，那么这三个预设节点的子节点也是目标节点，也是需要保留渲染的。除去这四个预设节点以外的其他预设节点当前不在可视区域内，因此其他预设节点的子节点可以删掉，经过步骤505的删除后，得到的更新后的新节点树如图6所示。在图6中，保留了步骤503中渲染的所有预设节点，由于预设节点1、预设节点2、预设节点5和预设节点6是局部或者全部暴露在可视区域内，因此保留了预设节点1的子节点、预设节点2的子节点、预设节点5的子节点和预设节点6的子节点。

如图6所示，预设节点1全部暴露在可视区域内，节点1是预设节点1的子节点，并且节点1全部暴露在可视区域内，则节点1是目标节点，节点1和节点1的子节点都需要保留。假设节点1有6个子节点，如图7所示，分别为：节点1-1、节点1-2、节点1-3、节点1-4、节点1-5、节点1-6，则这6个子节点就是节点1的下一层子节点。进一步地，由于上述节点1的6个子节点也都暴露在可视区域内，则上述节点1的6个子节点也是目标节点，节点1的6个子节点以及其下一层子节点也需要保留渲染。如图8所示，节点1-1包括6个子节点，这6个子节点也是目标节点，也要保留在节点树中，如此一致遍历新节点树的全部节点，找到最终的目标节点结合，其他的节点可以删除，得到更新后的新节点树。

如图6所示，预设节点2、预设节点5和预设节点6是局部暴露在可视区域内，其中斜线填充的格子表示预设节点2、预设节点5和预设节点6中未暴露在可视区域内的子节点。以节点25为例，节点25是预设节点5的子节点，由于节点25未暴露在可视区域内，因此节点25不是目标节点，节点25的下一层子节点将被删除，删除后如图9所示，节点25中不再包含子节点。

步骤506：根据更新后的新节点树渲染目标节点集合中的目标节点和每个目标节点的子节点。

在本步骤中，更新后的节点树中包括需要在可视区域内展示的页面节点及其之间的内在关系，因此基于更新后的新节点树渲染目标节点集合中的每个目标节点，并渲染每个目标节点的子节点后，可以在保证可视区域内页面内容完整的情况下，减少渲染节点的数量，提高页面渲染效率和性能。

需要说明的是，上述步骤504至步骤506的过程并不是以严格顺序执行的。渲染引擎会以最快的速度展示内容，所以后一个阶段不会等到前一个阶段结束才开始，而是在前一个阶段有输出的时候就开始执行，其它阶段也是如此，以使浏览器尽快展示页面内容。

上述页面渲染方法，通过层层查找新节点树中暴露在可视区域内的目标节点，渲染暴露在可视区域内的目标节点及其子节点，删掉未暴露的其他节点，简化节点树，提高页面渲染效率。

上述页面渲染方法详细内容可以参见上述实施例中对应方法实施例的描述。其实现原理和技术效果类似，本实施例此处不再赘述。

请参看图10，其为本申请一实施例的页面渲染装置1000，该装置可应用于图1所示的电子设备1，并可以应用于图2A至图2C所示的页面渲染的应用场景中，以相对减少需要实时渲染的节点数量，进而提高渲染效率，有效减少页面卡顿现象，提高用户浏览页面的体验。该装置包括：获取模块1001、配置模块1002、确定模块1003和渲染模块1004，各个模块的原理关系如下：

获取模块1001，用于获取待处理页面的原始节点树，原始节点树包括多个原始节点。

配置模块1002，用于给多个原始节点配置至少一个预设节点，生成待处理页面的新节点树，在新节点树中，一个预设节点包裹至少两个原始节点。

确定模块1003，用于根据新节点树中的预设节点，确定终端的可视区域。

渲染模块1004，用于根据新节点树、渲染后的预设节点和可视区域渲染待处理页面。

于一实施例中，获取模块1001，用于获取待处理的页面数据。解析页面数据，得到页面数据对应的原始节点树，原始节点树中包括多个原始节点。

于一实施例中，配置模块1002，用于根据多个原始节点与预设节点之间的预设映射关系，将预设节点作为父节点配置给多个原始节点，生成待处理页面的新节点树。

于一实施例中，原始节点树包括多层原始节点。配置模块1002，用于根据预设映射关系，将预设节点配置为多层原始节点中的第一层原始节点的父节点，生成待处理页面的新节点树。

于一实施例中，渲染模块1004，用于遍历新节点树中除去渲染后的预设节点以外的每个节点，确定位于可视区域内的目标节点集合。从新节点树中删除其他节点，得到更新后的新节点树，其他节点是新节点树中除去目标节点集合以及每个目标节点的子节点以外的节点。根据更新后的新节点树渲染目标节点集合中的目标节点和每个目标节点的子节点。

于一实施例中，渲染模块1004，还用于从渲染后的预设节点中确定位于终端的可视区域内的目标预设节点，目标节点集合包括目标预设节点。

于一实施例中，渲染模块1004，还用于从目标预设节点的子节点中确定位于可视区域内的目标子节点，目标节点集合包括目标子节点。

于一实施例中，渲染模块1004，还用于从目标子节点的下一层子节点中确定位于可视区域内的目标下一层子节点，目标节点集合包括目标下一层子节点，依次遍历新节点树中除去渲染后的预设节点以外的每个节点，得到最终的目标节点集合。

于一实施例中，确定位于可视区域内的目标节点集合，包括：若当前节点的局部或者全部暴露在可视区域内时，确定当前节点为目标节点。

上述页面渲染装置1000的详细描述，请参见上述实施例中相关方法步骤的描述，其实现原理和技术效果类似，本实施例此处不再赘述。

本申请实施例还提供一种计算机可读存储介质，计算机可读存储介质中存储有计算机执行指令，当处理器执行计算机执行指令时，实现前述任一实施例的方法。

本申请实施例还提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现前述任一实施例的方法。

在本申请所提供的几个实施例中，应该理解到，所揭露的设备和方法，可以通过其它的方式实现。例如，以上所描述的设备实施例仅仅是示意性的，例如，模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个模块可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。

上述以软件功能模块的形式实现的集成的模块，可以存储在一个计算机可读取存储介质中。上述软件功能模块存储在一个存储介质中，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）或处理器执行本申请各个实施例方法的部分步骤。

应理解，上述处理器可以是中央处理单元（Central Processing Unit，简称CPU），还可以是其它通用处理器、数字信号处理器（Digital Signal Processor，简称DSP）、专用集成电路（Application Specific Integrated Circuit，简称ASIC）等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合申请所公开的方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。存储器可能包含高速RAM存储器，也可能还包括非易失性存储NVM，例如至少一个磁盘存储器，还可以为U盘、移动硬盘、只读存储器、磁盘或光盘等。

上述存储介质可以是由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器（SRAM），电可擦除可编程只读存储器（EEPROM），可擦除可编程只读存储器（EPROM），可编程只读存储器（PROM），只读存储器（ROM），磁存储器，快闪存储器，磁盘或光盘。存储介质可以是通用或专用计算机能够存取的任何可用介质。

一种示例性的存储介质耦合至处理器，从而使处理器能够从该存储介质读取信息，且可向该存储介质写入信息。当然，存储介质也可以是处理器的组成部分。处理器和存储介质可以位于专用集成电路(Application Specific Integrated Circuits，简称ASIC)中。当然，处理器和存储介质也可以作为分立组件存在于电子设备或主控设备中。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质（如ROM/RAM、磁碟、光盘）中，包括若干指令用以使得一台终端设备（可以是手机，计算机，服务器，空调器，或者网络设备等）执行本申请各个实施例的方法。

本申请的技术方案中，所涉及的用户数据等信息的收集、存储、使用、加工、传输、提供和公开等处理，均符合相关法律法规的规定，且不违背公序良俗。

以上仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。

Claims (11)

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

获取待处理页面的原始节点树，所述原始节点树包括多个原始节点；

给所述多个原始节点配置至少一个预设节点，生成所述待处理页面的新节点树，在所述新节点树中，一个所述预设节点包裹至少两个原始节点；

根据所述新节点树中的所述预设节点，确定终端的可视区域；

根据所述新节点树、渲染后的预设节点和所述可视区域渲染所述待处理页面。

2.根据权利要求1所述的方法，其特征在于，所述获取待处理页面的原始节点树，所述原始节点树包括多个原始节点，包括：

获取待处理的页面数据；

解析所述页面数据，得到所述页面数据对应的原始节点树，所述原始节点树中包括多个原始节点。

3.根据权利要求1所述的方法，其特征在于，所述给所述多个原始节点配置至少一个预设节点，生成所述待处理页面的新节点树，包括：

根据所述多个原始节点与所述预设节点之间的预设映射关系，将预设节点作为父节点配置给所述多个原始节点，生成所述待处理页面的新节点树。

4.根据权利要求3所述的方法，其特征在于，所述原始节点树包括多层原始节点；所述根据所述多个原始节点与所述预设节点之间的预设映射关系，将预设节点作为父节点配置给所述多个原始节点，生成所述待处理页面的新节点树，包括：

根据所述预设映射关系，将所述预设节点配置为所述多层原始节点中的第一层原始节点的父节点，生成所述待处理页面的所述新节点树。

5.根据权利要求1所述的方法，其特征在于，所述根据所述新节点树、渲染后的预设节点和所述可视区域渲染所述待处理页面，包括：

遍历所述新节点树中除去所述渲染后的预设节点以外的每个节点，确定位于所述可视区域内的目标节点集合；

从所述新节点树中删除其他节点，得到更新后的新节点树，所述其他节点是所述新节点树中除去所述目标节点集合以及每个目标节点的子节点以外的节点；

根据所述更新后的新节点树渲染所述目标节点集合中的目标节点和每个所述目标节点的子节点。

6.根据权利要求5所述的方法，其特征在于，所述遍历所述新节点树中除去所述渲染后的预设节点以外的每个节点，确定位于所述可视区域内的目标节点集合，包括：

从所述渲染后的预设节点中确定位于终端的可视区域内的目标预设节点，所述目标节点集合包括所述目标预设节点。

7.根据权利要求6所述的方法，其特征在于，所述遍历所述新节点树中除去所述渲染后的预设节点以外的每个节点，确定位于所述可视区域内的目标节点集合，还包括：

从所述目标预设节点的子节点中确定位于所述可视区域内的目标子节点，所述目标节点集合包括所述目标子节点。

8.根据权利要求7所述的方法，其特征在于，所述遍历所述新节点树中除去所述渲染后的预设节点以外的每个节点，确定位于所述可视区域内的目标节点集合，还包括：

从所述目标子节点的下一层子节点中确定位于所述可视区域内的目标下一层子节点，所述目标节点集合包括所述目标下一层子节点，依次遍历所述新节点树中除去渲染后的预设节点以外的每个节点，得到最终的所述目标节点集合。

9.根据权利要求7所述的方法，其特征在于，所述确定位于所述可视区域内的目标节点集合，包括：

若当前节点的局部或者全部暴露在所述可视区域内时，确定所述当前节点为目标节点。

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

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；

其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述电子设备执行权利要求1-9任一项所述的方法。

11.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机执行指令，当处理器执行所述计算机执行指令时，实现如权利要求1-9任一项所述的方法。

Images