CN107463372A - 一种数据驱动的页面更新方法和装置 - Google Patents

Abstract

本公开是关于一种数据驱动的页面更新方法和装置。该方法包括：从页面对应的各个变量中选出本次更新中的受关注变量；基于本次更新生成新的受关注文档对象模型dom节点，所述受关注dom节点是所述页面对应的dom树中与所述受关注变量绑定的dom节点；比较新的所述受关注dom节点和本次更新前的所述受关注dom节点；在新的所述受关注dom节点和本次更新前的所述受关注dom节点不相同的情况下，触发针对所述受关注dom节点的渲染。应用本公开，生成与受关注变量绑定的dom节点而非生成整个dom树，并比较更新前后的该dom节点来确定是否触发页面渲染，从而有利于减少需使用的处理资源，尤其适用于页面局部更新的情况。

Description

一种数据驱动的页面更新方法和装置

技术领域

本公开涉及前端开发领域，尤其涉及一种数据驱动的页面更新方法和装置。

背景技术

文档对象模型(Document Object Model，简称dom)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。一个页面可以对应于一个dom树，其是一种抽象语法树(Abstract Syntax Tree，简称AST)，是页面源代码的抽象语法结构的树状表现形式。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节点来确定是否触发页面渲染，从而有利于减少需使用的处理资源。特别在页面局部更新的情况下，相比于相关技术，每次更新中，本公开实施例提供的技术方案在生成dom节点的环节和比较更新前后的dom节点的环节均能显著减少所使用的处理资源。

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

附图说明

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

图1是根据一示例性实施例示出的一种数据驱动的页面更新方法的流程图。

图2是根据一示例性实施例示出的一种数据驱动的页面更新装置的框图。

图3是根据一示例性实施例示出的一种示例性数据驱动的页面更新装置的框图。

图4是根据一示例性实施例示出的一种数据驱动的页面更新装置的框图。

具体实施方式

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

本公开中的术语“变量”指dom节点在dom树中的接口变量。

图1是根据一示例性实施例示出的一种数据驱动的页面更新方法的流程图。该方法可应用于手机、电脑等终端设备中的多种app中，例如具有导航功能的APP、具有视频播放功能的APP、具有车票/机票/酒店预订功能的APP等。图1所示的方法包括以下步骤。

在步骤S11中，从页面对应的各个变量中选出本次更新中的受关注变量。

在步骤S12中，基于本次更新生成新的受关注文档对象模型dom节点，所述受关注dom节点是所述页面对应的dom树中与所述受关注变量绑定的dom节点。

在步骤S13中，比较新的所述受关注dom节点和本次更新前的所述受关注dom节点。

在步骤S14中，在新的所述受关注dom节点和本次更新前的所述受关注dom节点不相同的情况下，触发针对所述受关注dom节点的渲染。

本实施例中，生成与受关注变量绑定的dom节点而非生成整个dom树，并比较更新前后的该dom节点来确定是否触发页面渲染，从而有利于减少需使用的处理资源。特别在页面局部更新的情况下，相比于相关技术，每次更新中，本公开实施例在生成dom节点的环节和比较更新前后的dom节点的环节均能显著减少所使用的处理资源。

在一种可能的实现方式中，上述步骤S11可以包括：接收在本次更新中收到的所述变量；比较收到的所述变量在本次更新前后是否相同；确定在本次更新前后不相同的所述变量为所述受关注变量。

根据本实现方式，可以将本次更新中发生变化的变量确定为受关注变量，并在后续生成与其绑定的dom节点，而无需关注在本次更新前后未发生变化的节点，以节省处理量。

本领域技术人员可以理解的是，在变量不是数组的情况下，如果更新后的该变量的值不同于更新前，则认可该变量在更新前后发生变化；在变量是数组的情况下，无论是更新后该数组中的某个数的数值不同于更新前，或者是更新后数组本身的大小/维度不同于更新前，均认为该变量在更新前后发生了变化。

在一种可能的实现方式中，如图1所示的方法还可以包括：建立所述页面对应的所述dom树中的各个dom节点和所述页面对应的所述各个变量间的绑定关系。可在步骤104之间建立所述绑定关系，例如，在一个示例中，可在构建所述页面对应的dom树时建立所述绑定关系。

在上述实现方式的一个示例中，建立所述绑定关系可以包括：针对每个dom节点，将所述dom节点的变量绑定至所述dom节点。如本领域技术人员所公知的，根据dom节点的数据结构可直接获取其变量，参见上文，此处dom节点的变量指该节点在dom树中的接口变量，而非该节点的内部变量。。

图2是根据一示例性实施例示出的一种数据驱动的页面更新装置200的框图。该方法可在手机、电脑等终端设备中的多种app中实施，例如具有导航功能的APP、具有视频播放功能的APP、具有车票/机票/酒店预订功能的APP等。参照图2，该装置200包括受关注变量选择模块202、受关注dom节点生成模块204、dom节点比较模块206、渲染触发模块208。

