Rendering method and device, storage medium, controller and program product

Abstract

The invention relates to a rendering method and device, a storage medium, a controller and a program product. The method comprises the following steps: constructing a directed acyclic graph of to-be-rendered components based on dependency information between the to-be-rendered components in an application program; and determining a rendering sequence of the to-be-rendered components based on the directed acyclic graph, and rendering the to-be-rendered components according to the rendering sequence. According to the application, the directed acyclic graph of the to-be-rendered components can be constructed through the dependency information between the to-be-rendered components; according to the embodiment of the invention, the rendering sequence of the to-be-rendered components can be determined through the directed acyclic graph, and the to-be-rendered components can be effectively rendered according to the rendering sequence determined by the directed acyclic graph because any two to-be-rendered components in the directed acyclic graph do not have a cyclic dependency relationship; in the embodiment of the invention, each to-be-rendered component is sequentially processed according to the rendering sequence, so that each to-be-rendered component can be correctly rendered, the rendering efficiency and the rendering accuracy are improved, and an expected visual effect is realized.

Description

Technical Field

[0001] The present application relates to the field of computers, and in particular to a rendering method, device, storage medium, controller, and program product. Background Art

[0002] In application development, rendering of application components is a critical process, which involves converting data and structure into a user interface through a specific framework or library. As applications grow in size and complexity, rendering of each component becomes particularly important.

[0003] Therefore, how to render each component has become a technical problem that needs to be solved urgently in the industry. Summary of the Invention

[0004] The embodiments of the present application provide a rendering method that improves rendering efficiency to at least partially solve the above-mentioned technical problems.

[0005] To achieve the above objective, according to a first aspect of the present application, a rendering method is provided, comprising:

[0006] Constructing a directed acyclic graph of components to be rendered based on dependency information between each component to be rendered in the application;

[0007] A rendering order of the components to be rendered is determined based on the directed acyclic graph, and the components to be rendered are rendered according to the rendering order.

[0008] According to a second aspect of the present application, a rendering device is provided, comprising:

[0009] A construction module, configured to construct a directed acyclic graph of components to be rendered based on dependency information between each component to be rendered in the application;

[0010] A rendering module is used to determine a rendering order of the components to be rendered based on the directed acyclic graph, and render the components to be rendered according to the rendering order.

[0011] According to a third aspect of the present application, a computer-readable storage medium is further provided, on which a computer program is stored, and when the computer program is executed by a processor, the steps of the above method are implemented.

[0012] According to a fourth aspect of the present application, an electronic device is also provided, on which a computer program is stored, and when the computer program is executed by a processor, the steps of the above method are implemented.

[0013] According to a fifth aspect of the present application, a controller is also provided, on which a computer program is stored, and when the computer program is executed by a processor, the steps of the above method are implemented.

[0014] According to a sixth aspect of the present application, a computer program product is also provided, comprising a computer program or instructions, which implement the steps of the above method when executed by a processor.

[0015] To summarize, in the embodiments of the present application, a directed acyclic graph of components to be rendered can be constructed through the dependency information between each component to be rendered in the application; the rendering order of the components to be rendered can be determined through the directed acyclic graph, because there is no circular dependency between any two components to be rendered in the directed acyclic graph, and therefore the components to be rendered can be effectively rendered according to the rendering order determined by the directed acyclic graph; by processing each component to be rendered in turn through the rendering order, it can be ensured that each component to be rendered is rendered correctly, thereby improving the rendering efficiency and rendering accuracy, thereby achieving the expected visual effect.

[0016] Other features and advantages of the present application will be described in detail in the subsequent detailed description. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] To more clearly illustrate the technical solutions in the embodiments of the present application, the following briefly introduces the drawings required for describing the embodiments. Obviously, the drawings described below are only some embodiments of the present application. Those skilled in the art can also derive other drawings based on these drawings without inventive effort.

[0018] In order to more completely understand the present application and its beneficial effects, the following description will be given in conjunction with the accompanying drawings, wherein the same drawing numbers represent the same parts in the following description.

[0019] Figure 1 This is one of the flowcharts of the rendering method provided in the exemplary embodiment of the present application;

[0020] Figure 2 This is the second flowchart of the rendering method provided in the exemplary embodiment of the present application;

[0021] Figure 3 This is the third flowchart of the rendering method provided in the exemplary embodiment of the present application;

[0022] Figure 4 This is the fourth flowchart of the rendering method provided in the exemplary embodiment of the present application;

[0023] Figure 5 FIG. 4 is a schematic structural diagram of a rendering device provided in an exemplary embodiment of the present application. DETAILED DESCRIPTION

[0024] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the embodiments described are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of the present application.

[0025] In related technologies, rendering components in applications is usually performed in a simple sequential or tree-based manner. The drawback of this approach is that it fails to fully consider the complex dependencies between components to be rendered, which can easily lead to the following problems:

[0026] Disordered rendering: When dependencies exist between components to be rendered, if these dependencies are not handled correctly, the components to be rendered may be rendered before the dependent data is ready, causing rendering errors. For example, a form component to be rendered depends on a data fetching component to be rendered. If the data fetching component has not yet completed data fetching, the form component to be rendered will not display the correct data.

[0027] Performance bottleneck: Rendering methods that fail to fully consider dependencies often lead to unnecessary re-rendering and waste resources. Re-rendering of pending components not only increases the browser's burden but also degrades the user experience. For example, a state change in a parent pending component causes all child pending components to re-render, even if the state of some child pending components has not changed.

[0028] Circular dependency problem: In complex dependencies between components to be rendered, circular dependencies may occur, which will lead to rendering deadlock. For example, if component A to be rendered depends on component B to be rendered, and component B to be rendered depends on component A to be rendered, if this situation is not handled, neither component will be able to complete rendering.

[0029] Lack of dynamic adjustment capabilities: Rendering methods are often static when handling the dependencies of components to be rendered, and are unable to adapt to dynamically changing dependencies and the state of components to be rendered. When the state or dependencies of certain components to be rendered in the front-end application change, the rendering order needs to be dynamically adjusted to adapt to the new situation, but rendering methods often do not implement dynamic adjustments.

