加载DOM节点数据的方法、装置、计算机设备及存储介质制造方法及图纸

本发明专利技术提供一种加载DOM节点数据的方法、装置、计算机设备及存储介质，通过分步缓存被操作过的页面区域的DOM节点来避免过多消耗网络资源。用户操作页面哪部分区域，缓存哪部分区域中需要加载数据的DOM节点，当重复操作时不需从DOM树结构中重新查找DOM节点，DOM树结构中的DOM节点较多，这避免了从较多DOM节点中查找该区域对应的DOM节点而导致的资源浪费；另外，还避免了因一次性缓存整个页面的DOM节点而浪费资源导致页面阻塞的情况。

【技术实现步骤摘要】
加载DOM节点数据的方法、装置、计算机设备及存储介质
本专利技术涉及互联网
，尤其涉及加载DOM节点数据的方法、装置、计算机设备及存储介质。
技术介绍
任何一个页面，其结构都可以绘制为DOM(DocumentObjectModel，文档对象模型)树结构，加载页面时，先加载其DOM树结构，然后查找该DOM树结构中需要加载数据的DOM节点，找到DOM节点之后再去加载DOM节点对应的数据，最后在页面中添加DOM节点对应的数据，进而实现在页面上显示数据。现有的加载DOM节点的数据的方法一般有两种，第一种是在开始加载页面时，一次性查找页面所有需要添加数据的DOM节点，然后逐一获取DOM节点的数据，当数据添加至DOM节点后便在页面上显示出来，这种获取DOM节点数据的方法的缺点是当刷新页面后，需要重新查找页面的所有需要添加数据的DOM节点，查找DOM节点需要消耗资源，因此在刷新页面时会极大地浪费资源；第二种方法是一次性缓存页面所有需要添加数据的DOM节点，每次需要添加数据的时候可以直接将数据添加到已知的DOM节点，这样在页面刷新时不需要重新查找DOM节点，但当页面较大时，DOM节点很多，一次性缓存所有DOM节点会因为消化太多资源而阻塞页面，让用户看到第一屏页面效果的时间延时，给用户造成页面加载慢的感觉，另外，页面的接口可能很多，很多个接口一次性发送DOM节点数据请求，必然会造成页面卡顿。
技术实现思路
本专利技术实施例提供了一种加载DOM节点数据的方法、装置、计算机设备及存储介质，以达到加载DOM节点的数据以及保存当前加载的DOM节点的节点信息的目的。第一方面，本专利技术实施例提供了一种加载DOM节点数据的方法，该方法包括：接收用户操作页面的操作指令，所述操作指令包括被操作的页面区域对应的区域信息；根据所述区域信息判断预设对象空间中是否存在所述页面区域的DOM节点的节点信息；若所述预设对象空间中不存在所述页面区域的DOM节点的节点信息，则在所述页面的DOM树结构中查找所述页面区域中需要加载数据的DOM节点；获取所述需要加载数据的DOM节点的节点信息，将所述区域信息及所述节点信息保存至所述预设对象空间；根据所述节点信息获取所述DOM节点需要加载的数据；将所述数据加载至所述DOM节点，以在所述页面区域显示所述数据。第二方面，本专利技术实施例还提供了一种加载DOM节点数据的装置，所述加载DOM节点数据的装置包括用于实现第一方面所述的加载DOM节点数据的方法的单元。第三方面，本专利技术实施例还提供了一种计算机设备，包括存储器，以及与所述存储器相连的处理器；所述存储器用于存储实现加载DOM节点数据的方法的计算机程序；所述处理器用于运行所述存储器中存储的计算机程序，以执行如上述第一方面所述的方法。第四方面，本专利技术实施例提供了一种存储介质，所述存储介质存储有一个或者一个以上计算机程序，所述一个或者一个以上计算机程序可被一个或者一个以上的处理器执行，以实现上述第一方面所述的方法。本专利技术实施例提供了加载DOM节点数据的方法、装置、计算机设备及存储介质，通过分步缓存被操作过的页面区域的DOM节点来避免过多消耗网络资源。用户操作页面哪部分区域，缓存哪部分区域中需要加载数据的DOM节点，当重复操作时无需从节点较多的DOM树结构中重新查找DOM节点，从而避免了从较多DOM节点中查找该区域对应的DOM节点而导致的资源浪费；另外，还避免了因一次性缓存整个页面的DOM节点而浪费资源导致页面阻塞的情况。附图说明为了更清楚地说明本专利技术实施例技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1是本专利技术实施例提供的一种加载DOM节点数据的方法的流程示意图；图2是本专利技术实施例提供的一种加载DOM节点数据的方法的子流程示意图；图3是本专利技术实施例提供的一种加载DOM节点数据的装置的示意性框图；图4是本专利技术实施例提供的一种加载DOM节点数据的装置的子单元示意性框图；图5是本专利技术实施例提供的一种计算机设备的结构示意性框图。具体实施方式下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。还应当理解，在本专利技术说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。也应当理解，尽管术语第一、第二等可以在此用来描述各种元素，但这些元素不应该受限于这些术语，这些术语仅用来将这些元素彼此区分开。图1为本专利技术实施例提供的一种加载DOM节点数据的方法的流程示意图。该方法包括步骤S101～S106。S101，接收用户操作页面的操作指令，所述操作指令包括被操作的页面区域对应的区域信息。页面结构可以用一个DOM树结构来表示，DOM树结构具有多个DOM节点，页面越复杂，DOM节点也越多，开发人员在不同DOM节点添加或塞入的数据显示在不同页面位置。一般来说，页面包含的内容不止一项，每个区域显示的内容也不同，页面的每个区域都或多或少地具有一些DOM节点，用户打开页面时，该页面的DOM树结构先被加载出。DOM树中有些DOM节点的数据可以在页面直接显示，有些DOM节点的数据则不是直接显示的，即页面中有些内容是直接显示的，有些区域是空白的，需要用户点击或选择之后才会加载出该区域的数据。另外，页面在经过切换或刷新之后需要重新加载页面中的数据才可以重新显示页面内容，加载页面数据的过程其实是加载页面中DOM节点的数据的过程。如果页面中某一个区域具有多个可被切换操作的对象，不同对象下该区域显示的数据不同，那么在该区域则存在不同维度(两个对象的信息是平行的，不能同时显示，只能选择其一进行显示)的信息，用户可以通过选择或点击其中一个对象来选择需要显示的内容，当用户选择不同维度时，页面该区域的区域信息也因用户选择的对象发生改变，该区域对应的DOM节点或DOM结构可能也会发生改变，当然也可能不变。例如，在页面的某一区域中，具有两个主要对象的信息，具体显示哪个对象的信息，根据用户的选择(鼠标点击)来显示，用户选择的对象不同，该页面区域的区域信息不同，即该页面区域具有两个维度的信息。假设这两个对象分别为集团(group)和公司(company)，现配置这个页面区域的urls接口请求路径如下：在urls接口请求路径“group”:{0:”received/getGroupEffInfo”,1:”received/getGroupCustsInfo”}中，对象“集团”下包含了多种类型数据，不同类型的数据尤其对应的数据接口路径，0指的是集团活跃用户信息的数据接口路径，1指的是是集团客户信息的数据接口路径。同本文档来自技高网...

