CN114327395A - 网页设计方法、装置、计算机设备、存储介质和产品 - Google Patents

Abstract

本申请涉及一种网页设计方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。该方法在接收到用户在目标网页上的操作之后，根据目标网页的源代码生成目标网页对应的虚拟文档对象模型，虚拟文档对象模型包括目标网页中各个页面模块对应的虚拟文档对象节点；响应于上述操作获取至少一个目标页面模块对应的布局变化信息，布局变化信息包括目标页面模块在操作前的布局对象和在操作后的布局对象；根据布局变化信息确定需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于更新后的虚拟文档对象模型渲染目标网页。避免了大量无用的计算，节约了计算资源。

Description

网页设计方法、装置、计算机设备、存储介质和产品

技术领域

本申请涉及互联网领域，特别是涉及一种网页设计方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。

背景技术

在浏览器渲染网页的过程中，浏览器会基于加载的HTML文档构建DOM(英文：Document Object Model，中文：文档对象模型)树，然后通过加载CSS文件得到页面的样式表，将DOM树和样式表关联起来得到带有样式属性的DOM树。然后浏览器开始布局，为DOM树上的每个DOM节点计算精确坐标值。最后进行可视化渲染，形成最终的网页页面。

其中，当需要对DOM节点进行更新操作时，浏览器会从构建DOM树开始从头到尾执行一遍流程。

然而，在实际应用中，例如在一次更新操作时，需要更新10个DOM节点，则浏览器需要从头到尾执行10遍上述流程，消耗大量的计算资源。

发明内容

基于此，有必要针对上述技术问题，提供一种能够节约计算资源提高页面更新效率的网页设计方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。

第一方面，本申请提供了一种网页设计方法，该方法包括：

在接收到用户在目标网页上的操作之后，根据目标网页的源代码生成目标网页对应的虚拟文档对象模型，虚拟文档对象模型包括目标网页中各个页面模块对应的虚拟文档对象节点；

响应于操作获取至少一个目标页面模块对应的布局变化信息，布局变化信息包括目标页面模块在操作前的布局对象和在操作后的布局对象；

根据布局变化信息确定需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于更新后的虚拟文档对象模型渲染目标网页。

在其中一个实施例中，根据目标网页的源代码生成目标网页对应的虚拟文档对象模型，包括：

根据源代码进行解析，构建真实文档对象模型，真实文档对象模型包括多个文档对象节点；

遍历真实文档对象模型，对于扫描到的各文档对象节点，创建JS对象，并记录文档对象节点的属性信息；

根据各文档对象节点对应的JS对象生成虚拟文档对象模型。

在其中一个实施例中，根据各文档对象节点对应的JS对象生成虚拟文档对象模型，包括：

获取目标网页中的多个页面元素对应的JS对象；

对于各页面模块，根据构成页面模块的多个页面元素对应的JS对象得到页面模块对应的JS对象；

根据各页面模块对应的JS对象生成虚拟文档对象模型。

在其中一个实施例中，该方法还包括：

根据各页面模块构建模块池；

对模块池内的各页面模块配置关键属性和布局对象，页面模块的关键属性包括模块标识、模块属性和模块样式类中的至少一种，其中，模块属性包括页面模块的尺寸和坐标，布局对象表示页面模块在目标网页中的区域。

在其中一个实施例中，响应于操作获取至少一个目标页面模块对应的布局变化信息，包括：

根据操作确定至少一个目标页面模块的模块标识；

根据模块标识从模块池中获取至少一个目标页面模块的操作前的布局对象和至少一个目标页面模块的操作后的布局对象。

在其中一个实施例中，对模块池内的各页面模块配置布局对象，包括：

将目标网页划分为多个区域，每个区域为一个布局对象；

根据各页面模块的坐标位置确定各页面模块对应的布局对象。

在其中一个实施例中，根据布局变化信息确定需要更新的候选页面模块，包括：

根据至少一个目标页面模块的操作前的布局对象对应的页面模块以及至少一个目标页面模块的操作后的布局对象对应的页面模块确定候选页面模块。

第二方面，本申请还提供了一种网页设计装置，该装置包括：