[0030] Therefore, the present application provides a rendering method device, storage medium, controller and program product to solve the above problems.

[0031] Figure 1 This is one of the flowcharts of the rendering method provided in the exemplary embodiment of the present application, such as Figure 1As shown, the rendering method provided in the embodiment of the present application includes step 110 and step 120. The steps of the method flow are only a possible implementation of the present application.

[0032] Step 110: construct a directed acyclic graph of the components to be rendered based on dependency information between each component to be rendered in the application.

[0033] Specifically, the rendering method provided in the embodiments of the present application is performed by a rendering device, which can be a hardware device independently provided in the terminal or a software program running in the terminal. For example, when the terminal is a mobile phone, the rendering device can be embodied as an application such as rendering software in the mobile phone.

[0034] The application program may be an application program of a front-end application.

[0035] Components to be rendered refer to components that may need to be rendered in the application.

[0036] For example, the components to be rendered can be functional modules or interface elements corresponding to the application. The components to be rendered can include page-level components: such as home page components and user management components; layout components: such as header navigation bar components, sidebar components and footer components; functional components: such as search box components, file upload components, chart display components; general components: such as button components and pop-up components; data processing components: such as table components and paging components.

[0037] Dependency information refers to the related information between the components to be rendered and the components to be rendered.

[0038] For example, the dependency information may include identifiers of components to be rendered, dependency relationships between components to be rendered, dependency types, and status information of components to be rendered.

[0039] Dependencies can include data dependency, state dependency, functional dependency, and rendering order dependency. Data dependency means that the component to be rendered needs to obtain data from other components to be rendered, such as a table component that depends on a paging component to obtain paging information. State dependency means that the component to be rendered can only be initialized after the states of other components to be rendered are completed, such as a file upload component that depends on the user login state. Functional dependency means that the function of a component to be rendered depends on the services provided by other components to be rendered, such as a graphic component that depends on the data provided by a data table component for visualization. Rendering order dependency means that a component to be rendered needs to be rendered first before other components to be rendered can be displayed correctly, such as a layout component needs to be rendered first before the contents of other page components can be displayed correctly.

[0040] Dependency types can include data dependency, state dependency, event dependency, and style dependency. Data dependency refers to the data that a component to be rendered needs to be provided by other components to be rendered, such as a chart component that depends on a data set generated by a data table component. State dependency refers to the state of a component to be rendered that constrains the state of other components to be rendered, such as a shopping cart component that depends on the user's login status to work properly. Event dependency refers to the event of a component to be rendered that triggers the behavior of other components to be rendered, such as clicking a button component that triggers the search action of a search box component. Style dependency refers to the style of a component to be rendered that depends on the layout or style of other components to be rendered, such as a pop-up component that depends on the overall style and layout of a page component.

[0041] The status information of the component to be rendered may include access status, initialization status, rendering status, interaction status, data loading status and exception status, etc. The access status is used to indicate whether the component to be rendered has been accessed. The initialization status refers to whether the component to be rendered has completed initialization. For example, the initialization status of the user management component is used to identify whether the user list has been loaded. The rendering status is used to indicate whether the component to be rendered has completed rendering. For example, the rendering status of the sidebar component is used to identify whether the sidebar has been loaded. The interaction status is used to indicate whether the component to be rendered is ready to interact with the user. For example, the interaction status of the button component and the form component is used to identify whether the button is clickable and whether the form is fillable. The data loading status is used to indicate whether the data of the component to be rendered has been loaded. For example, the data loading status of the chart component is used to identify whether the chart has loaded the complete data set. The exception status is used to indicate whether an exception occurs in the component to be rendered. For example, the network request failed and the data was not loaded. The exception state of the component to be rendered can be further determined.

[0042] The status information of the component to be rendered can be obtained in the following ways:

[0043] Event listening: Listen to the lifecycle events of the components to be rendered to obtain status information, such as the sidebar component marking the rendering status as true in the render (onRender) event. State management tools: Use global state management tools to track the status of the components to be rendered to obtain status information, such as recording the data loading status of the user management component through the Redux store. Dependency injection: Obtain the status of other components to be rendered through dependency injection, such as the search box component obtains the search status of the user management component through the injected service. Application Programming Interface (API) call: Check data loading or abnormal status through the interface return value, such as the chart component calls the backend interface to obtain data and returns 200 to indicate that the data loading is complete. Document Object Model (DOM) element inspection: Use query selectors (querySelector) or framework-specific methods to check the DOM rendering status, for example, check whether the model component has been inserted into the DOM through the document query selector (document.querySelector).

[0044] A directed acyclic graph (DAG) is a directed graph without cycles, meaning there's no path between any two nodes that leads back to the starting point. Each node in a DAG represents a component to be rendered, and each edge is generated based on dependency information.

[0045] The dependency information of all components to be rendered in the front-end application can be obtained, including the identifier of each component to be rendered, the dependency relationship between the components to be rendered, the dependency type, and the status information of the components to be rendered, and represented as a triple set D:

[0046] D={(C i ,C j , type ij ,S i ,S j )|C i depends on, type is type ij ,statesS i and};

[0047] Among them, C i and C j Respectively represent the component to be rendered, type ij Indicates the component C to be rendered i Depends on the component to be rendered C j Dependent type (typeistype), S i , S j Represents the component C to be renderedi and the component to be rendered C j states information.

[0048] Build a directed acyclic graph of components to be rendered based on this dependency information.

[0049] Step 120: Determine a rendering order of the components to be rendered based on the directed acyclic graph, and render the components to be rendered according to the rendering order.

[0050] Specifically, rendering order refers to the order in which components to be rendered are drawn in computer graphics.

[0051] After obtaining the directed acyclic graph of the components to be rendered, the rendering order of the components to be rendered can be determined according to the connections between each component to be rendered shown in the directed acyclic graph.

