CN117539491B - 页面布局方法、装置、电子设备、存储介质及程序产品 - Google Patents

Abstract

本申请提供了一种页面布局方法、装置、电子设备、存储介质及程序产品，方法包括：获取待布局页面对应的节点树，节点树中包括多个节点；针对多个节点中的任一节点，在节点的父节点采用弹性布局的情况下，获取节点的样式属性，并基于节点的样式属性确定节点的主轴尺寸；样式属性至少包括节点尺寸限制属性；在节点包括至少一个儿子节点的情况下，获取参数映射表，并基于节点的主轴尺寸和参数映射表，得到节点的从轴尺寸；基于每一节点的主轴尺寸和从轴尺寸，确定每一节点的主轴坐标和从轴坐标；根据每一节点的主轴尺寸、从轴尺寸、主轴坐标以及从轴坐标，生成待布局页面。通过本申请，能够缩短页面布局时间，提高布局性能。

Description

页面布局方法、装置、电子设备、存储介质及程序产品

技术领域

本申请涉及计算机技术领域，尤其涉及一种页面布局方法、装置、电子设备、存储介质及程序产品。

背景技术

随着计算机技术的发展，终端上集成了越来越多面向用户的应用程序。应用程序是一种没有浏览器引擎支持的环境，在应用程序的页面生成过程中，专业的开发者需要使用布局器来快速实现复杂的布局效果。

尤其是对于嵌入型应用程序，例如微信小程序，相关技术中开发者使用的布局器一般都支持一种布局方式，且布局性能较低，导致页面生成所需的时间较长。

发明内容

本申请实施例提供一种页面布局方法、装置、电子设备、存储介质及程序产品，能够缩短页面布局时间，提高布局性能。

本申请实施例的技术方案是这样实现的：

本申请实施例提供一种页面布局方法，所述方法包括：获取待布局页面对应的节点树，所述节点树中包括多个节点，所述节点用于表征所述待布局页面的内容；针对所述多个节点中的任一节点，在所述节点的父节点采用弹性布局的情况下，获取所述节点的样式属性，并基于所述节点的样式属性确定所述节点的主轴尺寸；所述样式属性至少包括节点尺寸限制属性；在所述节点包括至少一个儿子节点的情况下，获取参数映射表，并基于所述节点的主轴尺寸和所述参数映射表，得到所述节点的从轴尺寸；所述参数映射表包括样式属性与尺寸返回值之间的映射关系；基于每一所述节点的主轴尺寸和从轴尺寸，确定每一所述节点的主轴坐标和从轴坐标；根据每一所述节点的主轴尺寸、从轴尺寸、主轴坐标以及从轴坐标，生成待布局页面。

本申请实施例提供一种页面布局装置，所述装置包括：节点树获取模块，用于获取待布局页面对应的节点树，所述节点树中包括多个节点，所述节点用于表征所述待布局页面的内容；主轴尺寸确定模块，用于针对所述多个节点中的任一节点，在所述节点的父节点采用弹性布局的情况下，获取所述节点的样式属性，并基于所述节点的样式属性确定所述节点的主轴尺寸；所述样式属性至少包括节点尺寸限制属性；从轴尺寸确定模块，用于在所述节点包括至少一个儿子节点的情况下，获取参数映射表，并基于所述节点的主轴尺寸和所述参数映射表，得到所述节点的从轴尺寸；所述参数映射表包括样式属性与尺寸返回值之间的映射关系；坐标确定模块，用于基于每一所述节点的主轴尺寸和从轴尺寸，确定每一所述节点的主轴坐标和从轴坐标。布局模块，用于根据每一所述节点的主轴尺寸、从轴尺寸、主轴坐标以及从轴坐标，生成待布局页面。

在一些实施例中，所述样式属性包括基准值属性，所述主轴尺寸确定模块，还用于在所述节点的基准值属性存在设置值的情况下，将所述基准值属性的设置值确定为所述节点的初始尺寸；在所述节点的基准值属性不存在设置值，所述节点的节点尺寸限制属性存在设置值的情况下，将所述节点尺寸限制属性的设置值确定为所述节点的初始尺寸；基于所述节点的初始尺寸以及样式属性，确定所述节点的主轴尺寸。

在一些实施例中，所述主轴尺寸确定模块，还用于在所述节点的基准值属性不存在设置值，且所述节点的节点尺寸限制属性不存在设置值的情况下，若所述节点包括至少一个儿子节点，对所述节点调用预设的递归函数，确定所述节点的每一所述儿子节点的初始尺寸；对所述儿子节点的初始尺寸进行求和，得到所述节点的初始尺寸；基于所述节点的初始尺寸以及样式属性，确定所述节点的主轴尺寸。

在一些实施例中，所述样式属性包括文本宽度限制属性，所述主轴尺寸确定模块，还用于在所述节点不包括儿子节点，且所述节点的文本宽度限制属性不存在设置值的情况下，获取所述节点中文本排成一行时所占据的文本宽度，将所述文本宽度确定为所述节点的初始尺寸；在所述节点不包括儿子节点，且所述节点的文本宽度限制属性存在设置值的情况下，将所述文本宽度限制属性的设置值确定为所述节点的初始尺寸；基于所述节点的初始尺寸以及所述样式属性，确定所述节点的主轴尺寸。

在一些实施例中，所述样式属性包括从轴对齐属性，所述从轴尺寸确定模块，还用于在所述节点的从轴对齐属性的设置值不为拉伸的情况下，对所述节点调用预设的递归函数，获取所述节点的叶子节点和所述叶子节点的主轴尺寸；根据所述叶子节点的主轴尺寸和所述参数映射表，确定所述叶子节点的从轴尺寸；将所述叶子节点的从轴尺寸传递至所述叶子节点的父节点，根据所述叶子节点的从轴尺寸、所述叶子节点的父节点的主轴尺寸和所述参数映射表，确定所述叶子节点的父节点的从轴尺寸；依次递归，直至确定出所述节点的从轴尺寸。

在一些实施例中，所述从轴尺寸确定模块，还用于从所述参数映射表中确定目标样式属性，所述目标样式属性中节点尺寸限制属性的设置值与所述叶子节点的主轴尺寸相等；从所述参数映射表中确定所述目标样式属性对应的目标尺寸返回值，将所述目标尺寸返回值确定为所述叶子节点的从轴尺寸。

在一些实施例中，所述从轴尺寸确定模块，还用于在所述节点的从轴对齐属性的设置值为拉伸，且所述节点的父节点的节点尺寸限制属性存在设置值的情况下，从所述父节点的节点限制属性的设置值中获取所述父节点的从轴尺寸；将所述父节点的从轴尺寸确定为所述节点的从轴尺寸。

在一些实施例中，所述从轴尺寸确定模块，还用于在所述节点的从轴对齐属性为拉伸，且所述节点的父节点的节点尺寸限制属性不存在设置值的情况下，对所述节点调用预设的递归函数，根据所述节点的主轴尺寸和所述参数映射表，确定所述节点的初始从轴尺寸；获取所述节点的兄弟节点的初始从轴尺寸；将所述节点与所述兄弟节点的初始从轴尺寸中的最大值，确定为所述节点的从轴尺寸。

在一些实施例中，所述坐标确定模块，还用于对每一所述节点调用预设的递归函数，基于每一所述节点的主轴尺寸和从轴尺寸，确定每一所述节点的每一所述儿子节点的主轴尺寸、从轴尺寸、主轴坐标以及从轴坐标。

在一些实施例中，所述主轴尺寸确定模块，还用于对所述节点的父节点的每一儿子节点的初始尺寸求和，得到初始尺寸总和；在所述初始尺寸总和小于所述父节点的节点尺寸限制属性的设置值的情况下，若所述节点的弹性增长属性的设置值大于0，对所述节点基于所述弹性增长属性进行扩展，得到所述节点扩展后的主轴尺寸；或者，在所述初始尺寸总和小于所述父节点的节点尺寸限制属性的设置值的情况下，若所述节点的弹性收缩属性的设置值大于0，对所述节点基于所述弹性收缩属性进行压缩，得到所述节点压缩后的主轴尺寸。

本申请实施例提供一种电子设备，所述电子设备包括：

存储器，用于存储计算机可执行指令或者计算机程序；

处理器，用于执行所述存储器中存储的计算机可执行指令或者计算机程序时，实现本申请实施例提供的页面布局方法。

本申请实施例提供一种计算机可读存储介质，存储有计算机程序或计算机可执行指令，用于被处理器执行时实现本申请实施例提供的页面布局方法。

本申请实施例提供一种计算机程序产品，包括计算机程序或计算机可执行指令，所述计算机程序或计算机可执行指令被处理器执行时，实现本申请实施例提供的页面布局方法。

本申请实施例具有以下有益效果：

在进行页面布局时，首先将待布局页面转化为节点树，在采用弹性布局的情况下，可以获取参数映射表，在基于节点的样式属性确定节点的主轴尺寸后，基于节点的主轴尺寸和参数映射表，确定节点的从轴尺寸，进而基于从轴尺寸和主轴尺寸确定节点的主轴坐标和横轴坐标，根据每一节点的主轴尺寸、从轴尺寸、主轴坐标以及从轴坐标，生成待布局页面。本申请实施例中，由于参数映射表包括样式属性与尺寸返回值之间的映射关系，针对每一节点，节点的主轴尺寸作为样式属性中的一项，可以直接从参数映射表基于节点的主轴尺寸获取对应的尺寸返回值，作为节点的从轴尺寸，节省了计算时间，同时在页面更新、需要重新计算所有节点的位置时，也可以直接使用参数映射表中的尺寸返回值，能够缩短页面布局所需时间，提高布局性能，从而提高页面渲染效率。

附图说明

图1是本申请实施例提供的页面布局系统架构的结构示意图；

图2是本申请实施例提供的电子设备的结构示意图；

图3是本申请实施例提供的页面布局方法的流程示意图；

图4是本申请实施例提供的父节点与子节点在页面上的效果示意图；

图5是本申请实施例提供的节点未占满主轴的示意图；

