Page generation method and apparatus, electronic device, computer readable storage medium, and computer program product

Abstract

The present application provides a page generation method and apparatus, an electronic device, a storage medium, and a program product. The method comprises: acquiring a node tree corresponding to a page to be laid out, wherein the node tree comprises a plurality of nodes; for any node among the plurality of nodes, when a parent node of the node uses flexible layout, acquiring a style attribute of the node, and determining a main axis size of the node on the basis of the style attribute of the node; the style attributes at least comprise node size limitation attributes; when the node comprises at least one child node, acquiring a parameter mapping table, and obtaining a slave axis size of the node on the basis of the main axis size of the node and the parameter mapping table; determining a main axis coordinate and a slave axis coordinate of each node on the basis of the main axis size and the slave axis size of each node; and generating said page on the basis of the main axis size, the slave axis size, the main axis coordinate and the slave axis coordinate of each node.

Description

Page generation method, device, electronic device, computer-readable storage medium, and computer program product

[0001] CROSS-REFERENCE TO RELATED APPLICATIONS

[0002] This application is based on the Chinese patent application with application number 202410027518.8 and application date of January 9, 2024, and claims the priority of the above Chinese patent application. The entire content of the above Chinese patent application is hereby introduced into this application as a reference. Technical Field

[0003] The present application relates to the field of computer technology, and in particular to a page generation method, device, electronic device, computer-readable storage medium, and computer program product. Background Art

[0004] With the development of computer technology, more and more user-oriented applications are integrated into terminals. Applications are environments without browser engine support. During the application page generation process, professional developers need to use layout tools to quickly achieve complex layout effects.

[0005] Especially for embedded applications, such as mini-programs embedded in other applications, the layout developers use in related technologies generally only supports a single layout method. This not only fails to efficiently utilize browser performance, resulting in low resource utilization, but also lacks flexibility in page generation, making it difficult to adapt to ever-changing page design requirements. Furthermore, the low layout performance results in a long time required for page generation. Summary of the Invention

[0006] Embodiments of the present application provide a page generation method, apparatus, electronic device, computer-readable storage medium, and computer program product, which can shorten page generation time and improve page generation efficiency.

[0007] The technical solution of the embodiment of the present application is implemented as follows:

[0008] An embodiment of the present application provides a page generation method, which is applied to an electronic device, and the method includes: obtaining a node tree corresponding to a page to be laid out, the node tree including multiple nodes, and the nodes are used to represent the content of the page to be laid out; for any node among the multiple nodes, when the parent node of the node adopts an elastic layout, obtaining the style attributes of the node, and determining the main axis size of the node based on the style attributes of the node; when the node includes at least one child node, obtaining a parameter mapping table, and obtaining the secondary axis size of the node based on the main axis size of the node and the parameter mapping table; the parameter mapping table includes a mapping relationship between style attributes and size values; based on the main axis size and secondary axis size of each node, determining the main axis coordinates and secondary axis coordinates of each node; generating the page to be laid out according to the main axis size, secondary axis size, main axis coordinates and secondary axis coordinates of each node.

[0009] The present application provides a page generation device, comprising: a node tree acquisition module configured to acquire a node tree corresponding to a page to be laid out, the node tree including a plurality of nodes, the nodes being used to represent the content of the page to be laid out; a main axis size determination module configured to acquire, for any of the plurality of nodes, the style attributes of the node when the parent node of the node adopts an elastic layout, and determine the main axis size of the node based on the style attributes of the node; a secondary axis size determination module configured to acquire, when the node includes at least one child node, a parameter mapping table, and obtain the secondary axis size of the node based on the main axis size of the node and the parameter mapping table; the parameter mapping table including a mapping relationship between style attributes and size values; a coordinate determination module configured to determine the main axis coordinates and secondary axis coordinates of each node based on the main axis size and secondary axis size of each node. A layout module configured to generate the page to be laid out based on the main axis size, secondary axis size, main axis coordinates, and secondary axis coordinates of each node.

[0010] In the above scheme, the style attributes include a node size restriction attribute and a baseline value attribute, the node size restriction attribute includes a main axis size restriction attribute, and the main axis size determination module is further configured to, when the attribute value of the baseline value attribute of the node is not a default value, determine the attribute value of the baseline value attribute as the initial size of the node; when the attribute value of the baseline value attribute of the node is a default value and the attribute value of the main axis size restriction attribute of the node is not a default value, determine the attribute value of the main axis size restriction attribute as the initial size of the node; and determine the main axis size of the node based on the initial size of the node and the style attributes.

[0011] In the above scheme, the main axis size determination module is further configured to, when the attribute value of the baseline value attribute of the node is the default value and the attribute value of the main axis size limit attribute of the node is the default value, if the node includes at least one child node, call a preset recursive function on the node to determine the initial size of each of the child nodes of the node; sum the initial sizes of the child nodes to obtain the initial size of the node; and determine the main axis size of the node based on the initial size and style attributes of the node.

[0012] In the above scheme, the style attributes include a text width restriction attribute, and the main axis size determination module is further configured to, when the attribute value of the baseline value attribute of the node is a default value, the attribute value of the main axis size restriction attribute of the node is a default value, the node does not include a child node, and the attribute value of the text width restriction attribute of the node is a default value, obtain the text width occupied by the text in the node when it is arranged in a row, and determine the text width as the initial size of the node; when the attribute value of the baseline value attribute of the node is a default value, the attribute value of the main axis size restriction attribute of the node is a default value, the node does not include a child node, and the attribute value of the text width restriction attribute of the node is not a default value, determine the attribute value of the text width restriction attribute as the initial size of the node; determine the main axis size of the node based on the initial size of the node and the style attributes.

[0013] In the above scheme, the main axis size determination module is further configured to sum the initial sizes of each child node of the parent node of the node to obtain the total initial size; when the total initial size is less than the attribute value of the main axis size restriction attribute of the parent node, if the attribute value of the elastic growth attribute of the node is greater than 0, based on the attribute value of the elastic growth attribute, the initial size of the node is expanded to obtain the main axis size of the node; or, when the total initial size is less than the attribute value of the main axis size restriction attribute of the parent node, if the attribute value of the elastic shrinkage attribute of the node is greater than 0, based on the attribute value of the elastic shrinkage attribute, the initial size of the node is compressed to obtain the main axis size of the node.

[0014] In the above scheme, the style attributes include a slave-axis alignment attribute, and the slave-axis size determination module is further configured to call a preset recursive function on the node when the attribute value of the slave-axis alignment attribute of the node is not stretched, to obtain the leaf node of the node and the main axis size of the leaf node; determine the slave-axis size of the leaf node according to the main axis size of the leaf node and the parameter mapping table; pass the slave-axis size of the leaf node to the parent node of the leaf node, and determine the slave-axis size of the parent node of the leaf node according to the slave-axis size of the leaf node, the main axis size of the parent node of the leaf node and the parameter mapping table; and repeat the process recursively until the slave-axis size of the node is determined.

[0015] In the above scheme, the slave-axis size determination module is also configured to determine the target style attribute from the parameter mapping table, and the attribute value of the main-axis size restriction attribute in the target style attribute is equal to the main-axis size of the leaf node; determine the target size value corresponding to the target style attribute from the parameter mapping table, and determine the target size value as the slave-axis size of the leaf node.

[0016] In the above scheme, the secondary axis size determination module is also configured to determine the attribute value of the secondary axis size restriction attribute of the parent node as the secondary axis restriction size of the parent node when the attribute value of the secondary axis alignment attribute of the node is stretch and the attribute value of the secondary axis size restriction attribute of the parent node is not the default value; and determine the secondary axis restriction size of the parent node as the secondary axis size of the node.

[0017] In the above scheme, the slave-axis size determination module is further configured to determine the initial slave-axis size of the node according to the main-axis size of the node and the parameter mapping table when the attribute value of the slave-axis alignment attribute of the node is stretch and the attribute value of the slave-axis size restriction attribute of the parent node of the node is the default value; obtain the initial slave-axis size of the sibling node of the node; and determine the maximum value of the initial slave-axis sizes of the node and the sibling node as the slave-axis size of the node.

[0018] In the above scheme, the coordinate determination module is also configured to call a preset recursive function for each of the nodes, and determine the main axis size, secondary axis size, main axis coordinates and secondary axis coordinates of each of the child nodes of each of the nodes based on the main axis size and secondary axis size of each of the nodes.

[0019] An embodiment of the present application provides an electronic device, comprising:

[0020] a memory for storing computer-executable instructions or computer programs;

[0021] The processor is configured to implement the page generation method provided in the embodiment of the present application when executing the computer executable instructions or computer program stored in the memory.

[0022] An embodiment of the present application provides a computer-readable storage medium storing a computer program or computer-executable instructions for implementing the page generation method provided in the embodiment of the present application when executed by a processor.

[0023] An embodiment of the present application provides a computer program product, including a computer program or computer-executable instructions. When the computer program or computer-executable instructions are executed by a processor, the page generation method provided in the embodiment of the present application is implemented.

[0024] The embodiments of the present application have the following beneficial effects:

[0025] When generating a page, first convert the page to be laid out into a node tree. When the parent node of a node adopts an elastic layout, a parameter mapping table can be obtained. After determining the main axis size of the node based on the style attribute of the node, the secondary axis size of the node is determined based on the main axis size of the node and the parameter mapping table. Then, the main axis coordinate and the horizontal axis coordinate of the node are determined based on the secondary axis size and the main axis size. According to the main axis size, secondary axis size, main axis coordinate and secondary axis coordinate of each node, the page to be laid out is generated. In the embodiment of the present application, since the parameter mapping table includes a mapping relationship between style attributes and size values, for each node, the main axis size of the node is an item in the style attribute, the corresponding size value can be directly obtained from the parameter mapping table based on the main axis size of the node as the secondary axis size of the node, which saves calculation time. At the same time, when the page is updated and the positions of all nodes need to be recalculated, the size value in the parameter mapping table can also be directly used. This not only improves the flexibility of page generation, thereby improving the resource utilization of the browser, but also shortens the time required for page generation, improves layout performance, and thus improves page rendering efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0026] FIG1 is a schematic diagram of the structure of the page generation system architecture provided in an embodiment of the present application;