[0052] Because there is no path back to the starting point between any two nodes in a directed acyclic graph, that is, any two components to be rendered. In other words, there is no circular dependency path where component A depends on component B, and component B depends on component A. Therefore, each component to be rendered can be rendered efficiently.

[0053] Processing each component to be rendered in sequence according to the rendering order can ensure that each component to be rendered is drawn at the correct layer and position to achieve the expected visual effect.

[0054] The rendering method provided in the embodiment of the present application can construct a directed acyclic graph of the components to be rendered through the dependency information between each component to be rendered in the application; the rendering order of the components to be rendered can be determined through the directed acyclic graph, because there is no circular dependency between any two components to be rendered in the directed acyclic graph, and therefore the components to be rendered can be effectively rendered according to the rendering order determined by the directed acyclic graph; by processing each component to be rendered in sequence through the rendering order, it can be ensured that each component to be rendered is rendered correctly, thereby improving the rendering efficiency and rendering accuracy, thereby achieving the expected visual effect.

[0055] The embodiments of the present application are highly versatile and adaptable, and can be applied to various front-end frameworks and libraries, such as React, Vue, and Angular, and are suitable for a variety of different application scenarios, with broad application prospects. Whether it is a single-page application or a multi-page application, the rendering method provided by the embodiments of the present application can optimize the rendering priority of the components to be rendered.

[0056] It should be noted that each implementation method of the present application can be freely combined, the order can be changed, or it can be executed separately, and does not need to rely on or depend on a fixed execution order.

[0057] In some embodiments, step 110 includes:

[0058] Constructing a dependency graph of the component to be rendered based on the dependency information;

[0059] The directed acyclic graph is constructed based on the dependency graph.

[0060] The dependency information includes dependency relationships and dependency types, and constructing a dependency graph of the component to be rendered based on the dependency information includes:

[0061] Create a node corresponding to each component to be rendered;

[0062] Based on the dependency relationship and dependency type between each of the components to be rendered, edges between the nodes are created to obtain the dependency graph.

[0063] Specifically, the dependency graph refers to a graph that can represent dependency information between each component to be rendered, and the dependency graph can be a directed graph.

[0064] Figure 2 This is the second flowchart of the rendering method provided in the exemplary embodiment of the present application; Figure 2 As shown, the dependency information of all components to be rendered in the front-end application can be collected, and a dependency graph of the components to be rendered can be created based on the dependency information. The nodes in the dependency graph represent the components to be rendered, and the edges represent the dependency relationships between the components to be rendered.

[0065] For example, the components to be rendered include a search box component, a user management component, and a chart component. Dependency information includes the user management component's dependency on the search box component (data dependency), the chart component's dependency on user statistics provided by the user management component (data dependency), whether the search box component has completed initialization, whether the search keyword has been entered into the search box component, whether the user list of the user management component has been loaded, whether there are any exceptions, whether the chart component's chart has been rendered, and whether the chart component's data has been loaded. Using this dependency information, a dependency graph can be constructed and rendering priority can be optimized, thereby improving rendering efficiency and user experience.

[0066] The dependency graph can be a directed graph. For example, you can initialize an empty directed graph G = (V, E), where V represents a set of nodes and E represents a set of edges:

[0067] V={v i |C i is a component};

[0068]

[0069] Where V is a node set, which includes all components to be rendered, and E is an edge set, which represents the dependency relationship between components to be rendered.

[0070] Add all components to be rendered to the node set V, traverse all sets of components to be rendered, and for the i-th component to be rendered C i , create node v i , and the node v i Add to the node set V, for node v i Assign a unique identifier to ensure that each node is unique in the set V. The relevant formula is as follows:

[0071]

[0072] V=V∪{v i};

[0073] Among them, Node(C i , S i ) indicates that the component C to be rendered i and its status information S i The node created, vi is the node of the i-th component to be rendered currently traversed, by Node(C i , S i ) is constructed, representing the node created by the component to be rendered Ci and its state information Si. {vi} represents a set containing only the current node vi. ∪ is a set operator, representing a set union. V = V∪{vi} means adding the current node vi to the set V, ensuring that V contains all processed nodes.

[0074] The updated V is a new node set that contains all previous nodes and the current new node.

[0075] Construct a directed edge set E of the dependency relationship of the components to be rendered, traverse the dependency relationships of all components to be rendered, and for those with dependency relationships, such as the component to be rendered C i Depends on the component to be rendered C j , create a directed edge e ij , each directed edge e ij Add to the edge set E, where e ij =(v j →v i , type ij , S j →S i ), record the dependency type of each directed edge, such as data dependency and state dependency, and record the state transition S j →S i And stored in the edge attributes, the relevant formula is as follows:

[0076]

[0077] After adding each component to be rendered to the constructed directed graph and creating each directed edge to record the edge attributes, a dependency graph can be obtained.

[0078] The rendering method provided in the embodiment of the present application can effectively sort out and display the dependency information of the rendering component by constructing a dependency graph, and construct a directed acyclic graph through the dependency graph, which can improve the construction efficiency and construction accuracy of the directed acyclic graph.

[0079] In some embodiments, constructing the directed acyclic graph based on the dependency graph includes:

[0080] Performing a circular dependency detection on the dependency graph;

[0081] When a circular dependency is detected in the dependency graph, the circular dependency is resolved to obtain the directed acyclic graph.

[0082] The performing of circular dependency detection on the dependency graph includes:

[0083] A cyclic dependency detection is performed on the dependency graph based on a depth-first search method.

[0084] Specifically, because the dependency graph has not yet processed the dependencies between the components to be rendered, the dependency graph may be an acyclic graph or a cyclic graph. The dependency graph can be analyzed to check whether there are cyclic dependencies in the graph.

[0085] You can use Depth First Search (DFS) to detect cycles in the dependency graph. If a node repeatedly enters the access path during traversal, it indicates a cycle, that is, a circular dependency. You can also use Breadth First Search to detect cycles.

[0086] If a loop is detected, that is, a circular dependency is detected, the circular dependency needs to be broken and the dependency graph needs to be adjusted to a directed acyclic graph. For example, the circular dependency can be broken by adding virtual nodes.