图6是本申请实施例提供的节点超出主轴的示意图。

具体实施方式

为了使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请作进一步地详细描述，所描述的实施例不应视为对本申请的限制，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。

在以下的描述中，涉及到“一些实施例”，其描述了所有可能实施例的子集，但是可以理解,“一些实施例”可以是所有可能实施例的相同子集或不同子集，并且可以在不冲突的情况下相互结合。

本申请实施例中，术语“模块”或“单元”是指有预定功能的计算机程序或计算机程序的一部分，并与其他相关部分一起工作以实现预定目标，并且可以通过使用软件、硬件（如处理电路或存储器）或其组合来全部或部分实现。同样的，一个处理器（或多个处理器或存储器）可以用来实现一个或多个模块或单元。此外，每个模块或单元都可以是包含该模块或单元功能的整体模块或单元的一部分。

除非另有定义，本申请实施例所使用的所有的技术和科学术语与所属技术领域的技术人员通常理解的含义相同。本申请实施例中所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。

对本申请实施例进行进一步详细说明之前，对本申请实施例中涉及的名词和术语进行说明，本申请实施例中涉及的名词和术语适用于如下的解释。

1）布局器：负责根据节点的样式属性、计算得出节点的具体坐标位置和宽高的模块。布局器可以根据不同的布局算法来确定用户界面（UI，User Interface）元素的位置和大小，帮助开发者快速实现复杂的布局效果，其中最常见的布局算法是弹性布局（Flexbox）和网格布局（Grid）。

2）弹性布局（Flexbox）：一种一维的布局模型，可以给flexbox的子元素之间提供了强大的空间分布和对齐能力。

3）流式布局：在文档流中，内联元素（Inline）按内联方向显示，内联方向即词语在行内文本的排列方向。块元素（Block）则一个接一个地显示，例如文档中的段落。以英语为例，内联元素从左边开始依次显示，块元素从顶部开始向下显示并移动页面。

4）位置布局（Position）：该布局方式使用位置属性（position属性），位置属性用于指定一个元素在文档中的定位方式。位置属性可以包括上（top），右（right），下（bottom）和左（left）属性，用于决定元素的最终位置。

5）DOM节点树（Document Object Model Tree）：DOM的全称是文档对象模型，是专门操作网页内容的一套对象和函数的总称。一个网页可以表示为节点树的形式，如HTMLDOM节点树。HTMLDOM节点树是HTML（超文本标记语言，Hyper Text Markup Language）文档视的树结构，用于表示网页文档中所有元素的层次结构。每个HTML标记、文本节点和属性都作为一个节点在DOM节点树中表示，它们都是一个对象，可以通过程序语言JavaScript或其他脚本语言进行访问和操作。DOM节点树从网页的根节点开始，逐级向下表示网页的结构。根节点对应的是HTML文档的<!DOC TYPE html>标签，下面是<html>标签，然后是<head>标签和<body>标签，接着是一些标记，最后是文本节点。这些节点可以相互包含和嵌套，形成一个树状结构。

6）层叠样式表（Cascading Style Sheets，CSS）：是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

相关技术中，常见的布局器有Yoga和Stretch，可以支持在多个平台上使用，包括苹果操作系统iOS、安卓系统Android、Web等平台，支持Flexbox布局方式。Yoga布局器倾向于更激进的优化，来追求更快的速度。Stretch布局器倾向于与web规范对齐，特性对齐较好。但上述两种布局器只支持Flexbox布局，且在实现Flexbox布局效果时，采用的Flexbox算法基本一致，执行递归函数的次数较多，增加了页面布局的时间，进而导致布局性能较低。

基于相关技术中所存在的问题，本申请实施例提供了一种布局样式更多、更接近网页（web）规范的高性能跨平台布局器（float-pigment-layout），其不仅支持Flexbox布局，支持多平台使用，且布局速度快，与web规范对齐度高。除此之外，本申请实施例提供的float-pigment-layout布局器还可以支持流式布局以及位置布局。因为流式布局是web布局的默认值，所以本申请实施例提供的float-pigment-layout布局器对于web的支持度更好，更加符合一般程序员的使用习惯，同时也使得float-pigment-layout布局器性能表现更佳。

本申请实施例提供的float-pigment-layout布局器可以支持一种页面布局方法，该页面布局方法在进行页面布局时，首先将待布局页面转化为节点树，在采用弹性布局的情况下，可以获取参数映射表，在基于节点的样式属性确定节点的主轴尺寸后，基于节点的主轴尺寸和参数映射表，确定节点的从轴尺寸，进而基于从轴尺寸和主轴尺寸确定节点的主轴坐标和横轴坐标，根据每一节点的主轴尺寸、从轴尺寸、主轴坐标以及从轴坐标，生成待布局页面。相比于上述相关技术中的布局器，本申请实施例提供的页面布局方法可以直接从参数映射表基于节点的主轴尺寸获取对应的尺寸返回值，作为节点的从轴尺寸，节省了计算时间，同时在页面更新、需要重新计算所有节点的位置时，也可以直接使用参数映射表中的尺寸返回值，缩短了页面布局所需时间，提高了布局性能。

这里，首先说明本申请实施例提供的页面布局设备的示例性应用，该页面布局设备是用于实现页面布局方法的电子设备。在一种实现方式中，本申请实施例提供的页面布局设备（即电子设备）可以实施为终端，也可以实施为服务器。在一种实现方式中，本申请实施例提供的页面布局设备可以实施为笔记本电脑、平板电脑，台式计算机、机顶盒、移动设备（例如，移动电话，便携式音乐播放器，个人数字助理，专用消息设备，便携式游戏设备）、智能手机、智能音箱、智能手表、智能电视、车载终端等各种类型的用户终端；在另一种实现方式中，本申请实施例提供的页面布局设备也可以实施为服务器，其中，服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络（CDN，Content Delivery Network）、以及大数据和人工智能平台等基础云计算服务的云服务器。终端以及服务器可以通过有线或无线通信方式进行直接或间接地连接，本申请实施例中不做限制。下面，将说明页面布局设备实施为服务器时的示例性应用。

参见图1，图1是本申请实施例提供的页面布局系统的一个可选的架构示意图，为实现页面布局，可以提供一个页面布局应用（float-pigment-layout布局器）。本申请实施例提供的页面布局系统中至少包括终端400、网络300和服务器200，终端400上运行有该页面布局应用。服务器200是页面布局应用的后台服务器。服务器200可以构成本申请实施例的页面布局设备，即通过服务器200实现本申请实施例的页面布局方法。终端400通过网络300连接服务器200，网络300可以是广域网或者局域网，又或者是二者的组合。

参见图1，在对待布局页面进行布局时，用户可以通过终端400在页面布局应用的客户端执行交互操作，该交互操作可以是样式属性编辑操作、点击操作等。客户端在接收到操作人员的交互操作之后，可以通过终端400将页面布局请求发送给服务器200。服务器200在接收到页面布局请求时，获取待布局页面对应的节点树，节点树中包括多个节点，节点用于表征待布局页面的内容；针对多个节点中的任一节点，在节点的父节点采用弹性布局的情况下，获取节点的样式属性，并基于节点的样式属性确定节点的主轴尺寸；样式属性至少包括节点尺寸限制属性；在节点包括至少一个儿子节点的情况下，获取参数映射表，并基于节点的主轴尺寸和参数映射表，得到节点的从轴尺寸；参数映射表包括样式属性与尺寸返回值之间的映射关系；基于每一节点的主轴尺寸和从轴尺寸，确定每一节点的主轴坐标和从轴坐标；根据每一节点的主轴尺寸、从轴尺寸、主轴坐标以及从轴坐标，生成待布局页面。最后，服务器200可以将布局完成的待布局页面发送至终端400，以使终端400向用户展示布局完成的待布局页面。

在一些实施例中，还可以由终端400自身执行本申请实施例的页面布局方法，也就是说，当终端400接收到用户通过客户端输入的交互操作之后，由终端400响应于用户的交互操作，获取待布局页面对应的节点树；针对多个节点中的任一节点，在节点的父节点采用弹性布局的情况下，获取节点的样式属性，并基于节点的样式属性确定节点的主轴尺寸；在节点包括至少一个儿子节点的情况下，获取参数映射表，并基于节点的主轴尺寸和参数映射表，得到节点的从轴尺寸；基于每一节点的主轴尺寸和从轴尺寸，确定每一节点的主轴坐标和从轴坐标；根据每一节点的主轴尺寸、从轴尺寸、主轴坐标以及从轴坐标，生成待布局页面。终端400可以向用户展示布局完成的待布局页面。

本申请实施例所提供的页面布局方法还可以基于云平台并通过云技术来实现，例如，上述服务器200可以是云端服务器。通过云端服务器获取待布局页面对应的节点树；针对多个节点中的任一节点，在节点的父节点采用弹性布局的情况下，获取节点的样式属性，并基于节点的样式属性确定节点的主轴尺寸；在节点包括至少一个儿子节点的情况下，获取参数映射表，并基于节点的主轴尺寸和参数映射表，得到节点的从轴尺寸；基于每一节点的主轴尺寸和从轴尺寸，确定每一节点的主轴坐标和从轴坐标；根据每一节点的主轴尺寸、从轴尺寸、主轴坐标以及从轴坐标，生成待布局页面。

在一些实施例中，还可以具有云端存储器，可以将节点树、参数映射表等存储至云端存储器中。这样，在云端服务器接收到页面布局请求时，则可以从云端存储器中直接基于参数映射表和节点的主轴尺寸，得到节点的从轴尺寸，进而提高页面的布局速度。

这里需要说明的是，云技术（Cloud technology）是指在广域网或局域网内将硬件、软件、网络等系列资源统一起来，实现数据的计算、储存、处理和共享的一种托管技术。云技术基于云计算商业模式应用的网络技术、信息技术、整合技术、管理平台技术、应用技术等的总称，可以组成资源池，按需所用，灵活便利。云计算技术将变成重要支撑。技术网络系统的后台服务需要大量的计算、存储资源，如视频网站、图片类网站和更多的门户网站。伴随着互联网行业的高度发展和应用，将来每个物品都有可能存在自己的识别标志，都需要传输到后台系统进行逻辑处理，不同程度级别的数据将会分开处理，各类行业数据皆需要强大的系统后盾支撑，其可以通过云计算来实现。