[0027] FIG2 is a schematic structural diagram of an electronic device provided in an embodiment of the present application;

[0028] FIG3A is a flow chart of a page generation method according to an embodiment of the present application;

[0029] FIG3B is a schematic diagram showing the effects of a parent node and a child node on a page provided by an embodiment of the present application;

[0030] FIG3C is a schematic diagram of a process for determining the spindle size according to an embodiment of the present application;

[0031] FIG3D is a schematic diagram of a process for determining the spindle size according to an embodiment of the present application;

[0032] FIG4 is a schematic diagram of a main axis where nodes do not fully occupy the main axis according to an embodiment of the present application;

[0033] FIG5 is a schematic diagram of a node extending beyond the main axis provided in an embodiment of the present application. DETAILED DESCRIPTION

[0034] In order to make the purpose, technical solutions and advantages of this application clearer, the application will be further described in detail below with reference to the accompanying drawings. The described embodiments should not be regarded as limiting this application. All other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.

[0035] In the following description, reference is made to “some embodiments”, which describes a subset of all possible embodiments, but it will be understood that “some embodiments” may be the same subset or different subsets of all possible embodiments and may be combined with each other without conflict.

[0036] In the embodiments of the present application, the term "module" or "unit" refers to a computer program or a part of a computer program that has a predetermined function and works together with other related parts to achieve a predetermined goal, and can be implemented in whole or in part by using software, hardware (such as processing circuits or memories) or a combination thereof. Similarly, a processor (or multiple processors or memories) can be used to implement one or more modules or units. In addition, each module or unit can be part of an overall module or unit that includes the function of the module or unit.

[0037] Unless otherwise defined, all technical and scientific terms used in the embodiments of the present application have the same meanings as those commonly understood by those skilled in the art. The terms used in the embodiments of the present application are only for the purpose of describing the embodiments of the present application and are not intended to limit the present application.

[0038] Before further explaining the embodiments of the present application in detail, the nouns and terms involved in the embodiments of the present application are explained. The nouns and terms involved in the embodiments of the present application are subject to the following interpretations.

[0039] 1) Layout: This module is responsible for calculating the coordinate position, width, and height of nodes based on their style attributes. Layouts can determine the position and size of user interface (UI) elements using various layout algorithms, helping developers quickly implement complex layouts. The most common layout algorithms are Flexbox and Grid.

[0040] 2) Flexbox: A one-dimensional layout model that provides powerful spatial distribution and alignment capabilities between flexbox sub-elements.

[0041] 3) Flow layout: In the document flow, inline elements are displayed in the inline direction, which refers to the direction in which words are arranged within a line of text. Block elements are displayed one after another, such as paragraphs in a document. In English, for example, inline elements are displayed sequentially starting from the left, while block elements are displayed from the top and move downward across the page.

[0042] 4) Position layout: This layout method uses position attributes, which are used to specify how an element is positioned within the document. Position attributes can include top, right, bottom, and left attributes, which determine the final position of the element.

[0043] 5) Document Object Model Tree (DOM) Node Tree: This is the general term for a set of objects and functions specifically used to manipulate web page content. A web page can be represented as a node tree, such as the HTML DOM node tree. The HTML DOM node tree is a tree structure in the Hypertext Markup Language (HTML) document format, used to represent the hierarchical structure of all elements in a web document. Each HTML tag, text node, and attribute is represented as a node in the DOM node tree. They are all objects that can be accessed and manipulated using the programming language JavaScript or other scripting languages. The DOM node tree starts from the root node of the web page and represents the structure of the web page step by step. The root node corresponds to the <!DOC TYPE html> tag of the HTML document, followed by the <!DOC TYPE html> tag, then ...

[0044] 6) Cascading Style Sheets (CSS): is a computer language used to express the style of files such as HTML (an application of Standard Generalized Markup Language) or XML (a subset of Standard Generalized Markup Language). CSS can not only modify web pages statically, but also dynamically format various elements of web pages in conjunction with various scripting languages.

[0045] Among related technologies, common layouters include Yoga and Stretch, which can be used on multiple platforms, including Apple's iOS operating system, Android system, Web platforms, and support Flexbox layout. The Yoga layouter tends to be more aggressively optimized to pursue faster speeds. The Stretch layouter tends to align with web specifications and has better feature alignment. However, the above two layouters only support Flexbox layout, and when implementing the Flexbox layout effect, the Flexbox algorithm used is basically the same, and the recursive function is executed many times, which increases the time of page generation and leads to lower page generation efficiency.

[0046] Based on the problems existing in the related art, the embodiment of the present application provides a high-performance cross-platform layouter (float-pigment-layout) with more layout styles and closer to web page (web) specifications. It not only supports Flexbox layout and supports multi-platform use, but also has a fast layout speed and high alignment with web specifications. In addition, the float-pigment-layout layouter provided by the embodiment of the present application can also support streaming layout and positional layout. Because streaming layout is the default value for web layout, the float-pigment-layout layouter provided by the embodiment of the present application has better support for the web and is more in line with the usage habits of general programmers. At the same time, it also makes the performance of the float-pigment-layout layouter better.

[0047] The float-pigment-layout layouter provided in the embodiment of the present application can support a page generation method. When generating a page, the page generation method first converts the page to be laid out into a node tree. When an elastic layout is adopted, a parameter mapping table can be obtained. After determining the main axis size of the node based on the style attribute of the node, the secondary axis size of the node is determined based on the main axis size of the node and the parameter mapping table. Then, the main axis coordinate and the horizontal axis coordinate of the node are determined based on the secondary axis size and the main axis size. The page to be laid out is generated according to the main axis size, secondary axis size, main axis coordinate and secondary axis coordinate of each node. Compared with the layouter in the above-mentioned related technology, the page generation method provided in the embodiment of the present application can directly obtain the corresponding size value based on the main axis size of the node from the parameter mapping table as the secondary axis size of the node, saving calculation time. At the same time, when the page is updated and the positions of all nodes need to be recalculated, the size value in the parameter mapping table can also be directly used, shortening the time required for page generation and improving the efficiency of page generation and page rendering.

[0048] Here, first, an exemplary application of the page generation device provided by the embodiment of the present application is described, and the page generation device is an electronic device for implementing the page generation method. In one implementation, the page generation device (i.e., electronic device) provided by the embodiment of the present application can be implemented as a terminal or as a server. In one implementation, the page generation device provided by the embodiment of the present application can be implemented as various types of user terminals such as a laptop, a tablet computer, a desktop computer, a set-top box, a mobile device (e.g., a mobile phone, a portable music player, a personal digital assistant, a dedicated messaging device, a portable gaming device), a smart phone, a smart speaker, a smart watch, a smart TV, a car terminal, etc.; in another implementation, the page generation device provided by the embodiment of the present application can also be implemented as a server, wherein the server can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content distribution networks (CDNs), and big data and artificial intelligence platforms. The terminal and the server can be directly or indirectly connected by wired or wireless communication, which is not limited in the embodiment of the present application. Next, an exemplary application when the page generating device is implemented as a server will be described.

[0049] Referring to Figure 1, Figure 1 is an optional architectural diagram of the page generation system provided in an embodiment of the present application. To achieve page generation, a page generation application (float-pigment-layout layout device) can be provided. The page generation system provided in an embodiment of the present application includes at least a terminal 400, a network 300 and a server 200, and the page generation application is running on the terminal 400. The server 200 is a background server of the page generation application. The server 200 can constitute the page generation device of the embodiment of the present application, that is, the page generation method of the embodiment of the present application is implemented by the server 200. The terminal 400 is connected to the server 200 via the network 300, and the network 300 can be a wide area network or a local area network, or a combination of the two.

[0050] Referring to FIG. 1 , when laying out a page to be laid out, a user can perform interactive operations on the client side of a page generation application via terminal 400. These interactive operations can include style attribute editing operations, click operations, and the like. After receiving the operator's interactive operations, the client side can send a page generation request to server 200 via terminal 400. Upon receiving the page generation request, server 200 obtains a node tree corresponding to the page to be laid out. The node tree includes multiple nodes, each representing the content of the page to be laid out. For any of the multiple nodes, if the node's parent node adopts an elastic layout, the server 200 obtains the node's style attributes and determines the node's major axis size based on the node's style attributes. The style attributes include at least a node size constraint attribute. If the node includes at least one child node, the server 200 obtains a parameter mapping table and obtains the node's minor axis size based on the node's major axis size and the parameter mapping table. The parameter mapping table includes a mapping relationship between style attributes and size values. Based on the major axis size and minor axis size of each node, the server 200 determines the major axis coordinate and minor axis coordinate of each node. The server 200 generates the page to be laid out based on the major axis size, minor axis size, major axis coordinate, and minor axis coordinate of each node. Finally, the server 200 may send the page to be laid out after layout is completed to the terminal 400 , so that the terminal 400 displays the page to be laid out after layout is completed to the user.

[0051] In some embodiments, the terminal 400 itself may also execute the page generation method of the embodiment of the present application, that is, after the terminal 400 receives the interactive operation input by the user through the client, the terminal 400 obtains the node tree corresponding to the page to be laid out in response to the user's interactive operation; for any node among the multiple nodes, when the parent node of the node adopts an elastic layout, obtain the style attributes of the node, and determine the main axis size of the node based on the style attributes of the node; when the node includes at least one child node, obtain a parameter mapping table, and obtain the secondary axis size of the node based on the main axis size and the parameter mapping table; based on the main axis size and secondary axis size of each node, determine the main axis coordinates and secondary axis coordinates of each node; generate the page to be laid out based on the main axis size, secondary axis size, main axis coordinates and secondary axis coordinates of each node. The terminal 400 may display the page to be laid out after the layout is completed to the user.

[0052] The page generation method provided in the embodiment of the present application can also be implemented based on a cloud platform and through cloud technology. For example, the server 200 can be a cloud server. The node tree corresponding to the page to be laid out is obtained through the cloud server; for any node among the multiple nodes, when the parent node of the node adopts an elastic layout, the style attributes of the node are obtained, and the main axis size of the node is determined based on the style attributes of the node; when the node includes at least one child node, a parameter mapping table is obtained, and based on the main axis size of the node and the parameter mapping table, the secondary axis size of the node is obtained; based on the main axis size and secondary axis size of each node, the main axis coordinates and secondary axis coordinates of each node are determined; and according to the main axis size, secondary axis size, main axis coordinates and secondary axis coordinates of each node, the page to be laid out is generated.

