Style on-demand rendering method, apparatus, device, and storage medium

Abstract

The application discloses a style on-demand rendering method, device, equipment and storage medium, a metadata set corresponding to a style source code is constructed by analyzing the style source code; each mapping relationship and each correlation relationship and a complete propagation path of a style variable are extracted from the metadata set; a target graph is constructed according to the mapping relationship, the correlation relationship and the complete propagation path; a modification event of the style variable on a current page is listened to in real time, when the modification event of the style variable is listened to, the target graph is called to determine one or more affected DOM nodes; and each affected DOM node is rendered on demand. The style source code is converted into a structured and computer-identifiable metadata set to construct the target graph, when the style variable modification event is listened to, the target graph is used to find the DOM node needing to be updated, on-demand rendering is realized, the problems of page interaction response delay and animation lag in the prior art are solved, and user experience is greatly improved.

Description

Technical Field

[0001] This application relates to the field of style-on-demand rendering technology, specifically to a style-on-demand rendering method, apparatus, device, and storage medium. Background Technology

[0002] As web applications become increasingly complex, large single-page applications (SPAs) typically contain thousands of DOM nodes and tens of thousands of lines of style source code. While the widespread use of style variables has brought convenience to scenarios such as theme switching and dynamic skinning, in general, when a global style variable is dynamically modified, the browser needs to recalculate the styles of all elements that depend on that variable and trigger a large-scale layout and rendering process.

[0003] This process typically involves recursively traversing the entire render tree, causing unnecessary computational overhead, resulting in delayed page interaction responses and animation stuttering, which seriously affects the user experience. Summary of the Invention

[0004] In view of this, this application provides a style-on-demand rendering method, apparatus, device, and storage medium to solve the problem that existing methods typically involve recursive traversal of the entire rendering tree, causing unnecessary computational overhead, resulting in delayed page interaction response, animation stuttering, and seriously affecting user experience.

[0005] To achieve the above objectives, the following solution is proposed:

[0006] Firstly, a style-on-demand rendering method includes:

[0007] The style source code is parsed to construct a meta-dataset corresponding to the style source code;

[0008] Extract each mapping relationship and each association relationship from the meta dataset, as well as the complete propagation path of the style variable;

[0009] Construct a target graph based on the various mapping relationships, association relationships, and complete propagation paths;

[0010] Real-time monitoring of style variable modification events on the current page; when a style variable modification event is detected, the target graph is invoked to identify one or more affected DOM nodes.

[0011] Render each of the affected DOM nodes on demand.

[0012] Preferably, the step of parsing the style source code to construct a meta-dataset corresponding to the style source code includes:

[0013] The style source code is parsed into individual style properties;

[0014] Each of the aforementioned style attributes is assigned a unique hash identifier to form various target attributes;

[0015] Determine the attribute type for each of the target attributes;

[0016] Based on the attribute type, a virtual style descriptor corresponding to each of the target attributes is generated;

[0017] The meta-dataset is composed of each of the aforementioned virtual style descriptors.

[0018] Preferably, the step of generating virtual style descriptors corresponding to each of the target attributes based on the attribute type includes:

[0019] For each target attribute, if the attribute type of the target attribute is a composite type, then the attribute is split into individual atomic attributes;

[0020] Create a corresponding virtual style descriptor for each of the atomic properties;

[0021] If the attribute type of the target attribute is a type that includes style variables, then the target attribute is referenced as a variable to form the first attribute;

[0022] Create a corresponding virtual style descriptor for each of the first attributes;

[0023] If the target attribute has a single attribute type, then a virtual style descriptor is created from the target attribute.

[0024] Preferably, constructing the target graph based on each of the mapping relationships, association relationships, and complete propagation paths includes:

[0025] A dependency graph is established based on the mapping and association relationships;

[0026] The first graph is constructed from the various style variables and the complete propagation path;

[0027] The first map is subjected to loop detection to remove circular references, resulting in the second map;

[0028] The dependency map and the second map are combined to obtain the target map.

[0029] Preferably, the invocation of the target graph to determine one or more affected DOM nodes includes:

[0030] Locate the virtual style descriptor associated with the style variable modification event in the target graph, and use it as the association descriptor;

[0031] Determine the DOM node corresponding to the associated descriptor;

