Dynamic rendering method based on Web universal template and user-defined script

Abstract

The invention relates to the technical field of Web application development, in particular to a dynamic rendering method based on a Web universal template and a user-defined script, and the method comprises the following steps: responding to a configuration instruction, configuring page information, user-defined script data and field configuration data to generate initial configuration data; according to a page request, obtaining the initial configuration data, and executing user-defined script data in the initial configuration data by using an analysis engine to generate analysis data containing a dynamic execution result; logic processing is executed on the analyzed data to apply business logic rules contained in the analyzed data, and processed data is generated; according to the processed data, page element layout is dynamically adjusted through a response type layout algorithm so as to render a Web page matched with the terminal.

Description

Technical Field

[0001] This invention relates to the field of Web application development technology, and in particular to a method for dynamic rendering based on a general Web template and custom scripts. Background Technology

[0002] A generic web template is a file that defines the basic skeleton, layout, and static content of a web page. It contains placeholders or instructions. Its content is primarily HTML markup, along with some special template syntax; a generic template means that one template can be used to render thousands of different data sets. For example, a product detail page template can be used to render all the products on a website.

[0003] A custom script is a piece of program code (JavaScript, Python, PHP, Java, or other backend languages). Its function is to: retrieve dynamic data from databases, APIs, user input, or other sources; execute business logic such as calculations, conditional statements, and loops; control rendering, "feed" the retrieved data to the template engine, and trigger the rendering process.

[0004] However, web application development faces the challenge of maintaining multiple platforms, including PCs and mobile devices. How to achieve multi-platform adaptation of page configurations during development by combining general templates and custom scripting techniques is a pressing issue that needs to be addressed in web application development. Summary of the Invention

[0005] This invention integrates template configuration, script execution, logic processing, and responsive rendering to achieve multi-platform page adaptation.

[0006] The technical solution proposed in this invention is: a method for dynamic rendering based on a general Web template and a custom script, the method comprising:

[0007] Responding to configuration instructions, configure page information, custom script data, and field configuration data to generate initial configuration data;

[0008] Based on the page request, the initial configuration data is obtained, and the custom script data in the initial configuration data is executed using the parsing engine to generate parsed data containing dynamic execution results;

[0009] Perform logical processing on the parsed data to apply the business logic rules contained therein and generate processed data;

[0010] Based on the processed data, the layout of page elements is dynamically adjusted using a responsive layout algorithm to render a web page adapted to the terminal.

[0011] Preferably, the response configuration instruction configures page information, custom script data, and field configuration data to generate initial configuration data, including:

[0012] Let the initial configuration data be ;in, Indicates the response configuration command set; This represents a custom script data collection; This indicates the data set for the field configuration; This represents the basic configuration template; Indicates the execution context;

[0013] Response configuration command processing: ;in, This indicates the intermediate configuration after instruction processing; Indicates that the instruction applies a function. ; Indicates the configuration merge operator;

[0014] Further decomposition ,Right now ;in, Indicates the configuration tensor product. This indicates the page-level configuration projection function; This indicates that the projection function is configured at the component level. This indicates the layout configuration projection function. This represents the page-level response configuration directive set. This represents the component-level response configuration instruction set;

[0015] Perform custom script data processing: ;in, This represents the data resulting from the script execution. Indicates the function to be executed in the script; Indicates an extended execution context. ;in, Represents a set of environment variables;

[0016] The script execution process can then be represented as: ;in, Indicates a function to be executed in a single script. ;in, Indicates the return expression The value, These represent local namespace dictionaries;

[0017] Configuration fields configure data: ;in, This indicates the processed field configuration. This indicates the field processing function. This represents the data schema definition;

[0018] in, ; This represents a function that processes a single field. Represents a single field. Represents a data pattern expression; Indicates the search function;

[0019] Initial configuration data is ; This indicates the final configuration generation function. Indicates the merger strategy;

[0020] Then, the final configuration data ; Indicates policy-based Configuration merging algorithm, Represents the metadata configuration set. ; This represents the lifecycle configuration set.

[0021] Preferably, the step of obtaining the initial configuration data according to the page request and executing the custom script data in the initial configuration data using the parsing engine to generate parsed data containing dynamic execution results includes:

[0022] Let the entire analytical process be a composite function. ,in, This indicates parsing the data. Represents an analytic function. These represent page requests, initial configuration data, and the parsing engine, respectively.

[0023] Initial configuration data is obtained based on page requests;

[0024] Perform script data extraction and context construction, namely: ;in, This represents the set of scripts to be executed. Indicates the script execution context;

[0025] Build Context ,Right now ;in, Represents historical states and cached data;

[0026] Parse custom script data to obtain dynamic execution result data. ;in, This indicates the function executed by the parsing engine;

[0027] Obtain parsed data ,in, This represents the function that generates parsed data.

[0028] Preferably, the step of performing logical processing on the parsed data to apply the business logic rules contained therein and generate processed data includes:

[0029] Perform business logic rule matching and selection to obtain the selected applicable business logic rules. ;in, This represents the rule matching function. This represents a set of business logic rules; where the matching rule function is... ;in, Indicates the first Each business logic rule Represents the conditional evaluation function;

[0030] Retrieve the priority levels of business logic rules from the database, and sort the selected applicable business logic rules according to the obtained priority levels;

[0031] The pre-arranged business logic rules are executed sequentially to process the parsed data and obtain the processed data.

[0032] Preferably, each business rule is a tuple; that is, ;

[0033] in, express ; express ; Indicates priority level; ; Indicates viewing and setting objects Attributes;

[0034] The process of executing the rules is a function composition sequence. ;in, This indicates the composition of functions.

[0035] Preferably, the sequential execution of the arranged business logic rules to process the parsed data and obtain processed data includes:

[0036] Suppose the arranged business logic rules are an ordered sequence. ,in, ;

[0037] The sequential execution process of the rules can be represented as a data state transition process after processing, that is... ;in, This represents the initial parsed data. Indicates the execution rule The parsed data afterwards;

[0038] If in the data and A conflict was detected between them, namely:

[0039] If and only if At that time, judge the data and There are conflicts; among them, Represents the set of integrity constraints; Indicates the integrity detection function;

[0040] Define conflict resolution strategy function ;

[0041] Then, when and When conflicts exist, new execution rules are obtained through the conflict resolution strategy function. After and ;

[0042] The data state transition process then becomes .

[0043] Preferably, after generating the processed data, the process further includes:

[0044] Use a cache key composed of page information and user identity information;

[0045] The processed data is stored in the cache system;

[0046] In subsequent page requests, the processed data is directly retrieved from the caching system using the cache key for use by the responsive layout algorithm.

[0047] Preferably, the step of dynamically adjusting the layout of page elements based on the processed data using a responsive layout algorithm to render a web page adapted to the terminal includes:

[0048] Building responsive layout algorithms includes:

[0049] Features are extracted from the terminal device to construct the terminal feature vector. ;in, These represent screen width, screen height, pixel density, display orientation, and viewport size, respectively.

[0050] Calculate the effective display area:

[0051] Display width Display height ;

[0052] Define a collection of page elements ;in, ;in, It indicates the element's importance priority, initial size, flexibility, and constraints.

[0053] The layout structure is a tree structure. ;in, This represents a collection of nodes, where each node corresponds to a page element. This represents the set of edges, which is the set of relationships between page elements;

[0054] Based on the terminal width and constraints, perform responsive adjustments, including adjusting the position and size of elements; specifically, this includes the following steps:

[0055] Select the endpoint based on the current terminal width and perform power-off matching, that is:

[0056] Breakpoints in the current terminal };in, Indicates the first There are 1 breakpoint; each breakpoint corresponds to a screen width range and a layout rule;

[0057] Get the initial position and size of each page element;

[0058] Check if the initial position and size meet the element's constraints. If so, calculate the CSS styles for each page element, including position, size, margins, and display properties (flexible display, grid layout display).

[0059] Based on the layout structure, each page element is recursively drawn, starting from the root node.

[0060] The web browser engine draws each page element onto the screen.

[0061] An electronic device includes a processor and a memory and a communication module connected to the processor, the electronic device being used to execute the method for dynamic rendering based on a Web generic template and custom script.

