CN110795444B - Dom数据更新方法、页面更新方法及装置 - Google Patents

Abstract

本公开是关于一种DOM数据更新方法、页面更新方法及装置。其中DOM数据更新方法，包括：获取Fragment节点的更新数据，其中Fragment节点包括至少一个Element节点；重置Fragment节点的全部Element节点关系；对比Fragment节点的原数据与更新数据，若Fragment节点存在可复用节点，则基于更新数据更新可复用节点的数据并将更新后的可复用节点插入到Fragment节点中，其中可复用节点为原数据与更新数据中均存在的Element节点；存储更新后的Fragment节点的数据，作为下次更新的原数据；加载更新后的Fragment节点的数据。通过对DOM树中一些Element节点的复用，从而降低了系统运行成本，提高了性能。

Description

DOM数据更新方法、页面更新方法及装置

技术领域

本公开涉及智能终端领域，尤其涉及DOM数据更新方法、页面更新方法及装置，以及电子设备和计算机可读存储介质。

背景技术

随着智能终端的发展，在智能终端中的应用种类也越来越多，在通过智能终端打开网页页面，或者使用快应用时，需要在框架(framework)中运行页面对应的DOM(DocumentObject Model)，文档对象模型)树来渲染页面内容。DOM是W3C组织推荐的处理可扩展标志语言的标准编程接口，一个页面可以对应于一个DOM树，其是一种抽象语法树(AbstractSyntax Tree，简称AST)，是页面源代码的抽象语法结构的树状表现形式，DOM树具有多种节点。

当新收到页面更新数据时，会根据更新数据修改DOM结构。但是每一次修改都要销毁已有的DOM结构并重新创建DOM结构，导致运算量大，系统运行成本高，如果在同一时间内进行了多次更新会引起线程阻塞导致性能变差。

发明内容

为克服相关技术中存在的问题，本公开提供一种DOM数据更新方法、页面更新方法及装置，以及电子设备和计算机可读存储介质。

根据本公开实施例的第一方面，提供一种DOM数据更新方法，方法包括：获取Fragment节点的更新数据，其中Fragment节点包括至少一个Element节点；重置Fragment节点的全部Element节点关系；对比Fragment节点的原数据与更新数据，若Fragment节点存在可复用节点，则基于更新数据更新可复用节点的数据并将更新后的可复用节点插入到Fragment节点中，其中可复用节点为原数据与更新数据中均存在的Element节点；存储更新后的Fragment节点的数据，作为下次更新的原数据；加载更新后的Fragment节点的数据。

在一例中，对比Fragment节点的原数据与更新数据，还包括：若Fragment节点存在新增节点，则基于更新数据生成新增节点并插入到Fragment节点中，其中新增节点为原数据中不存在且更新数据中存在的Element节点。

在一例中，对比Fragment节点的原数据与更新数据，还包括：若Fragment节点存在弃用节点，则基于更新数据删除弃用节点，其中弃用节点为原数据中存在且更新数据中不存在的Element节点。

在一例中，加载更新后的Fragment节点的数据，包括：若节点为Fragment节点，则过滤Fragment节点，将Fragment节点的全部子节点插入Fragment节点上级节点。

在一例中，获取Fragment节点的更新数据，包括：基于触发的onReady事件，获取回调的Fragment节点的更新数据。

根据本公开实施例的第二方面，提供一种页面更新方法，方法包括：触发页面的更新数据；通过如第一方面的DOM数据更新方法，更新DOM数据；基于更新后的DOM数据，渲染页面。

根据本公开实施例的第三方面，提供一种DOM数据更新装置，装置包括：获取单元，用于获取Fragment节点的更新数据，其中Fragment节点包括至少一个Element节点；重置单元，用于重置Fragment节点的全部Element节点关系；处理单元，用于对比Fragment节点的原数据与更新数据，若Fragment节点存在可复用节点，则基于更新数据更新可复用节点的数据并将更新后的可复用节点插入到Fragment节点中，其中可复用节点为原数据与更新数据中均存在的Element节点；存储单元，用于存储更新后的Fragment节点的数据，作为下次更新的原数据；加载单元，用于加载更新后的Fragment节点的数据。

在一例中，处理单元还用于：若Fragment节点存在新增节点，则基于更新数据生成新增节点并插入到Fragment节点中，其中新增节点为原数据中不存在且更新数据中存在的Element节点。