[0032] The DOM nodes corresponding to the associated descriptors are marked as affected to obtain the affected DOM nodes.

[0033] Preferably, the on-demand rendering of each of the affected DOM nodes includes:

[0034] Calculate the intersection ratio between each affected DOM node and the current page;

[0035] Based on the crossover ratio, each affected DOM node is prioritized to determine the priority of each affected DOM node;

[0036] The affected DOM nodes are sorted in descending order of priority.

[0037] Based on the sorting order, each of the affected DOM nodes is rendered on demand.

[0038] Preferably, the step of rendering each of the affected DOM nodes on demand according to the sorting order includes:

[0039] For each affected DOM node, if the priority of the affected DOM node is the first priority, then the affected DOM node is rendered directly.

[0040] If the affected DOM node has the second priority, then check if there is a virtual style descriptor corresponding to the affected DOM node in the hot cache; if yes, then render it; if no, then calculate the virtual style descriptor for the affected DOM node and render it.

[0041] If the priority of the affected DOM node is the third priority, then determine whether there is a virtual style descriptor corresponding to the affected DOM node in the hot cache or warm cache; if yes, then store the corresponding virtual style descriptor in the hot cache; if no, then calculate the virtual style descriptor for the affected DOM node and store it in the hot cache.

[0042] If the affected DOM node has the fourth priority, then a virtual style descriptor is calculated for the affected DOM node and stored in the cold cache.

[0043] Secondly, a style-on-demand rendering device includes:

[0044] The metadata building module is used to parse the style source code to build a metadata dataset corresponding to the style source code;

[0045] The extraction module is used to extract each mapping relationship and each association relationship, as well as the complete propagation path of style variables from the metadata dataset;

[0046] The target graph construction module is used to construct the target graph based on the various mapping relationships, association relationships, and complete propagation paths.

[0047] The module is used to listen for style variable modification events on the current page in real time. When a style variable modification event is detected, the target graph is invoked to determine one or more affected DOM nodes.

[0048] The on-demand rendering module is used to render each of the affected DOM nodes on demand.

[0049] Thirdly, a style-on-demand rendering device, including memory and processor;

[0050] The memory is used to store programs;

[0051] The processor is configured to execute the program to implement the steps of the style-on-demand rendering method as described in any of the first aspects.

[0052] Fourthly, a storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the style-on-demand rendering method as described in any of the first aspects.

[0053] As can be seen from the above technical solution, this application constructs a meta-dataset corresponding to the style source code by parsing the style source code; extracts various mapping relationships and various association relationships, as well as the complete propagation path of style variables from the meta-dataset; constructs a target graph based on the various mapping relationships, association relationships and complete propagation paths; monitors style variable modification events on the current page in real time, and when a style variable modification event is detected, calls the target graph to determine one or more affected DOM nodes; and renders each of the affected DOM nodes on demand. This application parses style source code to virtualize and atomicate style information, converting it into a structured, computer-readable metadata dataset. From this dataset, mapping relationships, associations, and complete propagation paths are extracted for in-depth analysis of the relationships between data within the metadata dataset. A visualized, queryable target graph is then constructed, fully describing the dependencies between the datasets corresponding to the style source code. When a style variable modification event is detected, the target graph can efficiently and quickly locate the DOM nodes that need updating, avoiding the browser engine's top-down redundant calculation process. This enables on-demand rendering, fundamentally solving the lag problem caused by style updates, ensuring page response speed, saving computational overhead, and resolving the issues of page interaction response delays and animation stuttering in existing technologies, significantly improving the user experience. Attached Figure Description

[0054] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on the provided drawings without creative effort.

[0055] Figure 1 An optional flowchart of a style-on-demand rendering method provided in an embodiment of this application;

[0056] Figure 2 A schematic diagram of a style-on-demand rendering device provided in an embodiment of this application;

[0057] Figure 3 This is a schematic diagram of the structure of a style-on-demand rendering device provided in an embodiment of this application. Detailed Implementation

[0058] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0059] This invention can be used in a wide variety of general-purpose or special-purpose computing environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor devices, distributed computing environments including any of the above devices, etc.

[0060] This invention provides a style-on-demand rendering method, which can be applied to various computer terminals or smart terminals. The executing entity can be the processor or server of the computer terminal or smart terminal. The method flowchart is shown below. Figure 1 As shown, it specifically includes:

[0061] S1: Parse the style source code to construct a meta-dataset corresponding to the style source code.

[0062] Specifically, the style source code (CSS source code) can be parsed into a lightweight virtual style descriptor (VSD) by a style virtual compiler, the style definition and calculation logic can be separated, and then a meta dataset corresponding to the style source code can be constructed.

[0063] The meta dataset is a JSON-formatted dataset that contains selector paths, attribute key-value pairs, dependency lists, priority tags, and more.

[0064] This step virtualizes and atomicates the style source code, converting CSS rules into structured, computer-readable virtual style descriptors.

[0065] S2: Extract each mapping relationship and each association relationship from the metadata dataset, as well as the complete propagation path of the style variable.

[0066] This step is to identify the complete propagation path of mapping relationships, association relationships, and style variables.

[0067] Specifically, the mapping relationship between DOM elements and virtual style descriptors can be extracted from the metadata dataset; the mapping relationship between style variables and virtual style descriptors can be extracted from the metadata dataset; the association relationship between DOM elements and style variables can be determined from the metadata set; and the complete propagation path of style variables from definition to use can be determined from the metadata set.

[0068] This allows us to extract the core data on "who depends on whom," providing data support for subsequent processes.

[0069] S3: Construct the target graph based on the mapping relationships, association relationships, and complete propagation paths described above.

[0070] Based on the mapping relationships, association relationships, and complete propagation paths obtained from the above steps, we can establish the mapping relationship between style variables and DOM nodes and VSDs, analyze the dependency propagation path, deeply analyze the relationship between data in the metadata set, and then construct a visual and queryable target graph that fully describes the dependency situation between the datasets corresponding to the style source code.

[0071] Specifically, it can identify three layers of mapping relationships: for DOM nodes, it can identify the CSS rules they match; for CSS variables, it can identify which VSDs depend on them; and for VSDs, it can identify the CSS variables they depend on.

[0072] Specifically, you can start from ":root" and scan downwards the CSS variable inheritance chain to find out which variables are "high value" (such as the global variable "--primary-color" that is referenced in many places).

[0073] S4: Real-time monitoring of style variable modification events on the current page. When a style variable modification event is detected, the target graph is invoked to identify one or more affected DOM nodes.

[0074] For style variable modification events on the current page, we can listen for them in real time. When a modification is detected, we can directly call the target graph to find the DOM node that needs to be updated. This avoids the redundant top-down calculation process of the browser engine and ensures that the amount of calculation is only proportional to the actual impact of the change, and is independent of the total size of the current page.

[0075] S5: Render each of the affected DOM nodes on demand.

[0076] Finally, each affected DOM node is rendered on demand. The task can be broken down into synchronous, frame synchronous, idle period, and asynchronous execution, which can avoid long-term tasks blocking the main thread, fundamentally solve the lag problem caused by style updates, and ensure the page response speed.

[0077] As can be seen from the above technical solution, this application constructs a meta-dataset corresponding to the style source code by parsing the style source code; extracts various mapping relationships and various association relationships, as well as the complete propagation path of style variables from the meta-dataset; constructs a target graph based on the various mapping relationships, association relationships and complete propagation paths; monitors style variable modification events on the current page in real time, and when a style variable modification event is detected, calls the target graph to determine one or more affected DOM nodes; and renders each of the affected DOM nodes on demand. This application parses style source code to virtualize and atomicate style information, converting it into a structured, computer-readable metadata dataset. From this dataset, mapping relationships, associations, and complete propagation paths are extracted for in-depth analysis of the relationships between data within the metadata dataset. A visualized, queryable target graph is then constructed, fully describing the dependencies between the datasets corresponding to the style source code. When a style variable modification event is detected, the target graph can efficiently and quickly locate the DOM nodes that need updating, avoiding the browser engine's top-down redundant calculation process. This enables on-demand rendering, fundamentally solving the lag problem caused by style updates, ensuring page response speed, saving computational overhead, and resolving the issues of page interaction response delays and animation stuttering in existing technologies, significantly improving the user experience.

[0078] The method provided in this embodiment of the invention involves parsing the style source code to construct a metadata dataset corresponding to the style source code. The specific details are as follows:

[0079] The style source code is parsed into individual style properties;