[0062] A computer-readable storage medium storing a computer program that is executed by a processor to implement the method for dynamic rendering based on a Web generic template and custom scripts.

[0063] The beneficial effects of this invention are:

[0064] This invention generates initial configuration data through a universal template, custom scripts, and field configurations, making page rendering configurable, reducing hard coding, and improving development flexibility and adaptability. In addition, it adjusts the layout of page elements according to terminal characteristics, ensuring cross-terminal adaptation and guaranteeing that the page has a good visual effect on different devices. Attached Figure Description

[0065] Figure 1 This is a flowchart of a method for dynamic rendering based on a general Web template and a custom script, according to the present invention. Detailed Implementation

[0066] The following description is intended to disclose the present invention and enable those skilled in the art to implement it. The preferred embodiments described below are merely examples, and other obvious modifications will occur to those skilled in the art. The basic principles of the invention defined in the following description can be applied to other embodiments, modifications, improvements, equivalents, and other technical solutions that do not depart from the spirit and scope of the invention.

[0067] It is understood that the term "a" should be understood as "at least one" or "one or more", that is, in one embodiment, the number of an element can be one, while in another embodiment, the number of the element can be multiple, and the term "a" should not be understood as a limitation on the number.

[0068] Example 1:

[0069] refer to Figure 1 The technical solution provided by this invention is: a method for dynamic rendering based on a general Web template and a custom script, the method comprising:

[0070] Step 1: Respond to configuration instructions, configure page information, custom script data, and field configuration data to generate initial configuration data. This includes the following steps:

[0071] Let the initial configuration data be ;in, Indicates the response configuration command set; This represents a custom script data collection; This indicates the data set for the field configuration; This represents the basic configuration template; Indicates the execution context;

[0072] Response configuration command processing: ;in, This indicates the intermediate configuration after instruction processing; Indicates that the instruction applies a function. ; Indicates the configuration merge operator;

[0073] Further decomposition ,Right now ;in, Indicates the configuration tensor product. This indicates the page-level configuration projection function; This indicates that the projection function is configured at the component level. This indicates the layout configuration projection function. This represents the page-level response configuration directive set. This represents the component-level response configuration instruction set;

[0074] Perform custom script data processing: ;in, This represents the data resulting from the script execution. Indicates the function to be executed in the script; Indicates an extended execution context. ;in, Represents a set of environment variables;

[0075] The script execution process can then be represented as: ;in, Indicates a function to be executed in a single script. ;in, Indicates the return expression The value, These represent local namespace dictionaries;

[0076] Configuration fields configure data: ;in, This indicates the processed field configuration. This indicates the field processing function. This represents the data schema definition;

[0077] in, ; This represents a function that processes a single field. Represents a single field. Represents a data pattern expression; Indicates the search function;

[0078] Initial configuration data is ; This indicates the final configuration generation function. Indicates the merger strategy;

[0079] Then, the final configuration data ; Indicates policy-based Configuration merging algorithm, Represents the metadata configuration set. ; This represents the lifecycle configuration set.

[0080] Step 2: Based on the page request, obtain the initial configuration data, and use the parsing engine to execute the custom script data in the initial configuration data to generate parsed data containing dynamic execution results. Specifically, this includes the following steps:

[0081] Let the entire analytical process be a composite function. ,in, This indicates parsing the data. Represents an analytic function. These represent page requests, initial configuration data, and the parsing engine, respectively.

[0082] Initial configuration data is obtained based on page requests;

[0083] Perform script data extraction and context construction, namely: ;in, This represents the set of scripts to be executed. Indicates the script execution context;

[0084] Build Context ,Right now ;in, Represents historical states and cached data;

[0085] Parse custom script data to obtain dynamic execution result data. ;in, This indicates the function executed by the parsing engine;

[0086] Obtain parsed data ,in, This represents the function that generates parsed data.

[0087] Step 3: Perform logical processing on the parsed data to apply the business logic rules contained therein and generate processed data. This specifically includes the following steps:

[0088] Perform business logic rule matching and selection to obtain the selected applicable business logic rules. ;in, This represents the rule matching function. This represents a set of business logic rules; where the matching rule function is... ;in, Indicates the first Each business logic rule Represents the conditional evaluation function;

[0089] Each business rule is a tuple; that is... ;in, express (Boolean function); express (Data transformation function); Indicates priority level; ; Indicates viewing and setting objects The attribute is the scope of the rule;

[0090] The process of executing the rules is a function composition sequence. ;in, This indicates the composition of functions.

[0091] Retrieve the priority levels of business logic rules from the database, and sort the selected applicable business logic rules according to the obtained priority levels;

[0092] The pre-arranged business logic rules are executed sequentially to process the parsed data and obtain the processed data, including:

[0093] Suppose the arranged business logic rules are an ordered sequence. ,in, ;

[0094] The sequential execution process of the rules can be represented as a data state transition process after processing, that is... ;in, This represents the initial parsed data. Indicates the execution rule The parsed data afterwards;

[0095] If in the data and A conflict was detected between them, namely:

[0096] If and only if At that time, judge the data and There are conflicts; among them, Represents the set of integrity constraints; This represents an integrity check function, whose return value is... When the time is right, it indicates that the data is complete. This indicates that the data is incomplete.

[0097] Define conflict resolution strategy function Then, when and When conflicts exist, new execution rules are obtained through the conflict resolution strategy function. After and .

[0098] The data state transition process becomes .

[0099] Step 4: Based on the processed data, dynamically adjust the layout of page elements using a responsive layout algorithm to render a web page adapted to the terminal. This specifically includes the following steps:

[0100] Building responsive layout algorithms includes:

[0101] Features are extracted from the terminal device to construct the terminal feature vector. ;in, These represent screen width, screen height, pixel density, display orientation, and viewport size, respectively.

[0102] Calculate the effective display area:

[0103] Display width Display height ;

[0104] Define a collection of page elements ;in, ;in, It indicates the element's importance priority, the element's initial size, including width and height, the element's flexibility properties, and the element's constraints, including minimum size, maximum size, and aspect ratio;

[0105] The layout structure is a tree structure. ;in, This represents a collection of nodes, where each node corresponds to a page element. This represents the set of edges, which is the set of relationships between page elements;

[0106] Based on the terminal width and constraints, perform responsive adjustments, including adjusting the position and size of elements; specifically, this includes the following steps:

[0107] Select the endpoint based on the current terminal width and perform power-off matching, that is:

[0108] Breakpoints in the current terminal };in, Indicates the first There are 1 breakpoint; each breakpoint corresponds to a screen width range and a layout rule (usually a preset one).

[0109] Get the initial position and size of each page element;

[0110] Check if the initial position and size meet the element's constraints. If so, calculate the CSS styles for each page element, including position, size, margins, and display properties (flexible display, grid layout display).

[0111] Based on the layout structure, each page element is recursively drawn, starting from the root node.

[0112] The web browser engine draws each page element onto the screen.

[0113] Example 2:

[0114] In high-concurrency scenarios, repetitive data processing and business logic execution can easily cause system performance bottlenecks. To address this issue, we propose the following technical solution based on Implementation Example 1:

[0115] After generating the processed data, the following is also included:

[0116] Use a cache key composed of page information and user identity information; specifically:

[0117] The cache key ;in, Represents a hash function. This represents the page information vector, the user identity information vector, and the context feature signature vector.

[0118] The page information vector includes the page routing path, the URL path parameter set, the sorted key-value pairs of the query parameters, the device type classification, and the country language code;

[0119] The user identity information vector includes user ID, user role set, user permission hash value, and user grouping label;

[0120] The context feature signature vector includes time bucketing, A / B test variant configuration, and function switch status values.

[0121] The processed data is stored in a caching system. Specifically, the processed data is compressed and serialized before being stored in the appropriate caching system, including in-memory cache, distributed cache, and storage. If the cache becomes invalid, the processed data is regenerated and asynchronously updated to the storage system.

[0122] In subsequent page requests, the processed data is directly retrieved from the caching system using the cache key for use by the responsive layout algorithm.