参见图2，图2是本申请实施例提供的电子设备的结构示意图，图2所示的电子设备可以是页面布局设备，页面布局设备包括：至少一个处理器410、存储器450、至少一个网络接口420和用户接口430。页面布局设备中的各个组件通过总线系统440耦合在一起。可理解，总线系统440用于实现这些组件之间的连接通信。总线系统440除包括数据总线之外，还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见，在图2中将各种总线都标为总线系统440。

处理器410可以是一种集成电路芯片，具有信号的处理能力，例如通用处理器、数字信号处理器（DSP，Digital Signal Processor），或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等，其中，通用处理器可以是微处理器或者任何常规的处理器等。

用户接口430包括使得能够呈现媒体内容的一个或多个输出装置431，包括一个或多个扬声器和/或一个或多个视觉显示屏。用户接口430还包括一个或多个输入装置432，包括有助于用户输入的用户接口部件，比如键盘、鼠标、麦克风、触屏显示屏、摄像头、其他输入按钮和控件。

存储器450可以是可移除的，不可移除的或其组合。示例性的硬件设备包括固态存储器，硬盘驱动器，光盘驱动器等。存储器450可选地包括在物理位置上远离处理器410的一个或多个存储设备。

存储器450包括易失性存储器或非易失性存储器，也可包括易失性和非易失性存储器两者。非易失性存储器可以是只读存储器（ROM，Read Only Memory），易失性存储器可以是随机存取存储器（RAM，Random Access Memory）。本申请实施例描述的存储器450旨在包括任意适合类型的存储器。

在一些实施例中，存储器450能够存储数据以支持各种操作，这些数据的示例包括程序、模块和数据结构或者其子集或超集，下面示例性说明。

操作系统451，包括用于处理各种基本系统服务和执行硬件相关任务的系统程序，例如框架层、核心库层、驱动层等，用于实现各种基础业务以及处理基于硬件的任务；网络通信模块452，用于经由一个或多个（有线或无线）网络接口420到达其他电子设备，示例性的网络接口420包括：蓝牙、无线相容性认证（WIFI）、和通用串行总线（USB，UniversalSerial Bus）等；呈现模块453，用于经由一个或多个与用户接口430相关联的输出装置431（例如，显示屏、扬声器等）使得能够呈现信息（例如，用于操作外围设备和显示内容和信息的用户接口）；输入处理模块454，用于对一个或多个来自一个或多个输入装置432之一的一个或多个用户输入或互动进行检测以及翻译所检测的输入或互动。

在一些实施例中，本申请实施例提供的装置可以采用软件方式实现，图2示出了存储在存储器450中的页面布局装置455，其可以是程序和插件等形式的软件，包括以下软件模块：节点树获取模块4551、主轴尺寸确定模块4552、从轴尺寸确定模块4553、坐标确定模块4554以及布局模块4555，这些模块是逻辑上的，因此根据所实现的功能可以进行任意的组合或进一步拆分。将在下文中说明各个模块的功能。

本申请各实施例提供的页面布局方法可以由电子设备来执行，其中，该电子设备可以是服务器也可以是终端，即本申请各实施例的页面布局方法可以通过服务器来执行，也可以通过终端来执行，或者也可以通过服务器与终端之间交互执行。

图3是本申请实施例提供的页面布局方法的一个可选的流程示意图，下面将结合图3示出的步骤进行说明，如图3所示，以页面布局方法的执行主体为服务器为例进行说明，方法包括以下步骤S101至步骤S105：

步骤S101，获取待布局页面对应的节点树，节点树中包括多个节点，节点用于表征待布局页面的内容。

这里，待布局页面可以为网页，也可以为应用程序的页面，例如小程序的页面。待布局页面中的所有内容都可以在节点树中用节点表示。待布局页面中的内容包括元素、属性、文本等。相应地，节点树中的节点可以包括元素节点、属性节点以及文本节点。节点树中的节点彼此之间具有等级关系。节点树的多个节点中包括一个根节点，至少一个父节点以及至少一个子节点。父节点拥有子节点，位于相同层级上的子节点称为兄弟节点。在节点树中，顶端的节点成为根节点，根节点之外的每个节点都有一个父节点，节点可以有任何数量的子节点，叶子节点是没有子节点的节点。针对一个节点，该节点的儿子节点为该节点在节点树中拥有的第一层的子节点，孙子节点为该节点在节点树中拥有的第二层的子节点。图4为父节点与子节点在页面上的效果示意图。参见图4，body节点为父节点，节点A和节点B都为body节点的儿子节点。

示例性的，网页可以表示为HTML DOM节点树的形式。HTML DOM节点树的创建过程如下：读取一个网页的内容后，在内存中创建一个唯一的根节点document；扫描网页内容，每扫描到一项内容（元素、文本、属性...），自动创建一个新的节点，在节点中保存当前这一项内容的属性和值。然后将新创建的节点，保存到HTML DOM节点树上对应的位置，得到网页对应的HTML DOM节点树。

步骤S102，针对多个节点中的任一节点，在节点的父节点采用弹性布局的情况下，获取节点的样式属性，并基于节点的样式属性确定节点的主轴尺寸。

样式属性至少包括节点尺寸限制属性。

这里，当一个节点被设置为弹性布局的时候，该节点的所有儿子节点都会采用弹性布局。示例性的，body节点为父节点，节点A和节点B都为body节点的儿子节点，当body节点被设置为display：flex（弹性布局）时，节点A和节点B都会采用弹性布局。针对一个节点的弹性布局中，主轴表示在该节点内子节点堆放方向的所在轴，当该节点的主轴方向属性（flex-direction）的设置值为行（row）时，主轴是水平方向，当flex-direction属性的设置值为列（column）时，主轴是竖直方向。从轴是与主轴垂直的轴，也称为交叉轴。主轴方向表示子节点堆放的方向，默认情况下，主轴水平方向为从左至右，主轴竖直方向为从上至下。可以通过改变flex-direction属性中的设置和direction属性设置，倒转主轴方向。在该节点的换行属性（flex-wrap属性）设置为wrap或wrap-reverse时，该节点的儿子节点可以布局在多行上，从轴方向即为多行的扩展方向。

本申请实施例中，节点的样式属性可以包括节点尺寸限制属性（requestSize）。当开发者未对requestSize进行设置时，requestSize不存在设置值，其默认值为无限制（INF）。节点尺寸限制属性中可以包括主轴限制尺寸和从轴限制尺寸。针对任一采用弹性布局的节点，在获取节点的样式属性后，可以先基于样式属性确定该节点的初始尺寸。然后，可以根据该节点的父节点的主轴限制尺寸，以及该节点与其兄弟节点的初始尺寸，确定该节点的主轴尺寸。其中，节点的初始尺寸为还未受到其他节点影响时，在主轴上的预设尺寸。

在一些实施例中，样式属性包括基准值属性。步骤S102中基于节点的样式属性确定节点的主轴尺寸可以通过以下方式实现：在节点的基准值属性存在设置值的情况下，将基准值属性的设置值确定为节点的初始尺寸；在节点的基准值属性不存在设置值，节点的节点尺寸限制属性存在设置值的情况下，将节点尺寸限制属性的设置值确定为节点的初始尺寸；基于节点的初始尺寸以及样式属性，确定节点的主轴尺寸。

这里，基准值属性为flexbox布局中的flex-basis属性。针对采用弹性布局的任一节点，当开发者对该节点的基准值属性进行过设置时，基准值属性存在设置值。可以获取该节点的基准值属性的设置值，直接将基准值属性的设置值作为该节点的初始尺寸。示例性的，节点A为body节点的儿子节点，节点A的样式属性中flex-basis属性的设置值为100px，则节点A的初始尺寸为100px（pixel，像素单位）。

或者，当开发者未对基准值属性进行设置时，基准值属性不存在设置值，其默认值可以为auto。此时，针对采用弹性布局的任一节点，当开发者对该节点的节点尺寸限制属性中的设置过主轴限制尺寸时，节点尺寸限制属性存在设置值，设置值为主轴限制尺寸，节点尺寸限制属性中的从轴限制尺寸为INF。可以获取该节点的主轴限制尺寸，直接将主轴限制尺寸作为该节点的初始尺寸。示例性的，节点A为body节点的儿子节点，节点A的样式属性中requestSize属性的设置值为（100px，INF），则节点A的主轴限制尺寸为100px，则节点A的初始尺寸为100px（pixel，像素单位）。

针对一个采用弹性布局的父节点，在获取该父节点的每一儿子节点的初始尺寸后，可以根据该父节点的主轴限制尺寸，以及每一儿子节点的初始尺寸，确定每一儿子节点的主轴尺寸。

本申请实施例通过区分节点的样式属性设置情况，以不同的方式获取节点的初始尺寸，进而基于初始尺寸确定主轴尺寸，提高了页面布局速度，并且提高了每个节点布局后的页面效果。

在一些实施例中，步骤S102中基于节点的样式属性确定节点的主轴尺寸还可以通过以下方式实现：在节点的基准值属性不存在设置值，且节点的节点尺寸限制属性不存在设置值的情况下，若节点包括至少一个儿子节点，对节点调用预设的递归函数，确定节点的每一儿子节点的初始尺寸；对儿子节点的初始尺寸进行求和，得到节点的初始尺寸；基于节点的初始尺寸以及样式属性，确定节点的主轴尺寸。