[0053] In some embodiments, a cloud storage may be provided to store the node tree, parameter mapping table, etc. In this way, when the cloud server receives a page generation request, it can directly obtain the node's secondary axis size from the cloud storage based on the parameter mapping table and the node's primary axis size, thereby improving the page layout speed.

[0054] It's important to note that cloud technology refers to a managed technology that unifies hardware, software, and network resources within a wide or local area network (WAN) to enable data computing, storage, processing, and sharing. Cloud technology is a general term for network, information technology, integration technology, management platform technology, and application technology, all based on the cloud computing business model. It can form a resource pool for on-demand, flexible, and convenient use. Cloud computing technology will become a crucial support. Backend services for technical network systems, such as those for video sites, image sites, and more portals, require significant computing and storage resources. With the rapid development and application of the internet industry, every item will likely have its own unique identifier, requiring transmission to backend systems for logical processing. Data of varying levels will be processed separately, and data from various industries will require robust system support, which can be achieved through cloud computing.

[0055] Referring to FIG. 2 , FIG. 2 is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. The electronic device shown in FIG. 2 may be a page generation device, which includes: at least one processor 410, a memory 450, at least one network interface 420, and a user interface 430. The various components in the page generation device are coupled together via a bus system 440. It will be understood that the bus system 440 is used to implement connection and communication between these components. In addition to the data bus, the bus system 440 also includes a power bus, a control bus, and a status signal bus. However, for the sake of clarity, all the various buses are labeled as the bus system 440 in FIG.

[0056] The processor 410 can be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc., where the general-purpose processor can be a microprocessor or any conventional processor, etc.

[0057] The user interface 430 includes one or more output devices 431 that enable presentation of media content, including one or more speakers and / or one or more visual display screens. The user interface 430 also includes one or more input devices 432, including user interface components that facilitate user input, such as a keyboard, mouse, microphone, touch screen display, camera, other input buttons and controls.

[0058] The memory 450 may be removable, non-removable, or a combination thereof. Exemplary hardware devices include solid-state memory, hard drives, optical drives, etc. The memory 450 may optionally include one or more storage devices that are physically remote from the processor 410.

[0059] The memory 450 includes volatile memory or non-volatile memory, or may include both volatile and non-volatile memory. The non-volatile memory may be a read-only memory (ROM), and the volatile memory may be a random access memory (RAM). The memory 450 described in the embodiments of the present application is intended to include any suitable type of memory.

[0060] In some embodiments, the memory 450 can store data to support various operations, examples of which include programs, modules, and data structures, or a subset or superset thereof, as exemplified below.

[0061] An operating system 451 includes system programs for handling various basic system services and performing hardware-related tasks, such as a framework layer, a core library layer, a driver layer, etc., for implementing various basic businesses and processing hardware-based tasks; a network communication module 452 is used to reach other electronic devices via one or more (wired or wireless) network interfaces 420. Exemplary network interfaces 420 include: Bluetooth, Wireless Interoperability Certification (WIFI), and Universal Serial Bus (USB); a presentation module 453 is used to enable information to be presented (for example, a user interface for operating peripheral devices and displaying content and information) via one or more output devices 431 associated with a user interface 430 (for example, a display screen, a speaker, etc.); an input processing module 454 is used to detect one or more user inputs or interactions from one of the one or more input devices 432 and translate the detected inputs or interactions.

[0062] In some embodiments, the apparatus provided in the embodiments of the present application can be implemented in software. FIG2 shows a page generation apparatus 455 stored in memory 450 , which can be software in the form of a program or plug-in, and includes the following software modules: a node tree acquisition module 4551 , a primary axis size determination module 4552 , a secondary axis size determination module 4553 , a coordinate determination module 4554 , and a layout module 4555 . These modules are logical and can be arbitrarily combined or further split according to the functions implemented. The functions of each module will be described below.

[0063] The page generation method provided in each embodiment of the present application can be executed by an electronic device, wherein the electronic device can be a server or a terminal, that is, the page generation method provided in each embodiment of the present application can be executed by a server, or by a terminal, or by interaction between a server and a terminal.

[0064] FIG3A is a schematic diagram of an optional flow chart of a page generation method provided in an embodiment of the present application. The following will be described in conjunction with the steps shown in FIG3A . As shown in FIG3A , the page generation method is described by taking the execution subject as a server as an example. The method includes the following steps S101 to S105:

[0065] Step S101 : obtaining a node tree corresponding to a page to be laid out. The node tree includes a plurality of nodes, and the nodes are used to represent the content of the page to be laid out.

[0066] Here, the page to be laid out can be a web page or an application page, such as a mini-program page. All content in the page to be laid out can be represented by nodes in the node tree. The content in the page to be laid out includes elements, attributes, text, etc. Accordingly, the nodes in the node tree can include element nodes, attribute nodes, and text nodes. The nodes in the node tree have a hierarchical relationship with each other. The multiple nodes in the node tree include a root node, at least one parent node, and at least one child node. A parent node has child nodes, and child nodes at the same level are called sibling nodes. In the node tree, the top node becomes the root node. Each node other than the root node has a parent node. A node can have any number of child nodes, and a leaf node is a node without child nodes. For a node, the child nodes of the node are the first-level child nodes of the node in the node tree, and the grandchild nodes are the second-level child nodes of the node in the node tree. Figure 3B is a schematic diagram of the effect of parent nodes and child nodes on the page. Referring to Figure 3B, the body node is the parent node, and node A and node B are both child nodes of the body node.

[0067] For example, a web page can be represented as an HTML DOM node tree. The HTML DOM node tree is created as follows: After reading the content of a web page, a unique root node, document, is created in memory. The web page content is scanned, and for each item of content (element, text, attribute, etc.), a new node is automatically created, storing the attributes and values ​​of the current item. The newly created node is then saved to the corresponding position in the HTML DOM node tree, resulting in the HTML DOM node tree corresponding to the web page.

[0068] Step S102 : for any node among the multiple nodes, when the parent node of the node adopts an elastic layout, obtain the style attributes of the node, and determine the main axis size of the node based on the style attributes of the node.

[0069] The style properties include at least a node size limit property.

[0070] Here, when a node is set to elastic layout, all child nodes of the node will adopt elastic layout. For example, the body node is the parent node, and node A and node B are both child nodes of the body node. When the body node is set to display: flex (elastic layout), node A and node B will both adopt elastic layout. In the elastic layout of a node, the main axis represents the axis in which the child nodes are stacked within the node. When the attribute value of the main axis direction attribute (flex-direction) of the node is row, the main axis is horizontal. When the attribute value of the flex-direction attribute is column, the main axis is vertical. The secondary axis is the axis perpendicular to the main axis, also known as the cross axis. The main axis direction indicates the direction in which the child nodes are stacked. By default, the horizontal direction of the main axis is from left to right, and the vertical direction of the main axis is from top to bottom. The main axis direction can be reversed by changing the *-reverse setting and the direction attribute setting in the flex-direction attribute. When the line break property (flex-wrap property) of this node is set to wrap or wrap-reverse, the child nodes of this node can be laid out on multiple lines, and the direction of the axis is the expansion direction of the multiple lines.

[0071] In an embodiment of the present application, the style attributes of a node may include a node size restriction attribute (requestSize). The node size restriction attribute may further include a main axis size restriction attribute and a secondary axis size restriction attribute. When the developer does not set the main axis size restriction attribute, the attribute value of the main axis size restriction attribute is a default value, and its default value is unlimited (INF). When the secondary axis size restriction attribute is not set, the attribute value of the secondary axis size restriction attribute is also a default value, and its default value is unlimited (INF). For any node using elastic layout, after obtaining the style attributes of the node, the initial size of the node can be determined based on the style attributes. Then, the main axis size of the node can be determined based on the attribute value of the main axis size restriction attribute of the parent node of the node, that is, the main axis restriction size, and the initial size of the node and its sibling nodes. Among them, the initial size of the node is the preset size on the main axis when it has not been affected by other nodes. The style attributes may also include a text width restriction attribute.

[0072] In some embodiments, “determining the main axis size of the node based on the style attributes of the node” in step S102 can be implemented through the steps shown in FIG. 3C , which will be described below in conjunction with FIG. 3C .

[0073] In step 1021 , it is determined whether the attribute value of the reference value attribute of the node is the default value.

[0074] Here, the base value attribute is the flex-basis attribute in the flexbox layout. For any node using the flexible layout, if the developer has set the base value attribute for the node, the attribute value of the base value attribute is not the default value, and the process proceeds to step 1022. If the developer has not set the base value attribute, the attribute value of the base value attribute is the default value, which may be auto, and the process proceeds to step 1023.

[0075] In step 1022 , the attribute value of the reference value attribute is determined as the initial size of the node, and the process proceeds to step 10210 .

[0076] In some embodiments, when the value of the base attribute is not the default value, the base attribute's value is used as the initial size of the node. For example, if node A is a child of the body node and the value of the flex-basis attribute in node A's style properties is 100px, the initial size of node A is 100px (pixel).

[0077] In step 1023 , it is determined whether the attribute value of the main axis size limit attribute of the node is the default value.

[0078] When the attribute value of the main axis size restriction attribute of the node is not the default value, the process proceeds to step 1024 ; when the attribute value of the main axis size restriction attribute of the node is the default value, the process proceeds to step 1025 .

[0079] In step 1024 , the attribute value of the main axis size limit attribute is determined as the initial size of the node, and the process proceeds to step 10210 .

[0080] In some embodiments, for any node using elastic layout, when the developer sets the main axis size restriction attribute in the node size restriction attribute of the node, the attribute value of the main axis size restriction attribute is not the default value, and the attribute value is the main axis restriction size. If the attribute value of the secondary axis size restriction attribute is not set, then the attribute value of the secondary axis size restriction attribute is INF. The main axis restriction size of the node can be obtained, and the main axis restriction size can be directly used as the initial size of the node. For example, node A is the child node of the body node, and the attribute value of the requestSize attribute in the style attribute of node A is (100px, INF), then the main axis restriction size of node A is 100px, then the initial size of node A is 100px (pixel, pixel unit).