虚拟文档对象模型生成模块，用于在接收到用户在目标网页上的操作之后，根据目标网页的源代码生成目标网页对应的虚拟文档对象模型，虚拟文档对象模型包括目标网页中各个页面模块对应的虚拟文档对象节点；

响应模块，用于响应于操作获取至少一个目标页面模块对应的布局变化信息，布局变化信息包括目标页面模块在操作前的布局对象和在操作后的布局对象；

渲染模块，用于根据布局变化信息确定需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于更新后的虚拟文档对象模型渲染目标网页。

第三方面，本申请还提供了一种计算机设备，所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

在接收到用户在目标网页上的操作之后，根据目标网页的源代码生成目标网页对应的虚拟文档对象模型，虚拟文档对象模型包括目标网页中各个页面模块对应的虚拟文档对象节点；

响应于操作获取至少一个目标页面模块对应的布局变化信息，布局变化信息包括目标页面模块在操作前的布局对象和在操作后的布局对象；

根据布局变化信息确定需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于更新后的虚拟文档对象模型渲染目标网页。

第四方面，本申请还提供了一种计算机可读存储介质，所述计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：

在接收到用户在目标网页上的操作之后，根据目标网页的源代码生成目标网页对应的虚拟文档对象模型，虚拟文档对象模型包括目标网页中各个页面模块对应的虚拟文档对象节点；

响应于操作获取至少一个目标页面模块对应的布局变化信息，布局变化信息包括目标页面模块在操作前的布局对象和在操作后的布局对象；

根据布局变化信息确定需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于更新后的虚拟文档对象模型渲染目标网页。

第五方面，本申请还提供了一种计算机程序产品，所述计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：

在接收到用户在目标网页上的操作之后，根据目标网页的源代码生成目标网页对应的虚拟文档对象模型，虚拟文档对象模型包括目标网页中各个页面模块对应的虚拟文档对象节点；

响应于操作获取至少一个目标页面模块对应的布局变化信息，布局变化信息包括目标页面模块在操作前的布局对象和在操作后的布局对象；

根据布局变化信息确定需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于更新后的虚拟文档对象模型渲染目标网页。

上述网页设计方法、装置、计算机设备、计算机可读存储介质和计算机程序产品，在接收到用户在目标网页上的操作之后，根据目标网页的源代码生成目标网页对应的虚拟文档对象模型，虚拟文档对象模型包括目标网页中各个页面模块对应的虚拟文档对象节点；响应于上述操作获取至少一个目标页面模块对应的布局变化信息，布局变化信息包括目标页面模块在操作前的布局对象和在操作后的布局对象；根据布局变化信息确定需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于更新后的虚拟文档对象模型渲染目标网页。本申请实施例中，将页面元素构造为页面模块，并为每个页面模块配置布局对象，响应于用户的操作获取布局变化信息，然后基于布局变化信息更新候选页面模块对应的虚拟文档对象节点，该种方式，基于多个目标页面模块对应的布局变化信息一次性地渲染目标网页，避免了大量无用的计算，节约了计算资源。

附图说明

图1为一个实施例中网页设计方法的应用环境图；

图2为一个实施例中网页设计方法的流程示意图；

图3示出了拖拽前的至少一个目标页面模块的布局示意图；

图4示出了对至少一个目标页面模块拖拽示意图；

图5示出了拖拽后的至少一个目标页面模块的布局示意图；

图6为一个实施例中根据目标网页的源代码生成目标网页对应的虚拟文档对象模型的方法的流程示意图；

图7示出了一种简单的DOM树的示意图；

图8为另一个实施例中网页设计方法的流程示意图；

图9示出了一种构建布局对象的方法的示意图；

图10为一个实施例中网页设计装置的结构框图；

图11为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

随着社会的发展，用户对软件个性化设置需求越来越强烈，因此在进行网页设计时，可能需要多次地对网页中的元素进行颜色、位置、形状等修改或更新。现有的自定义布局技术，在浏览器渲染网页的过程中，浏览器会基于加载的HTML文档构建DOM树，然后通过加载CSS文件得到页面的样式表，将DOM树和样式表关联起来得到带有样式属性的DOM树。然后浏览器开始布局，为DOM树上的每个DOM节点计算精确坐标值。最后进行可视化渲染，形成最终的网页页面。