本申请实施例中，针对采用弹性布局的任一节点，当开发者未对该节点的基准值属性以及节点尺寸限制属性进行设置时，基准值属性以及节点尺寸限制属性都不存在设置值，基准值属性的默认值为auto，节点尺寸限制属性的默认值为（INF，INF）。此时，节点的初始尺寸即为节点在主轴上占据的尺寸。若该节点是一颗子树，即该节点包括至少一个儿子节点，可以对该节点调用递归函数（compute递归函数），将递归函数的尺寸返回值作为节点的初始尺寸。其中，compute递归函数中可以包括目标节点node、节点尺寸限制属性requestSize、文本宽度限制属性maxContent、父节点尺寸parentSize以及尺寸返回值Size。目标节点node为需要计算尺寸的节点；节点尺寸限制属性requestSize为目标节点的节点尺寸限制属性，可以用INF表示无限制；文本宽度限制属性maxContent为对目标节点内包含的文本段的额外的宽度限制，当文本达到maxContent的设置值时需要折行显示；父节点尺寸parentSize为目标节点的父节点的尺寸，包括父节点的主轴尺寸以及从轴尺寸；尺寸返回值Size为compute递归函数返回的计算得到的目标节点的尺寸。

在对一个节点调用递归函数来确定该节点的初始尺寸时，将会在节点树中逐层向下对该节点的每个子节点调用递归函数，直至对该节点下的所有叶子节点调用递归函数。最底层的叶子节点为文本节点，其包括一段文本，对叶子节点调用递归函数后，递归函数的尺寸返回值即为文本在主轴上占据的宽度，即叶子节点的初始尺寸。在确定叶子节点的初始尺寸后，将会将初始尺寸返回至节点树中叶子节点在上一层的父节点，使父节点的递归函数开始执行计算过程，基于各叶子节点的初始尺寸得到父节点的初始尺寸。依次在节点树中逐层向上返回尺寸返回值进行递归，直至得到该节点的初始尺寸。因此，对一个节点调用预设的递归函数后，可以得到该节点的每一儿子节点返回的初始尺寸。将该节点的每一儿子节点返回的初始尺寸加和，得到的和即为该节点的初始尺寸。

需要说明的是，在上述调用递归函数的过程中，对每一层子节点调用递归函数计算尺寸返回值时，需要注意子节点的样式属性中基准值属性、节点尺寸限制属性等是否存在设置值，如果存在，可以参考上述其他实施例的执行步骤。

在另一个实施例中，可以获取预先构建的参数映射表，参数映射表中包括样式属性与尺寸返回值之间的映射关系。具体地，参数映射表中可以包括节点尺寸限制属性、文本宽度限制属性与尺寸返回值之间的映射关系。在对节点调用递归函数后，可以省略递归函数的计算过程，直接基于节点的样式属性从参数映射表中确定对应的目标尺寸返回值，将目标尺寸返回值作为节点的初始尺寸。示例性的，对节点A调用递归函数，节点A的节点尺寸限制属性为（INF，INF），节点A的儿子节点为节点C和节点D，节点C和节点D都为叶子节点，节点C的节点尺寸限制属性为（INF，INF）、文本宽度限制属性为100px，节点D的节点尺寸限制属性为（50px，INF），则针对节点C，直接从参数映射表中获取节点尺寸限制属性为（INF，INF）、文本宽度限制属性为100px对应的目标尺寸返回值100px，作为节点C的初始尺寸；针对节点D，直接从参数映射表中获取节点尺寸限制属性为（50px，INF）对应的目标尺寸返回值50px，作为节点D的初始尺寸。将节点C和D的初始尺寸返回至节点A，执行节点A的递归函数计算过程，得到尺寸返回值150px，作为节点A的假定尺寸。本申请实施例可以通过参数映射表省略递归函数的计算过程，节省了计算时间，以提高页面布局速度。

在一个实施例中，若节点只具有一个儿子节点，则可以直接将儿子节点的初始尺寸作为该节点的初始尺寸。

针对一个采用弹性布局的父节点，在获取该父节点的每一儿子节点的初始尺寸后，可以根据该父节点的主轴限制尺寸，以及每一儿子节点的初始尺寸，确定每一儿子节点的主轴尺寸。

本申请实施例通过调用递归函数可以获取每一节点的主轴尺寸，以完成页面布局。

在一些实施例中，样式属性包括文本宽度限制属性。步骤S102中基于节点的样式属性确定节点的主轴尺寸还可以通过以下方式实现：在节点不包括儿子节点，且节点的文本宽度限制属性不存在设置值的情况下，获取节点中文本排成一行时所占据的文本宽度，将文本宽度确定为节点的初始尺寸；在节点不包括儿子节点，且节点的文本宽度限制属性存在设置值的情况下，将文本宽度限制属性的设置值确定为节点的初始尺寸；基于节点的初始尺寸以及样式属性，确定节点的主轴尺寸。

这里，文本宽度限制属性maxContent为对节点内包含的文本段的额外的宽度限制，当文本达到maxContent的设置值时需要折行显示。针对采用弹性布局的任一节点，当开发者未对该节点的基准值属性以及节点尺寸限制属性进行设置时，基准值属性以及节点尺寸限制属性都不存在设置值，此时，节点的初始尺寸即为节点在主轴上占据的尺寸。若该节点在节点树中不包括儿子节点，则该节点为叶子节点，叶子结点为文本节点，其包括一段文本。

在开发者未对叶子节点的文本宽度限制属性进行设置时，叶子节点的文本宽度限制属性不存在设置值，可以直接基于叶子节点的样式属性中字体大小、字间距等属性，获取叶子节点中文本排成一行时所占据的文本宽度，将该文本宽度确定为叶子节点的初始尺寸。或者，在开发者对叶子节点的文本宽度限制属性进行过设置时，文本宽度限制属性存在设置值，可以直接将文本宽度限制属性的设置值确定为叶子节点的初始尺寸。

在获取节点的初始尺寸后，可以根据该节点的父节点的主轴限制尺寸，以及该节点与其兄弟节点的初始尺寸，确定该节点的主轴尺寸。

本申请实施例通过区分节点的文本宽度限制属性设置情况，以不同的方式获取叶子节点的初始尺寸，进而基于初始尺寸确定主轴尺寸，提高了页面布局速度，并且提高了每个节点布局后的页面效果。

在一些实施例中，上述步骤中基于节点的初始尺寸以及样式属性，确定节点的主轴尺寸可以通过以下方式实现：对节点的父节点的每一儿子节点的初始尺寸求和，得到初始尺寸总和；在初始尺寸总和小于父节点的节点尺寸限制属性的设置值的情况下，若节点的弹性增长属性的设置值大于0，对节点基于弹性增长属性进行扩展，得到节点扩展后的主轴尺寸；或者，在初始尺寸总和小于父节点的节点尺寸限制属性的设置值的情况下，若节点的弹性收缩属性的设置值大于0，对节点基于弹性收缩属性进行压缩，得到节点压缩后的主轴尺寸。

这里，在获取每一节点的初始尺寸后，针对任一节点，若该节点的父节点的节点尺寸限制属性中存在设置值，且该设置值为主轴限制尺寸时，可以先对该父节点的每一儿子节点的初始尺寸求和，也即，将该节点的初始尺寸与该节点的每一兄弟节点的初始尺寸相加，得到初始尺寸总和。

若初始尺寸总和小于父节点的主轴限制尺寸，则父节点的主轴上存在剩余空间。示例性的，图5为节点未占满主轴的示意图，如图5所示，节点A和节点B为body节点的儿子节点，节点A的初始尺寸与节点B的初始尺寸之和，小于body节点的主轴限制尺寸，此时存在剩余空间。可以获取该节点与每一兄弟节点的弹性增长属性（flex-grow）的设置值。针对任一节点，节点的弹性增长属性的取值区间为（0,1），默认值为0，即默认情况下节点不可以被扩展。主轴上弹性增长属性的设置值大于0的儿子节点可以被扩展，占据主轴上的剩余空间。可以基于弹性增长属性的设置值对节点的初始尺寸进行扩展，得到扩展后的主轴尺寸。需要说明的是，本申请实施例对基于弹性增长属性的设置值对节点的初始尺寸进行扩展的具体步骤不加以限定，实际算法中还会受到其他各种样式属性的影响，只需满足节点扩展后所占据的剩余空间，与弹性增长属性的设置值大体上成正比即可。

若初始尺寸总和大于父节点的主轴限制尺寸，则父节点的主轴已经被占满，且溢出了部分，记作溢出空间。示例性的，图6为节点超出主轴的示意图，参见图6，节点A和节点B为body节点的儿子节点，节点A的初始尺寸与节点B的初始尺寸之和，大于body节点的主轴限制尺寸，此时存在溢出空间。可以获取该节点与每一兄弟节点的弹性收缩属性（flex-shrink）的设置值。针对任一节点，节点的弹性收缩属性的取值区间为（0,1），默认值为1，即默认情况下节点可以被压缩。父节点的主轴上弹性收缩属性的设置值大于0的儿子节点可以被压缩，使主轴上溢出空间最终为0。可以基于弹性收缩属性的设置值对节点的初始尺寸进行扩展压缩，得到压缩后的主轴尺寸。需要说明的是，本申请实施例对基于弹性收缩属性的设置值对节点的初始尺寸进行压缩的具体步骤不加以限定，实际算法中还会受到其他各种样式属性的影响，只需满足节点压缩的空间，与弹性收缩属性的设置值和初始尺寸的乘积，大体上成正比即可。

本申请实施例通过父节点的节点尺寸限制属性以及各儿子节点的初始尺寸总，判断父节点的主轴是存在剩余空间还是溢出空间，以便于基于弹性增长属性或弹性收缩属性对相应地儿子节点进行扩展或压缩，得到每一儿子节点的主轴尺寸，提高了每个节点布局后的页面效果。

步骤S103，在节点包括至少一个儿子节点的情况下，获取参数映射表，并基于节点的主轴尺寸和参数映射表，得到节点的从轴尺寸。

参数映射表包括样式属性与尺寸返回值之间的映射关系。