[0081] For a parent node using elastic layout, after obtaining the initial size of each child node of the parent node, the main axis size of each child node can be determined based on the main axis limit size of the parent node (that is, the attribute value of the main axis size limit attribute) and the initial size of each child node.

[0082] The embodiment of the present application obtains the initial size of the node in different ways by distinguishing the style attribute settings of the node, and then determines the main axis size based on the initial size, thereby improving the page generation speed and the page effect after each node is laid out.

[0083] In step 1025, it is determined whether the node has at least one child node.

[0084] When the node has at least one child node, the process proceeds to step 1026 ; when the node has no child node, the process proceeds to step 1027 .

[0085] In step 1026 , a preset recursive function is called on the node to determine the initial size of each child node of the node, the initial sizes of the child nodes are summed to obtain the initial size of the node, and then the process goes to step 10210 .

[0086] In an embodiment of the present application, for any node using an elastic layout, when the developer does not set the baseline value attribute and the node size limit attribute of the node, the attribute values ​​of the baseline value attribute and the node size limit attribute are both default values, the default value of the baseline value attribute is auto, and the default value of the node size limit attribute is (INF, INF). At this time, the initial size of the node is the size occupied by the node on the main axis. If the node is a subtree, that is, the node includes at least one child node, a recursive function (compute recursive function) can be called on the node, and the size value returned by the recursive function is used as the initial size of the node.

[0087] The compute recursive function may include the target node node, the node size limit attribute requestSize, the text width limit attribute maxContent, the parent node size parentSize, and the size value Size. The target node node is the node whose size needs to be calculated; the node size limit attribute requestSize is the node size limit attribute of the target node, which can be represented by INF to indicate unlimited; the text width limit attribute maxContent is an additional width limit for the text segment contained in the target node. When the text reaches the attribute value of maxContent, it needs to be wrapped and displayed; the parent node size parentSize is the size of the parent node of the target node, including the main axis size and the secondary axis size of the parent node; the size value Size is the calculated size of the target node returned by the compute recursive function.

[0088] When a recursive function is called on a node to determine its initial size, it is called on each of its child nodes, layer by layer, down the node tree, until it has been called on all leaf nodes below it. The lowest-level leaf node is a text node, which contains a paragraph of text. When the recursive function is called on a leaf node, the size value returned by the recursive function is the width of the text on the main axis, i.e., the initial size of the leaf node. After determining the initial size of the leaf node, the initial size is returned to the parent node of the leaf node in the previous layer of the node tree, causing the parent node's recursive function to begin calculating the initial size of the parent node based on the initial sizes of each leaf node. The size values ​​are then returned recursively up the node tree layer by layer until the initial size of the node is determined. Therefore, when the preset recursive function is called on a node, the initial size returned by each of its child nodes is obtained. The initial sizes returned by each of the child nodes are summed to obtain the initial size of the node.

[0089] It should be noted that, in the above-mentioned process of calling the recursive function, when calling the recursive function for each layer of child nodes to determine the size value, it is necessary to pay attention to whether the attribute values ​​of the baseline value attribute, node size limit attribute and other attributes in the style attributes of the child node are the default values. If they are not the default values, you can refer to the execution steps of the above-mentioned other embodiments.

[0090] In another embodiment, a pre-built parameter mapping table can be obtained, which includes mapping relationships between style attributes and size values. In some embodiments, the parameter mapping table can include mapping relationships between node size limit attributes, text width limit attributes, and size values. After calling the recursive function on a node, the calculation process of the recursive function can be omitted, and the corresponding target size value can be directly determined from the parameter mapping table based on the node's style attributes, and the target size value can be used as the initial size of the node. For example, a recursive function is called on node A. The attribute value of the node size restriction attribute of node A is (INF, INF). The child nodes of node A are node C and node D, both of which are leaf nodes. The attribute value of the node size restriction attribute of node C is (INF, INF), the attribute value of the text width restriction attribute is 100px, and the attribute value of the node size restriction attribute of node D is (50px, INF). Then, for node C, the target size value 100px corresponding to the attribute value of the node size restriction attribute (INF, INF) and the attribute value of the text width restriction attribute is 100px is directly obtained from the parameter mapping table as the initial size of node C. For node D, the target size value 50px corresponding to the attribute value of the node size restriction attribute (50px, INF) is directly obtained from the parameter mapping table as the initial size of node D. The initial sizes of nodes C and D are returned to node A, and the recursive function calculation process of node A is executed to obtain a size value of 150px as the assumed size of node A. The embodiment of the present application can omit the calculation process of the recursive function through the parameter mapping table, saving calculation time and improving the page generation speed.

[0091] In one embodiment, if a node has only one child node, the initial size of the child node may be directly used as the initial size of the node.

[0092] For a parent node using an elastic layout, after obtaining the initial size of each child node of the parent node, the main axis size of each child node can be determined based on the main axis limit size of the parent node and the initial size of each child node.

[0093] The embodiment of the present application can obtain the main axis size of each node by calling a recursive function to complete page generation.

[0094] In step 1027 , it is determined whether the attribute value of the text width limit attribute of the node is the default value.

[0095] When the attribute value of the text width restriction attribute of the node is not the default value, the process proceeds to step 1028 ; when the attribute value of the text width restriction attribute of the node is the default value, the process proceeds to step 1029 .

[0096] In step 1028 , the attribute value of the text width limit attribute is determined as the initial size of the node, and the process proceeds to step 10210 .

[0097] Here, the text width limit attribute maxContent is an additional width limit for the text segment contained in the node. When the text reaches the attribute value of maxContent, it needs to be wrapped and displayed. For any node that adopts elastic layout, when the developer has not set the baseline value attribute and the node size limit attribute of the node, the attribute values ​​of the baseline value attribute and the node size limit attribute are default values. At this time, the initial size of the node is the size occupied by the node on the main axis. If the node does not include child nodes in the node tree, the node is a leaf node, and the leaf node is a text node, which includes a paragraph of text. When the developer has set the text width limit attribute of the leaf node, the attribute value of the text width limit attribute is not the default value, and the attribute value of the text width limit attribute can be directly determined as the initial size of the leaf node.

[0098] In step 1029 , the text width occupied by the text in the node when it is arranged in a line is obtained, the text width is determined as the initial size of the node, and the process proceeds to step 10210 .

[0099] In some embodiments, when the developer has not set the text width limit attribute of the leaf node, the attribute value of the text width limit attribute of the leaf node is the default value. The text width occupied by the text in the leaf node when it is arranged in a row can be obtained directly based on the font size, character spacing and other attributes in the style attributes of the leaf node, and the text width is determined as the initial size of the leaf node.

[0100] Alternatively, after obtaining the initial size of the node, the main axis size of the node may be determined according to the main axis limit size of the parent node of the node and the initial sizes of the node and its sibling nodes.

[0101] The embodiment of the present application obtains the initial size of the leaf node in different ways by distinguishing the text width limit attribute settings of the node, and then determines the main axis size based on the initial size, thereby improving the page generation speed and the page effect after each node is laid out.

[0102] In step 10210, the main axis size of the node is determined based on the initial size of the node and the style attributes.

[0103] In some embodiments, step 10210 can be implemented in the following manner: summing the initial sizes of each child node of the node's parent node to obtain the total initial sizes; if the total initial sizes are less than the attribute value of the parent node's main axis size limit attribute, if the attribute value of the node's elastic growth attribute is greater than 0, based on the attribute value of the elastic growth attribute, the initial size of the node is expanded to obtain the main axis size of the node; or, if the total initial sizes are less than the attribute value of the parent node's main axis size limit attribute, if the attribute value of the node's elastic shrinkage attribute is greater than 0, based on the attribute value of the elastic shrinkage attribute, the initial size of the node is compressed to obtain the main axis size of the node.

[0104] Here, after obtaining the initial size of each node, for any node, if the attribute value in the main axis size limit attribute of the parent node of the node is not the default value, the initial size of each child node of the parent node can be summed up first, that is, the initial size of the node is added to the initial size of each sibling node of the node to obtain the total initial size.

[0105] If the sum of the initial sizes is less than the spindle limit size of the parent node, there is remaining space on the spindle of the parent node. For example, Figure 4 is a schematic diagram of a node that does not occupy the entire spindle. As shown in Figure 4, node A and node B are child nodes of the body node. The sum of the initial size of node A and the initial size of node B is less than the spindle limit size of the body node. At this time, there is remaining space. The attribute value of the elastic growth attribute (flex-grow) of the node and each sibling node can be obtained. For any node, the value range of the node's elastic growth attribute is (0,1), and the default value is 0, that is, the node cannot be expanded by default. Son nodes whose attribute value of the elastic growth attribute on the spindle is greater than 0 can be expanded to occupy the remaining space on the spindle. The initial size of the node can be expanded based on the attribute value of the elastic growth attribute to obtain the spindle size of the node. It should be noted that the embodiment of the present application does not limit the implementation steps of expanding the initial size of the node based on the attribute value of the elastic growth attribute. The actual algorithm will also be affected by various other style attributes. It is only necessary to ensure that the remaining space occupied by the node after expansion is proportional to the attribute value of the elastic growth attribute.

[0106] If the sum of the initial sizes is greater than the main axis limit size of the parent node, the main axis of the parent node has been filled and part of it has overflowed, which is recorded as overflow space. For example, Figure 5 is a schematic diagram of a node exceeding the main axis. Referring to Figure 5, node A and node B are child nodes of the body node. The sum of the initial size of node A and the initial size of node B is greater than the main axis limit size of the body node. At this time, there is overflow space. The attribute value of the elastic shrinkage attribute (flex-shrink) of the node and each sibling node can be obtained. For any node, the value range of the elastic shrinkage attribute of the node is (0,1), and the default value is 1, that is, the node can be compressed by default. The child node whose attribute value of the elastic shrinkage attribute on the main axis of the parent node is greater than 0 can be compressed so that the overflow space on the main axis is finally 0. The initial size of the node can be expanded and compressed based on the attribute value of the elastic shrinkage attribute to obtain the main axis size of the node. It should be noted that the embodiment of the present application does not limit the implementation steps of compressing the initial size of the node based on the attribute value of the elastic shrinkage attribute. The actual algorithm will also be affected by various other style attributes. It is only necessary to ensure that the space for node compression is proportional to the product of the attribute value of the elastic shrinkage attribute and the initial size.