[0087] If no cycle is detected, that is, no circular dependency is detected, then the dependency graph is a directed acyclic graph.

[0088] The rendering method provided in the embodiment of the present application can obtain a directed acyclic graph by performing cyclic dependency detection on the dependency graph, thereby improving rendering efficiency.

[0089] In some embodiments, removing the circular dependency to obtain the directed acyclic graph includes:

[0090] The circular dependency is resolved by adding a virtual node in the ring where the circular dependency is located, thereby obtaining the directed acyclic graph.

[0091] The step of removing the circular dependency by adding a virtual node in the ring where the circular dependency is located to obtain the directed acyclic graph includes:

[0092] The virtual node is inserted between each node of the ring where the circular dependency relationship is located, and the directed edge between each node of the ring is replaced by a directed edge from each node of the ring to the virtual node, so as to eliminate the circular dependency relationship and obtain the directed acyclic graph.

[0093] Specifically, a virtual node can be viewed logically as a placeholder. It is merely a logical tool node used to adjust the structure of the dependency graph. Virtual nodes are specifically used to break the loop where circular dependencies exist. The virtual node introduced into the loop does not depend on any original node and only carries the function of splitting the loop. Therefore, after properly designing virtual nodes, new circular dependencies will not be formed.

[0094] Virtual nodes do not participate in rendering. During rendering, virtual nodes only assist in subsequent topological sorting, and the rendering engine will skip virtual nodes. The role of virtual nodes is to ensure the correct rendering order of the components to be rendered.

[0095] If a cycle exists, a virtual node V can be inserted between each node of the cycle where each cyclic dependency exists. virtual , replace the directed edges in the ring with directed edges pointing to the virtual nodes, thereby breaking the cycle, and updating the node set V and edge set E to reflect the added virtual nodes and updated dependencies. The relevant formulas are as follows:

[0096]

[0097] Among them, G represents the dependency graph, n represents the number of nodes, Represented by the node To virtual node V virtual The directed edge of .

[0098] For example, if a cycle in a dependency graph consists of a path from node A to node B and back to node A, a virtual node V is introduced as an edge in the cycle. Replace the existing directed edges: Replace A→B with A→V and V→B. Update the node and edge sets, adding V to the node set. Add new directed edges A→V and V→B to the edge set E and delete A→B. The new edge A→V→B replaces the existing cycle, and V will no longer have any path back to A or B.

[0099] By breaking the loop through virtual nodes, the correct rendering order of the components to be rendered can be generated, thus avoiding deadlocks caused by circular dependencies.

[0100] The resulting directed acyclic graph of the components to be rendered can ensure that all dependency information is correctly represented and there are no cyclic dependencies. The generated directed acyclic graph of the components to be rendered is recorded and saved for topological sorting and rendering priority optimization in subsequent steps. final The relevant formula is as follows:

[0101] G final =(V, E).

[0102] The rendering method provided in the embodiment of the present application can eliminate circular dependencies by adding virtual nodes to obtain a directed acyclic graph, effectively avoiding the rendering deadlock problem caused by circular dependencies and ensuring that all components to be rendered can be rendered in the expected order.

[0103] In some embodiments, step 120 includes:

[0104] Topological sorting is performed on the directed acyclic graph to obtain a topological sorting result, and a rendering order of each of the components to be rendered is determined based on the topological sorting result.

[0105] Specifically, based on the adjusted directed acyclic graph, a topological sorting algorithm is used to sort each component to be rendered, and a topological sorting result of the component to be rendered is generated. The topological sorting result may include a rendering order list.

[0106] In some embodiments, performing topological sorting on the directed acyclic graph to obtain a topological sorting result includes:

[0107] Setting an initial priority weight of each of the components to be rendered based on the component importance level and / or dependency level;

[0108] The current priority weight is determined based on the initial priority weight.

[0109] The determining the current priority weight based on the initial priority weight includes:

[0110] The initial priority weight is updated based on the time weight of each component to be rendered to obtain a current priority weight of each component to be rendered.

[0111] Determining an access order of each of the components to be rendered based on a current priority weight of each of the components to be rendered;

[0112] The topological sorting result is obtained based on the access order and the dependency information.

[0113] Specifically, the component importance level can be determined based on functional priority, dependency (number of dependencies), and usage frequency.

[0114] For example, if the component to be rendered is crucial to the system function and directly affects the user experience, then the function priority is higher and the component importance level is higher. For example, the login component is the entrance to the system, and its component importance level is higher than the component importance levels of other secondary functional components. If the component to be rendered is dependent on multiple other components to be rendered, then its component importance level is higher. For example, a core service component that provides data is more important than the data display component that depends on it, and its component importance level is higher. If the component to be rendered is frequently called or used during operation, its component importance level may be higher. For example, the paging component may be frequently used in a big data display system, and its component importance level is higher.

[0115] A scoring mechanism (such as a scoring mechanism based on predefined rules, historical statistical data, and user behavior analysis) can be used to quantify the component importance level of each component to be rendered and convert it into an initial priority weight value.

[0116] The dependency level can be determined based on dependency type, dependency frequency, and dependency impact scope.

[0117] For example, if a component to be rendered must rely on the output of other components to run properly, then the dependency level is high. For example, if a data component provides data to a chart component, then the dependency level is high. If a component to be rendered can partially run without a dependent component, but its functionality is incomplete, then the dependency level is low. If the component to be rendered frequently interacts with other components to be rendered, then the dependency level is high. If a component to be rendered has direct dependencies on multiple components to be rendered (for example, a data component is dependent on by multiple chart components), then the dependency level is high.

[0118] Time weights are used to represent the dynamic changes in dependencies over time. For example, they can reflect dependency stability: if a dependency is long-standing and important, the time weight will be higher. They can also reflect the real-time nature of a dependency: if a dependency has recently occurred frequently, the time weight will increase dynamically, emphasizing its current importance.

