A method and system for optimizing rendering performance of loop components on a low-code platform

Abstract

The present invention relates to a method and system for optimizing rendering performance of a low-code platform loop component, comprising the following steps: Step 1: traverse and analyze all style attributes of a component; Step 2: identify the source of variables in the style attributes and how they are used; Step 3: analyze whether the attribute value contains an expression based on the way the variable is used, and divide the attributes containing the variables into three categories according to the dependency relationship: pure static attributes, loop-independent dynamic attributes, and loop-related dynamic attributes; Step 4: determine the association between the variable and the loop variable through variable scope analysis; Step 5: extract and process the identified static style; Step 6: generate a unique class name for the extracted static style; Step 7: construct an independent style sheet file, group the styles according to media queries, and generate compressed CSS code. The present invention effectively optimizes style rendering performance through static style extraction and dynamic style dependency analysis.

Description

Technical Field

[0001] The present invention relates to the technical field of low-code platforms, and in particular to a method and system for optimizing the rendering performance of loop components of a low-code platform. Background Art

[0002] As the demand for front-end development continues to increase, low-code platforms have gradually become an important tool for developers to quickly build business applications. Such platforms have lowered the development threshold through visual operations and componentization, but they also face the challenge of performance optimization. In low-code platforms, component style management and rendering, especially in complex scenarios (such as dynamic rendering of loop components), place higher requirements on performance.

[0003] In loop components, since style definitions may contain a large number of dynamic variables, these variables may come from the global, loop context, or the internal state of the component, and the calculation logic is complex, which directly affects the rendering efficiency. If not optimized, each rendering node in the loop needs to independently process the calculation of dynamic styles, which will cause browser performance bottlenecks and increase page rendering time. Therefore, classifying the static and dynamic characteristics of style processing and improving the performance of loop components during large-scale rendering have become the technical focus of low-code platforms.

[0004] In existing low-code platforms, loop components generally have performance issues, including:

[0005] Component styles are defined as inline style attributes and need to be recalculated for each rendering. Although this approach is feasible in small-scale applications, it will cause performance bottlenecks due to frequent calculations in large-scale applications or data-intensive applications. When the number of loops is large, repeated style calculations will cause a significant drop in performance. For example, in a product list, each product item needs to calculate the style. If the number of products is large, this will greatly affect the response time and smoothness of the page. Summary of the invention

[0006] In order to solve the above problems, the purpose of the present invention is to provide a low-code platform loop component rendering performance optimization method and system, which effectively optimizes the style rendering performance through static style extraction and dynamic style dependency analysis.

[0007] To achieve the above object, the present invention adopts the following technical solutions:

[0008] A method for optimizing rendering performance of a low-code platform loop component comprises the following steps:

[0009] Step 1: Traverse and analyze all style properties of the component;

[0010] Step 2: Identify the source of variables in style attributes and how they are used, and use scope analysis to determine whether the variables belong to global variables, loop context variables, or component internal states;

[0011] Step 3: Analyze whether the attribute value contains expressions based on the usage of variables, and divide the attributes containing variables into three categories according to the dependency relationship: pure static attributes, loop-independent dynamic attributes, and loop-dependent dynamic attributes;

[0012] Step 4: Determine the association between variables and loop variables through variable scope analysis. For static variables that can be determined during the compilation phase, directly complete the style attribute assignment and mark them as static attributes; for attributes that are associated with the loop context, mark them as dynamic attributes;

[0013] Step 5: Extract and process the identified static patterns;

[0014] Step 6: Generate a unique class name for the extracted static style;

[0015] Step 7: Build a separate stylesheet file, group styles by media query, and generate compressed CSS code.

[0016] Furthermore, the style attributes include layout class, visual class, transformation class, and text class attributes in standard CSS, and also need to consider platform-specific custom theme attributes and component-specific style attributes.

[0017] Furthermore, the extraction and processing of the identified static styles are as follows: first, the style definition object of the component is parsed to collect all static style declarations; then, the style declarations are deduplicated and optimized to merge the scattered attributes into a shorthand form.

[0018] Furthermore, the class name structure includes a component type identifier, a style feature hash value, and a unique identifier, and a class name registry is used to ensure that the generated class name is globally unique.

[0019] Furthermore, the calculation of dynamic styles is optimized, and a style calculation cache system based on the LRU strategy is adopted to cache and reuse the calculation results of the same input parameters to avoid repeated calculations. When the cache reaches the preset upper limit, the least used calculation results are automatically cleared.

[0020] Furthermore, during the runtime phase, each instance of the looped component is applied with static styles by the generated class names, and real-time calculations and updates are performed only on style properties marked as dynamic.

[0021] A low-code platform loop component rendering performance optimization system includes a processor, a memory, and a computer program stored in the memory. When the processor executes the computer program, it specifically performs the steps in the low-code platform loop component rendering performance optimization method as described above.

[0022] The present invention has the following beneficial effects:

[0023] 1. The present invention reduces the computational requirements at runtime by calculating the static styles in advance and extracting them into CSS classes, thereby reducing the CPU usage and improving the response speed of the application;

[0024] 2. The optimized components of the present invention can quickly apply predefined CSS classes when performing loop rendering, reducing the dynamic calculation of styles and making the rendering process more efficient. By optimizing the storage and application of styles, the memory usage of the browser during the rendering process is reduced. Especially when processing large amounts of data, this optimization can significantly reduce the burden on the browser and effectively improve the user interaction experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] Figure 1 It is a schematic diagram of the process of the present invention. DETAILED DESCRIPTION

[0026] The present invention is further described in detail below with reference to the accompanying drawings and specific embodiments:

[0027] refer to Figure 1 In this embodiment, a method for optimizing the rendering performance of a low-code platform loop component is provided, comprising the following steps:

