页面加载方法、装置和电子设备制造方法及图纸

本申请公开了一种页面加载方法、装置和电子设备，属于通信技术领域，解决电子设备在加载页面过程中，导致页面卡顿，甚至电子设备卡死或崩溃的问题。具体的，该方法包括：在目标界面显示目标页面的情况下，获取所述目标页面对应的节点树，所述节点树包含至少一个节点；在满足预定条件的情况下，移除未在所述目标界面的可视区域显示的页面内容对应的目标节点；其中，所述目标节点为所述节点树中的节点。本申请应用于页面加载过程中。请应用于页面加载过程中。请应用于页面加载过程中。

Page loading method, device and electronic device

【技术实现步骤摘要】
页面加载方法、装置和电子设备


[0001]本申请属于通信
，具体涉及一种页面加载方法、装置和电子设备。

技术介绍

[0002]随着计算机技术以及通信技术的发展，越来越多的业务通过电子设备的网页页面实现。相关技术中，通常会通过超文本5.0(HTML5，H5)技术来实现网页页面的快速展示。同时，在电子设备展示H5长页面时，用户可以通过在显示屏上执行下滑操作，来触发电子设备加载该H5长页面的页面内容。
[0003]然而，当上述下滑操作的持续时间过长时，会导致该H5长页面的页面长度不断增加，从而导致电子设备需要对该H5长页面渲染重绘的数据也不断增加，进而导致电子设备需要消耗的内存和cpu性能也不断增大，最终导致该长页面卡顿，甚至该页面对应的web客户端卡死或奔溃。

技术实现思路