而当网页出现更新时，现有的自定义布局方式，要改变页面展示的内容只能通过遍历查询DOM树的方式找到需要修改的DOM节点，然后修改样式行为或者结构，来达到更新视图的目的。这种方式相当消耗计算资源，因为每次查询DOM节点几乎都需要遍历整颗DOM树，因此现有的自定义布局容易出现页面抖动，闪屏情况。

本申请基于虚拟DOM技术，针对页面自定义布局提出一种网页设计方法，适用于移动Web和PC Web页面，以及任何使用虚拟DOM渲染的页面，用户可以在渲染页面自由排列页面模块，完成自定义布局设置。本申请提供的网页设计方法，减少了真实DOM树的操作次数，提高了页面更新效率，页面更稳定。

本申请实施例提供的网页设计方法，可以应用于如图1所示的应用环境中。其中，终端101通过网络与服务器102进行通信。数据存储系统可以存储服务器102需要处理的数据。数据存储系统可以集成在服务器102上，也可以放在云上或其他网络服务器上。其中，终端接收到用户在目标网页上的操作，并将用户的操作发送给服务器，由服务器根据目标网页的源代码生成目标网页对应的虚拟文档对象模型，响应于操作获取至少一个目标页面模块对应的布局变化信息，根据布局变化信息确定需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于更新后的虚拟文档对象模型渲染目标网页。

其中，终端101可以但不限于是各种个人计算机、笔记本电脑、智能手机和平板电脑，服务器102可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

在另一中实施例中，该应用环境可以仅包括终端，终端接收到用户在目标网页上的操作，由终端根据目标网页的源代码生成目标网页对应的虚拟文档对象模型，响应于操作获取至少一个目标页面模块对应的布局变化信息，根据布局变化信息确定需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于更新后的虚拟文档对象模型渲染目标网页。

在一个实施例中，如图2所示，提供了一种网页设计方法，以该方法应用于图1中的终端为例进行说明，包括以下步骤：

步骤201，在接收到用户在目标网页上的操作之后，根据目标网页的源代码生成目标网页对应的虚拟文档对象模型。

其中，目标网页是指当前需要调整设计的网页页面，目标网页中包含有多个页面模块，当用户需要对页面模块进行诸如位置、颜色、形状等更新时，可以在目标网页上输入用户的操作，用户在目标网页上的操作可以例如是滑动操作、拖拽操作、点击操作等。

其中，页面模块是由至少一个页面元素合并组成的，页面元素例如是输入框、下拉菜单、按钮等等。

当终端接收到用户在目标网页上的操作之后，表示用户对目标网页中的页面模块进行更新，可以例如是位置更新、形状更新、尺寸更新、颜色更新等，常常，该种更新是由多次操作完成的。为了减少在真实文档对象模型上的操作次数，本申请实施例中，终端可以用JS(JavaScript)对象来模拟真实文档对象模型中的文档对象节点，得到虚拟文档对象模型，然后将多次更新保存在虚拟文档对象模型上再将最终的JS对象映射成真实的文档对象模型，交由浏览器去绘制。

下面对生成虚拟文档对象模型的过程进行详细说明：

可选的，本申请实施例中，终端的浏览器在读取到目标网页的源代码之后，可以生成真实文档对象模型，然后通过JS对象来模拟真实文档对象模型中的文档对象节点，得到虚拟文档对象模型。可选的，终端的浏览器在接收到用户在目标网页上的操作之后，通过JS对象来模拟真实文档对象模型中的文档对象节点，得到虚拟文档对象模型。

步骤202，响应于操作获取至少一个目标页面模块对应的布局变化信息，布局变化信息包括目标页面模块在操作前的布局对象和在操作后的布局对象。

下面以用户的操作为拖拽操作为例进行说明，请参考图3，图3示出了拖拽前的至少一个目标页面模块的布局示意图。其中，图3中示出的目标网页被划分为多个列，分别用column1,column2,column3,column...表示，每一个column表示一个布局对象，每个布局对象内可以有数量不等的页面模块，该些页面模块在布局对象内具有模块标识，例如column1中的页面模块的模块标识分别表示为module11，module12，module13，module14，...。