[0080] Each of the aforementioned style attributes is assigned a unique hash identifier to form various target attributes;

[0081] Determine the attribute type for each of the target attributes;

[0082] Based on the attribute type, a virtual style descriptor corresponding to each of the target attributes is generated;

[0083] The meta-dataset is composed of each of the aforementioned virtual style descriptors.

[0084] Specifically, the above steps first parse the style source code into various style attributes, such as tokens or rule objects, and then assign a unique hash identifier, such as vsd_0x8A3F. This is equivalent to giving each rule a globally unique ID, which is convenient for differentiation and subsequent reference.

[0085] After allocation, it serves as the target attribute, and a virtual style descriptor is generated based on the attribute value of the target attribute.

[0086] The process described above, which involves generating virtual style descriptors for each target attribute based on the attribute type, specifically includes:

[0087] For each target attribute, if the attribute type of the target attribute is a composite type, then the attribute is split into individual atomic attributes;

[0088] Create a corresponding virtual style descriptor for each of the atomic properties;

[0089] If the attribute type of the target attribute is a type that includes style variables, then the target attribute is referenced as a variable to form the first attribute;

[0090] Create a corresponding virtual style descriptor for each of the first attributes;

[0091] If the target attribute has a single attribute type, then a virtual style descriptor is created from the target attribute.

[0092] Specifically, the target attribute can have various attribute types, such as composite types, types containing style variables, and single attribute types. Therefore, to improve flexibility and make the generated virtual style descriptors more accurate and better match their corresponding target attributes, it is necessary to distinguish them according to the attribute type:

[0093] For composite types, such as "border: 1px solid red", which actually contains three pieces of information: width, style, and color, it is necessary to break them down into independent single-function tools to form three independent atomic properties: "border-width", "border-style", and "border-color". Then, each atomic property can create its own corresponding virtual style descriptor.

[0094] For target properties containing style variables, it is necessary to perform dependency tagging, variable referencing, form the first property, and construct a virtual style descriptor.

[0095] For a single attribute type, a virtual style descriptor is created directly from the target attribute.

[0096] The process of constructing the target map based on the various mapping relationships, association relationships, and complete propagation paths described in this application will be explained in detail below.

[0097] A dependency graph is established based on the mapping and association relationships;

[0098] The first graph is constructed from the various style variables and the complete propagation path;

[0099] The first map is subjected to loop detection to remove circular references, resulting in the second map;

[0100] The dependency map and the second map are combined to obtain the target map.

[0101] Specifically, when constructing the target graph, two graphs need to be built. One graph is constructed by mapping and association relationships, and the other graph is constructed by style variables and complete propagation paths. In order to ensure the accuracy, completeness and computability of the target graph, the first graph needs to be checked for loops to remove circular references, such as automatically breaking the circular reference of variable A→variable B→variable A. Then it is combined with the dependency graph to obtain the target graph.

[0102] The following embodiments explain in detail the steps of calling the target graph in this application to determine one or more affected DOM nodes.

[0103] Locate the virtual style descriptor associated with the style variable modification event in the target graph, and use it as the association descriptor;

[0104] Determine the DOM node corresponding to the associated descriptor;

[0105] The DOM nodes corresponding to the associated descriptors are marked as affected to obtain the affected DOM nodes.

[0106] Specifically, by listening to DOM changes and style.setProperty calls, CSS variable modification events are captured. In one example, when the variable "--text-color" changes: the target graph is queried to locate the associated virtual style descriptor. As the associated descriptor, the DOM nodes bound to the associated descriptor are filtered, and only the affected DOM nodes are marked as data-vsd-dirty. In this way, only a small number of related subtrees need to be processed on a page with thousands of nodes, which greatly reduces the style calculation time and avoids the recalculation of most invalid styles. In contrast, the traditional method will perform a full calculation, traversing the entire DOM tree to calculate the element styles. The calculation time for complex page styles accounts for more than half of the rendering pipeline, resulting in redundancy.

[0107] Furthermore, the process of rendering each of the affected DOM nodes on demand may include the following steps:

[0108] Calculate the intersection ratio between each affected DOM node and the current page;

[0109] Based on the crossover ratio, each affected DOM node is prioritized to determine the priority of each affected DOM node;

[0110] The affected DOM nodes are sorted in descending order of priority.