[0004]本申请实施例的目的是提供一种页面加载方法、装置和电子设备，能够解决电子设备在加载页面过程中，导致页面卡顿，甚至电子设备卡死或崩溃的问题。
[0005]为了解决上述技术问题，本申请是这样实现的：
[0006]第一方面，本申请实施例提供了一种页面加载方法，该方法包括：在目标界面显示目标页面的情况下，获取目标页面对应的节点树，节点树包含至少一个节点；在满足预定条件的情况下，移除未在目标界面的可视区域显示的页面内容对应的目标节点；其中，所述目标节点为节点树中的节点。
[0007]第二方面，本申请实施例提供了页面加载装置，该装置包括：获取模块，用于在目标界面显示目标页面的情况下，获取目标页面对应的节点树，节点树包含多至少一个节点；移除模块，用于在满足预定条件的情况下，移除获取模块获得的未在目标界面的可视区域显示的页面内容对应的目标节点；其中，所述目标节点为节点树中的节点。
[0008]第三方面，本申请实施例提供了一种电子设备，该电子设备包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的程序，该程序被所述处理器执行时实现如第一方面所述的方法的步骤。
[0009]第四方面，本申请实施例提供了一种可读存储介质，所述可读存储介质上存储程序，所述程序被处理器执行时实现如第一方面所述的方法的步骤。
[0010]第五方面，本申请实施例提供了一种芯片，所述芯片包括处理器和通信接口，所述通信接口和所述处理器耦合，所述处理器用于运行程序，实现如第一方面所述的方法。
[0011]第六方面，本申请实施例提供了一种计算机程序产品，该程序产品被存储在非易失的存储介质中，该程序产品被至少一个处理器执行以实现如第一方面所述的方法。
[0012]在本申请实施例中，在目标界面显示目标页面的情况下，电子设备获取目标页面对应的节点树，由于节点树中的节点越多，则电子设备消耗的内存和cpu性能就越大，因此，
在满足预定条件的情况下，移除未在目标界面的可视区域显示的页面内容对应的节点树中的节点，从而释放内存，避免目标节点消耗电子设备的内存和cpu性能，进而避免了电子设备在页面加载过程中，出现页面卡顿，甚至页面对应的web客户端卡死或崩溃的问题。同时，在页面加载过程中，由于控制了节点树中的节点数量，从而保证节点树始终保持在较低的数量层级，进而控制电子设备消耗的内存和cpu性能始终保持在一定范围内，因此，使得待用户查看的页面内容顺利加载并显示在电子设备的目标界面。
附图说明
[0013]图1为本申请实施例提供的一种页面加载方法的流程示意图之一；
[0014]图2为本申请实施例提供的页面加载方法对应的目标页面的内容块在目标界面的显示效果示意图；
[0015]图3为本申请实施例提供的页面加载方法对应的内容块移动示意图之一；
[0016]图4为本申请实施例提供的页面加载方法对应的内容块移动示意图之二；
[0017]图5为本申请实施例提供的页面加载方对应的内容块移动示意图之三；
[0018]图6为本申请实施例提供的一种页面加载方法的流程示意图之二；
[0019]图7为本申请实施例提供的页面加载装置的结构示意图之一；
[0020]图8为本申请实施例提供的页面加载装置的结构示意图之二；
[0021]图9为本申请实施例提供的电子设备的硬件示意图之一；
[0022]图10为本申请实施例提供的电子设备的硬件示意图之二。
具体实施方式
[0023]下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
[0024]本申请的说明书和权利要求书中的术语“第一”、“第二”等是用于区别类似的对象，而不用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施，且“第一”、“第二”等所区分的对象通常为一类，并不限定对象的个数，例如第一对象可以是一个，也可以是多个。此外，说明书以及权利要求中“和/或”表示所连接对象的至少其中之一，字符“/”，一般表示前后关联对象是一种“或”的关系。
[0025]以下将对本申请实施例中提及的技术术语进行示例性说明。
[0026]1)节点树
[0027]示例性的，节点树是指是一种数据结构树，它是由n(n>＝1)个有限结点组成一个具有层次关系的集合，通常包含DOM树、CSSOM树等。
[0028]一般的，一个页面对应一个节点树，每个节点树中包含多个节点。
[0029]2)数据队列
[0030]通常情况下，一个节点树对应一个数据队列，该数据队列中存储多条数据，一条数据对应上述节点树中的一个节点。
[0031]通常，如果要加载一个页面，首先，需要从服务器中获取该页面对应的数据列表中的数据，然后将获取到的数据追加至该页面对应的数据队列中，基于数据队列中的数据，生成对应的节点，然后基于得到的节点构建节点树，最后将节点树渲染成完整的页面(即为要被加载的页面)。
[0032]以下将以H5长页面为例，对页面的数据队列的获取过程进行示例性说明。
[0033]示例1，页面加载装置在接收到H5长页面的页面加载请求后，该页面加载装置可以从服务器中获取该H5长页面对应数据列表中的第一页数据，该第一页数据中包含多条数据(比如包含10条数据)。然后，按照该第一页数据中的多条数据生成该H5长页面对应的数据队列，该数据队列中的数据是按照该第一页数据中数据的排列顺序来排序的。接着，当页面加载装置在接收到用户继续查看H5长页面的请求后，页面加载装置将从服务器中获取H5长页面对应数据列表中的第二页数据，并将第二页数据中的数据追加至该数据队列中。
[0034]进一步的，以下将结合上述示例1，对如何利用该H5长页面的数据队列来获取渲染后的H5长页面的过程进行示例性说明。
[0本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面加载方法，其特征在于，所述方法包括：在目标界面显示目标页面的情况下，获取所述目标页面对应的节点树，所述节点树包含至少一个节点；在满足预定条件的情况下，移除未在所述目标界面的可视区域显示的页面内容对应的目标节点；其中，所述目标节点为节点树中的节点。2.根据权利要求1所述的方法，其特征在于，所述满足预定条件包括以下任一项：所述节点树中包含的节点数量满足预定数量；接收到用户的第一输入；其中，所述第一输入用于向所述节点树插入第一节点。3.根据权利要求1所述的方法，其特征在于，所述节点树是基于所述目标页面的数据队列生成的；其中，所述数据队列包含M个第一数据组；每个第一数据组中包含至少两条数据；所述数据队列中的M个第一数据组的顺序、以及每个第一数据组中的各条数据的顺序，均是按照所述目标页面的页面内容的位置排列的，M为正整数；一个节点对应一个第一数据组。4.根据权利要求3所述的方法，其特征在于，所述方法还包括：接收用户的第二输入；响应于所述第二输入，基于所述数据队列中的N个第一数据组，生成与所述N个第一数据组中各个第一数据组分别对应的第二节点，并将第二节点插入所述节点树；其中，所述第二节点为所述节点树中在所述可视区域内待显示的节点；N为大于等于1，并小于M的正整数。5.根据权利要求3所述的方法，其特征在于，所述方法还包括：通过次线程执行第一操作；通过主线程执行第二操作；其中，所述第一操作为：为所述节点树中的已插入节点或待插入的节点对应的数据组添加渲染标记；所述第二操作为：移除所述节点树中的节点或向所述节点树中插入节点。6.根据权利要求1所述的方法，其特征在于，所述目标节点为：所述节点树中第一时间满足第一条件的节点；其中，任一节点的第一时间为：所述任一节点未在所述可视区域内显示的持续时间。7.一种页面加载装置，其特征在于，所述装置包括：获取模块，用于在目标界面显示目标页面的情况下，获取所述目标页面对应的节点树，所述节点树包含至少一个节点；移除模块，用于在满足预定条件的情况下，移除获取模块获得的未在所述目标界面的可视区域显示的页面内容对应的目标节点；其中，所述...

【专利技术属性】
技术研发人员：方晓华，
申请(专利权)人：维沃移动通信有限公司，
类型：发明
国别省市：