请参考图4，图4示出了对至少一个目标页面模块拖拽示意图。显然，用户在拖拽操作时，需要选定拖拽对象，拖拽对象即目标页面模块，目标页面模块的数量可以是一个或者多个。图4中示例性示出的目标页面模块为module12。

请参考图5，图5示出了拖拽后的至少一个目标页面模块的布局示意图。

根据图3至图5可以看出，用户的拖拽操作将目标页面模块module12从布局对象column1拖拽到了布局对象column2。可以确定在拖拽前目标页面模块module12的布局对象为column1，拖拽后目标页面模块module12的布局对象为column2。基于此，终端可以获取到目标页面模块module12对应的布局变化信息。

需要说明的是，本申请实施例中，目标页面模块的布局变化信息还可以是指尺寸大小的变化、颜色的变化、形状的变化等，并不限于上述图3-5示出的位置变化。

步骤203，根据布局变化信息确定需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于更新后的虚拟文档对象模型渲染目标网页。

继续参考图3-5，由于目标页面模块的位置发生了变化，因此布局对象column1中的其余页面模块以及布局对象column2中的其余页面模块也都需要基于目标页面模块module12的位置而发生变化，该些对应发生变化的页面模块及候选页面模块。

例如图5所示，column1中与目标页面模块module12相关的多个候选页面模块例如是module13，module14，module...。column2中与目标页面模块module12相关的多个候选页面模块例如是module22，module23，module24，module...。

其中，目标页面模块module12从column1中移走之后，column1中候选页面模块module13，module14，module...的模块标识发生改变，例如变为module12，module13，module...。

目标页面模块module12移入column2之后，column2中候选页面模块module22，module23，module24，module...的模块标识发生改变，例如变为module23，module24，module25，module...。

本申请实施例中，本申请实施例中，更新候选页面模块对应的虚拟文档对象节点是指更新候选页面模块的虚拟文档对象节点的关键属性，其中，候选页面模块的关键属性包括模块属性、模块标识和模块样式类。其中，模块属性包括页面模块的尺寸和坐标，模块标识为唯一标识，模块样式类为模块的颜色、形状等附属信息。

本申请实施例中终端可以响应于用户基于时间顺序输入的操作依次获取到多个目标页面模块的布局变化信息，然后分别根据该多个目标页面模块的布局变化信息需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，从而得到更新后的虚拟文档对象模型，这样，页面的更新可以先全部反映在JS对象(虚拟文档对象模型)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的虚拟文档对象模型映射成真实的文档对象模型，交由浏览器去绘制。

本申请实施例中，在更新目标网页时，并不会直接在真实DOM树上进行更新操作，而是基于虚拟DOM树进行更新，得到更新后的虚拟DOM树，最终将更新后的虚拟DOM树一次性地映射到真实DOM树上进行渲染，这样目标网页的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制渲染目标网页，减少了真实DOM树的操作次数，提高了页面更新效率，页面更稳定。

在本申请的一个实施例中，如图6所示，根据目标网页的源代码生成目标网页对应的虚拟文档对象模型的过程可以包括以下内容：

步骤601，根据源代码进行解析，构建真实文档对象模型，真实文档对象模型包括多个文档对象节点。

本申请实施例中，终端可以基于HTML解读器对源代码进行解析，构建DOM树，接收CSS代码解析出样式表规则，将样式表规则对应到DOM树节点上，得到一棵带有样式属性的DOM树。如图7所示，其示出了一种简单的DOM树的示意图，其中，h1,h2为文档对象节点。

步骤602，遍历真实文档对象模型，对于扫描到的各文档对象节点，创建JS对象，并记录文档对象节点的属性信息。

遍历如图7所示的DOM树，可以对扫描到的每个文档对象节点(即树节点)，使用JS进行模拟得到JS对象，其中在创建JS对象时，需要记录下文档对象节点的属性信息，其中，属性信息包括模块属性、模块标识和模块样式类。

步骤603，根据各文档对象节点对应的JS对象生成虚拟文档对象模型。

可选的，各文档对象节点对应的JS对象即为各页面模块对应的JS对象，将各文档对象节点对应的JS对象作为虚拟文档对象模型。

