网页设计方法、装置、计算机设备、存储介质和产品制造方法及图纸

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

【技术实现步骤摘要】
网页设计方法、装置、计算机设备、存储介质和产品


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

技术介绍

[0002]在浏览器渲染网页的过程中，浏览器会基于加载的HTML文档构建DOM(英文：Document Object Model，中文：文档对象模型)树，然后通过加载CSS文件得到页面的样式表，将DOM树和样式表关联起来得到带有样式属性的DOM树。然后浏览器开始布局，为DOM树上的每个DOM节点计算精确坐标值。最后进行可视化渲染，形成最终的网页页面。
[0003]其中，当需要对DOM节点进行更新操作时，浏览器会从构建DOM树开始从头到尾执行一遍流程。
[0004]然而，在实际应用中，例如在一次更新操作时，需要更新10个DOM节点，则浏览器需要从头到尾执行10遍上述流程，消耗大量的计算资源。

技术实现思路

[0005]基于此，有必要针对上述技术问题，提供一种能够节约计算资源提高页面更新效率的网页设计方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。
[0006]第一方面，本申请提供了一种网页设计方法，该方法包括：
[0007]在接收到用户在目标网页上的操作之后，根据目标网页的源代码生成目标网页对应的虚拟文档对象模型，虚拟文档对象模型包括目标网页中各个页面模块对应的虚拟文档对象节点；
[0008]响应于操作获取至少一个目标页面模块对应的布局变化信息，布局变化信息包括目标页面模块在操作前的布局对象和在操作后的布局对象；
[0009]根据布局变化信息确定需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于更新后的虚拟文档对象模型渲染目标网页。
[0010]在其中一个实施例中，根据目标网页的源代码生成目标网页对应的虚拟文档对象模型，包括：
[0011]根据源代码进行解析，构建真实文档对象模型，真实文档对象模型包括多个文档对象节点；
[0012]遍历真实文档对象模型，对于扫描到的各文档对象节点，创建JS对象，并记录文档对象节点的属性信息；
[0013]根据各文档对象节点对应的JS对象生成虚拟文档对象模型。
[0014]在其中一个实施例中，根据各文档对象节点对应的JS对象生成虚拟文档对象模型，包括：
[0015]获取目标网页中的多个页面元素对应的JS对象；
[0016]对于各页面模块，根据构成页面模块的多个页面元素对应的JS对象得到页面模块对应的JS对象；
[0017]根据各页面模块对应的JS对象生成虚拟文档对象模型。
[0018]在其中一个实施例中，该方法还包括：
[0019]根据各页面模块构建模块池；
[0020]对模块池内的各页面模块配置关键属性和布局对象，页面模块的关键属性包括模块标识、模块属性和模块样式类中的至少一种，其中，模块属性包括页面模块的尺寸和坐标，布局对象表示页面模块在目标网页中的区域。
[0021]在其中一个实施例中，响应于操作获取至少一个目标页面模块对应的布局变化信息，包括：
[0022]根据操作确定至少一个目标页面模块的模块标识；
[0023]根据模块标识从模块池中获取至少一个目标页面模块的操作前的布局对象和至少一个目标页面模块的操作后的布局对象。
[0024]在其中一个实施例中，对模块池内的各页面模块配置布局对象，包括：
[0025]将目标网页划分为多个区域，每个区域为一个布局对象；
[0026]根据各页面模块的坐标位置确定各页面模块对应的布局对象。
[0027]在其中一个实施例中，根据布局变化信息确定需要更新的候选页面模块，包括：
[0028]根据至少一个目标页面模块的操作前的布局对象对应的页面模块以及至少一个目标页面模块的操作后的布局对象对应的页面模块确定候选页面模块。
[0029]第二方面，本申请还提供了一种网页设计装置，该装置包括：
[0030]虚拟文档对象模型生成模块，用于在接收到用户在目标网页上的操作之后，根据目标网页的源代码生成目标网页对应的虚拟文档对象模型，虚拟文档对象模型包括目标网页中各个页面模块对应的虚拟文档对象节点；
[0031]响应模块，用于响应于操作获取至少一个目标页面模块对应的布局变化信息，布局变化信息包括目标页面模块在操作前的布局对象和在操作后的布局对象；
[0032]渲染模块，用于根据布局变化信息确定需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于更新后的虚拟文档对象模型渲染目标网页。
[0033]第三方面，本申请还提供了一种计算机设备，所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
[0034]在接收到用户在目标网页上的操作之后，根据目标网页的源代码生成目标网页对应的虚拟文档对象模型，虚拟文档对象模型包括目标网页中各个页面模块对应的虚拟文档对象节点；
[0035]响应于操作获取至少一个目标页面模块对应的布局变化信息，布局变化信息包括目标页面模块在操作前的布局对象和在操作后的布局对象；
[0036]根据布局变化信息确定需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于更新后的虚拟文档对象模型渲染目标网页。
[0037]第四方面，本申请还提供了一种计算机可读存储介质，所述计算机可读存储介质，
其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：
[0038]在接收到用户在目标网页上的操作之后，根据目标网页的源代码生成目标网页对应的虚拟文档对象模型，虚拟文档对象模型包括目标网页中各个页面模块对应的虚拟文档对象节点；
[0039]响应于操作获取至少一个目标页面模块对应的布局变化信息，布局变化信息包括目标页面模块在操作前的布局对象和在操作后的布局对象；
[0040]根据布局变化信息确定需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于更新后的虚拟文档对象模型渲染目标网页。
[0041]第五方面，本申请还提供了一种计算机程序产品，所述计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：
[0042]在接收到用户在目标网页上的操作之后，根据目标网页的源代码生成目标网页对应的虚拟文档对象模型，虚拟文档对象模型包括目标网页中各个页面模块对应的虚拟文档对象节点；
[0043]响应于操作获取至少一个目标页面模块对应的布局变化信息，布局变化信息包括目标页面模块在操作前的布局对象和在操作后的布局对象；
[0044]根据布局变化信息确定需要更新的候选页面模块，并更新候选页面模块对应的虚拟文档对象节点，得到更新后的虚本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种网页设计方法，其特征在于，所述方法包括：在接收到用户在目标网页上的操作之后，根据所述目标网页的源代码生成所述目标网页对应的虚拟文档对象模型，所述虚拟文档对象模型包括所述目标网页中各个页面模块对应的虚拟文档对象节点；响应于所述操作获取至少一个目标页面模块对应的布局变化信息，所述布局变化信息包括所述目标页面模块在操作前的布局对象和在操作后的布局对象；根据所述布局变化信息确定需要更新的候选页面模块，并更新所述候选页面模块对应的虚拟文档对象节点，得到更新后的虚拟文档对象模型；基于所述更新后的虚拟文档对象模型渲染所述目标网页。2.根据权利要求1所述的方法，其特征在于，所述根据所述目标网页的源代码生成所述目标网页对应的虚拟文档对象模型，包括：根据所述源代码进行解析，构建真实文档对象模型，所述真实文档对象模型包括多个文档对象节点；遍历所述真实文档对象模型，对于扫描到的各所述文档对象节点，创建JS对象，并记录所述文档对象节点的属性信息；根据各所述文档对象节点对应的JS对象生成所述虚拟文档对象模型。3.根据权利要求2所述的方法，其特征在于，所述根据各所述文档对象节点对应的JS对象生成所述虚拟文档对象模型，包括：获取所述目标网页中的多个页面元素对应的JS对象；对于各所述页面模块，根据构成所述页面模块的多个页面元素对应的JS对象得到所述页面模块对应的JS对象；根据各所述页面模块对应的JS对象生成所述虚拟文档对象模型。4.根据权利要求3所述的方法，其特征在于，所述方法还包括：根据各所述页面模块构建模块池；对所述模块池内的各所述页面模块配置关键属性和布局对象，所述页面模块的关键属性包括模块标识、模块属性和模块样式类中的至少一种，其中，所述模块属性包括所述页面模块的尺寸和坐标，所述布局对象表示所述页面模块在所述目标网页中的区域。5.根据权利要求4所述的方法，其特征在于，所述响应于所述操作获取至少一个目标页面模块对应的布局变化信息，包括：根据所述...

【专利技术属性】
技术研发人员：张辉，
申请(专利权)人：武汉联影医疗科技有限公司，
类型：发明
国别省市：