在一例中，处理单元还用于：若Fragment节点存在弃用节点，则基于更新数据删除弃用节点，其中弃用节点为原数据中存在且更新数据中不存在的Element节点。

在一例中，加载单元还用于：若节点为Fragment节点，则过滤Fragment节点，将Fragment节点的全部子节点插入Fragment节点上级节点。

在一例中，获取单元还用于：基于触发的onReady事件，获取回调的Fragment节点的更新数据。

根据本公开实施例的第四方面，提供一种页面更新装置，装置包括：触发单元，用于触发页面的更新数据；更新单元，用于通过如第一方面的DOM数据更新方法，更新DOM数据；渲染单元，用于基于更新后的DOM数据，渲染页面。

根据本公开实施例的第五方面，提供一种电子设备，包括：存储器，用于存储指令；以及处理器，用于调用存储器存储的指令执行第一方面的DOM数据更新方法或第二方面的页面更新方法。

根据本公开实施例的第六方面，提供一种计算机可读存储介质，存储有指令，指令被处理器执行时，执行第一方面的DOM数据更新方法或第二方面的页面更新方法。

本公开的实施例提供的技术方案可以包括以下有益效果：通过对DOM树中一些Element节点的复用，从而降低了系统运行成本，提高了性能。

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

附图说明

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

图1是根据一示例性实施例示出的一种DOM数据更新方法的流程示意图；

图2是根据一示例性实施例示出的另一种DOM数据更新方法的更新过程的示意图；

图3是根据一示例性实施例示出的一种页面更新方法的流程示意图；

图4是根据一示例性实施例示出的一种DOM数据更新装置的示意框图；

图5是根据一示例性实施例示出的一种页面更新装置的示意框图；

图6是根据一示例性实施例示出的一种装置的示意框图。

图7是根据一示例性实施例示出的一种电子装置的示意框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的装置和方法的例子。

本实施例提供一种DOM数据更新方法10，参见图1，DOM数据更新方法10包括步骤S11-步骤S15，以下详细说明：

步骤11，获取Fragment节点的更新数据，其中Fragment节点包括至少一个Element节点。

Fragment(片段)节点是DOM中的一种节点，用于存储尚未插入到真实DOM的片段，它不是真实DOM的一部分，不会触发DOM树的重新渲染，不会导致性能问题。在浏览器页面或快应用中通过各种动态指令生成的DOM片段正好可以利用Fragment节点的特点，减少DOM操作。Element(元素)节点也是DOM中的一种节点，对应页面中的元素，该节点可以具有属性和/或值。

在页面加载了DOM后，在一些情况下产生更新的数据，需要对DOM进行数据更新，通过监视程序(Watcher)监视其对应的Fragment节点中的数据是否有更新，如果有更新数据，则获取该Fragment节点的更新数据。在一实施例中，可以基于触发的onReady事件，获取回调的Fragment节点的更新数据。如在加载DOM之后，触发View-Model的onReady事件，获取更新数据，再通过Watcher来判断对应Fragment节点是否需要更新。

步骤12，重置Fragment节点的全部Element节点关系。

当Fragment节点需要更新时，开始重新编译之前，重置Fragment节点内部的节点关系，即解除Fragment节点内部全部Element节点的上下级关系，或称为父节点parent、子节点child关系。在重置后，每个DOM独立缓存，便于对每个节点进行更新或删除，或增加新的节点，方便对Fragment节点进行结构的改变或对其中Element节点中的数据更新，并可以在后续步骤中将需要保留的或新增的Element节点根据关系插入到Fragment节点。

步骤13，对比Fragment节点的原数据与更新数据，若Fragment节点存在可复用节点，则基于更新数据更新可复用节点的数据并将更新后的可复用节点插入到Fragment节点中，其中可复用节点为原数据与更新数据中均存在的Element节点。

在开始编译时，对新的更新数据做一次遍历，获取更新数据的相关信息，然后对原数据进行一次遍历，从而发现是否存在可复用的Element节点。

例如：在Fragment节点的原数据中，存在第一Element节点和第二Element节点，分别具有各自的属性和/或值，而在Fragment节点的更新数据中，也存在第一Element节点，仅是Element节点的属性和/或值发生了变化，则第一Element节点即为前述的可复用节点，对可复用节点不进行销毁和重建，而是进行保留和复用，仅对该节点的属性和/或值进行更新，并将更新后的可复用节点重新插入到Fragment节点中。