可选的，根据各文档对象节点对应的JS对象生成虚拟文档对象模型的方法还可以包括：获取目标网页中的多个页面元素对应的JS对象；对于各页面模块，根据构成页面模块的多个页面元素对应的JS对象得到页面模块对应的JS对象。

其中，本申请实施例中，可以采用JS对象模拟页面元素，然后将多个页面元素的JS对象拼接得到页面模块的JS对象，将各个页面模块的JS对象作为虚拟文档对象模型。

本申请实施例提供的方案通过将真实文档对象模型映射为以JS对象形式表示的虚拟文档对象模型，从而便于先在虚拟文档对象模型上进行更新，然后再将虚拟文档对象模型上的更新统一映射到真实文档对象模型上，从而实现减少在真实文档对象模型上操作的次数，减少运算量。

在本申请的一个实施例中，如图8所示，其示出了本申请技术方案的流程示意图：

步骤801，构建页面模块。

根据目标网页的页面设计，将页面划分出相对独立的页面模块，并获取每个页面模块设计对应的JS对象，形式如<Component 1/>,<Component 2/>,<Component 3/>,<Component 4/>等。

可选的，根据目标网页的页面设计，将页面划分出多个独立的页面元素，页面元素例如是按钮、输入框、下拉菜单等等，基于页面设计原理将多个相关页面元素合并为一个页面模块，得到每个页面模块对应的JS对象。

步骤802、根据各页面模块构建模块池。

其中，在构建页面模块时，需要给每个页面模块配置关键属性和布局对象模块属性，其中，页面模块的关键属性包括模块标识、模块属性和模块样式类中的至少一种，其中，模块属性包括页面模块的尺寸和坐标，布局对象表示页面模块在目标网页中的区域。模块标识为页面模块的唯一标识，模块样式类为模块的颜色、形状等附属信息。

进一步的，在构建模块池的过程中，还需要给每个页面模块配置布局对象，布局对象表示页面模块在目标网页中的区域。

其中，如图9所示，构建布局对象的过程可以包括以下内容：

步骤901，将目标网页划分为多个区域，每个区域为一个布局对象。

可选的，可以将目标网页划分为多个列，可选的，可以通过预设的网格将目标网页划分为多个区域。如图3至图5中示出的column1,column2,column3,column...。

步骤902，根据各页面模块的坐标位置确定各页面模块对应的布局对象。

通过比对每个页面模块的坐标位置与每个布局对象的覆盖范围可以将多个页面模块划分到不同的布局对象中，而在每个布局对象内部，可以对其中的页面模块进行排序，得到每个布局对象中页面模块的排序。例如column1中的页面模块的模块标识分别表示为module11，module12，module13，module14，...。

与此同时，还可以给每个布局对象配置对应的唯一标识和布局样式属性，布局样式属性例如是颜色、形状、坐标位置、尺寸等。

其中，根据布局对象对其中的页面模块进行定义，然后在渲染页面的时候，根据页面模块的唯一标识key在模块池中查询页面模块，渲染到页面上。

步骤803、当接收到用户在目标网页上的操作之后，响应于该操作获取至少一个目标页面模块对应的布局变化信息。

根据用户的操作确定至少一个目标页面模块的模块标识；目标页面模块可以是指用户的操作选定的页面模块，根据用户的操作可以确定出目标页面模块的模块标识。模块标识为页面模块的唯一标识。根据模块标识从模块池中获取至少一个目标页面模块的操作前的布局对象和至少一个目标页面模块的操作后的布局对象。

在获取到模块标识之后，可以从模块池中获取到操作前，目标页面模块的布局对象，还可以获取到操作后，目标页面模块的布局对象。

步骤804、根据布局变化信息确定需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于更新后的虚拟文档对象模型渲染目标网页。

根据至少一个目标页面模块的操作前的布局对象对应的页面模块以及至少一个目标页面模块的操作后的布局对象对应的页面模块确定候选页面模块。

其中，将至少一个目标页面模块的操作前的布局对象对应的页面模块中排序在至少一个目标页面模块之后的页面模块确定为候选页面模块；将至少一个目标页面模块的操作后的布局对象对应的页面模块中排序在至少一个目标页面模块之后的页面模块确定为候选页面模块。