[0123] The above solutions avoid redundant data processing and reduce CPU resource consumption by caching calculation results; furthermore, they alleviate I / O latency by accessing the cache system to obtain the corresponding data.

[0124] The present invention also provides an electronic device, the electronic device including a processor and a memory and a communication module connected to the processor, the electronic device being used to execute the method for dynamic rendering based on a Web universal template and a custom script.

[0125] The present invention also provides a computer-readable storage medium storing a computer program that is executed by a processor to implement the method for dynamic rendering based on a Web generic template and a custom script.

[0126] The processes described above with reference to the flowcharts in the embodiments disclosed in this invention can be implemented as computer software programs. The embodiments disclosed in this invention include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication component, and / or installed from a removable medium. When the computer program is executed by a central processing unit (CPU), it performs the functions defined in the methods of this application. It should be noted that the computer-readable medium described above in this application can be a computer-readable signal medium or a computer-readable storage medium, or any combination of the two. Computer-readable storage media can be, for example, but not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatuses, or devices, or any combination thereof. More specific examples of computer-readable storage media may include, but are not limited to: electrical connections having one or more wire segments, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof. In this application, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in connection with an instruction execution system, apparatus, or device. In this application, a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on a computer-readable medium may be transmitted using any suitable medium, including but not limited to: wireless segments, wire segments, optical fibers, RF, etc., or any suitable combination thereof.

[0127] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of the present invention. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, may be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0128] Those skilled in the art should understand that the embodiments of the present invention described above and shown in the accompanying drawings are merely examples and do not limit the present invention. The purpose of the present invention has been fully and effectively achieved. The functions and structural principles of the present invention have been shown and explained in the embodiments. Without departing from the principles described, the implementation of the present invention may have any changes or modifications.

Claims

1. A method for dynamic rendering based on a general Web template and a custom script, characterized in that, The method includes: Responding to configuration instructions, configure page information, custom script data, and field configuration data to generate initial configuration data; Based on the page request, the initial configuration data is obtained, and the custom script data in the initial configuration data is executed using the parsing engine to generate parsed data containing dynamic execution results; Perform logical processing on the parsed data to apply the business logic rules contained therein and generate processed data; Based on the processed data, the layout of page elements is dynamically adjusted using a responsive layout algorithm to render a web page adapted to the terminal.

2. The method for dynamic rendering based on a general Web template and a custom script according to claim 1, characterized in that, The response configuration command configures page information, custom script data, and field configuration data to generate initial configuration data, including: Let the initial configuration data be ;in, Indicates the response configuration command set; This represents a custom script data collection; This indicates the data set for the field configuration; This represents the basic configuration template; Indicates the execution context; Response configuration command processing: ;in, This indicates the intermediate configuration after instruction processing; Indicates that the instruction applies a function. ; Indicates the configuration merge operator; Further decomposition ,Right now ;in, Indicates the configuration tensor product. This indicates the page-level configuration projection function; This indicates that the projection function is configured at the component level. This indicates the layout configuration projection function. This represents the page-level response configuration directive set. This represents the component-level response configuration instruction set; Perform custom script data processing: ;in, This represents the data resulting from the script execution. Indicates the function to be executed in the script; Indicates an extended execution context. ;in, Represents a set of environment variables; The script execution process can then be represented as: ;in, Indicates a function to be executed in a single script. ;in, Indicates the return expression The value, These represent local namespace dictionaries; Configuration fields configure data: ;in, This indicates the processed field configuration. This indicates the field processing function. This represents the data schema definition; in, ; This represents a function that processes a single field. Represents a single field. Represents a data pattern expression; Indicates the search function; Initial configuration data is ; This indicates the final configuration generation function. Indicates the merger strategy; Then, the final configuration data ; Indicates policy-based Configuration merging algorithm, Represents the metadata configuration set. ; This represents the lifecycle configuration set.

