页面加载方法、装置和电子设备与流程

1.本申请属于通信技术领域，具体涉及一种页面加载方法、装置和电子设备。


背景技术：

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


技术实现要素：

4.本申请实施例的目的是提供一种页面加载方法、装置和电子设备，能够解决电子设备在加载页面过程中，导致页面卡顿，甚至电子设备卡死或崩溃的问题。
5.为了解决上述技术问题，本申请是这样实现的：
6.第一方面，本申请实施例提供了一种页面加载方法，该方法包括：在目标界面显示目标页面的情况下，获取目标页面对应的节点树，节点树包含至少一个节点；在满足预定条件的情况下，移除未在目标界面的可视区域显示的页面内容对应的目标节点；其中，所述目标节点为节点树中的节点。
7.第二方面，本申请实施例提供了页面加载装置，该装置包括：获取模块，用于在目标界面显示目标页面的情况下，获取目标页面对应的节点树，节点树包含多至少一个节点；移除模块，用于在满足预定条件的情况下，移除获取模块获得的未在目标界面的可视区域显示的页面内容对应的目标节点；其中，所述目标节点为节点树中的节点。
8.第三方面，本申请实施例提供了一种电子设备，该电子设备包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的程序，该程序被所述处理器执行时实现如第一方面所述的方法的步骤。
9.第四方面，本申请实施例提供了一种可读存储介质，所述可读存储介质上存储程序，所述程序被处理器执行时实现如第一方面所述的方法的步骤。
10.第五方面，本申请实施例提供了一种芯片，所述芯片包括处理器和通信接口，所述通信接口和所述处理器耦合，所述处理器用于运行程序，实现如第一方面所述的方法。
11.第六方面，本申请实施例提供了一种计算机程序产品，该程序产品被存储在非易失的存储介质中，该程序产品被至少一个处理器执行以实现如第一方面所述的方法。
12.在本申请实施例中，在目标界面显示目标页面的情况下，电子设备获取目标页面对应的节点树，由于节点树中的节点越多，则电子设备消耗的内存和cpu性能就越大，因此，
在满足预定条件的情况下，移除未在目标界面的可视区域显示的页面内容对应的节点树中的节点，从而释放内存，避免目标节点消耗电子设备的内存和cpu性能，进而避免了电子设备在页面加载过程中，出现页面卡顿，甚至页面对应的web客户端卡死或崩溃的问题。同时，在页面加载过程中，由于控制了节点树中的节点数量，从而保证节点树始终保持在较低的数量层级，进而控制电子设备消耗的内存和cpu性能始终保持在一定范围内，因此，使得待用户查看的页面内容顺利加载并显示在电子设备的目标界面。
附图说明
13.图1为本申请实施例提供的一种页面加载方法的流程示意图之一；
14.图2为本申请实施例提供的页面加载方法对应的目标页面的内容块在目标界面的显示效果示意图；
15.图3为本申请实施例提供的页面加载方法对应的内容块移动示意图之一；
16.图4为本申请实施例提供的页面加载方法对应的内容块移动示意图之二；
17.图5为本申请实施例提供的页面加载方对应的内容块移动示意图之三；
18.图6为本申请实施例提供的一种页面加载方法的流程示意图之二；
19.图7为本申请实施例提供的页面加载装置的结构示意图之一；
20.图8为本申请实施例提供的页面加载装置的结构示意图之二；
21.图9为本申请实施例提供的电子设备的硬件示意图之一；
22.图10为本申请实施例提供的电子设备的硬件示意图之二。
具体实施方式
23.下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
24.本申请的说明书和权利要求书中的术语“第一”、“第二”等是用于区别类似的对象，而不用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施，且“第一”、“第二”等所区分的对象通常为一类，并不限定对象的个数，例如第一对象可以是一个，也可以是多个。此外，说明书以及权利要求中“和/或”表示所连接对象的至少其中之一，字符“/”，一般表示前后关联对象是一种“或”的关系。
25.以下将对本申请实施例中提及的技术术语进行示例性说明。
26.1)节点树
27.示例性的，节点树是指是一种数据结构树，它是由n(n>＝1)个有限结点组成一个具有层次关系的集合，通常包含dom树、cssom树等。
28.一般的，一个页面对应一个节点树，每个节点树中包含多个节点。
29.2)数据队列
30.通常情况下，一个节点树对应一个数据队列，该数据队列中存储多条数据，一条数据对应上述节点树中的一个节点。
31.通常，如果要加载一个页面，首先，需要从服务器中获取该页面对应的数据列表中的数据，然后将获取到的数据追加至该页面对应的数据队列中，基于数据队列中的数据，生成对应的节点，然后基于得到的节点构建节点树，最后将节点树渲染成完整的页面(即为要被加载的页面)。
32.以下将以h5长页面为例，对页面的数据队列的获取过程进行示例性说明。
33.示例1，页面加载装置在接收到h5长页面的页面加载请求后，该页面加载装置可以从服务器中获取该h5长页面对应数据列表中的第一页数据，该第一页数据中包含多条数据(比如包含10条数据)。然后，按照该第一页数据中的多条数据生成该h5长页面对应的数据队列，该数据队列中的数据是按照该第一页数据中数据的排列顺序来排序的。接着，当页面加载装置在接收到用户继续查看h5长页面的请求后，页面加载装置将从服务器中获取h5长页面对应数据列表中的第二页数据，并将第二页数据中的数据追加至该数据队列中。
34.进一步的，以下将结合上述示例1，对如何利用该h5长页面的数据队列来获取渲染后的h5长页面的过程进行示例性说明。
35.示例2，页面加载装置将数据队列中的数据结合预设html模板，得到该数据队列中的每条数据对应的节点，然后基于这些节点构建对应dom树，最后，将dom树进行渲染，得到渲染后的h5长页面(即为要被加载的h5长页面)。进一步的，在对dom树进行渲染后，得到该dom树中每个节点对应的页面内容块(应注意的是，该页面内容块为经渲染后可直接显示的页面内容)。例如，若该dom树中包含x个节点，则得到x个页面内容块。
36.应注意的是，本申请实施例中的所有页面内容块可以简称为内容块。
37.下面结合附图，通过具体的实施例及其应用场景对本申请实施例提供的页面加载方法进行详细地说明。
38.本申请实施例提供一种页面加载方法。如图1所示，该方法可以包括下述的步骤101至步骤102。
39.步骤101、页面加载装置在目标界面显示目标页面的情况下，获取上述目标页面对应的节点树。
40.在本申请实施例中，上述节点树包含至少一个节点。
41.可选地，本申请实施例中，上述目标页面可以为长页面(如，h5长页面)。示例性的，在用户通过web客户端加载了一个h5长页面时，目标界面将会显示目标页面，页面加载装置获取上述目标页面对应的节点树，进而得到该节点树中的节点。
42.可选地，本申请实施例中，上述目标页面是由多个内容块组成。
43.需要说明的是，上述目标页面的节点树包含多个节点，每个节点在该目标页面的数据队列中对应的数据被渲染后生成一个内容块，即每个节点对应一个内容块。
44.应注意的是，本申请实施例中，页面加载装置在目标界面显示目标页面之前，可以先计算可视区域的高度(即screen_hight)，然后基于可视区域的高度，获得目标页面对应的数据队列中满足特定条件的目标数据，最后，将满足特定条件的目标数据对应的页面内容块显示在目标界面的可视区域上。其中，该目标数据对应的页面内容块的最小高度(可称为min_height)之和大于等于上述screen_hight。可以理解，上述目标页面包含的节点对应的内容块的最小高度之和大于等于目标界面的可视区域的高度，如图2中的内容块1至内容块4的高度和大于可视区域的高度。
45.举例说明，假设h5长页面对应的数据队列中包含10条数据，若页面加载装置从该数据队列中选取满足特定条件的连续的前4条数据，则将这4条数据对应的页面内容块显示在目标界面的可视区域上。具体的，结合示例1，页面加载装置在接收到h5长页面的页面加载请求后，页面加载装置先计算可视区域的高度(即screen_hight)，然后，基于该screen_hight确定这4个数据是否满足特定条件，如，若这4条数据对应的页面内容块的min_height相加为300+300+200+400＝1200px，且1200px大于1000px(即screen_hight)，则判定这4条数据满足特定条件。
46.步骤102、在满足预定条件的情况下，页面加载装置移除未在目标界面的可视区域显示的页面内容对应的目标节点；其中，目标节点为节点树中的节点。
47.在本申请实施例中，上述可视区域为用户通过电子设备的可视窗口能够查看到目标页面的区域。通常情况下，对于用户来说，其关注的页面内容只是目标界面的可视区域中显示的那部分节点对应的页面内容，其它部分(即未在目标界面的可视区域显示的节点树中的目标节点)都属于被隐藏或遮挡部分是不被用户关注的，是可以不需要渲染在页面的节点树里的。因此，页面加载装置移除未在目标界面的可视区域显示的节点树中的目标节点，避免不需要被关注的节点消耗内存和cpu性能。
48.可选地，本申请实施例中，上述满足预定条件包括以下任一项：上述节点树中包含的节点数量满足预定数量，页面加载装置接收到用户的第一输入。
49.示例性的，上述第一输入用于向上述节点树插入第一节点。
50.在一种示例中，上述第一输入可以为手势输入、语音输入或其他可行性输入。具体的，上述手势输入可以包括滑动输入(如，在目标界面上的滑动输入)，或者，在目标界面中的对应位置的点击输入(比如在目标界面的上半部分的点击输入或在下半部分的点击输入)。
51.在一种示例中，上述第一输入为：在显示目标页面的情况下用于继续加载该目标页面的页面内容的输入。例如，当用户需要继续查看页面内容时，用户会在可视区域执行下滑操作，以使可视区域内的页面内容随着用户的下滑操作实时更新，同时，节点树中的节点数量也会实时增加。
52.需要说明的是，上述预定数量的大小可以根据电子设备内存以及cpu性能进行设置，具体的，以能够正常加载页面内容，又避免过多的占用电子设备内存以及cpu性能为原则进行设置。如此，通过根据不同电子设备的情况设置不同大小的预定数量，并在节点树中的节点数量满足预定数量时，页面加载装置移除未在目标界面的可视区域显示的节点树中的目标节点，如此，本申请实施例既保证了电子设备的内存和cpu性能，又避免页面加载过程出现卡顿等影响页面正常加载的情况。
53.可选地，在本申请实施例中，上述目标节点为：当前目标界面的可视区域中将要被隐藏的内容块对应的节点。
54.示例性的，上述将要被隐藏的内容块是：页面加载装置通过监测可视区域中显示的各个内容块的顶部和底部分别与该可视区域的头部间的距离，以及各个内容块的顶部和底部分别与可视区域的尾部的间距离来确定的。
55.示例性的，在用户查看页面内容时，页面加载装置实时监测可视区域内的每个内容块的位置。如，如图5所示，以内容块3为例，页面加载装置实时监测该内容块3的顶部与可
视区域的头部的距离1(可称为top_gap_1)、内容块3的底部与可视区域的头部的距离2(可称为top_gap_2)、内容块3的顶部与可视区域的尾部的距离3(可称为bottom_gap_1)、内容块3的底部与可视区域的尾部的距离4(可称为bottom_gap_2)。
56.举例说明，以第一输入为向上滑动的滑动输入为例，如图3所示，当用户向上滑动页面时，根据监测的每个内容块的top_gap_1、top_gap_2、bottom_gap_1和bottom_gap_2的值，确定每个内容块对应的目标节点是否已经完全隐藏在视窗外(即未在目标界面的可视区域显示)，并将被隐藏(即未在目标界面的可视区域显示)的节点中的、满足预定条件的目标节点从页面的节点树中移除。例如，结合图3，如图5所示，图5中的内容块2在页面向上滑动的过程中，其top_gap_2的值(即图5中内容块2的距离2)会逐渐减少，当其值小于等于0时，则可以将内容块2对应的节点(即上述目标节点)从页面的dom树中移除释放内存。
57.举例说明，以第一输入为向下滑动的滑动输入为例，如图4所示，当用户向下滑动页面时，反向判断各内容块的顶部和底部分别与可视区域的头部和尾部的距离，来确定每个内容块对应的目标节点是否已经完全隐藏在视窗外，并将被隐藏的节点中的、满足预定条件的目标节点从页面的节点树中移除。例如，结合图4，参照图5，图5中的内容块5在页面向下滑动的过程中，其bottom_gap_1的值(即图5中内容块5的距离3)会逐渐减少，当其值小于等于0时，则可以将内容块5对应的节点(即上述目标节点)从页面的dom树中移除释放内存。
58.如此，通过移除节点树中被隐藏的目标节点，避免不需要被关注的节点消耗内存和cpu性能，从而在加载页面的过程中，不会出现页面越来越卡的问题。
59.可选地，在本申请实施例中，上述目标节点为：第一时间满足第一条件的目标节点。其中，任一节点的第一时间为：上述任一节点未在上述可视区域内显示的持续时间。
60.在一种示例中，可以为不同节点设置不同的第一条件。
61.例如，针对被重复查看的节点(即被隐藏后重新加载查看后，再次被隐藏的节点)，可以按照该节点在第一次被隐藏的时间至用户重新查看后第二次被隐藏的时间之间的时间间隔设置第一条件，从而避免将用户可能会重复查看的节点删除，避免后续重复查看时需要再次加载，节省了页面加载时间。
62.如，节点1在第一次被隐藏的时间至用户重新查看后第二次被隐藏的时间的时间间隔为5min，那么，当检测到该节点1未在上述可视区域内显示的持续时间超过5min分钟时，则可以将该节点1从节点树中移除。可以理解的是，在节点1未在上述可视区域内显示的持续时间超过5min分钟时，用户在预定时间内不会有再次查看节点1的需求。如此，本申请实施例既满足了用户快速查看历史页面内容的需求，又合理利用内存，避免了不被用户关注的页面内容消耗内存和cpu性能。
63.本申请实施例提供的页面加载方法，在目标界面显示目标页面的情况下，页面加载装置获取目标页面对应的节点树，其中，节点树包含多个节点；在满足预定条件的情况下，页面加载装置移除未在目标界面的可视区域显示的节点树中的目标节点，从而解决了页面加载装置在页面加载过程中，导致页面卡顿，甚至该页面对应的web客户端卡死或崩溃的问题。本申请实施例在页面加载过程中，通过页面加载装置控制节点树中的节点数量，进而控制电子设备消耗的内存和cpu性能始终保持在一定范围内，因此，使得待用户查看的页面内容顺利加载并显示在目标界面上。
64.可选地，在本申请实施例中，上述节点树是基于目标页面的数据队列生成的；其中，上述数据队列包含m个第一数据组；每个第一数据组中包含至少两条数据；上述数据队列中的m个第一数据组的顺序、以及每个第一数据组中的各条数据的顺序，均是按照所述目标页面的页面内容的位置排列的，m为正整数；一个节点对应一个第一数据组。
65.示例性的，一个第一数据组中包含至少两条数据，也就是说，一个节点对应至少两条数据，如此，页面加载装置向节点树中插入的节点或从节点树中移除的节点，是基于至少两条数据得到的节点。进一步的，在页面内容加载需求频率较高时，避免了节点树被频繁的更新(即插入节点或移除节点)，该实施例在dom树层级数量、和页面加载装置对于dom树的操作频繁程度上寻求一个平衡，从而在用户频繁上下滑动页面时会有一个更好的性能，从而提升用户体验。
66.进一步可选地，在本申请实施例中，为了快速展示页面内容，页面加载装置还向节点树中插入需要在可视区域内显示的待显示节点。
67.示例性的，基于此，如图6所示，在本申请实施例中，上述步骤101之后，步骤102之前，还包括步骤201至步骤202。
68.步骤201、页面加载装置接收用户的第二输入。
69.其中，上述第二输入用于向上述节点树中插入节点。示例性的，上述第二输入可以为手势输入或语音输入或其他可行性输入。
70.步骤202、页面加载装置响应于上述第二输入，基于上述数据队列中的n个第一数据组，生成与n个第一数据组中的各个第一数据组分别对应的第二节点，并将第二节点插入上述节点树。
71.其中，n为大于等于1，并小于m的正整数。
72.可以理解的是，上述第二节点为与n个第一数据组分别对应的节点，如此，通过向节点树中预先插入第二节点，在用户查看第二节点对应的页面内容时，能够保证第二节点对应的页面内容在目标界面快速显示。
73.示例性的，页面加载装置在接收到第二输入后，结合当前渲染页面的最后一个内容块的顶部和底部分别与可视区域的头部和尾部的距离，向节点树中插入第二节点。
74.举例说明，以节点树为dom为例，假设第二输入为向上滑动输入，结合图3，参照图5，根据目标页面的最后一个内容块5的bottom_gap_2值(即图5中内容块5的距离4)，当其快接近阈值时(阈值可以设为0)，则将数据队列中该内容块5对应第一数据组之后的一个或多个的第一数据组，同时渲染成dom，插入到该目标页面的dom树底部，当用户继续下滑，同理执行上面的操作。
75.举例说明，以节点树为dom为例，假设第二输入为向下滑动输入，结合图5，根据目标页面的第一个内容块(如图4，第一个内容块为内容块2，即该内容块2为目标页面的最后一个内容块)的top_gap_1值(即图5中内容块2的距离1)，当其快接近阈值时(阈值可以设为0)，则将数据队列中该内容块对应数据组的前一个或多个第一数据组，同时渲染成dom，插入到页面的dom树最前面，当用户继续下滑，直至数据队列中的第一个第一数据组也被渲染插入页面后则终止。
76.进一步可选地，为了提升本申请实施例的性能，上述方法还包括步骤301和步骤302。
77.步骤301、页面加载装置通过次线程执行第一操作。
78.步骤302、页面加载装置通过主线程执行第二操作。
79.其中，上述第一操作可以为：为上述节点树中的已插入节点或待插入的第二节点对应的数据组添加渲染标记；上述第二操作可以为：移除上述节点树中的节点或向上述节点树中插入第二节点。
80.示例性的，可以在数据队列的相应数据组中添加渲染标记，例如，在相应数据组中添加isrender＝false，或isrender＝true，其中，false表示未渲染，true表示已渲染。
81.示例性的，第一操作可以为上述节点树中的已插入节点对应的数据组添加渲染标记，其中的已插入节点在被待插入节点树之前，第一操作已经预先为这些节点对应的数据组添加了渲染标记isrender＝true。
82.示例性的，上述第一操作还可以包括：在目标节点从节点树中被移除之后，将被移除的目标节点在在数据队列中对应的第一数据组的isrender标记由true改为false；或者，在待插入的第二节点被插入到节点树之前，将待插入的第二节点对应的第一数据组的isrender标记由false改为true。
83.示例性的，上述第一操作还可以包括：在页面加载装置工作过程中，在数据队列中进行数据查找，并将数据与对应的模板结合的操作。
84.示例性的，上述第二操作还可以包括：对节点树进行渲染操作。
85.如此，在页面加载过程中，通过次线程和主线程执行不同的操作，提升了页面加载的可靠性。
86.需要说明的是，步骤301和步骤302并不限定具体的执行顺序，可以在目标页面加载过程中持续进行。
87.需要说明的是，本申请实施例提供的页面加载方法，执行主体可以为装置、电子设备、或者该电子设备中的用于执行页面加载方法的控制模块。本申请实施例中以电子设备执行页面加载方法为例，说明本申请实施例提供的用于实现页面加载方法的电子设备。
88.如图7所示，本申请实施例提供一种页面加载装置。该页面加载装置包括：获取模块401和移除模块402，其中：
89.获取模块401，用于在目标界面显示目标页面的情况下，获取上述目标页面对应的节点树，上述节点树包含至少一个节点。
90.移除模块402，用于在满足预定条件的情况下，移除获取模块获得的未在上述目标界面的可视区域显示的页面内容对应的目标节点；其中，目标节点为节点树中的节点。
91.可选地，上述目标节点为：上述节点树中第一时间满足第一条件的目标节点；其中，任一节点的第一时间为：上述任一节点未在上述可视区域内显示的持续时间。
92.可选地，上述满足预定条件包括以下任一项：所述节点树中包含的节点数量满足预定数量；接收到用户的第一输入。
93.其中，所述第一输入用于向所述节点树插入第一节点。
94.可选地，上述节点树是基于所述目标页面的数据队列生成的。
95.其中，上述数据队列包含m个第一数据组；每个第一数据组中包含至少两条数据；数据队列中的m个第一数据组的顺序、以及每个第一数据组中的各条数据的顺序，均是按照上述目标页面的页面内容的位置排列的，m为正整数；一个节点对应一个第一数据组。
96.可选地，如图8所示，上述装置还可以包括：接收模块和生成模块，其中：
97.接收模块403，用于接收用户的第二输入。
98.生成模块404，用于响应于上述接收模块接收到的第二输入，基于上述数据队列中的n个第一数据组，生成与上述n个第一数据组中各个第一数据组分别对应的第二节点，并将第二节点插入上述获取模块获得的节点树中。
99.其中，上述第二节点为上述节点树中在上述可视区域内待显示的节点；n为大于等于1，并小于m的正整数。
100.可选地，上述装置还可以包括：执行模块，用于通过次线程执行第一操作，通过主线程执行第二操作。
101.其中，上述第一操作为：为所述节点树中的已插入节点或待插入的节点对应的数据组添加渲染标记；上述第二操作为：移除所述节点树中的节点或向所述节点树中插入节点。
102.在本申请实施例提供的一种页面加载装置，在目标界面显示目标页面的情况下，页面加载装置可以获取目标页面对应的节点树，在满足预定条件的情况下，移除未在目标界面的可视区域显示的节点树中的目标节点，从而释放内存，避免目标节点消耗电子设备的内存和cpu性能。从而避免了电子设备在页面加载过程中，出现页面卡顿，甚至页面对应的web客户端卡死或崩溃的问题。同时，在页面加载过程中，由于页面加载装置控制了节点树中的节点数量，进而控制电子设备消耗的内存和cpu性能始终保持在一定范围内，因此，使得待用户查看的页面内容顺利加载并显示在电子设备的目标界面。
103.本申请实施例中的页面加载装置可以是装置，也可以是终端中的部件、集成电路、或芯片。该装置可以是移动电子设备，也可以为非移动电子设备。示例性的，移动电子设备可以为手机、平板电脑、笔记本电脑、掌上电脑、车载电子设备、可穿戴设备、超级移动个人计算机(ultra
‑
mobile personal computer，umpc)、上网本或者个人数字助理(personal digital assistant，pda)等，非移动电子设备可以为、个人计算机(personal computer，pc)、电视机(television，tv)、柜员机或者自助机等，本申请实施例不作具体限定。
104.本申请实施例中的页面加载装置可以为具有操作系统的装置。该操作系统可以为安卓(android)操作系统，可以为ios操作系统，还可以为其他可能的操作系统，本申请实施例不作具体限定。
105.本申请实施例提供的页面加载装置能够实现上述方法实施例实现的各个过程，为避免重复，这里不再赘述。
106.可选地，如图9所示，本申请实施例还提供一种电子设备500，包括处理器501，存储器502，存储在存储器502上并可在所述处理器501上运行的程序或指令，该程序或指令被处理器501执行时实现上述页面加载方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
107.需要说明的是，本申请实施例中的电子设备包括上述所述的移动电子设备和非移动电子设备。
108.图10为实现本申请实施例的一种电子设备的硬件结构示意图。
109.该电子设备1000包括但不限于：射频单元1001、网络模块1002、音频输出单元1003、输入单元1004、传感器1005、显示单元1006、用户输入单元1007、接口单元1008、存储
器1009、以及处理器1010等部件。
110.本领域技术人员可以理解，电子设备1000还可以包括给各个部件供电的电源(比如电池)，电源可以通过电源管理系统与处理器1010逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。图10中示出的电子设备结构并不构成对电子设备的限定，电子设备可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置，在此不再赘述。
111.其中，处理器1010，用于：在目标界面显示目标页面的情况下，获取目标页面对应的节点树，节点树包含多个节点；在满足预定条件的情况下，移除未在目标界面的可视区域显示的页面内容对应的目标节点；其中，目标节点为节点树中的节点。
112.本申请实施例中，电子设备可以在满足预定条件的情况下，移除未在目标界面的可视区域显示的节点树中的目标节点，基于本方案，通过控制节点树中的节点数量，从而保证节点树始终保持在较低的数量层级，进而控制电子设备消耗的内存和cpu性能始终保持在一定范围内，因此，在加载页面的过程中，待用户查看的页面内容能够被顺利加载并显示在电子设备的目标界面，不会出现页面越来越卡的问题。
113.应理解的是，本申请实施例中，射频单元1001可用于收发信息或通话过程中，信号的接收和发送，具体的，将来自基站的下行数据接收后，给处理器1010处理；另外，将上行的数据发送给基站。通常，射频单元1001包括但不限于天线、至少一个放大器、收发信机、耦合器、低噪声放大器、双工器等。此外，射频单元1001还可以通过无线通信系统与网络和其他设备通信。
114.电子设备通过网络模块1002为用户提供了无线的宽带互联网访问，如帮助用户收发电子邮件、浏览网页和访问流式媒体等。
115.音频输出单元1003可以将射频单元1001或网络模块1002接收的或者在存储器1009中存储的音频数据转换成音频信号并且输出为声音。而且，音频输出单元1003还可以提供与电子设备1000执行的特定功能相关的音频输出(例如，呼叫信号接收声音、消息接收声音等等)。音频输出单元1003包括扬声器、蜂鸣器以及受话器等。
116.应理解的是，本申请实施例中，输入单元1004可以包括图形处理器(graphics processing unit，gpu)10041和麦克风10042，图形处理器10041对在视频捕获模式或图像捕获模式中由图像捕获装置(如摄像头)获得的静态图片或视频的图像数据进行处理。显示单元1006可包括显示面板10061，可以采用液晶显示器、有机发光二极管等形式来配置显示面板10061。用户输入单元1007包括触控面板10071以及其他输入设备10072。触控面板10071，也称为触摸屏。触控面板10071可包括触摸检测装置和触摸控制器两个部分。其他输入设备10072可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆，在此不再赘述。存储器1009可用于存储软件程序以及各种数据，包括但不限于应用程序和操作系统。处理器1010可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器1010中。
117.接口单元1008为外部装置与电子设备1000连接的接口。例如，外部装置可以包括有线或无线头戴式耳机端口、外部电源(或电池充电器)端口、有线或无线数据端口、存储卡端口、用于连接具有识别模块的装置的端口、音频输入/输出(i/o)端口、视频i/o端口、耳机
端口等等。接口单元1008可以用于接收来自外部装置的输入(例如，数据信息、电力等等)并且将接收到的输入传输到电子设备1000内的一个或多个元件或者可以用于在电子设备1000和外部装置之间传输数据。
118.另外，电子设备1000包括一些未示出的功能模块，在此不再赘述。
119.本申请实施例还提供一种可读存储介质，可读存储介质上存储有程序或指令，该程序或指令被处理器执行时实现上述页面加载方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
120.其中，所述处理器为上述实施例中所述的电子设备中的处理器。可读存储介质，包括计算机可读存储介质，如计算机只读存储器(read
‑
only memory，rom)、随机存取存储器(random access memory，ram)、磁碟或者光盘等。
121.本申请实施例另提供了一种芯片，所述芯片包括处理器和通信接口，通信接口和所述处理器耦合，处理器用于运行程序或指令，实现上述页面加载方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
122.应理解，本申请实施例提到的芯片还可以称为系统级芯片、系统芯片、芯片系统或片上系统芯片等。
123.本申请实施例提供了一种计算机程序产品，该程序产品被存储在非易失的存储介质中，该程序产品被至少一个处理器执行以实现上述页面加载方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
124.需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。此外，需要指出的是，本申请实施方式中的方法和装置的范围不限按示出或讨论的顺序来执行功能，还可包括根据所涉及的功能按基本同时的方式或按相反的顺序来执行功能，例如，可以按不同于所描述的次序来执行所描述的方法，并且还可以添加、省去、或组合各种步骤。另外，参照某些示例所描述的特征可在其他示例中被组合。
125.通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如rom/ram、磁碟、光盘)中，包括若干指令用以使得一台终端(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例所述的方法。
126.上面结合附图对本申请的实施例进行了描述，但是本申请并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本申请的启示下，在不脱离本申请宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本申请的保护之内。