本申请实施例中，通过构建页面模块，将多个页面元素组合形成页面模块，然后将页面模块以一个整体的形式进行位置、颜色、形状等调整和更新，与此同时，将目标页面划分为多个布局对象，根据每个页面模块的坐标位置确定其对应的布局对象实现了对页面模块的定位，这样在移动页面模块时，可以仅对发生了更新的布局对象进行更新。提高了更新效率。

应该理解的是，虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

基于同样的发明构思，本申请实施例还提供了一种用于实现上述所涉及的网页设计方法的网页设计装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个网页设计装置实施例中的具体限定可以参见上文中对于网页设计方法的限定，在此不再赘述。

在一个实施例中，如图10所示，提供了一种网页设计装置，包括：虚拟文档对象模型生成模块1001、响应模块1002和渲染模块1003，其中：

虚拟文档对象模型生成模块1001，用于在接收到用户在目标网页上的操作之后，根据目标网页的源代码生成目标网页对应的虚拟文档对象模型，虚拟文档对象模型包括目标网页中各个页面模块对应的虚拟文档对象节点；

响应模块1002，用于响应于操作获取至少一个目标页面模块对应的布局变化信息，布局变化信息包括目标页面模块在操作前的布局对象和在操作后的布局对象；

渲染模块1003，用于根据布局变化信息确定需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于更新后的虚拟文档对象模型渲染目标网页。

在其中一个实施例中，虚拟文档对象模型生成模块1001具体用于：

根据源代码进行解析，构建真实文档对象模型，真实文档对象模型包括多个文档对象节点；

遍历真实文档对象模型，对于扫描到的各文档对象节点，创建JS对象，并记录文档对象节点的属性信息；

根据各文档对象节点对应的JS对象生成虚拟文档对象模型。

在其中一个实施例中，虚拟文档对象模型生成模块1001具体用于：

获取目标网页中的多个页面元素对应的JS对象；

对于各页面模块，根据构成页面模块的多个页面元素对应的JS对象得到页面模块对应的JS对象；

根据各页面模块对应的JS对象生成虚拟文档对象模型。

在其中一个实施例中，虚拟文档对象模型生成模块1001具体用于：

根据各页面模块构建模块池；

对模块池内的各页面模块配置关键属性和布局对象，页面模块的关键属性包括模块标识、模块属性和模块样式类中的至少一种，其中，模块属性包括页面模块的尺寸和坐标，布局对象表示页面模块在目标网页中的区域。

在其中一个实施例中，虚拟文档对象模型生成模块1001具体用于：

根据操作确定至少一个目标页面模块的模块标识；

根据模块标识从模块池中获取至少一个目标页面模块的操作前的布局对象和至少一个目标页面模块的操作后的布局对象。

在其中一个实施例中，虚拟文档对象模型生成模块1001具体用于：

将目标网页划分为多个区域，每个区域为一个布局对象；

根据各页面模块的坐标位置确定各页面模块对应的布局对象。

在其中一个实施例中，渲染模块1003具体用于：

根据至少一个目标页面模块的操作前的布局对象对应的页面模块以及至少一个目标页面模块的操作后的布局对象对应的页面模块确定候选页面模块。

上述网页设计装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图11所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、移动蜂窝网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种网页设计方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图11中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现以下步骤：

在接收到用户在目标网页上的操作之后，根据目标网页的源代码生成目标网页对应的虚拟文档对象模型，虚拟文档对象模型包括目标网页中各个页面模块对应的虚拟文档对象节点；

响应于操作获取至少一个目标页面模块对应的布局变化信息，布局变化信息包括目标页面模块在操作前的布局对象和在操作后的布局对象；

根据布局变化信息确定需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于更新后的虚拟文档对象模型渲染目标网页。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

根据源代码进行解析，构建真实文档对象模型，真实文档对象模型包括多个文档对象节点；

遍历真实文档对象模型，对于扫描到的各文档对象节点，创建JS对象，并记录文档对象节点的属性信息；

根据各文档对象节点对应的JS对象生成虚拟文档对象模型。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

获取目标网页中的多个页面元素对应的JS对象；

对于各页面模块，根据构成页面模块的多个页面元素对应的JS对象得到页面模块对应的JS对象；