这里，节点的主轴尺寸确定之后，从轴尺寸可以基于主轴尺寸确定。例如，对于按比例缩放的图片来说，一个方向上的尺寸确定了，另一个方向上的尺寸也可以随之确定。预先构建的参数映射表可以包括样式属性与尺寸返回值之间的映射关系。具体地，参数映射表中可以包括节点尺寸限制属性、文本宽度限制属性与尺寸返回值之间的映射关系。通过参数映射表可以省略基于主轴尺寸计算从轴尺寸的计算过程，针对任一节点，节点的主轴尺寸与参数映射表中节点尺寸限制属性的主轴限制尺寸相对应，可以直接根据节点的主轴尺寸，从参数映射表中确定对应的目标尺寸返回值，将目标尺寸返回值作为节点的从轴尺寸。需要说明的是，在样式属性中边距、留白等属性的设置值为百分比形式时，参数映射表中的样式属性还可以包括父节点尺寸parentSize。

在一些实施例中，样式属性包括从轴对齐属性。步骤S103中基于节点的主轴尺寸和参数映射表，得到节点的从轴尺寸可以通过以下方式实现：在节点的从轴对齐属性的设置值不为拉伸的情况下，对节点调用预设的递归函数，获取节点的叶子节点和叶子节点的主轴尺寸；根据叶子节点的主轴尺寸和参数映射表，确定叶子节点的从轴尺寸；将叶子节点的从轴尺寸传递至叶子节点的父节点，根据叶子节点的从轴尺寸、叶子节点的父节点的主轴尺寸和参数映射表，确定叶子节点的父节点的从轴尺寸；依次递归，直至确定出节点的从轴尺寸。

这里，从轴对齐属性（align-self）用于使节点在从轴方向对齐。当节点的从轴对齐属性的设置值不为拉伸（stretch）的情况下，可以直接对节点调用递归函数，此时递归函数中requestSize的值为该节点的主轴尺寸，以在节点树中逐层向下对该节点的每个子节点调用递归函数，直至对该节点下的所有叶子节点调用递归函数，确定每个节点的从轴尺寸。在调用递归函数确定从轴尺寸的过程中，可以使用参数映射表代替递归函数的计算过程。

本申请实施例，在确定节点的从轴尺寸过程中，对一个节点调用预设的递归函数后，可以获取该节点在节点树中的至少一个叶子节点。在前序步骤中已经计算得到了节点树中每一节点的主轴尺寸，因此，可以直接获取每一叶子节点的主轴尺寸。针对任一叶子节点，可以基于叶子节点的主轴尺寸从参数映射表中确定叶子节点的丛轴尺寸。在得到每一叶子节点的从轴尺寸后，针对任一叶子节点，可以将该叶子节点的从轴尺寸返回至节点树中上一层的叶子节点的父节点，根据该叶子节点的从轴尺寸、该父节点的主轴尺寸以及参数映射表确定该父节点的从轴尺寸。

示例性的，可以基于父节点的主轴尺寸从参数映射表中确定目标样式属性，目标样式属性中节点尺寸限制属性的主轴限制尺寸的设置值与父节点的主轴尺寸相等，然后，从参数映射表中获取目标样式属性对应的目标尺寸返回值。可以将目标尺寸返回值与叶子节点的从轴尺寸进行比较，若目标尺寸返回值大于或等于叶子节点的从轴尺寸，即将目标尺寸返回值确定为父节点的从轴尺寸；若目标尺寸返回值小于叶子节点的从轴尺寸，即将叶子节点的从轴尺寸确定为父节点的从轴尺寸。需要说明的是，在实际计算中，从轴尺寸可能还会收到其他样式属性的影响，例如换行属性（flex-wrap），可能导致父节点中儿子节点在从轴方向上以多行显示，此时儿子节点的从轴尺寸更会影响父节点的从轴尺寸，可以参考相关技术中的计算方法，本申请实施例在此不加以限定。

按上述获取从轴尺寸的步骤依次在节点树中，从叶子节点逐层向上递归，直至基于参数映射表获取每一节点的从轴尺寸。

本申请实施例通过参数映射表代替了递归函数的内部计算过程，节省了计算时间，提高页面布局速度以及布局性能。

在一些实施例中，上述步骤中根据叶子节点的主轴尺寸和参数映射表，确定叶子节点的从轴尺寸可以通过以下方式实现：从参数映射表中确定目标样式属性，目标样式属性中节点尺寸限制属性的设置值与叶子节点的主轴尺寸相等；从参数映射表中确定目标样式属性对应的目标尺寸返回值，将目标尺寸返回值确定为叶子节点的从轴尺寸。

本申请实施例中，可以基于叶子节点的主轴尺寸从参数映射表中确定目标样式属性，目标样式属性中节点尺寸限制属性的主轴限制尺寸的设置值与叶子节点的主轴尺寸相等，然后，从参数映射表中获取目标样式属性对应的目标尺寸返回值。将目标尺寸返回值作为叶子节点的从轴尺寸。

本申请实施例通过参数映射表代替了递归函数的内部计算过程，节省了计算时间，提高页面布局速度以及布局性能。

在一些实施例中，步骤S103中基于节点的主轴尺寸和参数映射表，得到节点的从轴尺寸还可以通过以下方式实现：在节点的从轴对齐属性为拉伸，且节点的父节点的节点尺寸限制属性不存在设置值的情况下，对节点调用预设的递归函数，根据节点的主轴尺寸和参数映射表，确定节点的初始从轴尺寸；获取节点的兄弟节点的初始从轴尺寸；将节点与兄弟节点的初始从轴尺寸中的最大值，确定为节点的从轴尺寸。

这里，当节点的从轴对齐属性的设置值为拉伸（stretch）的情况下，若该节点的父节点的节点尺寸限制属性存在从轴限制尺寸的设置值的情况下，需要将该节点在从轴方向上拉伸至充满父节点的从轴。因此，可以获取父节点的节点尺寸限制属性中的设置值，将从轴限制尺寸作为父节点的从轴尺寸，进而将父节点的从轴尺寸确定为该节点的从轴尺寸。

本申请实施例通过在从轴对齐属性的设置值为拉伸时，直接将父节点的从轴尺寸确定为该节点的从轴尺寸，省略一次递归函数的调用过程，减少了递归调用次数，节省了页面布局所需时间，提高布局性能。

在另一些实施例中，节点的从轴尺寸还可以通过以下方式计算：在节点的从轴对齐属性的设置值为拉伸，且节点的父节点的节点尺寸限制属性存在设置值的情况下，从父节点的节点限制属性的设置值中获取父节点的从轴尺寸；将父节点的从轴尺寸确定为节点的从轴尺寸。

本申请实施例中，当节点的从轴对齐属性的设置值为拉伸（stretch）的情况下，若该节点的父节点的节点尺寸限制属性不存在设置值的情况下，需要将该节点在从轴方向上拉伸为与父节点中从轴尺寸最大的儿子节点对齐。首先，可以对节点调用递归函数，根据节点的主轴尺寸和参数映射表，确定该节点的初始从轴尺寸以及该节点的每一子节点的初始从轴尺寸，进而基于同样的方法得到节点树中每一节点的初始从轴尺寸。上述初始从轴尺寸确定过程与前序从轴对齐属性的设置值不为拉伸（stretch）时从轴尺寸的确定过程类似。可以获取该节点的兄弟节点的初始从轴尺寸，并将节点与兄弟节点的初始从轴尺寸中的最大值，确定为节点的从轴尺寸。

本申请实施例通过参数映射表省略递归函数内部的计算过程，节省了页面布局所需时间，提高布局性能。

步骤S104，基于每一节点的主轴尺寸和从轴尺寸，确定每一节点的主轴坐标和从轴坐标。

这里，可以先获取主轴方向，针对任一节点，该节点在主轴上的主轴坐标即为，该节点在主轴方向上之前的所有兄弟节点的主轴尺寸之和。需要说明的是，在实际计算中，还存在其他影响主轴坐标的样式属性，例如水平布局属性（justify-content），可以参考相关技术中的计算方法，本申请实施例在此不做限定。针对任一节点，该节点在从轴上的从轴坐标可以基于该节点的兄弟节点的从轴尺寸计算得到，但本申请实施例在此不做具体限定。需要说明的是，在实际计算中，从轴坐标主要受到竖直布局属性（align-items）和align-self等样式属性的影响，如果节点与其兄弟节点占据了多行，还可能会受到多行对齐属性（align-content）样式属性的影响，可以参考相关技术中的计算方法。

在一些实施例中，步骤S104中基于每一节点的主轴尺寸和从轴尺寸，确定每一节点的主轴坐标和从轴坐标可以通过以下方式实现：对每一节点调用预设的递归函数，基于每一节点的主轴尺寸和从轴尺寸，确定每一节点的每一儿子节点的主轴尺寸、从轴尺寸、主轴坐标以及从轴坐标。

本申请实施例中，针对任一节点，在节点的从轴对齐属性的设置值为拉伸（stretch）的情况下，获取该节点的从轴尺寸后，还需对该节点调用预设的递归函数，以使该节点的儿子节点更新下一层子节点（即该节点的孙子节点）的从轴尺寸以及从轴坐标。确定主轴尺寸、从轴尺寸、主轴坐标以及从轴坐标的方法与其他实施例类似。

步骤S105，根据每一节点的主轴尺寸、从轴尺寸、主轴坐标以及从轴坐标，生成待布局页面。

本申请实施例中，在获得每一节点的主轴尺寸、从轴尺寸、主轴坐标以及从轴坐标后，针对任一节点，可以基于该节点的主轴尺寸、从轴尺寸、主轴坐标以及从轴坐标，将该节点的内容布局在待布局页面的对应位置上，并基于该节点的样式属性改变内容的表现形式等，生成布局后的待布局页面。

需要说明的是，节点树中的节点还可以支持流式布局以及位置布局等。

本申请实施例在进行页面布局时，首先将待布局页面转化为节点树，在采用弹性布局的情况下，可以获取参数映射表，在基于节点的样式属性确定节点的主轴尺寸后，基于节点的主轴尺寸和参数映射表，确定节点的从轴尺寸，进而基于从轴尺寸和主轴尺寸确定节点的主轴坐标和横轴坐标，根据每一节点的主轴尺寸、从轴尺寸、主轴坐标以及从轴坐标，生成待布局页面。本申请实施例中，由于参数映射表包括样式属性与尺寸返回值之间的映射关系，针对每一节点，节点的主轴尺寸作为样式属性中的一项，可以直接从参数映射表基于节点的主轴尺寸获取对应的尺寸返回值，作为节点的从轴尺寸，节省了计算时间，同时在页面更新、需要重新计算所有节点的位置时，也可以直接使用参数映射表中的尺寸返回值，缩短了页面布局所需时间，提高了布局性能。