[0111] Based on the sorting order, each of the affected DOM nodes is rendered on demand.

[0112] The specific steps for rendering each affected DOM node on demand based on the sorting order are as follows:

[0113] For each affected DOM node, if the priority of the affected DOM node is the first priority, then the affected DOM node is rendered directly.

[0114] If the affected DOM node has the second priority, then check if there is a virtual style descriptor corresponding to the affected DOM node in the hot cache; if yes, then render it; if no, then calculate the virtual style descriptor for the affected DOM node and render it.

[0115] If the priority of the affected DOM node is the third priority, then determine whether there is a virtual style descriptor corresponding to the affected DOM node in the hot cache or warm cache; if yes, then store the corresponding virtual style descriptor in the hot cache; if no, then calculate the virtual style descriptor for the affected DOM node and store it in the hot cache.

[0116] If the affected DOM node has the fourth priority, then a virtual style descriptor is calculated for the affected DOM node and stored in the cold cache.

[0117] Specifically, the above process implements four-dimensional priority scheduling. For elements in user interaction, such as the focused input box, synchronous execution with a time limit is required, and the corresponding affected DOM nodes belong to the first priority. For elements in the current viewport, synchronous processing can be performed through the requestAnimationFrame, and the corresponding affected DOM nodes belong to the second priority. For elements outside the viewport (±1 screen), batch scheduling is performed by requestIdleCallback (single task ≤ 8ms), and the corresponding affected DOM nodes belong to the third priority. For off-screen elements, asynchronous calculation in the OffscreenCanvas needs to be handed over to the Web Worker, and the corresponding affected DOM nodes belong to the fourth priority. However, existing technologies lack this style update priority scheduling mechanism, resulting in significant delays in user interaction response.

[0118] Different caching strategies are used for different priorities. For hot caching, the VSD of elements in the viewport is stored in memory, and the LRU strategy retains the 50 access records. For warm caching, the VSD that appears in the last 3 scrolls is stored in Web Worker and style patches are pre-generated. For cold caching, historical VSDs are persisted in IndexedDB and old data is automatically replaced according to access frequency.

[0119] Furthermore, this application also sets up a rendering pipeline coordination and fault tolerance mechanism, including inserting a 5ms execution window before the StyleRecalc stage of the browser rendering pipeline, splitting the tasks corresponding to the first priority and the second priority into micro-task units of ≤0.5ms, and injecting them into the pipeline sequentially.

[0120] OffscreenCanvas clones a lightweight copy of the DOM to simulate a style calculation environment. Web Workers generate differentiated style patches and atomically update the main document through a double buffering mechanism. First, the front-end buffer holds the currently effective patch, and the back-end buffer stores the newly calculated patch. Then, atomic swaps are performed between DOM node updates.

[0121] It can also flexibly switch autonomously. For example, for older browsers, such as Internet Explorer, it can automatically switch to the chunked rendering mode, with less than 50 nodes per frame. If a single task times out for a certain period of time (e.g., 8ms), it can skip non-critical tasks and dynamically reduce the amount of processing. It can also run virtual style descriptors in an independent sandbox. If an error occurs, it can be isolated separately without affecting the global process.

[0122] and Figure 1 Corresponding to the method described above, embodiments of the present invention also provide a style-on-demand rendering device for rendering styles as needed. Figure 1 In the specific implementation of the method, the style-on-demand rendering device provided in this embodiment of the invention can be used on computer terminals or various mobile devices, combined with Figure 2 The document introduces on-demand style rendering devices, such as... Figure 2 As shown, the device may include:

[0123] Metadata construction module 10 is used to parse the style source code to construct a meta dataset corresponding to the style source code;

[0124] Extraction module 20 is used to extract each mapping relationship and each association relationship, as well as the complete propagation path of style variables from the metadata dataset;

[0125] The target graph construction module 30 is used to construct a target graph based on the various mapping relationships, association relationships, and complete propagation paths.

[0126] Module 40 is invoked to listen for style variable modification events on the current page in real time. When a style variable modification event is detected, the target graph is invoked to determine one or more affected DOM nodes.

[0127] The on-demand rendering module 50 is used to render each of the affected DOM nodes on demand.