[0119] Decay mechanism: Dependencies may gradually weaken over time. For example, old dependencies may no longer be important and can be reduced by time weight decay (e.g., exp(α·t i，k ))Reduce its impact on priority weight.

[0120] An empty stack can be initialized to store the topological sorting results, and an adaptive priority weight can be introduced for each component to be rendered. The initial value, i.e., the initial priority weight, is set according to the importance level and / or dependency level of the component to be rendered and its dynamic changes. For example, the relevant formula is as follows:

[0121] Stack = [];

[0122]

[0123] Among them, W(v i ) is the node v i Adaptive priority weight, w i，k For node v i With other nodes v k The dependency weight, α is the adjustment factor, t i，k For node v i and node v k The time weight of the dependency relationship between them.

[0124] Dependency weights can be determined based on importance and dependency relationships. Dependency weights can be adjusted dynamically. For example, real-time dynamic factors (such as user interaction history and system resource availability) may affect the importance of a component to be rendered. For example, a search component that users have recently used frequently may be temporarily given a higher importance.

[0125] Dependency weight can be quantified based on the size of dependent data, the complexity of state switching, and the order of dependent execution.

[0126] The re-adjustment factor is used to control the influence of time weight. The larger α is, the more obvious the influence of time weight on the dynamic adjustment of priority is.

[0127] By using the adaptive priority weight of each component to be rendered as the current priority weight, the access order of each component to be rendered can be determined in real time, thereby obtaining a topological sorting result.

[0128] The rendering method provided in the embodiment of the present application reduces unnecessary repeated rendering by optimizing the rendering priority of the components to be rendered. Time weight is introduced in the rendering process, that is, a dynamic adjustment mechanism is introduced. The topological sorting results can be adjusted in real time through the latest dependencies and priority weights, avoiding the problem of low rendering efficiency due to changes in dependencies; by calculating and dynamically adjusting the priority weights, comprehensively considering factors such as the importance of the components to be rendered and the strength of the dependencies, it ensures that system resources are reasonably allocated, avoids unnecessary resource waste, reduces system load, and improves the overall performance of the system.

[0129] In some embodiments, the dependency information further includes an access status, and obtaining the topological sorting result based on the access order and the dependency information includes:

[0130] Traversing each of the components to be rendered in sequence based on the access order;

[0131] In a case where the access state of any component to be rendered is an unaccessed state, a depth-first search is performed on the component to be rendered based on the dependency relationship to obtain the topological sorting result.

[0132] The performing a depth-first search on any component to be rendered based on the dependency relationship to obtain the topological sorting result includes:

[0133] Based on the dependency relationship, a depth-first search is performed on the component to be rendered whose access state is an unvisited state, to obtain a first component that depends on the component to be rendered in the unvisited state;

[0134] When the access state of the first component is the visited state, adding the component to be rendered in the unvisited state to the pre-built stack;

[0135] The topological sorting result is obtained based on the order in which each component to be rendered is added to the stack, wherein the order of addition is opposite to the order of rendering.

[0136] Before adding the component to be rendered in the unvisited state to the pre-built stack, the method further includes: modifying the access state of the component to be rendered in the unvisited state to the accessing state.

[0137] Specifically, when a node in a directed acyclic graph is not visited, the visited status of all nodes is marked as unvisited, and a dictionary visited is initialized to record the visited status of the node. The formula is as follows:

[0138]

[0139] in, Represents node vi False indicates the visited state, and False indicates the unvisited state. Each node represents a component to be rendered.

[0140] Figure 3 This is the third flowchart of the rendering method provided in the exemplary embodiment of the present application, as shown in FIG. Figure 3 As shown, the rendering method access process involves the following steps:

[0141] Step 310: For each unvisited node, call a depth-first search algorithm based on adaptive priority weights to access it. The specific formula is as follows:

[0142]

[0143] Among them, Adaptive DFS (v i ) represents a depth-first search algorithm based on adaptive priority weights, visiting node v i ,Vsorted by W(v i ) indicates that the nodes in the set V are based on W(v i ) values are sorted.

[0144] Step 320: During the depth-first search process, mark the access status of the currently accessed node as being accessed, and recursively access all other nodes that depend on the currently accessed node, that is, to the first component. The specific formula is as follows:

[0145]

[0146] Among them, neighbors(v i ) is the node v i The set of all neighbor nodes of j ) is the node v j The priority weight, For node v j The access status of

[0147] Step 330: After all dependent nodes, that is, all first components, have been visited, the node state of the current node is marked as visited and pushed into the stack. The specific formula is as follows:

[0148]

[0149] Among them, Stack.push(v i ) is to change the node v i Pushed into the stack, representing node v i Has been fully accessed and processed.

[0150] Step 340: Repeat steps 310 to 330 until all nodes are visited. The order in which the nodes in the stack are popped out of the stack is the topological sorting result based on the adaptive priority weight. The specific procedure is as follows:

[0151] while Stack is not empty: result.push(Stack.pop);

[0152] Among them, result.push(Stack, pop) means popping a node from the stack and adding it to the rendering order list. The final rendering order list is the rendering order of the topologically sorted nodes.

[0153] The order in which nodes are added to the stack is based on the depth-first search order, meaning that when a node is fully visited, it is pushed onto the stack. The order in which nodes are popped off the stack is the result of topological sorting. This is because after the depth-first search is complete, the order of nodes stored in the stack has been adjusted to the reverse topological sort order, meaning that nodes that are visited earlier are added to the stack earlier. The order in which nodes are popped off the stack is the opposite of the order in which they were added.

[0154] The topological sorting order of the nodes ensures that each node appears after the nodes it depends on in the sorted result. When the stack is popped, the first component has already been processed or rendered, so the pop order can be directly used as the rendering order of the components to be rendered.

[0155] In a directed acyclic graph, topological sorting will linearly sort the nodes according to their dependencies, ensuring that if there is an edge from node A to B, then node A must appear before node B. In this way, when rendering, node B is always rendered after the rendering of its dependent node A is completed.