下面，将说明本申请实施例在一个实际的应用场景中的示例性应用。

本申请实施例提供一种布局样式更多、更接近网页（web）规范的高性能跨平台布局器（float-pigment-layout），该float-pigment-layout布局器主要用于在没有web浏览器引擎支持的环境中，模拟出类似于网页的布局效果。该float-pigment-layout布局器可以支持：Flexbox布局，即CSS（层叠样式表，Cascading Style Sheets）display:flex（弹性布局）的效果；普通Block布局，即CSS display:block（块级元素布局）的效果；部分Inline布局，即类似于CSS display:inline（行内元素布局）的效果；绝对定位，即CSS position:absolute（绝对定位）的效果。该float-pigment-layout布局器还可以支持很多具体的样式设置，例如最大最小尺寸限制、留白、边距等。本申请实施例提供的float-pigment-layout布局器使用rust语言编写，既可以嵌入到桌面和手机原生应用中，也支持编译为WebAssembly模块、在JavaScript环境下使用。它可以用于各种应用、游戏UI排版，甚至可以用在web和微信小程序、小游戏环境下。

在对页面进行布局的过程中，页面通常可以表示为节点树的形式，例如HTML DOM节点树。节点树中每个节点具有各自的样式属性设置。为了在页面上展示出各个节点，需要获取每个节点具体的坐标（x，y）。然而坐标并不是在样式属性中由开发人员直接设置的，而是需要根据样式属性推算得到。以下面的HTML表示的节点树结构为例：body节点具有儿子节点A和儿子节点B，儿子节点A的样式属性包括height:100px（高度为100px），background:048（背景为048）；儿子节点B的样式属性包括height:50px，background:084。如果页面总宽度为360px，则布局器根据儿子节点A和儿子节点B各自的样式属性设置，可以得到每个节点的坐标和宽高。计算得到的每个节点的坐标和宽高如表1所示。

表1节点的坐标和宽高

也即，布局器可以根据节点的样式属性、计算得出节点的具体坐标位置和宽高。

在使用本申请实施例提供的float-pigment-layout布局器对页面进行弹性布局时，对页面的布局的过程是一个递归的过程，可以用递归函数表示。递归函数中包括node（需要计算尺寸的节点）、requestSize（节点的尺寸限制）、maxContent（对节点内包含的文本段的额外的宽度限制，文本到达这个限制时需要折行）、parentSize（父节点的尺寸）以及Size（返回计算得到的节点尺寸）。

如果一个节点被设置为display:flex，则对它使用Flexbox算法。朴素的Flexbox算法分为以下5个步骤：

步骤一，计算每个儿子节点在主轴上的假定尺寸（初始尺寸）。

针对一个儿子节点，若该儿子节点的flex-basis属性存在设置值，则将flex-basis属性的设置值作为该儿子节点的假定尺寸。若在主轴上不对儿子节点做任何尺寸限制时，儿子节点在主轴上占据的尺寸即为假定尺寸，此时，如果是该儿子节点是文本节点，其内容是一段文本，该儿子节点的假定尺寸即为这段文本排成一行时文本占据的宽度；如果该儿子节点是一棵子树，对该儿子节点调用compute递归函数（以requestSize为INF来调用），以递归函数的函数返回值在主轴方向上的尺寸作为假定尺寸。

步骤二，计算主轴尺寸，以及每个儿子节点各自在主轴上的尺寸。

在得到每个儿子节点的假定尺寸后，如果节点自身的主轴尺寸限制不为INF，可能出现以下两种情况：参见图5，如果假定尺寸之和小于节点的自身的主轴尺寸，即主轴上还有剩余空间，则flex-grow属性大于0的儿子节点可以被扩展、占据主轴上的剩余空间。参见图6，如果假定尺寸之和大于节点自身的主轴尺寸，即主轴上已经占满了、还溢出了一定的空间，则flex-shrink属性大于0的儿子节点需要被压缩、使整体的占用不再溢出。对于需要扩展的情况，剩余空间的分配与flex-grow的值成正比；对于需要压缩的情况，儿子节点所压缩的空间与flex-shrink与假定尺寸的乘积成正比。需要说明的是，实际上计扩展或压缩的标准算法还会收到其他因素或样式属性的影响，本申请实施例在此不加以赘述。flex-grow属性默认为0，flex-shrink属性默认为1，即默认情况下节点可被压缩而不可被扩展。

步骤三，计算从轴尺寸，以及每个儿子节点各自在从轴上的尺寸。

主轴尺寸确定之后，从轴尺寸可以随之确定。例如，对于按比例缩放的图片来说，一个方向上的尺寸确定了，另一个方向上的尺寸随之确定。可以通过对每个儿子节点调用compute递归函数（requestSize中带上它的主轴尺寸）可以确定它们占据的从轴尺寸。特殊地，如果align-self属性为stretch，儿子节点的从轴尺寸需要被拉伸为节点自身的从轴尺寸。此时还需要额外调用一次compute递归函数（requestSize中带上它的主轴尺寸和拉伸后的从轴尺寸），以便儿子节点更新其下孙子节点的尺寸和位置坐标。

步骤四，计算每个儿子节点在主轴上的坐标。

每个儿子节点在主轴上的坐标通常就是它之前的所有兄弟节点的主轴尺寸之和。但有些属性可能影响最终的计算值，如justify-content属性。

步骤五，计算每个儿子节点在从轴上的坐标。

每个儿子节点在从轴上的坐标主要受到align-items和align-self属性的影响。如果儿子节点占据了多行，还会受到align-content属性的影响。

需要说明的是，在计算上述布局时还可能会受到以下几方面的影响：尺寸计算结果必须被最终限制在min-width（最小宽度）、max-width（最大宽度）、min-height（最小高度）、max-height（最大高度）属性范围内。float-pigment-layout布局器还支持盒尺寸属性（box-sizing属性），box-sizing属性可以对宽高设置值产生影响，用于确定边距、留白等是否被包含在定义的width（宽度）和height（高度）之内。边距、留白等样式属性，例如左外边距（margin-left）、上边框（border-top）、底部内边距（padding-bottom）等，也需要被计算在内，如果它们的设置值是百分比，需要根据compute递归函数的parentSize参数来换算。如果边距被设置为auto，有特殊的逻辑计算处理。例如，在某个儿子节点从轴方向上的边距均为auto，则无论align-items、align-self的设置值如何，这个儿子节点永远在从轴方向上居中。

上述朴素的Flexbox算法的时间复杂度（时间复杂度是一个函数，用于描述算法的运行时间，以大O符号表述）可以从两个角度看：一是对于某个节点的compute函数执行次数，二是compute函数本身的时间复杂度。上述算法步骤中，在compute函数执行过程中，对于它的每个儿子节点，会调用递归函数最多3次（一次用于获得假定尺寸，两次用于计算从轴尺寸）。假设一个节点有m个子节点，虽然compute函数自身的时间复杂度为O(m)，但由于它向子节点调用compute函数的次数也是O(m)，所以compute函数自身的时间复杂度一定不会超过compute函数的调用次数带来的复杂度，因此在计算时间复杂度时不需要考虑这个因素。这样，算法的时间复杂度即为对于所有节点的compute递归函数执行次数之和。而对于任何一个节点，假定它在节点树中的深度为d，它的compute函数执行次数为3^d。

对于有n个节点的树：如果节点树是一个很均匀的树，例如完全二叉树，它的叶子节点约有n/2个，而d最大为log(n)，全局时间复杂度为，化简之后是，约为/>。如果节点树是一个很深的树，如每个节点只有一个子节点，则叶子节点只有1个，而d最大约为n，全局时间复杂度就是O(3^n)。可见，无论从平均时间复杂度还是最差时间复杂度来看，上述算法的性能都较差。

本申请实施例提供的float-pigment-layout布局器可以支持一种页面布局方法。该页面布局方法可以应用于小程序的页面布局场景。该页面布局方法对上述算法步骤进行了优化，具体分为以下几个方面：

（一）递归调用剪枝

对于每个节点而言，compute递归函数的调用参数包括requestSize、maxContent和parentSize。而在不同递归函数调用过程中，requestSize、maxContent和parentSize的参数值可能相同。例如在获取节点的假定尺寸时，requestSize和maxContent在主轴上的尺寸必定为INF，从轴上的尺寸可以是INF或者一个特定的值。由于compute递归函数的返回结果只与上述三个参数有关，可以用一个映射表（参数映射表）将requestSize、maxContent和parentSize调用compute时的返回结果缓存，下一次再以同样参数调用时，不需要重新计算，可以直接从映射表中获取对应的返回结果。另外，在节点的边距、留白没有使用百分比值的情况下，不需要使用parentSize参数，因此映射表可以只包括equestSize和maxContent参数，进一步提升缓存命中率。此外，这些缓存的返回结果值只在节点自身样式属性改变了之后才会失效。因而，在页面更新、需要重新计算所有节点的位置时，这些缓存的返回结果往往还可以再次使用，节省很多计算时间。

（二）跳过定位步骤

上述朴素算法的5个步骤中，可以分为两个阶段：前3个步骤（获得假定尺寸、计算主轴尺寸、计算从轴尺寸）是计算尺寸的阶段；后2个步骤（计算主轴坐标、计算从轴坐标）是计算坐标位置的阶段。当一个节点调用compute获得它的某个儿子节点的假定尺寸时，只需要获取这个儿子节点的尺寸、不需要计算儿子节点最终的坐标，此时对于这个儿子节点的compute调用只需要完成计算尺寸阶段，计算坐标位置阶段可以跳过，以节省计算时间。此外，在compute函数向每个儿子节点的最多3次递归调用中，只有最后一次compute函数调用需要计算坐标位置。因此，本申请实施例提供的页面布局方法对于每个节点，计算坐标位置的阶段只需要执行一次。