根据各页面模块对应的JS对象生成虚拟文档对象模型。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

根据各页面模块构建模块池；

对模块池内的各页面模块配置关键属性和布局对象，页面模块的关键属性包括模块标识、模块属性和模块样式类中的至少一种，其中，模块属性包括页面模块的尺寸和坐标，布局对象表示页面模块在目标网页中的区域。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

根据操作确定至少一个目标页面模块的模块标识；

根据模块标识从模块池中获取至少一个目标页面模块的操作前的布局对象和至少一个目标页面模块的操作后的布局对象。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

将目标网页划分为多个区域，每个区域为一个布局对象；

根据各页面模块的坐标位置确定各页面模块对应的布局对象。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

根据至少一个目标页面模块的操作前的布局对象对应的页面模块以及至少一个目标页面模块的操作后的布局对象对应的页面模块确定候选页面模块。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

在接收到用户在目标网页上的操作之后，根据目标网页的源代码生成目标网页对应的虚拟文档对象模型，虚拟文档对象模型包括目标网页中各个页面模块对应的虚拟文档对象节点；

响应于操作获取至少一个目标页面模块对应的布局变化信息，布局变化信息包括目标页面模块在操作前的布局对象和在操作后的布局对象；

根据布局变化信息确定需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于更新后的虚拟文档对象模型渲染目标网页。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

根据源代码进行解析，构建真实文档对象模型，真实文档对象模型包括多个文档对象节点；

遍历真实文档对象模型，对于扫描到的各文档对象节点，创建JS对象，并记录文档对象节点的属性信息；

根据各文档对象节点对应的JS对象生成虚拟文档对象模型。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

获取目标网页中的多个页面元素对应的JS对象；

对于各页面模块，根据构成页面模块的多个页面元素对应的JS对象得到页面模块对应的JS对象；

根据各页面模块对应的JS对象生成虚拟文档对象模型。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

根据各页面模块构建模块池；

对模块池内的各页面模块配置关键属性和布局对象，页面模块的关键属性包括模块标识、模块属性和模块样式类中的至少一种，其中，模块属性包括页面模块的尺寸和坐标，布局对象表示页面模块在目标网页中的区域。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

根据操作确定至少一个目标页面模块的模块标识；

根据模块标识从模块池中获取至少一个目标页面模块的操作前的布局对象和至少一个目标页面模块的操作后的布局对象。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

将目标网页划分为多个区域，每个区域为一个布局对象；

根据各页面模块的坐标位置确定各页面模块对应的布局对象。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

根据至少一个目标页面模块的操作前的布局对象对应的页面模块以及至少一个目标页面模块的操作后的布局对象对应的页面模块确定候选页面模块。

在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：

在接收到用户在目标网页上的操作之后，根据目标网页的源代码生成目标网页对应的虚拟文档对象模型，虚拟文档对象模型包括目标网页中各个页面模块对应的虚拟文档对象节点；

响应于操作获取至少一个目标页面模块对应的布局变化信息，布局变化信息包括目标页面模块在操作前的布局对象和在操作后的布局对象；

根据布局变化信息确定需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于更新后的虚拟文档对象模型渲染目标网页。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

根据源代码进行解析，构建真实文档对象模型，真实文档对象模型包括多个文档对象节点；

遍历真实文档对象模型，对于扫描到的各文档对象节点，创建JS对象，并记录文档对象节点的属性信息；

根据各文档对象节点对应的JS对象生成虚拟文档对象模型。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

获取目标网页中的多个页面元素对应的JS对象；

对于各页面模块，根据构成页面模块的多个页面元素对应的JS对象得到页面模块对应的JS对象；

根据各页面模块对应的JS对象生成虚拟文档对象模型。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

根据各页面模块构建模块池；

对模块池内的各页面模块配置关键属性和布局对象，页面模块的关键属性包括模块标识、模块属性和模块样式类中的至少一种，其中，模块属性包括页面模块的尺寸和坐标，布局对象表示页面模块在目标网页中的区域。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

根据操作确定至少一个目标页面模块的模块标识；

根据模块标识从模块池中获取至少一个目标页面模块的操作前的布局对象和至少一个目标页面模块的操作后的布局对象。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