[0156] The subsequent processing of depth-first search (marking a node as visited after visiting all its dependent nodes, i.e., the first component) implicitly reflects dependencies. For example, when a node is added to the stack, it indicates that all its dependent nodes have been visited and added to the stack. When the stack is popped, all dependent nodes of each node are guaranteed to have been popped and rendered. Therefore, rendering in the order the stack is popped ensures that the components to be rendered are correctly sorted according to their dependencies.

[0157] The rendering method provided in the embodiment of the present application sorts the components to be rendered through topological sorting, generates a rendering order for the components to be rendered, ensures that each component to be rendered is rendered after the component to be rendered on which it depends, avoids rendering errors caused by improper handling of dependency relationships, ensures that the components to be rendered can be rendered correctly, and improves the stability and reliability of the application of the components to be rendered.

[0158] In some embodiments, after determining the rendering order of the components to be rendered based on the directed acyclic graph, the method further includes:

[0159] Obtaining the latest rendering status of each component to be rendered and the latest dependency relationship between each component to be rendered in real time;

[0160] The directed acyclic graph and the topological sorting result are updated based on the latest rendering state and the latest dependency relationship.

[0161] Specifically, Figure 4 This is a fourth flowchart of the rendering method provided in the exemplary embodiment of the present application, such as Figure 4 As shown, during the rendering process, the status changes of the components to be rendered are monitored in real time, and the directed acyclic graph and topological sorting results are dynamically adjusted according to the latest rendering status, the latest dependency, and the latest priority weight.

[0162] The rendering method provided in the embodiment of the present application can flexibly respond to changes in the status and dependency relationships of the components to be rendered in the front-end application through a dynamic adjustment mechanism, ensuring that the rendering order is always in the optimal order, thereby improving the flexibility and adaptability of the system.

[0163] In some embodiments, step 120 includes:

[0164] Adding each of the components to be rendered to the rendering queue in sequence based on the rendering order;

[0165] Each component to be rendered is sequentially taken out from the rendering queue for rendering.

[0166] During the rendering process, the rendering state of the rendered component to be rendered is updated to the rendered state.

[0167] When the rendering queue is empty, detecting the rendering status of each component to be rendered;

[0168] When the rendering status of each component to be rendered is the rendered status, the rendering is ended.

[0169] Specifically, the embodiment of the present application renders the components to be rendered in sequence according to the rendering order of the generated components to be rendered, ensuring that each component to be rendered is rendered after the components to be rendered on which it depends.

[0170] The rendering queue Q may be initialized according to the generated rendering order list (result) of the components to be rendered, wherein each component to be rendered is added to the queue Q according to the rendering order of the topological sorting result, that is, Q=result.

[0171] Take out the components to be rendered from the rendering queue Q in sequence for rendering, ensuring that each component to be rendered is rendered after the components to be rendered on which it depends.

[0172] During the rendering process, the dependencies of each component to be rendered are checked to ensure that the component to be rendered is rendered after the components to be rendered on which it depends have been rendered.

[0173] Update the rendering status of the rendered component to be rendered, and record its rendering status as rendered.

[0174] Ensure that all components to be rendered are rendered in the order of the topological sorting results to avoid rendering errors when dependencies are not met.

[0175] When the rendering queue is empty, verify the rendering status of all components to be rendered to ensure that each component to be rendered has completed rendering correctly.

[0176] The rendering method provided in the embodiment of the present application improves rendering efficiency by sequentially taking out components to be rendered from the rendering queue for rendering.

[0177] In some embodiments, after determining the rendering order of the components to be rendered based on the directed acyclic graph, the method further includes:

[0178] The rendering order is adjusted in real time based on real-time resource data of the system and the rendering time of the current component to be rendered, wherein the resource data includes at least one of the processor usage, memory usage and network bandwidth usage of the system.

[0179] The step of adjusting the rendering order in real time based on the real-time resource data of the system and the rendering time of the current component to be rendered includes:

[0180] Determine a rendering order adjustment factor based on the rendering time, the system resource requirement data of the current component to be rendered, an adjustment factor, and the resource data, wherein the adjustment factor includes at least one of a resource usage adjustment factor, a system load adjustment factor, and a cache adjustment factor;

[0181] The rendering order is adjusted based on the rendering order adjustment factor.

[0182] Specifically, during the rendering process, the rendering status and dependency changes of each component to be rendered are monitored, and the directed acyclic graph and topological sorting results are updated in real time; the status changes of the components to be rendered are monitored in real time, and the topological sorting results are dynamically adjusted according to the latest dependency and the latest priority weight.

[0183] Dynamically adjust the sorting and rendering order based on system resource usage and the rendering time of the components to be rendered to achieve optimal performance. The relevant adjustment formula is as follows:

[0184]

[0185] Among them, α is the dynamic adjustment factor, T(v i ) is the component v to be rendered i Rendering time, R(v i ) is the component v to be rendered i The resource demand, β is the resource usage adjustment factor, γ is the system load adjustment factor, δ is the cache adjustment factor, Load(v i ) is the component v to be rendered i The current system load, that is, resource data.

[0186] Resource requirements represent the amount of system resources required by the component to be rendered during the rendering process. These resource requirements typically include:

[0187] Central Processing Unit (CPU) resources: The computing power required to render the components to be rendered. For example, complex animations and real-time data processing will take up a lot of CPU time.

[0188] Memory requirements: The memory space required for rendering components. For example, large data rendering or graphics processing requires more memory.

[0189] Network bandwidth: If the component being rendered depends on remote resources (such as loading external data or files), it may require higher network bandwidth.

[0190] Other hardware resources: In special cases, these may involve GPU acceleration (e.g., graphics components) or storage input / output (I / O) operations (e.g., file upload components). Resource requirements are typically determined by analyzing historical performance data of the component being rendered or by pre-estimating and assigning values based on the characteristics of the component being rendered.

[0191] The calculation formula for resource data is as follows:

[0192]

[0193] Among them, CPU_Usage is the CPU usage of the current system (a value between 0 and 1), Memory_Usage is the memory usage of the current system (a value between 0 and 1), and Network_Bandwidth_Usage is the network bandwidth usage of the current system (a value between 0 and 1).

