DOM数据更新方法、页面更新方法及装置制造方法及图纸

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

DOM data update method, page update method and device

【技术实现步骤摘要】
DOM数据更新方法、页面更新方法及装置
本公开涉及智能终端领域，尤其涉及DOM数据更新方法、页面更新方法及装置，以及电子设备和计算机可读存储介质。
技术介绍
随着智能终端的发展，在智能终端中的应用种类也越来越多，在通过智能终端打开网页页面，或者使用快应用时，需要在框架(framework)中运行页面对应的DOM(DocumentObjectModel)，文档对象模型)树来渲染页面内容。DOM是W3C组织推荐的处理可扩展标志语言的标准编程接口，一个页面可以对应于一个DOM树，其是一种抽象语法树(AbstractSyntaxTree，简称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(元素)本文档来自技高网...

【技术保护点】
1.一种DOM数据更新方法，其特征在于，所述方法包括：/n获取Fragment节点的更新数据，其中所述Fragment节点包括至少一个Element节点；/n重置所述Fragment节点的全部所述Element节点关系；/n对比所述Fragment节点的原数据与所述更新数据，若所述Fragment节点存在可复用节点，则基于所述更新数据更新所述可复用节点的数据并将更新后的所述可复用节点插入到所述Fragment节点中，其中所述可复用节点为所述原数据与所述更新数据中均存在的Element节点；/n存储更新后的Fragment节点的数据，作为下次更新的原数据；/n加载所述更新后的Fragment节点的数据。/n

【技术特征摘要】
1.一种DOM数据更新方法，其特征在于，所述方法包括：
获取Fragment节点的更新数据，其中所述Fragment节点包括至少一个Element节点；
重置所述Fragment节点的全部所述Element节点关系；
对比所述Fragment节点的原数据与所述更新数据，若所述Fragment节点存在可复用节点，则基于所述更新数据更新所述可复用节点的数据并将更新后的所述可复用节点插入到所述Fragment节点中，其中所述可复用节点为所述原数据与所述更新数据中均存在的Element节点；
存储更新后的Fragment节点的数据，作为下次更新的原数据；
加载所述更新后的Fragment节点的数据。


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节点；
...

【专利技术属性】
技术研发人员：董永清，孙良木，潘温，
申请(专利权)人：北京小米移动软件有限公司，
类型：发明
国别省市：北京;11