（三）减少递归调用次数

朴素flexbox算法计算从轴尺寸时，可能需要对儿子节点调用最多2次compute递归函数（前一次用于确定从轴尺寸，后一次用于stretch时拉伸从轴尺寸）。本申请实施例提供的页面布局方法包括以下三种情况：第1种情况，儿子节点align-self属性不是stretch时，不进行最后一次递归函数调用；第2种情况，儿子节点align-self属性是stretch，且当前节点的requestSize不是INF，儿子节点的从轴尺寸等于当前节点的从轴尺寸，不进行前一次的递归函数调用；第3种情况，儿子节点align-self属性是stretch，且当前节点的requestSize是INF，进行两次递归函数调用。

本申请实施例提供的页面布局方法，在进行从轴尺寸计算时，如果只考虑上述第1种和第2种情况，算法整体的平均时间复杂度可以降低为，即O(n²)，最差时间复杂度可以降低为O(2ⁿ)。对于第3种情况，虽然两次递归调用都不可避免。但是，后一次调用只会影响儿子节点的尺寸，而对当前节点的尺寸不会产生影响。如果对于当前节点的这一次compute只需要计算尺寸、可以跳过计算坐标位置的阶段，那么也可以跳过最后一次调用。又因为对于每个节点、计算坐标位置的阶段只需要执行一次，对儿子节点的最后一次调用也最多只有一次。也就是说，第3种情况带来的额外compute调用的时间复杂度是O(n)级别的，不是时间复杂度的主要成分。因此，本申请实施例提供的页面布局方法优化整体时间复杂度下降为平均O(n²)、最差O(2ⁿ)。

本申请实施例提供的float-pigment-layout布局器可以额外支持box-sizing属性，在减少递归调用次数方面的实现更具有自己的特点，与自身支持的额外特性相容。float-pigment-layout布局器还可以支持部分Block和Inline布局。针对Block布局，一般情况下，主轴方向是竖直向下的，从轴方向是水平向右的。但可以通过writing-mode属性改变主轴方向以及从轴方向。在Block布局下，儿子节点的从轴尺寸为当前节点的从轴尺寸减掉边距、留白剩下的空间，即儿子节点尽可能占满从轴。而在主轴上的尺寸为儿子节点的假定尺寸。具体来说，当前节点需要对每个儿子节点分别调用compute递归函数，得到每个子节点在主轴上的假定尺寸。其中，compute递归函数的requestSize中的主轴尺寸是INF，从轴尺寸为当前节点自身的从轴尺寸减去从轴上相应的边距和留白后的尺寸。将每个子节点在主轴上的假定尺寸作为当前节点的主轴尺寸。上述算法对于每个儿子节点只会调用compute函数一次，体时间复杂度为O(n)，相比于比Flexbox算法，布局性能提高。此外，web规范下要求主轴方向上的Block边距要有一定的互相重叠。float-pigment-layout布局器也可以满足上述要求。

针对Block布局中的Inline节点，Block布局下可以承载Inline布局的节点。所有相邻的Inline节点被合并在一起、视为一个Block节点。可以实现将不同样式属性的文本放在同一行内、在文本中内联图片之类的效果。float-pigment-layout布局器本身并不处理如何在一行内布局多个Inline节点的问题，而是提供了一套接口，由实现了这组接口的文本排版器来处理Inline节点的排版。（如果没有合适的文本排版器支持，也可以不支持Inline节点。）例如，可以通过接口接入rect-palette-text文本排版器，实现复杂的不同属性文本混排和图片嵌入的效果。但通常文本排版器和系统环境接口耦合比较深，难以分离成独立模块，从性能上看，由于计算复杂性略微增加，Inline节点相对于Block节点会有少量的性能损失，性能损失在20%以内。

针对position布局，可以直接指定一个节点的坐标。可以优先排版好其他布局方式的节点，最后再将position布局的节点按照指定坐标布局在页面上。

对于常见的、包含横向排版元素的长列表页，本申请实施例提供的float-pigment-layout布局器性能表现大约是相关技术中yoga布局器的1.3至3.2倍（取决于属性display:flex节点占比大小），如表2所示。

表2性能比较结果

需要说明的是，算法理论分析认为各个布局器的各种优化对不同的节点树会有差异，因而实际优化效果对于不同的节点树会有一定区别。

可以理解的是，在本申请实施例中，涉及到用户信息等相关的数据，当本申请实施例运用到具体产品或技术中时，需要获得用户许可或者同意，且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。

下面继续说明本申请实施例提供的页面布局装置455的实施为软件模块的示例性结构，在一些实施例中，如图2所示，存储在存储器450的页面布局装置455中的软件模块可以包括：

节点树获取模块4551，用于获取待布局页面对应的节点树，节点树中包括多个节点，节点用于表征待布局页面的内容。

主轴尺寸确定模块4552，用于针对多个节点中的任一节点，在节点的父节点采用弹性布局的情况下，获取节点的样式属性，并基于节点的样式属性确定节点的主轴尺寸；样式属性至少包括节点尺寸限制属性。

从轴尺寸确定模块4553，用于在节点包括至少一个儿子节点的情况下，获取参数映射表，并基于节点的主轴尺寸和参数映射表，得到节点的从轴尺寸；参数映射表包括样式属性与尺寸返回值之间的映射关系。

坐标确定模块1554，用于基于每一节点的主轴尺寸和从轴尺寸，确定每一节点的主轴坐标和从轴坐标。

布局模块1555，用于根据每一节点的主轴尺寸、从轴尺寸、主轴坐标以及从轴坐标，生成待布局页面。

在一些实施例中，样式属性包括基准值属性，主轴尺寸确定模块4552，还用于在节点的基准值属性存在设置值的情况下，将基准值属性的设置值确定为节点的初始尺寸；在节点的基准值属性不存在设置值，节点的节点尺寸限制属性存在设置值的情况下，将节点尺寸限制属性的设置值确定为节点的初始尺寸；基于节点的初始尺寸以及样式属性，确定节点的主轴尺寸。

在一些实施例中，主轴尺寸确定模块4552，还用于在节点的基准值属性不存在设置值，且节点的节点尺寸限制属性不存在设置值的情况下，若节点包括至少一个儿子节点，对节点调用预设的递归函数，确定节点的每一儿子节点的初始尺寸；对儿子节点的初始尺寸进行求和，得到节点的初始尺寸；基于节点的初始尺寸以及样式属性，确定节点的主轴尺寸。

在一些实施例中，样式属性包括文本宽度限制属性，主轴尺寸确定模块4552，还用于在节点不包括儿子节点，且节点的文本宽度限制属性不存在设置值的情况下，获取节点中文本排成一行时所占据的文本宽度，将文本宽度确定为节点的初始尺寸；在节点不包括儿子节点，且节点的文本宽度限制属性存在设置值的情况下，将文本宽度限制属性的设置值确定为节点的初始尺寸；基于节点的初始尺寸以及样式属性，确定节点的主轴尺寸。

在一些实施例中，样式属性包括从轴对齐属性，从轴尺寸确定模块4553，还用于在节点的从轴对齐属性的设置值不为拉伸的情况下，对节点调用预设的递归函数，获取节点的叶子节点和叶子节点的主轴尺寸；根据叶子节点的主轴尺寸和参数映射表，确定叶子节点的从轴尺寸；将叶子节点的从轴尺寸传递至叶子节点的父节点，根据叶子节点的从轴尺寸、叶子节点的父节点的主轴尺寸和参数映射表，确定叶子节点的父节点的从轴尺寸；依次递归，直至确定出节点的从轴尺寸。

在一些实施例中，从轴尺寸确定模块4553，还用于从参数映射表中确定目标样式属性，目标样式属性中节点尺寸限制属性的设置值与叶子节点的主轴尺寸相等；从参数映射表中确定目标样式属性对应的目标尺寸返回值，将目标尺寸返回值确定为叶子节点的从轴尺寸。

在一些实施例中，从轴尺寸确定模块4553，还用于在节点的从轴对齐属性的设置值为拉伸，且节点的父节点的节点尺寸限制属性存在设置值的情况下，从父节点的节点限制属性的设置值中获取父节点的从轴尺寸；将父节点的从轴尺寸确定为节点的从轴尺寸。

在一些实施例中，从轴尺寸确定模块4553，还用于在节点的从轴对齐属性为拉伸，且节点的父节点的节点尺寸限制属性不存在设置值的情况下，对节点调用预设的递归函数，根据节点的主轴尺寸和参数映射表，确定节点的初始从轴尺寸；获取节点的兄弟节点的初始从轴尺寸；将节点与兄弟节点的初始从轴尺寸中的最大值，确定为节点的从轴尺寸。

在一些实施例中，坐标确定模块4554，还用于对每一节点调用预设的递归函数，基于每一节点的主轴尺寸和从轴尺寸，确定每一节点的每一儿子节点的主轴尺寸、从轴尺寸、主轴坐标以及从轴坐标

在一些实施例中，主轴尺寸确定模块4552，还用于对节点的父节点的每一儿子节点的初始尺寸求和，得到初始尺寸总和；在初始尺寸总和小于父节点的节点尺寸限制属性的设置值的情况下，若节点的弹性增长属性的设置值大于0，对节点基于弹性增长属性进行扩展，得到节点扩展后的主轴尺寸；或者，在初始尺寸总和小于父节点的节点尺寸限制属性的设置值的情况下，若节点的弹性收缩属性的设置值大于0，对节点基于弹性收缩属性进行压缩，得到节点压缩后的主轴尺寸。

本申请实施例提供了一种计算机程序产品，该计算机程序产品包括计算机程序或计算机可执行指令，该计算机程序或计算机可执行指令存储在计算机可读存储介质中。电子设备的处理器从计算机可读存储介质读取该计算机可执行指令，处理器执行该计算机可执行指令，使得该电子设备执行本申请实施例上述的页面布局方法。

本申请实施例提供一种存储有计算机可执行指令的计算机可读存储介质，其中存储有计算机可执行指令或者计算机程序，当计算机可执行指令或者计算机程序被处理器执行时，将引起处理器执行本申请实施例提供的页面布局方法，例如，如图3示出的页面布局方法。