[0194] The rendering method provided in the embodiment of the present application adjusts the rendering order by adjusting factors, thereby improving the accuracy of rendering.

[0195] In some embodiments, after adjusting the rendering order in real time, the method further includes:

[0196] Compare the rendering order after adjustment with the rendering order before adjustment to obtain the components to be rendered whose rendering order has changed;

[0197] Re-render the components to be rendered whose rendering order has changed.

[0198] Specifically, you can compare the old and new topological sorting results, that is, compare the rendering order after the adjustment with the rendering order before the adjustment, and only re-render the components to be rendered whose order has changed. This can optimize the rendering process, reduce unnecessary re-rendering, and avoid rendering performance bottlenecks. You can also apply virtual DOM and / or lazy loading to further improve rendering performance;

[0199] After all components to be rendered are rendered, a rendering optimization report can be generated.

[0200] The rendering method provided in the embodiment of the present application can improve rendering efficiency by re-rendering the components to be rendered whose rendering order has changed.

[0201] In some embodiments, components to be rendered that do not need to be re-rendered are obtained based on a caching mechanism, and the components to be rendered that do not need to be re-rendered are cached.

[0202] Specifically, a caching mechanism is introduced to cache components to be rendered that do not need to be re-rendered to reduce repeated rendering. For example, the following program can be used to perform this step: if cache[vi]is valid:use cached resultfor vi else render vi update cache[vi].

[0203] Cache(v i ) is the component v to be rendered i The cache effectiveness is calculated as follows:

[0204]

[0205] Among them, Cache_Hit_Rate is the v of the component to be rendered i The cache hit rate (a value between 0 and 1), Cache_Age is the current age of the cache of the component to be rendered (the time from cache creation to now), and Cache_Lifetime is the expected life cycle of the cache (the validity period of the cache).

[0206] The rendering method provided in the embodiment of the present application introduces a caching mechanism to cache components to be rendered that do not need to be re-rendered, thereby reducing repeated rendering and further improving rendering performance; while maintaining topological sorting, the rendering priority and efficiency of the components to be rendered are further optimized.

[0207] The rendering method provided in this application can improve rendering performance, adapt to dynamic changes, reduce system load, and improve user experience by systematically processing the dependencies of components to be rendered and eliminating circular dependencies.

[0208] The rendering device provided in an embodiment of the present application is described below. The rendering device described below and the rendering method described above can refer to each other.

[0209] Figure 5 is a schematic diagram of the structure of the rendering device provided in the embodiment of the present application, such as Figure 5 As shown, the apparatus includes a construction module 510 and a rendering module 520 .

[0210] A construction module 510 is configured to construct a directed acyclic graph of components to be rendered based on dependency information between each component to be rendered in the application program;

[0211] The rendering module 520 is configured to determine a rendering order of the components to be rendered based on the directed acyclic graph, and render the components to be rendered according to the rendering order.

[0212] Among them, the construction module 510 and the rendering module 520 can be used to respectively execute steps 110 and 120 in the embodiments corresponding to the above-mentioned rendering method. For the specific implementation methods of these modules and more details, please refer to the corresponding method parts, which will not be repeated here.

[0213] It should be noted that the rendering device provided in the embodiment of the present application can implement all the method steps implemented in the above-mentioned rendering method embodiment and can achieve the same technical effects. The parts and beneficial effects of this embodiment that are the same as those in the method embodiment will not be described in detail here.

[0214] An embodiment of the present application further provides a computer-readable storage medium having instructions stored thereon. When the instructions are executed by a processor, the processor is configured to execute the above-mentioned mobile charging scheduling method.

[0215] Those skilled in the art will appreciate that the embodiments of the present application can be provided as methods, systems or computer program products. Therefore, the present application can adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application can adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) that contain computer-usable program code.

[0216] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems) and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes 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.

[0217] These computer program instructions may also be stored in a computer readable memory that can direct a computer or other programmable data processing device to work 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 The function specified in one or more boxes.

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

[0219] In a typical configuration, a computing device includes one or more processors (CPUs), input / output interfaces, network interfaces, and memory.

[0220] The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0221] Computer-readable media includes permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology for information storage. Information can be computer-readable instructions, data structures, program modules, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassettes, magnetic disk storage or other magnetic storage devices, or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer-readable media does not include transitory computer-readable media such as modulated communication signals and carrier waves.

[0222] An embodiment of the present application further provides a controller having a computer program stored thereon, which implements the steps of the above method when executed by a processor.

[0223] An embodiment of the present application further provides a computer program product, comprising a computer program or instructions, which implement the steps of the above method when executed by a processor.

[0224] In the description of this application, the terms "first" and "second" are used for descriptive purposes only and should not be understood to indicate or imply relative importance or implicitly specify the number of technical features indicated. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include one or more features. In the description of this application, "plurality" means two or more, unless otherwise specifically defined.

[0225] In the above embodiments, the description of each embodiment has its own focus. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0226] The embodiments, implementation methods and related technical features of the present application can be combined and replaced with each other without conflict.

[0227] The above are merely preferred embodiments of the present application and do not constitute any form of limitation to the present application. However, any simple modifications, equivalent changes, and modifications made to the above embodiments based on the technical essence of the present application without departing from the content of the technical solution of the present application are still within the scope of the technical solution of the present application.

Claims

1. A rendering method, characterized in that: include: Constructing a directed acyclic graph of components to be rendered based on dependency information between each component to be rendered in the application; A rendering order of the components to be rendered is determined based on the directed acyclic graph, and the components to be rendered are rendered according to the rendering order.

2. The method according to claim 1, characterized in that The step of constructing a directed acyclic graph of components to be rendered based on dependency information between each component to be rendered in the application program includes: Constructing a dependency graph of the component to be rendered based on the dependency information; The directed acyclic graph is constructed based on the dependency graph.

3. The method according to claim 2, characterized in that The step of constructing the directed acyclic graph based on the dependency graph includes: Performing a circular dependency detection on the dependency graph; When a circular dependency is detected in the dependency graph, the circular dependency is resolved to obtain the directed acyclic graph.