[0107] The embodiment of the present application determines whether there is residual space or overflow space on the main axis of the parent node through the main axis size restriction attribute of the parent node and the initial size of each child node, so as to expand or compress the corresponding child nodes based on the elastic growth attribute or the elastic contraction attribute, thereby obtaining the main axis size of each child node and improving the page display effect after each node is laid out.

[0108] Step S103: When the node includes at least one child node, a parameter mapping table is obtained, and based on the primary axis size of the node and the parameter mapping table, the secondary axis size of the node is obtained.

[0109] The parameter mapping table includes the mapping relationship between style attributes and size values.

[0110] Here, after the main axis size of the node is determined, the secondary axis size can be determined based on the main axis size. For example, for a scaled image, once the size in one direction is determined, the size in the other direction can also be determined accordingly. The pre-built parameter mapping table may include a mapping relationship between style attributes and size values. In some embodiments, the parameter mapping table may include a mapping relationship between node size restriction attributes, text width restriction attributes and size values. The parameter mapping table can be used to omit the calculation process of calculating the secondary axis size based on the main axis size. For any node, the main axis size of the node corresponds to the main axis restriction size of the node size restriction attribute in the parameter mapping table. The corresponding target size value can be directly determined from the parameter mapping table based on the main axis size of the node, and the target size value can be used as the secondary axis size of the node. It should be noted that when the attribute values ​​of attributes such as margins and white space in the style attributes are in percentage form, the style attributes in the parameter mapping table may also include the parent node size parentSize.

[0111] In some embodiments, the style attribute includes a secondary axis alignment attribute. Step S103 of "obtaining the secondary axis size of the node based on the primary axis size of the node and the parameter mapping table" can be implemented through the steps shown in FIG3D, which will be described below in conjunction with FIG3D.

[0112] In step 1031 , it is determined whether the attribute value of the axis-aligned attribute of the node is stretch.

[0113] When the attribute value of the axis-aligned attribute of the node is not stretch, the process proceeds to step 1032 ; when the attribute value of the axis-aligned attribute of the node is stretch, the process proceeds to step 1035 .

[0114] In step 1032, a preset recursive function is called on the node to obtain the leaf nodes of the node and the main axis size of the leaf nodes.

[0115] In step 1033, the secondary axis size of the leaf node is determined according to the primary axis size of the leaf node and the parameter mapping table.

[0116] In step 1034, the secondary axis size of the leaf node is passed to the parent node of the leaf node, and the secondary axis size of the parent node of the leaf node is determined based on the secondary axis size of the leaf node, the primary axis size of the parent node of the leaf node and the parameter mapping table; the process is repeated recursively until the secondary axis size of the node is determined.

[0117] Here, the axis-align attribute (align-self) is used to align nodes in the axis-aligned direction. When the axis-aligned attribute value of a node is not "stretch", a recursive function can be called directly on the node. In this case, the value of requestSize in the recursive function is the axis size of the node. The recursive function is called for each child node of the node layer by layer in the node tree until the recursive function is called for all leaf nodes under the node to determine the axis size of each node. In the process of calling the recursive function to determine the axis size, a parameter mapping table can be used instead of the calculation process of the recursive function.

[0118] In an embodiment of the present application, in the process of determining the secondary axis size of a node, after calling a preset recursive function on a node, at least one leaf node of the node in the node tree can be obtained. The primary axis size of each node in the node tree has been calculated in the previous step, so the primary axis size of each leaf node can be directly obtained. For any leaf node, the secondary axis size of the leaf node can be determined from the parameter mapping table based on the primary axis size of the leaf node. After obtaining the secondary axis size of each leaf node, for any leaf node, the secondary axis size of the leaf node can be returned to the parent node of the leaf node in the upper layer in the node tree, and the secondary axis size of the parent node can be determined based on the secondary axis size of the leaf node, the primary axis size of the parent node, and the parameter mapping table.

[0119] Exemplarily, the target style attribute can be determined from the parameter mapping table based on the main axis size of the parent node, and the attribute value of the main axis size limit attribute in the target style attribute is equal to the main axis size of the parent node. Then, the target size value corresponding to the target style attribute is obtained from the parameter mapping table. The target size value can be compared with the secondary axis size of the leaf node. If the target size value is greater than or equal to the secondary axis size of the leaf node, the target size value is determined as the secondary axis size of the parent node; if the target size value is less than the secondary axis size of the leaf node, the secondary axis size of the leaf node is determined as the secondary axis size of the parent node. It should be noted that in actual calculations, the secondary axis size may also be affected by other style attributes, such as the line break attribute (flex-wrap), which may cause the child node in the parent node to be displayed in multiple lines in the secondary axis direction. At this time, the secondary axis size of the son node will further affect the secondary axis size of the parent node. Reference can be made to the calculation method in the relevant technology, and the embodiments of the present application are not limited here.

[0120] According to the above steps of obtaining the slave axis size, the node tree is recursively traced upward from the leaf node layer by layer until the slave axis size of each node is obtained based on the parameter mapping table.

[0121] The embodiment of the present application replaces the internal calculation process of the recursive function with a parameter mapping table, which saves calculation time and improves page generation speed and page rendering efficiency.

[0122] In some embodiments, in the above steps, determining the secondary axis size of the leaf node based on the primary axis size of the leaf node and the parameter mapping table can be achieved in the following way: determining the target style attribute from the parameter mapping table, the attribute value of the node primary axis restriction attribute in the target style attribute is equal to the primary axis size of the leaf node; determining the target size value corresponding to the target style attribute from the parameter mapping table, and determining the target size value as the secondary axis size of the leaf node.

[0123] In an embodiment of the present application, a target style attribute can be determined from a parameter mapping table based on the major axis size of a leaf node. The major axis size limit attribute value of the target style attribute is equal to the major axis size of the leaf node. Then, a target size value corresponding to the target style attribute is obtained from the parameter mapping table. The target size value is used as the minor axis size of the leaf node.

[0124] The embodiment of the present application replaces the internal calculation process of the recursive function with a parameter mapping table, which saves calculation time and improves page generation speed and page rendering efficiency.

[0125] In step S1035 , it is determined whether the attribute value of the secondary axis size limit attribute of the parent node of the node is the default value.

[0126] When the attribute value of the secondary axis size limit attribute of the parent node of the node is the default value, step 1036 is entered; when the attribute value of the secondary axis size limit attribute of the parent node of the node is not the default value, step 1038 is entered.

[0127] In step 1036, a preset recursive function is called for the node to determine the initial slave axis size of the node according to the master axis size of the node and the parameter mapping table.

[0128] In step 1037 , the initial secondary axis size of the node's sibling node is obtained; and the maximum value of the initial secondary axis sizes of the node and the sibling node is determined as the secondary axis size of the node.

[0129] Here, when the value of the node's secondary axis alignment property is "stretch," and if the value of the secondary axis size limit property of the node's parent node is not the default value, the node needs to be stretched in the secondary axis direction to fill the secondary axis of the parent node. Therefore, the value of the secondary axis size limit property of the parent node can be obtained, and the value of the secondary axis size limit property can be used as the secondary axis size of the parent node, thereby determining the secondary axis size of the node as the secondary axis size of the parent node.

[0130] In an embodiment of the present application, when the attribute value of the axis-aligned attribute is stretch, the axis-size of the parent node is directly determined as the axis-size of the node, thereby omitting a recursive function call process, reducing the number of recursive calls, saving the time required for page generation, and improving page rendering efficiency.

[0131] In step 1038 , the attribute value of the secondary axis limit attribute of the parent node is determined as the secondary axis size of the node.

[0132] In an embodiment of the present application, when the attribute value of the axis alignment attribute of a node is stretch, if the attribute value of the axis size limit attribute of the parent node of the node is the default value, the node needs to be stretched in the axis direction to align with the son node with the largest axis size in the parent node. First, a recursive function can be called on the node to determine the initial axis size of the node and the initial axis size of each child node of the node based on the main axis size and parameter mapping table of the node, and then the initial axis size of each node in the node tree is obtained based on the same method. The above-mentioned initial axis size determination process is similar to the axis size determination process when the attribute value of the previous axis alignment attribute is not stretch. The initial axis size of the sibling node of the node can be obtained, and the maximum value of the initial axis size of the node and the sibling node can be determined as the axis size of the node.

[0133] The embodiment of the present application omits the calculation process inside the recursive function through the parameter mapping table, saves the time required for page generation, and improves page rendering efficiency.

[0134] Step S104 : determining the major axis coordinate and the minor axis coordinate of each node based on the major axis size and the minor axis size of each node.

[0135] Here, the main axis direction can be obtained first. For any node, the main axis coordinate of the node on the main axis is the sum of the main axis sizes of all the brother nodes before the node in the main axis direction. It should be noted that in actual calculations, there are other style attributes that affect the main axis coordinates, such as the horizontal layout attribute (justify-content). You can refer to the calculation method in the relevant technology, and the embodiment of the present application is not limited here. For any node, the secondary axis coordinate of the node on the secondary axis can be calculated based on the secondary axis size of the brother node of the node, but the embodiment of the present application is not limited here. It should be noted that in actual calculations, the secondary axis coordinates are mainly affected by style attributes such as vertical layout attributes (align-items) and align-self. If the node and its brother nodes occupy multiple rows, they may also be affected by the multi-row alignment attribute (align-content) style attribute. You can refer to the calculation method in the relevant technology.

[0136] In some embodiments, determining the principal axis coordinates and slave axis coordinates of each node based on the principal axis size and slave axis size of each node in step S104 can be achieved in the following manner: calling a preset recursive function for each node, and determining the principal axis size, slave axis size, principal axis coordinates and slave axis coordinates of each child node of each node based on the principal axis size and slave axis size of each node.