将目标网页划分为多个区域，每个区域为一个布局对象；

根据各页面模块的坐标位置确定各页面模块对应的布局对象。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

根据至少一个目标页面模块的操作前的布局对象对应的页面模块以及至少一个目标页面模块的操作后的布局对象对应的页面模块确定候选页面模块。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory，ROM)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(ReRAM)、磁变存储器(Magnetoresistive Random Access Memory，MRAM)、铁电存储器(Ferroelectric Random Access Memory，FRAM)、相变存储器(Phase Change Memory，PCM)、石墨烯存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic RandomAccess Memory，DRAM)等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (11)

1.一种网页设计方法，其特征在于，所述方法包括：

在接收到用户在目标网页上的操作之后，根据所述目标网页的源代码生成所述目标网页对应的虚拟文档对象模型，所述虚拟文档对象模型包括所述目标网页中各个页面模块对应的虚拟文档对象节点；

响应于所述操作获取至少一个目标页面模块对应的布局变化信息，所述布局变化信息包括所述目标页面模块在操作前的布局对象和在操作后的布局对象；

根据所述布局变化信息确定需要更新的候选页面模块，并更新所述候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于所述更新后的虚拟文档对象模型渲染所述目标网页。

2.根据权利要求1所述的方法，其特征在于，所述根据所述目标网页的源代码生成所述目标网页对应的虚拟文档对象模型，包括：

根据所述源代码进行解析，构建真实文档对象模型，所述真实文档对象模型包括多个文档对象节点；

遍历所述真实文档对象模型，对于扫描到的各所述文档对象节点，创建JS对象，并记录所述文档对象节点的属性信息；

根据各所述文档对象节点对应的JS对象生成所述虚拟文档对象模型。

3.根据权利要求2所述的方法，其特征在于，所述根据各所述文档对象节点对应的JS对象生成所述虚拟文档对象模型，包括：

获取所述目标网页中的多个页面元素对应的JS对象；

对于各所述页面模块，根据构成所述页面模块的多个页面元素对应的JS对象得到所述页面模块对应的JS对象；

根据各所述页面模块对应的JS对象生成所述虚拟文档对象模型。

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

根据各所述页面模块构建模块池；

对所述模块池内的各所述页面模块配置关键属性和布局对象，所述页面模块的关键属性包括模块标识、模块属性和模块样式类中的至少一种，其中，所述模块属性包括所述页面模块的尺寸和坐标，所述布局对象表示所述页面模块在所述目标网页中的区域。

5.根据权利要求4所述的方法，其特征在于，所述响应于所述操作获取至少一个目标页面模块对应的布局变化信息，包括：

根据所述操作确定所述至少一个目标页面模块的模块标识；

根据所述模块标识从所述模块池中获取所述至少一个目标页面模块的操作前的布局对象和所述至少一个目标页面模块的操作后的布局对象。

6.根据权利要求4所述的方法，其特征在于，所述对所述模块池内的各所述页面模块配置布局对象，包括：

将所述目标网页划分为多个区域，每个所述区域为一个布局对象；

根据各所述页面模块的坐标位置确定各所述页面模块对应的布局对象。

7.根据权利要求1所述的方法，其特征在于，所述根据所述布局变化信息确定需要更新的候选页面模块，包括：

根据所述至少一个目标页面模块的操作前的布局对象对应的页面模块以及所述至少一个目标页面模块的操作后的布局对象对应的页面模块确定所述候选页面模块。

8.一种网页设计装置，其特征在于，所述装置包括：

虚拟文档对象模型生成模块，用于在接收到用户在目标网页上的操作之后，根据所述目标网页的源代码生成所述目标网页对应的虚拟文档对象模型，所述虚拟文档对象模型包括所述目标网页中各个页面模块对应的虚拟文档对象节点；

响应模块，用于响应于所述操作获取至少一个目标页面模块对应的布局变化信息，所述布局变化信息包括所述目标页面模块在操作前的布局对象和在操作后的布局对象；

渲染模块，用于根据所述布局变化信息确定需要更新的候选页面模块，并更新所述候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于所述更新后的虚拟文档对象模型渲染所述目标网页。

9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述的方法的步骤。

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

11.一种计算机程序产品，包括计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。

Images