4. The method according to claim 3, characterized in that The removing of the circular dependency to obtain the directed acyclic graph includes: The circular dependency is resolved by adding a virtual node in the ring where the circular dependency is located, thereby obtaining the directed acyclic graph.

5. The method according to claim 4, characterized in that The method of removing the circular dependency by adding a virtual node in the ring where the circular dependency is located to obtain the directed acyclic graph includes: The virtual node is inserted between each node of the ring where the circular dependency relationship is located, and the directed edge between each node of the ring is replaced by a directed edge from each node of the ring to the virtual node, so as to eliminate the circular dependency relationship and obtain the directed acyclic graph.

6. The method according to any one of claims 3 to 5, characterized in that The performing circular dependency detection on the dependency graph includes: A cyclic dependency detection is performed on the dependency graph based on a depth-first search method.

7. The method according to claim 2, characterized in that The dependency information includes dependency relationships and dependency types, and constructing a dependency graph of the component to be rendered based on the dependency information includes: Create a node corresponding to each component to be rendered; Based on the dependency relationship and dependency type between each of the components to be rendered, edges between the nodes are created to obtain the dependency graph.

8. The method according to claim 1, characterized in that Determining the rendering order of the components to be rendered based on the directed acyclic graph includes: Topological sorting is performed on the directed acyclic graph to obtain a topological sorting result, and a rendering order of each of the components to be rendered is determined based on the topological sorting result.

9. The method according to claim 8, characterized in that The performing topological sorting on the directed acyclic graph to obtain a topological sorting result includes: Determining an access order of each of the components to be rendered based on a current priority weight of each of the components to be rendered; The topological sorting result is obtained based on the access order and the dependency information.

10. The method according to claim 9, characterized in that The dependency information includes dependency relationships. Before determining the access order of each component to be rendered based on the current priority weight of each component to be rendered, the method further includes: Setting an initial priority weight of each of the components to be rendered based on the component importance level and / or dependency level; The current priority weight is determined based on the initial priority weight.

11. The method according to claim 10, characterized in that The determining the current priority weight based on the initial priority weight includes: The initial priority weight is updated based on the time weight of each component to be rendered to obtain the current priority weight of each component to be rendered.

12. The method according to claim 11, characterized in that The dependency information further includes an access status, and obtaining the topological sorting result based on the access order and the dependency information includes: Traversing each of the components to be rendered in sequence based on the access order; In a case where the access state of any component to be rendered is an unaccessed state, a depth-first search is performed on the component to be rendered based on the dependency relationship to obtain the topological sorting result.

13. The method according to claim 12, characterized in that The performing a depth-first search on any component to be rendered based on the dependency relationship to obtain the topological sorting result includes: Based on the dependency relationship, a depth-first search is performed on the component to be rendered whose access state is an unvisited state, to obtain a first component that depends on the component to be rendered in the unvisited state; When the access state of the first component is the visited state, adding the component to be rendered in the unvisited state to the pre-built stack; The topological sorting result is obtained based on the order in which each of the components to be rendered is added to the stack.

14. The method according to claim 13, characterized in that Before adding the unvisited component to be rendered to the pre-built stack, the method further includes: The access state of the component to be rendered in the unaccessed state is changed to the accessing state.

15. The method according to claim 13, characterized in that The adding order is opposite to the rendering order.

16. The method according to claim 8, characterized in that After determining the rendering order of the components to be rendered based on the directed acyclic graph, the method further includes: Obtaining the latest rendering status of each component to be rendered and the latest dependency relationship between each component to be rendered in real time; The directed acyclic graph and the topological sorting result are updated based on the latest rendering state and the latest dependency relationship.

17. The method according to claim 1, wherein Rendering the components to be rendered according to the rendering order includes: Adding each of the components to be rendered to the rendering queue in sequence based on the rendering order; Each component to be rendered is sequentially taken out from the rendering queue for rendering.

18. The method according to claim 17, characterized in that During the rendering process, the rendering state of the rendered component to be rendered is updated to the rendered state.

19. The method according to claim 18, characterized in that When the rendering queue is empty, detecting the rendering status of each component to be rendered; When the rendering status of each component to be rendered is the rendered status, the rendering is ended.

20. The method according to claim 1, wherein After determining the rendering order of the components to be rendered based on the directed acyclic graph, the method further includes: The rendering order is adjusted in real time based on real-time resource data of the system and the rendering time of the current component to be rendered, wherein the resource data includes at least one of the processor usage, memory usage and network bandwidth usage of the system.

21. The method according to claim 20, characterized in that The real-time adjustment of the rendering order based on the real-time resource data of the system and the rendering time of the current component to be rendered includes: Determine a rendering order adjustment factor based on the rendering time, the system resource requirement data of the current component to be rendered, an adjustment factor, and the resource data, wherein the adjustment factor includes at least one of a resource usage adjustment factor, a system load adjustment factor, and a cache adjustment factor; The rendering order is adjusted based on the rendering order adjustment factor.

22. The method according to claim 20, characterized in that After adjusting the rendering order in real time, the method further includes: Compare the rendering order after adjustment with the rendering order before adjustment to obtain the components to be rendered whose rendering order has changed; Re-render the components to be rendered whose rendering order has changed.

23. The method according to claim 22, characterized in that Also includes: Components to be rendered that do not need to be re-rendered are acquired based on a caching mechanism, and the components to be rendered that do not need to be re-rendered are cached.

24. A rendering device, characterized in that include: A construction module, configured to construct a directed acyclic graph of components to be rendered based on dependency information between each component to be rendered in the application; A rendering module is used to determine a rendering order of the components to be rendered based on the directed acyclic graph, and render the components to be rendered according to the rendering order.

25. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 23 are implemented.

26. A controller having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 23 are implemented.

27. A computer program product, characterized in that The method comprises a computer program or instructions, which implement the steps of the method according to any one of claims 1 to 23 when executed by a processor.

Images