[0128] As can be seen from the above technical solution, this application constructs a meta-dataset corresponding to the style source code by parsing the style source code; extracts various mapping relationships and various association relationships, as well as the complete propagation path of style variables from the meta-dataset; constructs a target graph based on the various mapping relationships, association relationships and complete propagation paths; monitors style variable modification events on the current page in real time, and when a style variable modification event is detected, calls the target graph to determine one or more affected DOM nodes; and renders each of the affected DOM nodes on demand. This application parses style source code to virtualize and atomicate style information, converting it into a structured, computer-readable metadata dataset. From this dataset, mapping relationships, associations, and complete propagation paths are extracted for in-depth analysis of the relationships between data within the metadata dataset. A visualized, queryable target graph is then constructed, fully describing the dependencies between the datasets corresponding to the style source code. When a style variable modification event is detected, the target graph can efficiently and quickly locate the nodes that need updating, avoiding the redundant top-down calculations of the browser engine. This enables on-demand rendering, fundamentally solving the lag problem caused by style updates, ensuring page response speed, saving computational overhead, and resolving the issues of page interaction response delays and animation stuttering in existing technologies, significantly improving the user experience.

[0129] Furthermore, embodiments of this application provide a style-on-demand rendering device. Optionally, Figure 3 The hardware structure block diagram of the style-on-demand rendering device is shown, for reference Figure 3 The hardware structure of a style-on-demand rendering device may include: at least one processor 01, at least one communication interface 02, at least one memory 03, and at least one communication bus 04.

[0130] In this embodiment of the application, the number of processor 01, communication interface 02, memory 03 and communication bus 04 is at least one, and processor 01, communication interface 02 and memory 03 communicate with each other through communication bus 04.

[0131] Processor 01 may be a central processing unit (CPU), an application-specific integrated circuit (ASIC), or one or more integrated circuits configured to implement embodiments of the present invention.

[0132] Memory 03 may include high-speed RAM, and may also include non-volatile memory, such as at least one disk storage device.

[0133] The memory stores a program that the processor can call. The program is used to execute the following style-on-demand rendering method, including:

[0134] The style source code is parsed to construct a meta-dataset corresponding to the style source code;

[0135] Extract each mapping relationship and each association relationship from the meta dataset, as well as the complete propagation path of the style variable;

[0136] Construct a target graph based on the various mapping relationships, association relationships, and complete propagation paths;

[0137] Real-time monitoring of style variable modification events on the current page; when a style variable modification event is detected, the target graph is invoked to identify one or more affected DOM nodes.

[0138] Render each of the affected DOM nodes on demand.

[0139] Optionally, the refined and extended functions of the program can be found in the description of the style-on-demand rendering method in the method embodiment.

[0140] This application embodiment also provides a storage medium that can store a program suitable for execution by a processor. When the program runs, it controls the device where the storage medium is located to execute the following style-on-demand rendering method, including:

[0141] The style source code is parsed to construct a meta-dataset corresponding to the style source code;

[0142] Extract each mapping relationship and each association relationship from the meta dataset, as well as the complete propagation path of the style variable;

[0143] Construct a target graph based on the various mapping relationships, association relationships, and complete propagation paths;

[0144] Real-time monitoring of style variable modification events on the current page; when a style variable modification event is detected, the target graph is invoked to identify one or more affected DOM nodes.

[0145] Render each of the affected DOM nodes on demand.

[0146] Specifically, the storage medium can be a computer-readable storage medium, which can be an electronic storage device such as flash memory, EEPROM (Electrically Erasable Programmable Read-Only Memory), EPROM, hard disk, or ROM.

[0147] Optionally, the refined and extended functions of the program can be found in the description of the style-on-demand rendering method in the method embodiment.

[0148] Furthermore, the functional modules in the various embodiments of this disclosure can be integrated together to form an independent part, or each module can exist independently, or two or more modules can be integrated to form an independent part. If the function is implemented as a software functional module and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this disclosure, in essence, or the part that contributes to the prior art, or a part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, a live streaming device, or a network device, etc.) to execute all or part of the steps of the methods in the various embodiments of this disclosure.

[0149] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0150] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. The same or similar parts between the various embodiments can be referred to each other.