3. The method for dynamic rendering based on a general Web template and a custom script according to claim 2, characterized in that, The step of obtaining the initial configuration data according to the page request and executing the custom script data in the initial configuration data using the parsing engine to generate parsed data containing dynamic execution results includes: Let the entire analytical process be a composite function. ,in, This indicates parsing the data. Represents an analytic function. These represent page requests, initial configuration data, and the parsing engine, respectively. Initial configuration data is obtained based on page requests; Perform script data extraction and context construction, namely: ;in, This represents the set of scripts to be executed. Indicates the script execution context; Build Context ,Right now ;in, Represents historical states and cached data; Parse custom script data to obtain dynamic execution result data. ;in, This indicates the function executed by the parsing engine; Obtain parsed data ,in, This represents the function that generates parsed data.

4. The method for dynamic rendering based on a general Web template and a custom script according to claim 3, characterized in that, The step of performing logical processing on the parsed data to apply the business logic rules contained therein and generate processed data includes: Perform business logic rule matching and selection to obtain the selected applicable business logic rules. ;in, This represents the rule matching function. This represents a set of business logic rules; where the matching rule function is... ;in, Indicates the first Each business logic rule Represents the conditional evaluation function; Retrieve the priority levels of business logic rules from the database, and sort the selected applicable business logic rules according to the obtained priority levels; The pre-arranged business logic rules are executed sequentially to process the parsed data and obtain the processed data.

5. The method for dynamic rendering based on a general Web template and a custom script according to claim 4, characterized in that, Each business rule is a tuple; that is... ; in, express ; express ; Indicates priority level; ; Indicates viewing and setting objects Attributes; The process of executing the rules is a function composition sequence. ;in, This indicates the composition of functions.

6. The method for dynamic rendering based on a general Web template and a custom script according to claim 5, characterized in that, The sequential execution of the arranged business logic rules processes the parsed data to obtain the processed data, including: Suppose the arranged business logic rules are an ordered sequence. ,in, ; The sequential execution process of the rules can be represented as a data state transition process after processing, that is... ;in, This represents the initial parsed data. Indicates the execution rule The parsed data afterwards; If in the data and A conflict was detected between them, namely: If and only if At that time, judge the data and There are conflicts; among them, Represents the set of integrity constraints; Indicates the integrity detection function; Define conflict resolution strategy function ; Then, when and When conflicts exist, new execution rules are obtained through the conflict resolution strategy function. After and ; The data state transition process then becomes .

7. The method for dynamic rendering based on a general Web template and a custom script according to claim 6, characterized in that, After generating the processed data, the following is also included: Use a cache key composed of page information and user identity information; The processed data is stored in the cache system; In subsequent page requests, the processed data is directly retrieved from the caching system using the cache key for use by the responsive layout algorithm.

8. The method for dynamic rendering based on a general Web template and a custom script according to claim 7, characterized in that, The step of dynamically adjusting the layout of page elements based on the processed data using a responsive layout algorithm to render a web page adapted to the terminal includes: Building responsive layout algorithms includes: Features are extracted from the terminal device to construct the terminal feature vector. ;in, These represent screen width, screen height, pixel density, display orientation, and viewport size, respectively. Calculate the effective display area: Display width Display height ; Define a collection of page elements ;in, ;in, It indicates the element's importance priority, initial size, flexibility, and constraints. The layout structure is a tree structure. ;in, This represents a collection of nodes, where each node corresponds to a page element. This represents the set of edges, which is the set of relationships between page elements; Based on the terminal width and constraints, perform responsive adjustments, including adjusting the position and size of elements; specifically, this includes the following steps: Select the endpoint based on the current terminal width and perform power-off matching, that is: Breakpoints in the current terminal };in, Indicates the first There are 1 breakpoint; each breakpoint corresponds to a screen width range and a layout rule; Get the initial position and size of each page element; Check if the initial position and size meet the element's constraints. If so, calculate the CSS styles for each page element, including position, size, margins, and display properties (flexible display, grid layout display). Based on the layout structure, each page element is recursively drawn, starting from the root node. The web browser engine draws each page element onto the screen.

9. An electronic device, characterized in that, The electronic device includes a processor and a memory and a communication module connected to the processor. The electronic device is used to execute the method for dynamic rendering based on a Web universal template and a custom script as described in any one of claims 1-8.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that is executed by a processor to implement a method for dynamic rendering based on a Web generic template and a custom script, as described in any one of claims 1-8.

Images