在一些实施例中，计算机可读存储介质可以是RAM、ROM、闪存、磁表面存储器、光盘、或CD-ROM等存储器；也可以是包括上述存储器之一或任意组合的各种设备。

在一些实施例中，计算机可执行指令可以采用程序、软件、软件模块、脚本或代码的形式，按任意形式的编程语言（包括编译或解释语言，或者声明性或过程性语言）来编写，并且其可按任意形式部署，包括被部署为独立的程序或者被部署为模块、组件、子例程或者适合在计算环境中使用的其它单元。

作为示例，计算机可执行指令可以但不一定对应于文件系统中的文件，可以可被存储在保存其它程序或数据的文件的一部分，例如，存储在超文本标记语言（Hyper TextMarkup Language，HTML）文档中的一个或多个脚本中，存储在专用于所讨论的程序的单个文件中，或者，存储在多个协同文件（例如，存储一个或多个模块、子程序或代码部分的文件）中。

作为示例，计算机可执行指令可被部署为在一个电子设备上执行，或者在位于一个地点的多个电子设备上执行，又或者，在分布在多个地点且通过通信网络互连的多个电子设备上执行。

综上，通过本申请实施例可以提供一种性能更优、支持特性更多的float-pigment-layout布局器，其支持的页面布局方法可以支持包括Flexbox在内的多种布局方式，布局性能更优；且相较于其他布局器，与web规范更接近，支持更多样式属性，支持原生和WebAssembly两类编译目标。

以上，仅为本申请的实施例而已，并非用于限定本申请的保护范围。凡在本申请的精神和范围之内所作的任何修改、等同替换和改进等，均包含在本申请的保护范围之内。

Claims (12)

1.一种页面布局方法，其特征在于，所述方法包括：

获取待布局页面对应的节点树，所述节点树中包括多个节点，所述节点用于表征所述待布局页面的内容；

针对所述多个节点中的任一节点，在所述节点的父节点采用弹性布局的情况下，获取所述节点的样式属性，并基于所述节点的样式属性确定所述节点的主轴尺寸；所述样式属性至少包括节点尺寸限制属性和从轴对齐属性；

在所述节点包括至少一个儿子节点的情况下，获取参数映射表，并基于所述节点的主轴尺寸和所述参数映射表，得到所述节点的从轴尺寸；所述参数映射表包括样式属性与尺寸返回值之间的映射关系；

所述基于所述节点的主轴尺寸和所述参数映射表，得到所述节点的从轴尺寸，包括：

在所述节点的从轴对齐属性的设置值不为拉伸的情况下，对所述节点调用预设的递归函数，获取所述节点的叶子节点和所述叶子节点的主轴尺寸；

从所述参数映射表中确定目标样式属性，所述目标样式属性中节点尺寸限制属性的设置值与所述叶子节点的主轴尺寸相等；

从所述参数映射表中确定所述目标样式属性对应的目标尺寸返回值，将所述目标尺寸返回值确定为所述叶子节点的从轴尺寸；

将所述叶子节点的从轴尺寸传递至所述叶子节点的父节点，根据所述叶子节点的从轴尺寸、所述叶子节点的父节点的主轴尺寸和所述参数映射表，确定所述叶子节点的父节点的从轴尺寸；

依次递归，直至确定出所述节点的从轴尺寸；

基于每一所述节点的主轴尺寸和从轴尺寸，确定每一所述节点的主轴坐标和从轴坐标；

根据每一所述节点的主轴尺寸、从轴尺寸、主轴坐标以及从轴坐标，生成所述待布局页面。

2.根据权利要求1所述的方法，其特征在于，所述样式属性包括基准值属性，所述基于所述节点的样式属性确定所述节点的主轴尺寸，包括：

在所述节点的基准值属性存在设置值的情况下，将所述基准值属性的设置值确定为所述节点的初始尺寸；

在所述节点的基准值属性不存在设置值，所述节点的节点尺寸限制属性存在设置值的情况下，将所述节点尺寸限制属性的设置值确定为所述节点的初始尺寸；

基于所述节点的初始尺寸以及样式属性，确定所述节点的主轴尺寸。

3.根据权利要求2所述的方法，其特征在于，所述基于所述节点的样式属性确定所述节点的主轴尺寸，还包括：

在所述节点的基准值属性不存在设置值，且所述节点的节点尺寸限制属性不存在设置值的情况下，若所述节点包括至少一个儿子节点，对所述节点调用预设的递归函数，确定所述节点的每一所述儿子节点的初始尺寸；

对所述儿子节点的初始尺寸进行求和，得到所述节点的初始尺寸；

基于所述节点的初始尺寸以及样式属性，确定所述节点的主轴尺寸。

4.根据权利要求3所述的方法，其特征在于，所述样式属性包括文本宽度限制属性，所述基于所述节点的样式属性确定所述节点的主轴尺寸，还包括：

在所述节点不包括儿子节点，且所述节点的文本宽度限制属性不存在设置值的情况下，获取所述节点中文本排成一行时所占据的文本宽度，将所述文本宽度确定为所述节点的初始尺寸；

在所述节点不包括儿子节点，且所述节点的文本宽度限制属性存在设置值的情况下，将所述文本宽度限制属性的设置值确定为所述节点的初始尺寸；

基于所述节点的初始尺寸以及所述样式属性，确定所述节点的主轴尺寸。

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

在所述节点的从轴对齐属性的设置值为拉伸，且所述节点的父节点的节点尺寸限制属性存在设置值的情况下，从所述父节点的节点限制属性的设置值中获取所述父节点的从轴尺寸；

将所述父节点的从轴尺寸确定为所述节点的从轴尺寸。

6.根据权利要求1所述的方法，其特征在于，所述基于所述节点的主轴尺寸和所述参数映射表，得到所述节点的从轴尺寸，包括：

在所述节点的从轴对齐属性为拉伸，且所述节点的父节点的节点尺寸限制属性不存在设置值的情况下，对所述节点调用预设的递归函数，根据所述节点的主轴尺寸和所述参数映射表，确定所述节点的初始从轴尺寸；

获取所述节点的兄弟节点的初始从轴尺寸；

将所述节点与所述兄弟节点的初始从轴尺寸中的最大值，确定为所述节点的从轴尺寸。

7.根据权利要求5或6所述的方法，其特征在于，所述基于每一所述节点的主轴尺寸和从轴尺寸，确定每一所述节点的主轴坐标和从轴坐标，包括：

对每一所述节点调用预设的递归函数，基于每一所述节点的主轴尺寸和从轴尺寸，确定每一所述节点的每一所述儿子节点的主轴尺寸、从轴尺寸、主轴坐标以及从轴坐标。

8.根据权利要求2-4中任一项所述的方法，其特征在于，所述基于所述节点的初始尺寸以及所述样式属性，确定所述节点的主轴尺寸，包括：

对所述节点的父节点的每一儿子节点的初始尺寸求和，得到初始尺寸总和；

在所述初始尺寸总和小于所述父节点的节点尺寸限制属性的设置值的情况下，若所述节点的弹性增长属性的设置值大于0，对所述节点基于所述弹性增长属性进行扩展，得到所述节点扩展后的主轴尺寸；

或者，在所述初始尺寸总和小于所述父节点的节点尺寸限制属性的设置值的情况下，若所述节点的弹性收缩属性的设置值大于0，对所述节点基于所述弹性收缩属性进行压缩，得到所述节点压缩后的主轴尺寸。

9.一种页面布局装置，其特征在于，所述装置包括：

节点树获取模块，用于获取待布局页面对应的节点树，所述节点树中包括多个节点，所述节点用于表征所述待布局页面的内容；

主轴尺寸确定模块，用于针对所述多个节点中的任一节点，在所述节点的父节点采用弹性布局的情况下，获取所述节点的样式属性，并基于所述节点的样式属性确定所述节点的主轴尺寸；所述样式属性至少包括节点尺寸限制属性和从轴对齐属性；

从轴尺寸确定模块，用于在所述节点包括至少一个儿子节点的情况下，获取参数映射表，并基于所述节点的主轴尺寸和所述参数映射表，得到所述节点的从轴尺寸；所述参数映射表包括样式属性与尺寸返回值之间的映射关系；所述从轴尺寸确定模块还用于在所述节点的从轴对齐属性的设置值不为拉伸的情况下，对所述节点调用预设的递归函数，获取所述节点的叶子节点和所述叶子节点的主轴尺寸；从所述参数映射表中确定目标样式属性，所述目标样式属性中节点尺寸限制属性的设置值与所述叶子节点的主轴尺寸相等；从所述参数映射表中确定所述目标样式属性对应的目标尺寸返回值，将所述目标尺寸返回值确定为所述叶子节点的从轴尺寸；将所述叶子节点的从轴尺寸传递至所述叶子节点的父节点，根据所述叶子节点的从轴尺寸、所述叶子节点的父节点的主轴尺寸和所述参数映射表，确定所述叶子节点的父节点的从轴尺寸；依次递归，直至确定出所述节点的从轴尺寸；

坐标确定模块，用于基于每一所述节点的主轴尺寸和从轴尺寸，确定每一所述节点的主轴坐标和从轴坐标；

布局模块，用于根据每一所述节点的主轴尺寸、从轴尺寸、主轴坐标以及从轴坐标，生成待布局页面。

10.一种电子设备，其特征在于，所述电子设备包括：

存储器，用于存储计算机可执行指令或者计算机程序；

处理器，用于执行所述存储器中存储的计算机可执行指令或者计算机程序时，实现权利要求1至8任一项所述的页面布局方法。

11.一种计算机可读存储介质，存储有计算机可执行指令或者计算机程序，其特征在于，所述计算机可执行指令或者计算机程序被处理器执行时实现权利要求1至8任一项所述的页面布局方法。

12.一种计算机程序产品，包括计算机可执行指令或计算机程序，其特征在于，所述计算机可执行指令或计算机程序被处理器执行时实现权利要求1至8任一项所述的页面布局方法。