[0028] Step 1: Traverse and analyze all style properties of the component;

[0029] Step 2: Identify the source of variables in style attributes and how they are used, and use scope analysis to determine whether the variables belong to global variables, loop context variables, or component internal states;

[0030] Step 3: Analyze whether the attribute value contains expressions based on the usage of variables, and divide the attributes containing variables into three categories according to the dependency relationship: pure static attributes (not dependent on any variables), loop-independent dynamic attributes (dependent on variables but not related to loop variables), and loop-dependent dynamic attributes (dependent on loop variables);

[0031] Step 4: Determine the association between variables and loop variables through variable scope analysis. For static variables that can be determined during the compilation phase, directly complete the style attribute assignment and mark them as static attributes; for attributes that are associated with the loop context, mark them as dynamic attributes;

[0032] Step 5: Extract and process the identified static patterns;

[0033] Step 6: Generate a unique class name for the extracted static style;

[0034] Step 7: Build a separate stylesheet file, group styles by media query, and generate compressed CSS code.

[0035] In this embodiment, the style attributes include layout class (width, height, margin, positioning), visual class (color, background, border), transformation class (conversion, transition), and text class (font, line height) attributes in standard CSS, and platform-specific custom theme attributes and component-specific style attributes need to be considered.

[0036] In this embodiment, the extraction and processing of the identified static styles are as follows: first, the component's style definition object is parsed to collect all static style declarations; then, the style declarations are deduplicated and optimized, and the scattered properties are merged into abbreviated forms. For example, the same margin value is merged into margin: 10px, and the same values ​​above and below and left and right are abbreviated into margin: 10px 20px. Similar rules also apply to padding and border properties to improve the simplicity and maintainability of the code.

[0037] In this embodiment, the class name structure includes a component type identifier (prefix), a style feature hash value (middle section, the first 8 bits are taken after serializing the static style object using a deterministic hash function) and a unique identifier (suffix), and the class name registry is used to ensure that the generated class name is globally unique.

[0038] In this embodiment, the calculation of dynamic styles is optimized, and a style calculation cache system based on an LRU strategy is adopted to cache and reuse the calculation results of the same input parameters to avoid repeated calculations. When the cache reaches a preset upper limit, the least used calculation results are automatically cleared.

[0039] In this embodiment, at the runtime stage, each instance of the loop component applies the static style through the generated class name, and only performs real-time calculation and update on the style properties marked as dynamic.

[0040] In this embodiment, a low-code platform loop component rendering performance optimization system is also provided, including a processor, a memory, and a computer program stored in the memory. When the processor executes the computer program, it specifically executes the steps in the low-code platform loop component rendering performance optimization method as described above.

[0041] It will be appreciated by those skilled in the art that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Furthermore, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0042] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0043] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0044] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0045] The above is only a preferred embodiment of the present invention, and does not limit the present invention in other forms. Any technician familiar with the profession may use the above disclosed technical content to change or modify it into an equivalent embodiment with equivalent changes. However, any simple modification, equivalent change and modification made to the above embodiment according to the technical essence of the present invention without departing from the technical solution of the present invention still belongs to the protection scope of the technical solution of the present invention.

Claims

1. A method for optimizing rendering performance of a low-code platform loop component, characterized in that: The following steps are involved: Step 1: Traverse and analyze all style properties of the component; Step 2: Identify the source of variables in style attributes and how they are used, and use scope analysis to determine whether the variables belong to global variables, loop context variables, or component internal states; Step 3: Analyze whether the style attribute value contains expressions based on the usage of variables, and divide the style attributes containing variables into three categories according to the dependency relationship: pure static attributes, loop-independent dynamic attributes, and loop-dependent dynamic attributes; Step 4: Determine the association between variables and loop variables through variable scope analysis. For static variables that can be determined during the compilation phase, directly complete the style attribute assignment and mark them as static attributes; for attributes that are associated with the loop context, mark them as loop-related dynamic attributes; Step 5: Extract and process the identified static patterns; Step 6: Generate a unique class name for the extracted static style; Step 7: Build a separate stylesheet file, group styles by media query, and generate compressed CSS code.

2. According to a low-code platform loop component rendering performance optimization method according to claim 1, it is characterized in that: The style attributes include layout class, visual class, transformation class, text class attributes in standard CSS, as well as platform-specific custom theme attributes and component-specific style attributes.

3. According to the low-code platform loop component rendering performance optimization method described in claim 1, it is characterized in that: The extraction and processing of the identified static styles are specifically as follows: first, the style definition object of the component is parsed to collect all static style declarations; then, the style declarations are deduplicated and optimized to merge the scattered attributes into a shortened form.

4. According to a low-code platform loop component rendering performance optimization method according to claim 1, it is characterized in that: The structure of the class name includes a component type identifier, a style feature hash value, and a unique identifier, and a class name registry is used to ensure that the generated class name is globally unique.

5. A low-code platform loop component rendering performance optimization method according to claim 1, characterized in that: The calculation of loop-related dynamic properties is optimized, and a style calculation cache system based on the LRU strategy is adopted to cache and reuse the calculation results of the same input parameters to avoid repeated calculations. When the cache reaches the preset upper limit, the least used calculation results are automatically cleared.

6. A method for optimizing rendering performance of a low-code platform loop component according to claim 1, characterized in that: During the runtime phase, each instance of the loop component applies static styles via generated class names and performs real-time calculations and updates only on dynamic properties marked as loop-related.

7. A low-code platform loop component rendering performance optimization system, characterized in that: It includes a processor, a memory and a computer program stored in the memory. When the processor executes the computer program, it specifically performs the steps in a low-code platform loop component rendering performance optimization method as described in any one of claims 1-6.

Images