该受关注变量选择模块202被配置为从页面对应的各个变量中选出本次更新中的受关注变量。

该关注dom节点生成模块204被配置为基于本次更新生成新的受关注文档对象模型dom节点，所述受关注dom节点是所述页面对应的dom树中与所述受关注变量绑定的dom节点。

该dom节点比较模块206被配置为比较新的所述受关注dom节点和本次更新前的所述受关注dom节点。

该渲染触发模块208被配置为在新的所述受关注dom节点和本次更新前的所述受关注dom节点不相同的情况下，触发针对所述受关注dom节点的渲染。

图3示出根据一示例性实施例示出的一种示例性数据驱动的页面更新装置200的结构框图。以下将参照图3描述本实施例的多种可能的实现方式。

在一种可能的实现方式中，所述受关注变量选择模块202包括：更新变量接收子模块2022，被配置为接收在本次更新中收到的所述变量；变量比较子模块2024，被配置为比较收到的所述变量在本次更新前后是否相同；受关注变量确定子模块2026，被配置为确定在本次更新前后不相同的所述变量为所述受关注变量。

在一种可能的实现方式中，所述装置200还包括：绑定关系建立模块210，被配置为建立所述页面对应的所述dom树中的各个dom节点和所述页面对应的所述各个变量间的绑定关系。

在一种可能的实现方式中，所述绑定关系建立模块210包括绑定子模块2102，被配置为针对每个dom节点将所述dom节点的变量绑定至所述dom节点。

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

图4是根据一示例性实施例示出的一种数据驱动的页面更新装置400的框图。例如，装置400可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图4，装置400可以包括以下一个或多个组件：处理组件402，存储器404，电源组件406，多媒体组件408，音频组件410，输入/输出(I/O)的接口412，传感器组件414，以及通信组件416。

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

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

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

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

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

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

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

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

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

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

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

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

Claims (10)

1.一种数据驱动的页面更新方法，其特征在于，所述方法包括：

从页面对应的各个变量中选出本次更新中的受关注变量；

基于本次更新生成新的受关注dom节点，所述受关注dom节点是所述页面对应的dom树中与所述受关注变量绑定的dom节点；

比较新的所述受关注dom节点和本次更新前的所述受关注dom节点；

在新的所述受关注dom节点和本次更新前的所述受关注dom节点不相同的情况下，触发针对所述受关注dom节点的渲染。

2.根据权利要求1所述的方法，其特征在于，所述从页面对应的各个变量中选出本次更新中的受关注变量，包括：

接收在本次更新中收到的所述变量；

比较收到的所述变量在本次更新前后是否相同；

确定在本次更新前后不相同的所述变量为所述受关注变量。

3.根据权利要求1所述的方法，其特征在于，所述方法还包括：

建立所述页面对应的所述dom树中的各个dom节点和所述页面对应的所述各个变量间的绑定关系。

4.根据权利要求3所述的方法，其特征在于，建立所述页面对应的所述dom树中的各个dom节点和所述页面对应的所述各个变量间的绑定关系，包括：

针对每个dom节点，将所述dom节点的变量绑定至所述dom节点。

5.一种数据驱动的页面更新装置，其特征在于，所述装置包括：

受关注变量选择模块，被配置为从页面对应的各个变量中选出本次更新中的受关注变量；

受关注dom节点生成模块，被配置为基于本次更新生成新的受关注文档对象模型dom节点，所述受关注dom节点是所述页面对应的dom树中与所述受关注变量绑定的dom节点；

dom节点比较模块，被配置为比较新的所述受关注dom节点和本次更新前的所述受关注dom节点；

渲染触发模块，被配置为在新的所述受关注dom节点和本次更新前的所述受关注dom节点不相同的情况下，触发针对所述受关注dom节点的渲染。

6.根据权利要求5所述的装置，其特征在于，所述受关注变量选择模块包括：

更新变量接收子模块，被配置为接收在本次更新中收到的所述变量；

变量比较子模块，被配置为比较收到的所述变量在本次更新前后是否相同；

受关注变量确定子模块，被配置为确定在本次更新前后不相同的所述变量为所述受关注变量。

7.根据权利要求5所述的装置，其特征在于，所述装置还包括：

绑定关系建立模块，被配置为建立所述页面对应的所述dom树中的各个dom节点和所述页面对应的所述各个变量间的绑定关系。

8.根据权利要求7所述的装置，其特征在于，所述绑定关系建立模块包括：

绑定子模块，被配置为针对每个dom节点将所述dom节点的变量绑定至所述dom节点。

9.一种数据驱动的页面更新装置，其特征在于，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为执行如权利要求1-4中任意一者所述的方法。

10.一种非易失性计算机可读存储介质，其上存储有计算机程序指令，其特征在于，所述计算机程序指令被处理器执行时实现权利要求1至4中任意一项所述的方法。