在一实施例中，步骤13还包括：若Fragment节点存在新增节点，则基于更新数据生成新增节点并插入到Fragment节点中，其中新增节点为原数据中不存在且更新数据中存在的Element节点。

同样，在开始编译时通过遍历更新数据和原数据，如果发现更新数据中存在原数据中不存在的Element节点，则将该Element节点直接插入到Fragment节点中，使得Fragment节点补充新增的节点及其数据。

以上述同样的例子：在Fragment节点的原数据中，存在第一Element节点和第二Element节点，而在Fragment节点的更新数据中，还存在第三Element节点，则第三Element节点作为新增节点，直接插入到Fragment节点中。

在一实施例中，步骤13还包括：若Fragment节点存在弃用节点，则基于更新数据删除弃用节点，其中弃用节点为原数据中存在且更新数据中不存在的Element节点。

同样，在开始编译时通过遍历更新数据和原数据，如果发现原数据中存在的Element节点在更新数据中不存在了，则将该Element节点作为弃用节点进行删除，从而降低存储负载。

以上述同样的例子：在Fragment节点的原数据中，存在第一Element节点和第二Element节点，而在Fragment节点的更新数据中，仅存在第一Element节点，则根据前述实施例可知，第一Element节点作为可复用节点进行更新，而第二Element节点则作为弃用节点进行删除。

步骤14，存储更新后的Fragment节点的数据，作为下次更新的原数据。

将更新后的Fragment节点进行储存，方便在下次更新是进行比对，便于节点的复用。

步骤15，加载更新后的Fragment节点的数据。

在完成更新后，即可度更新后的Fragment节点进行加载。其中，在一些情况下，在一个页面中，对DOM中的多个Fragment节点均有更新，可以一次性同时进行加载，减少发送的次数，提高了性能。在一实施例中，步骤15可以包括：若节点为Fragment节点，则过滤所述Fragment节点，将所述Fragment节点的全部子节点插入所述Fragment节点上级节点。本例中，在编译结束后，将更新后的数据发送至系统加载，可以通过过滤器，进行过滤，即如果该节点为Fragment节点，则将该Fragment节点下的全部子节点插入到上级节点，如果上级节点依旧是Fragment节点，则继续向上查找，直到是一个Element节点，通过该种方式完成DOM的加载。

通过以上任一实施例，能够降低系统的运行成本，提高运行效率和性能。

下面通过以一个具体的实施例进行说明，而图2示出了该实施例更新过程的示意图：用for指令来描述整个更新过程，以此清晰地展示Fragment节点是如何工作的。

ux文件如下：

上面的代码定义了一个list变量，在模板中使用了for指令并绑定了list变量。

经过编译工具后template生成如下结构：

在框架运行时，编译完根元素div之后开始编译children，当判断到节点children[0]是一个for节点，于是生成一个Fragment节点，在这个Fragment节点绑定View-Model实例并开始编译，list的初始化数据为[{text:1,xtag:1},{text:2,xtag:2}]，所以生成两个Element节点插入到Fragment的layoutChildren中。编译结束后将生成的节点发送到系统，其中系统可以是安卓系统，发送时如果发现Fragment节点，则过滤掉Fragment节点，并将其子节点全部插入到上级节点，如果上级节点依旧是一个Fragment节点，则向上查找，直到上级节点是一个Element节点。第一次挂载DOM的整个过程结束。

第一次DOM挂载结束后，触发View-Model的onReady事件，在onReady的回调中修改list。list属性发生变化，通知内部Watcher实例进行下一次的编译过程。

开始重新编译之前，重置Fragment内部的节点关系。

编译开始时框架会遍历一次更新后的新数据[{text:3,xtag:1},{text:4,xtag:4}]，获取新数据的相关信息，然后再遍历一次旧数据[{text:1,xtag:1},{text:2,xtag:2}]。通过遍历和比对，发现均存在xtag:1的节点，则该节点即为可复用节点，重用已有节点，并重新将已有节点插入到Fragment节点中。同时，发现新数据具有xtag:4的节点，生成新的Element节点插入到Fragment节点中。最后将原数据的未复用的Element节点xtag:2清除掉。