[0137] In the embodiment of the present application, for any node, if the value of the node's secondary axis alignment attribute is "stretch," after obtaining the secondary axis size of the node, a preset recursive function must be called on the node to cause the node's child nodes to update the secondary axis sizes and secondary axis coordinates of the next-level child nodes (i.e., the node's grandchild nodes). The method for determining the primary axis size, secondary axis size, primary axis coordinates, and secondary axis coordinates is similar to that of other embodiments.

[0138] Step S105 : generating a page to be laid out according to the major axis size, minor axis size, major axis coordinates, and minor axis coordinates of each node.

[0139] In an embodiment of the present application, after obtaining the main axis size, secondary axis size, main axis coordinates and secondary axis coordinates of each node, for any node, the content of the node can be laid out at the corresponding position of the page to be laid out based on the main axis size, secondary axis size, main axis coordinates and secondary axis coordinates of the node, and the presentation form of the content can be changed based on the style attributes of the node, etc., to generate the page to be laid out after layout.

[0140] It should be noted that the nodes in the node tree can also support flow layout and position layout.

[0141] When generating a page, the embodiment of the present application first converts the page to be laid out into a node tree. In the case of an elastic layout, a parameter mapping table can be obtained. After determining the main axis size of the node based on the style attributes of the node, the secondary axis size of the node is determined based on the main axis size of the node and the parameter mapping table. Then, the main axis coordinate and the horizontal axis coordinate of the node are determined based on the secondary axis size and the main axis size. The page to be laid out is generated according to the main axis size, secondary axis size, main axis coordinate and secondary axis coordinate of each node. In the embodiment of the present application, since the parameter mapping table includes a mapping relationship between style attributes and size values, for each node, the main axis size of the node is an item in the style attributes, and the corresponding size value can be directly obtained from the parameter mapping table based on the main axis size of the node as the secondary axis size of the node, which saves calculation time. At the same time, when the page is updated and the positions of all nodes need to be recalculated, the size value in the parameter mapping table can also be directly used, which shortens the time required for page generation and improves page rendering efficiency.

[0142] The following describes an exemplary application of the embodiments of the present application in a practical application scenario.

[0143] The embodiment of the present application provides a high-performance cross-platform layouter (float-pigment-layout) with more layout styles and closer to the web page (web) specifications. The float-pigment-layout layouter is mainly used to simulate a layout effect similar to a web page in an environment without web browser engine support. The float-pigment-layout layouter can support: Flexbox layout, that is, the effect of CSS (Cascading Style Sheets) display:flex (elastic layout); ordinary Block layout, that is, the effect of CSS display:block (block-level element layout); partial Inline layout, that is, an effect similar to CSS display:inline (inline element layout); absolute positioning, that is, the effect of CSS position:absolute (absolute positioning). The float-pigment-layout layouter can also support many style settings, such as maximum and minimum size limits, white space, margins, etc. The float-pigment-layout layouter provided in the embodiment of the present application is written in rust language, which can be embedded in desktop and mobile native applications, and also supports compilation into WebAssembly modules and use in JavaScript environments. It can be used for various applications, game UI layout, and can even be used in web, WeChat applets, and mini-game environments.

[0144] During page layout, the page is typically represented as a node tree, such as an HTML DOM node tree. Each node in the node tree has its own style attribute settings. To display each node on the page, the coordinates (x, y) of each node are required. However, the coordinates are not directly set by the developer in the style attributes; instead, they are inferred from these attributes. Take the following HTML node tree structure as an example: the body node has two children, A and B. Child A's style attributes include height:100px and background:048; child B's style attributes include height:50px and background:084. If the total width of the page is 360px, the layouter can obtain the coordinates and width and height of each node based on the style attribute settings of child nodes A and B. The calculated coordinates and width and height of each node are shown in Table 1.

[0145] Table 1. Node coordinates and width and height

[0146] That is, the layouter can calculate the coordinate position, width and height of the node based on the style attributes of the node.

[0147] When using the float-pigment-layout provided in the embodiments of this application to perform flexible layout of a page, the page layout process is a recursive process that can be represented by a recursive function. The recursive function includes node (the node whose size needs to be calculated), requestSize (the size limit of the node), maxContent (an additional width limit for the text segment contained in the node, which requires the text to wrap when it reaches this limit), parentSize (the size of the parent node), and Size (which returns the calculated node size).

[0148] If a node is set to display:flex, the Flexbox algorithm is used on it. The simple Flexbox algorithm is divided into the following 5 steps:

[0149] Step 1: Calculate the assumed size (initial size) of each child node on the main axis.

[0150] For a child node, if the attribute value of the flex-basis attribute of the child node is not the default value, the attribute value of the flex-basis attribute is used as the assumed size of the child node. If no size restrictions are placed on the child node on the main axis, the size occupied by the child node on the main axis is the assumed size. In this case, if the child node is a text node and its content is a paragraph of text, the assumed size of the child node is the width of the text when it is arranged in a line; if the child node is a subtree, the compute recursive function is called on the child node (with requestSize as INF), and the size of the recursive function's return value in the main axis direction is used as the assumed size.

[0151] Step 2: Calculate the size of the main axis and the size of each child node on the main axis.

[0152] After obtaining the assumed size of each child node, if the main axis size limit of the node itself is not INF, the following two situations may occur: See Figure 4, if the sum of the assumed sizes is less than the main axis size of the node itself, that is, there is still space left on the main axis, then the child node with a flex-grow attribute greater than 0 can be expanded to occupy the remaining space on the main axis. See Figure 5, if the sum of the assumed sizes is greater than the main axis size of the node itself, that is, the main axis is already full and has overflowed a certain amount of space, then the child node with a flex-shrink attribute greater than 0 needs to be compressed so that the overall occupancy no longer overflows. For situations where expansion is required, the allocation of the remaining space is proportional to the value of flex-grow; for situations where compression is required, the space compressed by the child node is proportional to the product of flex-shrink and the assumed size. It should be noted that the standard algorithm for calculating expansion or compression will actually be affected by other factors or style attributes, which will not be elaborated in detail in the embodiments of this application. The flex-grow attribute defaults to 0, and the flex-shrink attribute defaults to 1, that is, by default, nodes can be compressed but not expanded.

[0153] Step 3: Calculate the size of the slave axis and the size of each child node on the slave axis.

[0154] After the main axis size is determined, the secondary axis size can be determined accordingly. For example, for a scaled image, the size in one direction is determined, and the size in the other direction is determined accordingly. The secondary axis size occupied by each child node can be determined by calling the compute recursive function on each child node (with its main axis size in requestSize). In particular, if the align-self attribute is stretch, the secondary axis size of the child node needs to be stretched to the secondary axis size of the node itself. At this time, an additional call to the compute recursive function (with its main axis size and stretched secondary axis size in requestSize) is required so that the child node can update the size and position coordinates of its grandchild nodes.

[0155] Step 4: Calculate the coordinates of each child node on the main axis.

[0156] The coordinates of each child node on the main axis are usually the sum of the main axis sizes of all its previous sibling nodes. However, some properties may affect the final calculated value, such as the justify-content property.

[0157] Step 5: Calculate the coordinates of each child node on the slave axis.

[0158] The coordinates of each child node on the secondary axis are mainly affected by the align-items and align-self properties. If the child node occupies multiple lines, it is also affected by the align-content property.

[0159] It's important to note that the above layout calculations may be affected by the following factors: The resulting dimensions must ultimately be constrained within the ranges specified by the min-width, max-width, min-height, and max-height properties. The float-pigment-layout also supports box-sizing properties, which influence width and height settings, ensuring that margins and padding are included within the defined width and height. Style properties such as margin-left, border-top, and padding-bottom are also taken into account. If these properties are percentages, they are converted based on the parentSize parameter of the compute recursive function. Special logic applies to margins set to auto. For example, if all margins along the sub-axis of a child node are set to auto, the child node will always be centered along the sub-axis, regardless of the values ​​of the align-items and align-self properties.

[0160] The time complexity of the naive Flexbox algorithm described above (time complexity is a function used to describe the running time of an algorithm, expressed in big O notation) can be viewed from two perspectives: first, the number of times the compute function is executed for a particular node, and second, the time complexity of the compute function itself. In the above algorithm steps, during the execution of the compute function, the recursive function will be called up to three times for each of its child nodes (once to obtain the assumed size and twice to calculate the axis size). Assuming that a node has m children, although the time complexity of the compute function itself is O(m), since the number of times it calls the compute function on its child nodes is also O(m), the time complexity of the compute function itself will definitely not exceed the complexity brought by the number of calls to the compute function, so this factor does not need to be considered when calculating the time complexity. In this way, the time complexity of the algorithm is the sum of the number of times the compute recursive function is executed for all nodes. For any node, assuming its depth in the node tree is d, its compute function is executed 3^d times.

[0161] For a tree with n nodes: If the node tree is a very uniform tree, such as a complete binary tree, it has approximately n / 2 leaf nodes, and d is at most log(n). The global time complexity is O(n*3^log(n)), which after simplification is O(n*n^log(3)), which is approximately O(n^2.6). If the node tree is a very deep tree, such as each node has only one child, then there is only one leaf node, and d is at most approximately n, and the global time complexity is O(3^n). It can be seen that the performance of the above algorithm is poor, both in terms of average time complexity and worst-case time complexity.

[0162] The float-pigment-layout layout provided in the embodiment of this application can support a page generation method. This page generation method can be applied to the page generation scenario of the mini program. This page generation method optimizes the above algorithm steps and is divided into the following aspects:

[0163] (1) Recursive call pruning

[0164] For each node, the call parameters of the compute recursive function include requestSize, maxContent, and parentSize. However, the parameter values ​​of requestSize, maxContent, and parentSize may be the same in different recursive function calls. For example, when obtaining the assumed size of a node, the sizes of requestSize and maxContent on the main axis must be INF, and the sizes on the secondary axis can be INF or a specific value. Since the return result of the compute recursive function is only related to the above three parameters, a mapping table (parameter mapping table) can be used to cache the return results of requestSize, maxContent, and parentSize when calling compute. The next time the same parameters are called, there is no need to recalculate and the corresponding return results can be directly obtained from the mapping table. In addition, if the node's margins and whitespace do not use percentage values, the parentSize parameter is not needed, so the mapping table can only include requestSize and maxContent parameters, further improving the cache hit rate. In addition, these cached return result values ​​will only become invalid after the node's own style properties are changed. Therefore, when the page is updated and the positions of all nodes need to be recalculated, these cached return results can often be used again, saving a lot of computing time.

[0165] (2) Skip the positioning step

[0166] The five steps of the above-mentioned naive algorithm can be divided into two stages: the first three steps (obtaining the assumed size, calculating the main axis size, and calculating the secondary axis size) are the stages of calculating the size; the last two steps (calculating the main axis coordinates and calculating the secondary axis coordinates) are the stages of calculating the coordinate position. When a node calls compute to obtain the assumed size of one of its child nodes, it only needs to obtain the size of this child node and does not need to calculate the final coordinates of the child node. At this time, the compute call for this child node only needs to complete the stage of calculating the size, and the stage of calculating the coordinate position can be skipped to save computing time. In addition, in the maximum three recursive calls of the compute function to each child node, only the last call to the compute function needs to calculate the coordinate position. Therefore, for each node, the page generation method provided in the embodiment of the present application only needs to execute the stage of calculating the coordinate position once.

[0167] (3) Reduce the number of recursive calls

[0168] When the naive flexbox algorithm calculates the secondary axis size, it may be necessary to call the compute recursive function on the child node up to twice (the first time is used to determine the secondary axis size, and the second time is used to stretch the secondary axis size when stretching). The page generation method provided in the embodiment of the present application includes the following three cases: In the first case, when the align-self attribute of the child node is not stretch, the last recursive function call is not performed; in the second case, when the align-self attribute of the child node is stretch, and the requestSize of the current node is not INF, the secondary axis size of the child node is equal to the secondary axis size of the current node, and the previous recursive function call is not performed; in the third case, when the align-self attribute of the child node is stretch, and the requestSize of the current node is INF, two recursive function calls are performed.

[0169] In the page generation method provided in the embodiment of the present application, if only the first and second cases mentioned above are considered when calculating the axis size, the average time complexity of the entire algorithm can be reduced to O(n*2 log(n) ), that is, O(n 2 ), the worst time complexity can be reduced to O(2 n). For the third case, although two recursive calls are inevitable. However, the latter call will only affect the size of the child node, and will not affect the size of the current node. If the compute for the current node only needs to calculate the size and the coordinate position calculation stage can be skipped, then the last call can also be skipped. And because the coordinate position calculation stage only needs to be executed once for each node, the last call to the child node is only once at most. In other words, the time complexity of the additional compute call brought about by the third case is at the O(n) level, which is not the main component of the time complexity. Therefore, the page generation method provided in the embodiment of the present application optimizes the overall time complexity to an average of O(n 2 ), the worst O(2 n ).

[0170] The float-pigment-layout layout provided in the embodiment of the present application can additionally support the box-sizing attribute, and its implementation in reducing the number of recursive calls has its own characteristics and is compatible with the additional features it supports. The float-pigment-layout layout can also support some Block and Inline layouts. For Block layout, in general, the main axis direction is vertically downward, and the secondary axis direction is horizontally to the right. However, the main axis direction and secondary axis direction can be changed through the writing-mode attribute. Under the Block layout, the secondary axis size of the child node is the secondary axis size of the current node minus the margin and the remaining space left, that is, the child node occupies the secondary axis as much as possible. The size on the main axis is the assumed size of the child node. In some embodiments, the current node needs to call the compute recursive function for each child node separately to obtain the assumed size of each child node on the main axis. Among them, the main axis size in the requestSize of the compute recursive function is INF, and the secondary axis size is the size after deducting the corresponding margin and blank space on the secondary axis from the secondary axis size of the current node itself. The assumed main-axis size of each child node is used as the main-axis size of the current node. This algorithm only calls the compute function once for each child node, resulting in a total time complexity of O(n), improving page generation efficiency compared to the Flexbox algorithm. Furthermore, web specifications require that block margins along the main axis overlap to a certain extent. The float-pigment-layout layout can also meet this requirement.

[0171] For Inline nodes in a Block layout, the Block layout can host nodes in the Inline layout. All adjacent Inline nodes are merged together and treated as a single Block node. This allows for effects such as placing text with different style attributes on the same line and inlining images within text. The float-pigment-layout layouter itself does not handle the layout of multiple Inline nodes within a line. Instead, it provides a set of interfaces that are handled by text typeset implementers that implement these interfaces. (If no suitable text typeset supports Inline nodes, Inline nodes do not need to be supported.) For example, the rect-palette-text text typeset can be connected through the interface to achieve complex mixed text layouts with different attributes and image embedding effects. However, text typeset interfaces are often deeply coupled with the system environment, making it difficult to separate them into independent modules. From a performance perspective, due to the slightly increased computational complexity, Inline nodes will have a small performance loss compared to Block nodes, within 20%.

[0172] For position layout, you can directly specify the coordinates of a node. You can prioritize the layout of nodes in other layout methods, and then finally place the position layout node on the page according to the specified coordinates.

[0173] For common long list pages containing horizontally arranged elements, the performance of the float-pigment-layout layout provided by the embodiment of the present application is approximately 1.3 to 3.2 times that of the yoga layout in the related art (depending on the proportion of the display:flex attribute node), as shown in Table 2.

[0174] Table 2. Performance comparison of different layouters

[0175] It should be noted that algorithmic theoretical analysis believes that the various optimizations of each layouter will be different for different node trees, so the actual optimization effects will be different for different node trees.

[0176] It is understandable that in the embodiments of the present application, when user information and other related data are involved, when the embodiments of the present application are applied to specific products or technologies, user permission or consent is required, and the collection, use and processing of relevant data must comply with relevant laws, regulations and standards of relevant countries and regions.

[0177] The following further describes an exemplary structure of the page generating device 455 provided in an embodiment of the present application implemented as a software module. In some embodiments, as shown in FIG2 , the software modules stored in the page generating device 455 of the memory 450 may include:

[0178] The node tree acquisition module 4551 is configured to acquire a node tree corresponding to the page to be laid out, wherein the node tree includes multiple nodes, each of which is used to represent the content of the page to be laid out. The main axis size determination module 4552 is configured to acquire the style attributes of any of the multiple nodes, if the node's parent node adopts elastic layout, and determine the main axis size of the node based on the node's style attributes. The secondary axis size determination module 4553 is configured to acquire a parameter mapping table, if the node includes at least one child node, and obtain the secondary axis size of the node based on the node's main axis size and the parameter mapping table. The parameter mapping table includes a mapping relationship between style attributes and size values. The coordinate determination module 4554 is configured to determine the main axis coordinates and secondary axis coordinates of each node based on the main axis size and secondary axis size of each node. The layout module 4555 is configured to generate the page to be laid out based on the main axis size, secondary axis size, main axis coordinates, and secondary axis coordinates of each node.

[0179] In some embodiments, the style attributes include a node size restriction attribute and a baseline value attribute, the node size restriction attribute includes a main axis size restriction attribute, and the main axis size determination module 4552 is further configured to determine the attribute value of the baseline value attribute as the initial size of the node when the attribute value of the baseline value attribute of the node is not the default value; determine the attribute value of the main axis size restriction attribute as the initial size of the node when the attribute value of the baseline value attribute of the node is the default value and the attribute value of the main axis size restriction attribute of the node is not the default value; determine the main axis size of the node based on the initial size of the node and the style attributes.

[0180] In some embodiments, the main axis size determination module 4552 is further configured to, when the attribute value of the node's baseline value attribute is the default value and the attribute value of the node's main axis size limit attribute is the default value, if the node includes at least one child node, determine the initial size of each child node of the node; sum the initial sizes of the child nodes to obtain the initial size of the node; and determine the main axis size of the node based on the initial size and style attributes of the node.

[0181] In some embodiments, the style attributes include a text width restriction attribute, and the main axis size determination module 4552 is further configured to, when the attribute value of the node's baseline value attribute is the default value, and the attribute value of the node's main axis size restriction attribute is the default value, and the node does not include a child node, and the attribute value of the node's text width restriction attribute is the default value, obtain the text width occupied by the text in the node when it is arranged in a row, and determine the text width as the initial size of the node; when the attribute value of the node's baseline value attribute is the default value, and the attribute value of the node's main axis size restriction attribute is the default value, and the node does not include a child node, and the attribute value of the node's text width restriction attribute is not the default value, determine the attribute value of the text width restriction attribute as the initial size of the node; and determine the main axis size of the node based on the initial size of the node and the style attributes.

[0182] In some embodiments, the main axis size determination module 4552 is further configured to sum the initial sizes of each child node of the node's parent node to obtain the total initial sizes; when the total initial sizes are less than the attribute value of the main axis size restriction attribute of the parent node, if the attribute value of the node's elastic growth attribute is greater than 0, based on the attribute value of the elastic growth attribute, the initial size of the node is expanded to obtain the main axis size of the node; or, when the total initial sizes are less than the attribute value of the main axis size restriction attribute of the parent node, if the attribute value of the node's elastic shrinkage attribute is greater than 0, based on the attribute value of the elastic shrinkage attribute, the initial size of the node is compressed to obtain the main axis size of the node.

[0183] In some embodiments, the style attributes include a slave-axis alignment attribute, and the slave-axis size determination module 4553 is also configured to call a preset recursive function on the node when the attribute value of the slave-axis alignment attribute of the node is not stretched, to obtain the leaf node of the node and the main axis size of the leaf node; determine the slave-axis size of the leaf node based on the main axis size and parameter mapping table of the leaf node; pass the slave-axis size of the leaf node to the parent node of the leaf node, and determine the slave-axis size of the parent node of the leaf node based on the slave-axis size of the leaf node, the main axis size of the parent node of the leaf node and the parameter mapping table; and recurse in sequence until the slave-axis size of the node is determined.

[0184] In some embodiments, the slave axis size determination module 4553 is further configured to determine the target style attribute from the parameter mapping table, and the attribute value of the main axis size restriction attribute in the target style attribute is equal to the main axis size of the leaf node; determine the target size value corresponding to the target style attribute from the parameter mapping table, and determine the target size value as the slave axis size of the leaf node.

[0185] In some embodiments, the slave-axis size determination module 4553 is further configured to determine the slave-axis size of the node from the attribute value of the slave-axis alignment attribute of the node as stretch and the attribute value of the slave-axis size limit attribute of the parent node of the node is not the default value.

[0186] In some embodiments, the slave-axis size determination module 4553 is further configured to call a preset recursive function on the node when the attribute value of the slave-axis alignment attribute of the node is stretch and the attribute value of the slave-axis size limit attribute of the node's parent node is the default value, and determine the initial slave-axis size of the node according to the main-axis size and parameter mapping table of the node; obtain the initial slave-axis size of the node's sibling node; and determine the maximum value between the initial slave-axis size of the node and the initial slave-axis size of the sibling node as the slave-axis size of the node.

[0187] In some embodiments, the coordinate determination module 4554 is further configured to call a preset recursive function for each node, and determine the main axis size, the secondary axis size, the main axis coordinates and the secondary axis coordinates of each child node of each node based on the main axis size and the secondary axis size of each node.

[0188] The present invention provides a computer program product including a computer program or computer-executable instructions stored in a computer-readable storage medium. A processor of an electronic device reads the computer-executable instructions from the computer-readable storage medium and executes the computer-executable instructions, causing the electronic device to perform the page generation method described in the present invention.

[0189] An embodiment of the present application provides a computer-readable storage medium storing computer-executable instructions, which stores computer-executable instructions or a computer program. When the computer-executable instructions or the computer program are executed by a processor, the processor will execute the page generation method provided in an embodiment of the present application, for example, the page generation method shown in FIG3A .

[0190] In some embodiments, the computer-readable storage medium may be a memory such as RAM, ROM, flash memory, magnetic surface memory, optical disk, or CD-ROM; or may be various devices including one or any combination of the above memories.

[0191] In some embodiments, computer-executable instructions may be in the form of a program, software, software module, script, or code, written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and may be deployed in any form, including as a stand-alone program or as a module, component, subroutine, or other unit suitable for use in a computing environment.

[0192] As an example, computer-executable instructions may, but need not, correspond to a file in a file system, may be stored as part of a file that stores other programs or data, e.g., in one or more scripts in a HyperText Markup Language (HTML) document, in a single file dedicated to the program in question, or in multiple coordinating files (e.g., files storing one or more modules, subroutines, or code portions).

[0193] By way of example, computer-executable instructions may be deployed to be executed on one electronic device, or on multiple electronic devices located at one site, or on multiple electronic devices distributed across multiple sites and interconnected by a communication network.

[0194] In summary, the embodiments of the present application can provide a float-pigment-layout layout with better performance and more supported features. The page generation method supported by it can support multiple layout methods including Flexbox, and the layout performance is better. Compared with other layouts, it is closer to the web specification, supports more style attributes, and supports both native and WebAssembly compilation targets.

[0195] The above are merely examples of the present application and are not intended to limit the scope of protection of the present application. Any modifications, equivalent replacements, and improvements made within the spirit and scope of the present application are included in the scope of protection of the present application.

Claims

1. A page generation method, applied to an electronic device, the method comprising: Obtaining a node tree corresponding to a page to be laid out, the node tree including a plurality of nodes, and the nodes being used to represent the content of the page to be laid out; For any one of the plurality of nodes, when the parent node of the node adopts a flexible layout, obtaining the style attributes of the node, and determining the main axis size of the node based on the style attributes of the node; When the node includes at least one child node, obtaining a parameter mapping table, and obtaining the cross axis size of the node based on the main axis size of the node and the parameter mapping table; the parameter mapping table includes a mapping relationship between style attributes and size values; Determining the main axis coordinates and cross axis coordinates of each node based on the main axis size and cross axis size of each node; Generating the page to be laid out according to the main axis size, cross axis size, main axis coordinates and cross axis coordinates of each node.

2. The method according to claim 1, wherein The style attributes include node size limit attributes and reference value attributes, and the node size limit attributes include main axis size limit attributes. Determining the main axis size of the node based on the style attributes of the node includes: When the attribute value of the reference value attribute of the node is not the default value, determining the attribute value of the reference value attribute as the initial size of the node; When the attribute value of the reference value attribute of the node is the default value and the attribute value of the main axis size limit attribute of the node is not the default value, determining the attribute value of the main axis size limit attribute as the initial size of the node; Determining the main axis size of the node based on the initial size of the node and the style attributes.

3. The method according to claim 1 or 2, wherein Determining the main axis size of the node based on the style attributes of the node includes: When the attribute value of the reference value attribute of the node is the default value and the attribute value of the main axis size limit attribute of the node is the default value, if the node includes at least one child node, calling a preset recursive function for the node to determine the initial size of each child node of the node; Summing up the initial sizes of the child nodes to obtain the initial size of the node; Determining the main axis size of the node based on the initial size of the node and the style attributes.

4. The method according to any one of claims 1 to 3, wherein The style attributes include node size limit attributes, reference value attributes and text width limit attributes. Determining the main axis size of the node based on the style attributes of the node further includes: When the attribute value of the reference value attribute of the node is the default value, the attribute value of the main axis size limit attribute of the node is the default value, the node does not include child nodes, and the attribute value of the text width limit attribute of the node is the default value, obtaining the text width occupied when the text in the node is arranged in one line, and determining the text width as the initial size of the node; When the attribute value of the reference value attribute of the node is the default value, and the attribute value of the main axis size limit attribute of the node is the default value, and the node does not include child nodes, and the attribute value of the text width limit attribute of the node is not the default value, determine the attribute value of the text width limit attribute as the initial size of the node; Based on the initial size of the node and the style attribute, determine the main axis size of the node.

5. The method according to any one of claims 2 to 4, wherein The determining the main axis size of the node based on the initial size of the node and the style attribute includes: Sum the initial sizes of each child node of the parent node of the node to obtain the total initial size; When the total initial size is less than the attribute value of the main axis size limit attribute of the parent node, if the attribute value of the elastic growth attribute of the node is greater than 0, expand the initial size of the node based on the attribute value of the elastic growth attribute to obtain the main axis size of the node; Or, when the total initial size is less than the attribute value of the main axis size limit attribute of the parent node, if the attribute value of the elastic contraction attribute of the node is greater than 0, compress the initial size of the node based on the attribute value of the elastic contraction attribute to obtain the main axis size of the node.

6. The method according to any one of claims 1 to 5, wherein, The style attribute includes the cross axis alignment attribute. The obtaining the cross axis size of the node based on the main axis size of the node and the parameter mapping table includes: When the attribute value of the cross axis alignment attribute of the node is not stretch, call a preset recursive function for the node to obtain the leaf nodes of the node and the main axis sizes of the leaf nodes; Determine the cross axis sizes of the leaf nodes according to the main axis sizes of the leaf nodes and the parameter mapping table; Transfer the cross axis sizes of the leaf nodes to the parent nodes of the leaf nodes, and determine the cross axis sizes of the parent nodes of the leaf nodes according to the cross axis sizes of the leaf nodes, the main axis sizes of the parent nodes of the leaf nodes and the parameter mapping table; Recursively in sequence until the cross axis size of the node is determined.

7. According to the method described in claim 6, wherein, The determining the cross axis size of the leaf node according to the main axis size of the leaf node and the parameter mapping table includes: Determine the target style attribute from the parameter mapping table, where the attribute value of the main axis size limit attribute in the target style attribute is equal to the main axis size of the leaf node; Determine the target size value corresponding to the target style attribute from the parameter mapping table, and determine the target size value as the cross axis size of the leaf node.

8. The method according to any one of claims 1 to 7, wherein The method further includes: When the attribute value of the cross axis alignment attribute of the node is stretch and the attribute value of the cross axis size limit attribute of the parent node of the node is not the default value, determine the attribute value of the cross axis size limit attribute of the parent node as the cross axis size of the node.

9. The method according to any one of claims 1 to 8, wherein The obtaining the cross axis size of the node based on the main axis size of the node and the parameter mapping table includes: When the attribute value of the slave axis alignment attribute of the node is stretch and the attribute value of the slave axis size limit attribute of the parent node of the node is the default value, determine the initial slave axis size of the node according to the main axis size of the node and the parameter mapping table; Obtain the initial slave axis size of the sibling nodes of the node; Determine the maximum value between the initial slave axis size of the node and the initial slave axis size of the sibling nodes as the slave axis size of the node.

10. The method according to claim 7 or 8, wherein The determining the main axis coordinates and the slave axis coordinates of each node based on the main axis size and the slave axis size of each node includes: Call a preset recursive function for each node, and determine the main axis size, the slave axis size, the main axis coordinates, and the slave axis coordinates of each son node of each node based on the main axis size and the slave axis size of each node.

11. A page generation device, the device includes: A node tree acquisition module configured to acquire a node tree corresponding to a page to be laid out, where the node tree includes a plurality of nodes, and the nodes are used to represent the content of the page to be laid out; A main axis size determination module configured to, for any one of the plurality of nodes, when the parent node of the node adopts elastic layout, acquire the style attributes of the node, and determine the main axis size of the node based on the style attributes of the node; the style attributes at least include a node size limit attribute; A slave axis size determination module configured to, when the node includes at least one son node, acquire a parameter mapping table, and obtain the slave axis size of the node based on the main axis size of the node and the parameter mapping table; the parameter mapping table includes a mapping relationship between style attributes and size values; A coordinate determination module configured to determine the main axis coordinates and the slave axis coordinates of each node based on the main axis size and the slave axis size of each node; A layout module configured to generate a page to be laid out according to the main axis size, the slave axis size, the main axis coordinates, and the slave axis coordinates of each node.

12. An electronic device, the electronic device includes: A memory for storing computer-executable instructions or a computer program; A processor, when executing the computer-executable instructions or the computer program stored in the memory, implements the page generation method according to any one of claims 1 to 10.

13. A computer-readable storage medium storing computer-executable instructions or a computer program, where the computer-executable instructions or the computer program, when executed by a processor, implement the page generation method according to any one of claims 1 to 10.

14. A computer program product including computer-executable instructions or a computer program, where the computer-executable instructions or the computer program, when executed by a processor, implement the page generation method according to any one of claims 1 to 10.

Images