【技术保护点】
1.一种加载DOM节点数据的方法，其特征在于，包括：接收用户操作页面的操作指令，所述操作指令包括被操作的页面区域对应的区域信息；根据所述区域信息判断预设对象空间中是否存在所述页面区域的DOM节点的节点信息；若所述预设对象空间中不存在所述页面区域的DOM节点的节点信息，则在所述页面的DOM树结构中查找所述页面区域中需要加载数据的DOM节点；获取所述需要加载数据的DOM节点的节点信息，将所述区域信息及所述节点信息保存至所述预设对象空间；根据所述节点信息获取所述DOM节点需要加载的数据；将所述数据加载至所述DOM节点，以在所述页面区域显示所述数据。

【技术特征摘要】
1.一种加载DOM节点数据的方法，其特征在于，包括：接收用户操作页面的操作指令，所述操作指令包括被操作的页面区域对应的区域信息；根据所述区域信息判断预设对象空间中是否存在所述页面区域的DOM节点的节点信息；若所述预设对象空间中不存在所述页面区域的DOM节点的节点信息，则在所述页面的DOM树结构中查找所述页面区域中需要加载数据的DOM节点；获取所述需要加载数据的DOM节点的节点信息，将所述区域信息及所述节点信息保存至所述预设对象空间；根据所述节点信息获取所述DOM节点需要加载的数据；将所述数据加载至所述DOM节点，以在所述页面区域显示所述数据。2.根据权利要求1所述的加载DOM节点数据的方法，其特征在于，所述方法还包括：若所述预设对象空间中保存有所述页面区域的DOM节点的节点信息，直接执行所述根据所述节点信息获取所述DOM节点需要加载的数据的步骤。3.根据权利要求1所述的加载DOM节点数据的方法，其特征在于，所述根据所述节点信息获取所述DOM节点需要加载的数据，包括：根据所述节点信息在预设本地缓存区搜索所述DOM节点对应的数据。4.根据权利要求3所述的加载DOM节点数据的方法，其特征在于，所述根据所述节点信息在预设本地缓存区搜索所述DOM节点对应的数据之后，还包括：若未在所述预设本地缓存区搜索到所述DOM节点对应的数据，则根据所述节点信息获取所述DOM节点的数据请求地址；根据所述数据请求地址获取所述DOM节点对应的数据。5.根据权利要求4所述的加载DOM节点数据的方法，其特征在于，所述根据所述数据请求地址获取所述DOM节点对应的数据之后，还包括，将所述数据以及所述数据与所述节点信息的对应关系保存至所述预设本地缓存区。6.一种加载DOM节点数据的装置，其特征在于，包括：接收单元，用于接收用户操作页面的操作指令，所述操作指令包括被操作的页面区域对应的区域信息；判断单元，用...

【专利技术属性】
技术研发人员：方小伟，
申请(专利权)人：平安科技深圳有限公司，
类型：发明
国别省市：广东,44