基于同一个发明构思，本公开还提供一种页面更新方法20，参见图3，包括：步骤S21触发页面的更新数据；步骤S22通过前述任一实施例的DOM数据更新方法10，更新DOM数据；步骤S23基于更新后的DOM数据，渲染页面。

在更新DOM数据后，终端根据更新后的数据，渲染全部或部分页面，实现页面的更新。而采用DOM数据更新方法10，能够保证终端的运行效率。

基于同一个发明构思，图4示出了一种DOM数据更新装置100，如图4所示，DOM数据更新装置100包括：获取单元110，用于获取Fragment节点的更新数据，其中Fragment节点包括至少一个Element节点；重置单元120，用于重置Fragment节点的全部Element节点关系；处理单元130，用于对比Fragment节点的原数据与更新数据，若Fragment节点存在可复用节点，则基于更新数据更新可复用节点的数据并将更新后的可复用节点插入到Fragment节点中，其中可复用节点为原数据与更新数据中均存在的Element节点；存储单元140，用于存储更新后的Fragment节点的数据，作为下次更新的原数据；加载单元150，用于加载更新后的Fragment节点的数据。

在一例中，处理单元130还用于：若Fragment节点存在新增节点，则基于更新数据生成新增节点并插入到Fragment节点中，其中新增节点为原数据中不存在且更新数据中存在的Element节点。

在一例中，处理单元130还用于：若Fragment节点存在弃用节点，则基于更新数据删除弃用节点，其中弃用节点为原数据中存在且更新数据中不存在的Element节点。

在一例中，加载单元150还用于：若节点为Fragment节点，则过滤Fragment节点，将Fragment节点的全部子节点插入Fragment节点上级节点。

在一例中，获取单元110还用于：基于触发的onReady事件，获取回调的Fragment节点的更新数据。

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

基于同一个发明构思，图5示出了一种页面更新装置200，如图5所示，页面更新装置200包括：触发单元210，用于触发页面的更新数据；更新单元220，用于通过如第一方面的DOM数据更新方法，更新DOM数据；渲染单元230，用于基于更新后的DOM数据，渲染页面。

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

图6是根据一示例性实施例示出的前述任一实施例装置的示意框图。例如，装置300可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图6，装置300可以包括以下一个或多个组件：处理组件302，存储器304，电力组件306，多媒体组件308，音频组件310，输入/输出(I/O)的接口312，传感器组件314，以及通信组件316。

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

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

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

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

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

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

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

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

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

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

图7是根据一示例性实施例示出的一种电子装置400的框图。例如，装置400可以被提供为一服务器。参照图7，装置400包括处理组件422，其进一步包括一个或多个处理器，以及由存储器432所代表的存储器资源，用于存储可由处理组件422的执行的指令，例如应用程序。存储器432中存储的应用程序可以包括一个或一个以上的每一个对应于一组指令的模块。此外，处理组件422被配置为执行指令，以执行上述方法。

装置400还可以包括一个电源组件426被配置为执行装置300的电源管理，一个有线或无线网络接口450被配置为将装置400连接到网络，和一个输入输出(I/O)接口458。装置400可以操作基于存储在存储器432的操作系统，例如Windows ServerTM，Mac OS XTM，UnixTM,LinuxTM，FreeBSDTM或类似。

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

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

Claims (14)

1.一种DOM数据更新方法，其特征在于，所述方法包括：

获取Fragment节点的更新数据，其中所述Fragment节点包括至少一个Element节点；

重置所述Fragment节点的全部所述Element节点关系，并将需要保留的或新增的Element节点根据关系插入到Fragment节点；

对比所述Fragment节点的原数据与所述更新数据，若所述Fragment节点存在可复用节点，则基于所述更新数据更新所述可复用节点的数据并将更新后的所述可复用节点插入到所述Fragment节点中，其中所述可复用节点为所述原数据与所述更新数据中均存在的Element节点；

存储更新后的Fragment节点的数据，作为下次更新的原数据；

响应于在一个页面中，对DOM中的多个Fragment节点均有更新，一次性加载多个所述更新后的Fragment节点的数据，

其中，若节点为Fragment节点，则过滤所述Fragment节点，将所述Fragment节点的全部子节点插入所述Fragment节点的上级节点；

如果上级节点依旧是Fragment节点，则继续向上查找，直到是一个Element节点，完成DOM的加载。