[0151] The above description of the disclosed embodiments enables those skilled in the art to make or use this application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this application. Therefore, this application is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for rendering styles on demand, characterized in that, include: Parsing the style source code to construct a meta-dataset corresponding to the style source code includes: parsing the style source code into various style attributes; assigning a unique hash identifier to each style attribute to form various target attributes; determining the attribute type of each target attribute; generating virtual style descriptors corresponding to each target attribute based on the attribute type; and composing a meta-dataset from the virtual style descriptors. Extract each mapping relationship and each association relationship from the meta dataset, as well as the complete propagation path of the style variable; Construct a target graph based on the various mapping relationships, association relationships, and complete propagation paths; Real-time monitoring of style variable modification events on the current page; when a style variable modification event is detected, the target graph is invoked to identify one or more affected DOM nodes. Render each of the affected DOM nodes on demand.

2. The method according to claim 1, characterized in that, The step of generating virtual style descriptors corresponding to each of the target attributes based on the attribute type includes: For each target attribute, if the attribute type of the target attribute is a composite type, then the attribute is split into individual atomic attributes; Create a corresponding virtual style descriptor for each of the atomic properties; If the attribute type of the target attribute is a type that includes style variables, then the target attribute is referenced as a variable to form the first attribute; Create a corresponding virtual style descriptor for each of the first attributes; If the target attribute has a single attribute type, then a virtual style descriptor is created from the target attribute.

3. The method according to claim 1, characterized in that, The construction of the target graph based on the various mapping relationships, association relationships, and complete propagation paths includes: A dependency graph is established based on the mapping and association relationships; The first graph is constructed from the various style variables and the complete propagation path; The first map is subjected to loop detection to remove circular references, resulting in the second map; The dependency map and the second map are combined to obtain the target map.

4. The method according to claim 1, characterized in that, The invocation of the target graph to determine one or more affected DOM nodes includes: Locate the virtual style descriptor associated with the style variable modification event in the target graph, and use it as the association descriptor; Determine the DOM node corresponding to the associated descriptor; The DOM nodes corresponding to the associated descriptors are marked as affected to obtain the affected DOM nodes.

5. The method according to claim 1, characterized in that, The on-demand rendering of each of the affected DOM nodes includes: Calculate the intersection ratio between each affected DOM node and the current page; Based on the crossover ratio, each affected DOM node is prioritized to determine the priority of each affected DOM node; The affected DOM nodes are sorted in descending order of priority. Based on the sorting order, each of the affected DOM nodes is rendered on demand.

6. The method according to claim 5, characterized in that, The process of rendering each affected DOM node on demand according to the sorting order includes: For each affected DOM node, if the priority of the affected DOM node is the first priority, then the affected DOM node is rendered directly. If the affected DOM node has the second priority, then check if there is a virtual style descriptor corresponding to the affected DOM node in the hot cache; if yes, then render it; if no, then calculate the virtual style descriptor for the affected DOM node and render it. If the priority of the affected DOM node is the third priority, then determine whether there is a virtual style descriptor corresponding to the affected DOM node in the hot cache or warm cache; if yes, then store the corresponding virtual style descriptor in the hot cache; if no, then calculate the virtual style descriptor for the affected DOM node and store it in the hot cache. If the affected DOM node has the fourth priority, then a virtual style descriptor is calculated for the affected DOM node and stored in the cold cache.

7. A style-on-demand rendering device, characterized in that, include: A metadata construction module is used to parse the style source code to construct a metadata dataset corresponding to the style source code; including: parsing the style source code into various style attributes; assigning a unique hash identifier to each style attribute to form various target attributes; determining the attribute type of each target attribute; generating virtual style descriptors corresponding to each target attribute based on the attribute type; and composing a metadata dataset from the virtual style descriptors. The extraction module is used to extract each mapping relationship and each association relationship, as well as the complete propagation path of style variables from the metadata dataset; The target graph construction module is used to construct the target graph based on the various mapping relationships, association relationships, and complete propagation paths. The module is used to listen for style variable modification events on the current page in real time. When a style variable modification event is detected, the target graph is invoked to determine one or more affected DOM nodes. The on-demand rendering module is used to render each of the affected DOM nodes on demand.

8. A style-on-demand rendering device, characterized in that, Including memory and processor; The memory is used to store programs; The processor is configured to execute the program to implement the various steps of the style-on-demand rendering method as described in any one of claims 1-6.

9. A storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the steps of the style-on-demand rendering method as described in any one of claims 1-6.

Images