2.根据权利要求1所述的DOM数据更新方法，其特征在于，所述对比所述Fragment节点的原数据与所述更新数据，还包括：若所述Fragment节点存在新增节点，则基于所述更新数据生成所述新增节点并插入到所述Fragment节点中，其中所述新增节点为所述原数据中不存在且所述更新数据中存在的Element节点。

3.根据权利要求1或2所述的DOM数据更新方法，其特征在于，所述对比所述Fragment节点的原数据与所述更新数据，还包括：若所述Fragment节点存在弃用节点，则基于所述更新数据删除所述弃用节点，其中所述弃用节点为所述原数据中存在且所述更新数据中不存在的Element节点。

4.根据权利要求1所述的DOM数据更新方法，其特征在于，所述加载所述更新后的Fragment节点的数据，包括：若节点为Fragment节点，则过滤所述Fragment节点，将所述Fragment节点的全部子节点插入所述Fragment节点上级节点。

5.根据权利要求1所述的DOM数据更新方法，其特征在于，所述获取Fragment节点的更新数据，包括：基于触发的onReady事件，获取回调的所述Fragment节点的所述更新数据。

6.一种页面更新方法，其特征在于，所述方法包括：

触发页面的更新数据；

通过如权利要求1-5任一项所述的DOM数据更新方法，更新所述DOM数据；

基于更新后的所述DOM数据，渲染所述页面。

7.一种DOM数据更新装置，其特征在于，所述装置包括：

获取单元，用于获取Fragment节点的更新数据，其中所述Fragment节点包括至少一个Element节点；

重置单元，用于重置所述Fragment节点的全部所述Element节点关系，并将需要保留的或新增的Element节点根据关系插入到Fragment节点；

处理单元，用于对比所述Fragment节点的原数据与所述更新数据，若所述Fragment节点存在可复用节点，则基于所述更新数据更新所述可复用节点的数据并将更新后的所述可复用节点插入到所述Fragment节点中，其中所述可复用节点为所述原数据与所述更新数据中均存在的Element节点；

存储单元，用于存储更新后的Fragment节点的数据，作为下次更新的原数据；

加载单元，用于响应于在一个页面中，对DOM中的多个Fragment节点均有更新，一次性加载多个所述更新后的Fragment节点的数据，

其中，若节点为Fragment节点，则过滤所述Fragment节点，将所述Fragment节点的全部子节点插入所述Fragment节点的上级节点；

如果上级节点依旧是Fragment节点，则继续向上查找，直到是一个Element节点，完成DOM的加载。

8.根据权利要求7所述的DOM数据更新装置，其特征在于，所述处理单元还用于：若所述Fragment节点存在新增节点，则基于所述更新数据生成所述新增节点并插入到所述Fragment节点中，其中所述新增节点为所述原数据中不存在且所述更新数据中存在的Element节点。

9.根据权利要求7或8所述的DOM数据更新装置，其特征在于，所述处理单元还用于：若所述Fragment节点存在弃用节点，则基于所述更新数据删除所述弃用节点，其中所述弃用节点为所述原数据中存在且所述更新数据中不存在的Element节点。

10.根据权利要求7所述的DOM数据更新装置，其特征在于，所述加载单元还用于：若节点为Fragment节点，则过滤所述Fragment节点，将所述Fragment节点的全部子节点插入所述Fragment节点上级节点。

11.根据权利要求7所述的DOM数据更新装置，其特征在于，所述获取单元还用于：基于触发的onReady事件，获取回调的所述Fragment节点的所述更新数据。

12.一种页面更新装置，其特征在于，所述装置包括：

触发单元，用于触发页面的更新数据；

更新单元，用于通过如权利要求1-5任一项所述的DOM数据更新方法，更新所述DOM数据；

渲染单元，用于基于更新后的所述DOM数据，渲染所述页面。

13.一种电子装置，其特征在于，包括：

存储器，用于存储指令；以及

处理器，用于调用所述存储器存储的指令执行如权利要求1至5中任一项所述的DOM数据更新方法或如权利要求6所述的页面更新方法。

14.一种计算机可读存储介质，其特征在于，存储有指令，所述指令被处理器执行时，执行如权利要求1至5中任一项所述的DOM数据更新方法或如权利要求6所述的页面更新方法。

Images