Invalid region rendering method and device, electronic equipment and storage medium

Abstract

The invention discloses an invalid region rendering method and device, electronic equipment and a storage medium, which are used for solving the technical problems of insufficient invalid region detection precision, high performance overhead and serious resource waste when the style of the existing rendering scheme is changed. The method comprises the following steps: monitoring a CSS style change event, and extracting a change attribute; when the CSS style change event triggers layout invalidation, determining a change node according to the change attribute; calculating invalid areas of the changed nodes, and generating an original invalid area set by adopting the invalid areas of all the changed nodes; optimizing the original invalid region set to generate a minimum rendering dirty region; matching a minimum rendering dirty area in a preset cache, and determining an unmatched minimum rendering dirty area which cannot be matched; acquiring equipment performance and an interaction scene, and determining an optimal rendering strategy according to the equipment performance and the interaction scene; and adopting the optimal rendering strategy to render the unmatched minimum rendering dirty area.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of layout rendering, and in particular to an invalid region rendering method and device, electronic equipment and a storage medium. BACKGROUND

[0002] With the increasing complexity and dynamic interaction requirements of web applications, modern browser rendering engines face high-frequency style updates and layout calculation pressures. In single-page application, rich interactive interface and real-time data visualization scenarios, frequent changes in DOM element styles and layouts cause browsers to trigger style recalculation, layout rearrangement and repainting, which in turn causes performance bottlenecks. Traditional rendering optimization methods rely on manual marking of invalid regions or global re-rendering, but this approach lacks precision and often results in excessive calculation and waste of rendering resources.

[0003] Although browser engines such as Blink have introduced LayoutNG layout engines and style invalidation mechanisms to try to optimize layout calculation and style update processes, their invalid region detection is still based on coarse-grained dependency tracking and cannot intelligently identify the smallest rendering dirty area. In complex component-based architectures, the impact of style changes often spans multiple layout contexts, and existing solutions often use conservative strategies such as whole subtree re-rendering or rely on developer manual optimization, resulting in rendering delays, high memory usage and decreased user experience. SUMMARY

[0004] The present application provides an invalid region rendering method, device, electronic equipment and storage medium, which solves the technical problems of insufficient precision, high performance overhead and serious resource waste in existing rendering schemes when the style changes.

[0005] The present application provides an invalid region rendering method, comprising:

[0006] listening to a CSS style change event and extracting a change attribute;

[0007] When the CSS style change event triggers layout invalidation, determining a change node according to the change attribute;

[0008] Calculating the invalid region of the change node, and generating an original invalid region set using the invalid regions of all change nodes;

[0009] Optimizing the original invalid region set to generate a minimum rendering dirty area;

[0010] Matching the minimum rendering dirty area in a preset cache to determine an unmatched minimum rendering dirty area that cannot be matched;

[0011] Obtaining device performance and interaction scenarios, and determining an optimal rendering strategy according to the device performance and interaction scenarios;

[0012] render the unmatched minimum rendering dirty area according to the optimal rendering strategy.

[0013] Optionally, when the CSS style change event invalidates the layout, the step of determining the change node according to the change attribute comprises:

[0014] When the CSS style change event invalidates the layout, the potential impact range of the change attribute is calculated.

[0015] The potential impact elements in the potential impact range are determined as the change node.

[0016] Optionally, the step of calculating the potential impact range of the change attribute comprises:

[0017] It is judged whether the change attribute is inheritable.

[0018] If yes, all inherited elements inheriting the change attribute are obtained.

[0019] It is judged whether the change attribute affects the layering context.

[0020] If yes, the layering context is queried, and all in-line elements in the layering context are marked.

[0021] The inherited elements and the in-line elements are merged to obtain the potential impact range of the change attribute.

[0022] Optionally, the step of calculating the invalid area of the change node and generating the original invalid area set by using the invalid areas of all change nodes comprises:

[0023] The dependent nodes of the change node are obtained through an element layout dependency graph.

[0024] The actual impact area of the change node in the current viewport is calculated in combination with the dependent nodes, and the actual impact area is determined as the invalid area of the change node.

[0025] The original invalid area set is generated by using the invalid areas of all change nodes.

[0026] Optionally, the step of calculating the actual impact area of the change node in the current viewport in combination with the dependent nodes and determining the actual impact area as the invalid area of the change node comprises:

[0027] The layout bounding box of the change node before the change is obtained, and the first associated node overlapping or adjacent to the layout bounding box is queried through a spatial index.

[0028] determining a first affected node of the change node in the first associated node according to a layout type in which the change node is located, and adding the first affected node to an affected node set;

[0029] obtaining a second associated node of the dependent node;

[0030] judging whether the second associated node is affected by the dependent node;

[0031] if yes, generating a second affected node, adding the second affected node to the affected node set, and obtaining a dependent node of the dependent node, and returning to the step of obtaining the second associated node of the dependent node;

[0032] if no, generating an invalid region of the change node by using the change node, the dependent node and the affected node set.

[0033] Optionally, the step of optimizing the original invalid region set to generate a minimum rendering dirty region comprises:

[0034] obtaining longitudinal coordinates of all invalid regions, and sorting all invalid regions according to the longitudinal coordinates;

[0035] taking the invalid region with the highest sorting order as a starting region;

[0036] obtaining an invalid region as an analysis region according to the sorting;

[0037] judging whether the analysis region is adjacent to or overlaps with the starting region;

[0038] if yes, merging the starting region and the analysis region to obtain a merged region, taking the merged region as the starting region, obtaining a next invalid region as the analysis region according to the sorting, and returning to the step of judging whether the analysis region is adjacent to or overlaps with the starting region;

[0039] if no, obtaining a next invalid region as the analysis region according to the sorting, and returning to the step of judging whether the analysis region is adjacent to or overlaps with the starting region;

[0040] when all invalid regions are traversed according to the sorting, determining a starting region in an invalid region that cannot be merged, and returning to the step of obtaining an invalid region as an analysis region according to the sorting, until any invalid region cannot participate in merging;

[0041] respectively taking each merged region and all invalid regions that cannot participate in merging as an optimized invalid region;

[0042] clipping the optimized invalid region to obtain a minimum rendering dirty region.

[0043] The application further provides a device for rendering an invalid region, comprising:

[0044] a change attribute extraction module, configured to listen to a CSS style change event and extract a change attribute;

[0045] a change node determination module, configured to determine a change node according to the change attribute when the CSS style change event triggers layout invalidation;

[0046] an original invalid region set generation module, configured to calculate an invalid region of the change node and generate an original invalid region set by using invalid regions of all change nodes;

[0047] a minimum rendering dirty area generation module, configured to optimize the original invalid region set and generate a minimum rendering dirty area;

[0048] a matching module, configured to match the minimum rendering dirty area in a preset cache and determine an unmatched minimum rendering dirty area which cannot be matched;

[0049] an optimal rendering strategy determination module, configured to acquire device performance and an interaction scene and determine an optimal rendering strategy according to the device performance and the interaction scene;

[0050] a rendering module, configured to render the unmatched minimum rendering dirty area by using the optimal rendering strategy.

[0051] Optionally, the change node determination module comprises:

[0052] a potential influence range calculation submodule, configured to calculate a potential influence range of the change attribute when the CSS style change event triggers layout invalidation;

[0053] a change node determination submodule, configured to determine a potential influence element in the potential influence range and determine the potential influence element as a change node.

[0054] The application further provides an electronic device, which comprises a processor and a memory:

[0055] The memory is configured to store program code and transmit the program code to the processor;

[0056] The processor is configured to execute the invalid region rendering method according to the instructions in the program code.

[0057] The application further provides a computer readable storage medium, which is configured to store program code, and the program code is configured to execute the invalid region rendering method.

[0058] From the above technical solution can be seen, the present application has the following advantages: the present application by listening to CSS style change event, and extract the change attribute; when CSS style change event trigger layout invalidation, according to the change attribute determine the change node; calculate the invalid area of the change node, and use all the invalid area of the change node to generate the original invalid area set; the original invalid area set is optimized, the minimum rendering dirty area is generated; to improve the invalid area detection accuracy, and reduce unnecessary layout calculation and rendering operation. The present application also matches the minimum rendering dirty area in the preset cache, determines the unmatched minimum rendering dirty area which can not be matched; obtain the device performance and interactive scene, and determine the optimal rendering strategy according to the device performance and interactive scene; the optimal rendering strategy is used to render the unmatched minimum rendering dirty area, so as to reduce the memory and load burden, realize the reasonable allocation of resources. BRIEF DESCRIPTION OF DRAWINGS

[0059] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the drawings needed to be used in the embodiments or the prior art description. Obviously, the drawings in the following description are only some embodiments of the present application, and for those skilled in the art, other drawings can also be obtained without creative labor.

[0060] Figure 1 A step flow chart of an invalid area rendering method provided by the embodiment of the present application is provided.

[0061] Figure 2 A structure block diagram of an invalid area rendering device provided by the embodiment of the present application is provided. DETAILED DESCRIPTION

[0062] The embodiment of the present application provides an invalid area rendering method, device, electronic equipment and storage medium, which is used to solve the technical problems of insufficient invalid area detection accuracy, large performance overhead and serious resource waste of the existing rendering scheme when the style is changed.

[0063] In order to make the invention purpose, features and advantages of the present application more obvious and easy to understand, the technical solutions in the embodiments of the present application will be described clearly and completely in the following with reference to the drawings in the embodiments of the present application. Obviously, the following described embodiments are only some embodiments of the present application, not all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative labor are within the scope of protection of the present application.

[0064] Please refer to Figure 1 , Figure 1 A step flow chart of an invalid area rendering method provided by the embodiment of the present application is provided.

[0065] The application provides a method for rendering an invalid region, which can specifically include the following steps.

[0066] In step 101, a CSS style change event is listened to, and a changed attribute is extracted.

[0067] In the embodiment of the application, the CSS style change event can be tracked and analyzed according to the changed attribute, the action element and the priority information. The system can record the old value and the new value of each style attribute by intercepting the browser style recalculation process, and mark the change type.

[0068] In step 102, when the CSS style change event triggers the layout invalidation, a changed node is determined according to the changed attribute.

[0069] In the embodiment of the application, when the CSS style change event triggers the layout invalidation, the changed node can be determined according to the changed attribute.

[0070] In one example, step 102 can include the following sub-steps:

[0071] In step S21, when the CSS style change event triggers the layout invalidation, the potential influence range of the changed attribute is calculated.

[0072] In the embodiment of the application, the potential influence range of the changed attribute can be calculated by the style change tracking and influence analyzer.

[0073] In one example, the step of calculating the potential influence range of the changed attribute can include the following sub-steps:

[0074] In step S211, it is judged whether the changed attribute is inheritable.

[0075] In step S212, if yes, all the inherited elements of the changed attribute are acquired.

[0076] In step S213, it is judged whether the changed attribute influences the layering context.

[0077] In step S214, if yes, the layering context is queried, and all the in-document elements in the layering context are marked.

[0078] In step S215, the inherited elements and the in-document elements are merged to obtain the potential influence range of the changed attribute.

[0079] In the specific implementation, the potential influence range of the changed attribute can be calculated based on the style inheritance rule and the layering context model, and the specific process is as follows:

[0080] Input: style change event (including changed attribute, target element, old value / new value).

[0081] Inheritance analysis: If the property is inheritable, traverse the DOM subtree and mark all inherited elements.

[0082] Stack context analysis: If the property affects the stacking context, query the stacking context tree and mark all in-context elements.

[0083] Merge the results of inheritance analysis and stacking context analysis to generate a preliminary potential impact range.

[0084] Output: A list of potentially impacted elements for subsequent layout dependency analysis.

[0085] In addition, for global properties such as font size or color, all affected descendants can be identified by traversing the style propagation tree.

[0086] For local properties such as width or margin, the potential impact range can also be determined in combination with selector specificity and element position.

[0087] In one example, a CSS rule.container.item { width: 100px;} is changed to.container.item { width: 200px;}. The system first matches all elements with class="item" and located within class="container" through selector specificity. Then, for each matching element, analyze its layout context: if.container is a Flex container, the width change may affect the layout of other items in the same row, and the system will mark these sibling elements as potential impact range.

[0088] S22, determine the potential impact element in the potential impact range, and determine the potential impact element as the change node.

[0089] In a specific implementation, after obtaining the potential impact range, the elements in the potential impact range can be determined as the change layout node.

[0090] Step 103, calculate the invalid area of the change node, and generate the original invalid area set by using all invalid areas of the change node;

[0091] In the embodiment of the application, after the change node is determined, the invalid area of the change node can be calculated, and the original invalid area set is generated by using all invalid areas.

[0092] In one example, step 103 can include the following sub-steps:

[0093] S31, obtain the dependent node of the change node through the element layout dependency graph;

[0094] In the embodiments of the present application, the element layout dependency graph can be constructed based on the LayoutNG layout engine, and the geometric properties, relative positions and dependency relationships of each layout node are recorded. When the style change triggers the layout invalidation, the system parses the direct and indirect dependency nodes of the change node through the dependency graph, including the sibling elements associated through Flexbox / Grid layout, the external elements affected through floating or positioning, etc.

[0095] In S32, the actual influence area of the change node in the current viewport is calculated in combination with the dependency nodes, and the actual influence area is determined as the invalid area of the change node.

[0096] In the embodiments of the present application, the geometric overlap detection and layout flow analysis algorithm can be used to calculate the actual influence area of the change node in the viewport.

[0097] In one example, S32 can include the following sub-steps:

[0098] In S321, the layout bounding box of the change node before the change is obtained, and the first associated node overlapping or adjacent to the layout bounding box is queried through spatial indexing.

[0099] In S322, the first affected node of the change node is determined in the first associated node according to the layout type in which the change node is located, and the first affected node is added to the influence node set.

[0100] In S323, the second associated node of the dependency node is obtained.

[0101] In S324, it is judged whether the second associated node is affected by the dependency node.

[0102] In S325, if yes, the second affected node is generated, the second affected node is added to the influence node set, the dependency node of the dependency node is obtained, and the step of obtaining the second associated node of the dependency node is returned.

[0103] In S326, if no, the invalid area of the change node is generated using the change node, the dependency node and the affected node set.

[0104] In a specific implementation, first, the layout bounding box (i.e. the geometric area before the change) of the change node can be obtained from the layout dependency graph. Then, the overlapping / adjacent nodes are queried through spatial indexing, and the affected overlapping / adjacent nodes are determined by analyzing the layout flow:

[0105] Flow layout: the increase of the height of the change node can cause the subsequent nodes to move down, and the system will mark these subsequent nodes as potential influences.

[0106] Flexbox Layout: Depending on the main axis direction, changing the size of a node may compress or expand other items. The system calculates the remaining space of the Flex container and redistributes the item positions.

[0107] Grid Layout: Changing a node may affect the size of the grid tracks, which in turn affects other nodes on the same track. The system resolves the impact range through grid dependencies.

[0108] Float Layout: Changing a node may affect the float flow, causing surrounding elements to rewrap.

[0109] Finally, through the layout dependency graph, recursively check if the dependent nodes further affect other nodes until there are no new changes or a threshold is reached.

[0110] In another example, for complex layouts like multi-column flow or CSS Shapes, a contour can be approximated to a convex hull calculation to estimate the minimum bounding box of the invalid area. The process is as follows:

[0111] Contour Extraction: First, the system obtains the geometric contour of the changed element from the layout engine. For irregular shapes (defined by clip-path or shape-outside), the contour consists of a series of boundary points. The system generates a set of dense contour point coordinates by sampling or parsing CSS shape parameters. For example, for a circular shape, the system may sample multiple points to approximate the circumference; for a polygon, the vertex coordinates are used directly.

[0112] Convex Hull Calculation: Use the convex hull algorithm (Graham's scan) to process the contour point set to find the smallest convex polygon that can contain all points.

[0113] Graham's Scan Steps:

[0114] Find the point with the smallest y-coordinate in the set (as the reference point).

[0115] Sort the other points by polar angle.

[0116] Iterate through the sorted points and use a stack to maintain the convex hull points: if the current point forms a clockwise rotation with the top two points on the stack, pop the top point; otherwise, push the current point.

[0117] After convex hull calculation, output a convex polygon that simplifies the complexity of the original shape.

[0118] Minimum Bounding Box Estimation: The system calculates the minimum bounding rectangle (Axis-Aligned BoundingBox, AABB) based on the convex hull vertices. The AABB is the smallest rectangle parallel to the coordinate axes that can completely contain the convex hull, which is the invalid area of the changed node.

[0119] In one example, assuming that one element uses shape-outside: circle(50%), when the style is changed, the system extracts the circular contour points, calculates the convex hull (approximated as a circle), and then generates an AABB as the invalid region. This ensures that the rendering engine only updates the relevant region, avoiding full-element redrawing.

[0120] S33, generating the original invalid region set by using the invalid regions of all the change nodes.

[0121] After the invalid region calculation of each change node is completed, all the invalid regions are integrated to generate the original invalid region set.

[0122] Step 104, optimizing the original invalid region set to generate the minimum rendering dirty area;

[0123] In one example, step 104 can include the following sub-steps:

[0124] S41, obtaining the longitudinal coordinates of all the invalid regions and sorting all the invalid regions according to the longitudinal coordinates;

[0125] S42, taking the invalid region with the highest sorting priority as the starting region;

[0126] S43, obtaining the invalid region according to the sorting as the region to be analyzed;

[0127] S44, judging whether the region to be analyzed is adjacent to or overlaps with the starting region;

[0128] S45, if yes, merging the starting region and the region to be analyzed to obtain a merged region, taking the merged region as the starting region, obtaining the next invalid region according to the sorting as the region to be analyzed, and returning to the step of judging whether the region to be analyzed is adjacent to or overlaps with the starting region;

[0129] S46, if no, obtaining the next invalid region according to the sorting as the region to be analyzed, and returning to the step of judging whether the region to be analyzed is adjacent to or overlaps with the starting region;

[0130] S47, when all the invalid regions are traversed according to the sorting, determining the starting region in the invalid regions that are not merged, and returning to the step of obtaining the invalid region according to the sorting as the region to be analyzed, until any invalid region cannot participate in the merging;

[0131] S48, respectively taking each merged region and all the invalid regions that cannot participate in the merging as the optimized invalid region;

[0132] In the embodiment of the present application, a rectangular merging algorithm can be used to merge the invalid regions that are adjacent or overlapping in space into larger rectangles, thereby reducing the number of rendering instructions.

[0133] In one example, assume there are four invalid rectangles with the following coordinates (format as [left, top, right, bottom]):

[0134] R1: [10, 10, 50, 30];

[0135] R2: [55, 10, 95, 30] (same horizontal line as R1, adjacent);

[0136] R3: [10, 35, 50, 55] (directly below R1);

[0137] R4: [70, 40, 90, 60];

[0138] After sorting: list order is R1, R2, R3, R4.

[0139] Scan and merge R1:

[0140] Scan to R2: Y-axis projection overlap (top and bottom are the same), X-axis adjacent (R2.left=55 ≈ R1.right=50). Can be merged.

[0141] Merge R1 and R2, get new rectangle [10, 10, 95, 30].

[0142] Scan to R3: Y-axis adjacent (R3.top=35 ≈ current rectangle's bottom=30), X-axis has overlap. Can be merged.

[0143] After merging, get [10, 10, 95, 55].

[0144] Scan R4: Y-axis has overlap, but X-axis is not adjacent (R4.left=70 > current rectangle.right=95? No, 70<95, but R4.right=90<95, actually R4 is inside or below the merged rectangle? Here we need to check: R4.top=40 < current rectangle's bottom=55, and R4.bottom=60>55, so Y-axis has overlap. X-axis R4 is in [70,90], current rectangle is in [10,95], there is overlap. So R4 is actually contained in the current expanded rectangle). In this example, after several mergers, R4 may have been covered by a larger rectangle.

[0145] Region merging can significantly reduce the number of rendering instructions.

[0146] S49, clip the optimized invalid region to get the minimum rendering dirty area.

[0147] After obtaining the invalid optimization region, the invalid region can be cropped by the clipper viewport range and element visibility. Specifically, the overlapping part of the invalid region and the viewport can be calculated by intersection detection, and the completely invisible region can be removed. For partially visible regions, the clipper uses a polygon clipping algorithm to generate accurate dirty area shapes in combination with element clipping attributes such as overflow hiding or clipping paths. Hierarchical clipping is supported. When a parent element has a clipping context, the invalid region of the child element is automatically mapped to the parent coordinate system and clipped to ensure correct rendering.

[0148] Step 105, match the minimum rendering dirty area in the preset cache to determine the unmatched minimum rendering dirty area that cannot be matched;

[0149] Step 106, obtain device performance and interactive scenarios, and determine the optimal rendering strategy according to the device performance and interactive scenarios;

[0150] Step 107, render the unmatched minimum rendering dirty area using the optimal rendering strategy.

[0151] According to the device performance and interactive scenarios, the rendering parameters are dynamically adjusted. The system collects the GPU capability, memory size and current load of the device through the performance probe, and selects the optimal rendering strategy in combination with the interactive type such as scrolling, animation or user input. The scheduler has multiple sets of rendering plans built-in, such as enabling parallel rendering and pre-computation in high-performance mode, and limiting rendering frequency and cache size in energy-saving mode. For scrolling operations, the system enables scrolling dirty area prediction to pre-render the area about to enter the viewport based on the scrolling speed and direction; for animation, the system uses time slicing and frame rate control to ensure smoothness and resource balance. Dynamic degradation is supported. When frame rate drops or memory overflow is detected, the system automatically switches to a more conservative rendering strategy, such as merging more areas or skipping non-critical updates.

[0152] Further, in the embodiments of the present application, the event serialization can also be changed to ensure that style changes precede layout change processing, and the processing order is based on timestamps and priorities. The fusion processor detects overlapping areas of style and layout changes. When style changes only affect rendering and not layout, the system skips layout rearrangement and directly marks the redraw area. When layout changes involve multiple style attributes, the processor combines related changes into one batch update unit to reduce the number of engine calls. In addition, component integration change conflict resolution resolves layout jitter caused by concurrent updates through version control and transaction mechanisms to ensure data consistency and discard low-priority changes based on rendering priorities.

[0153] Wherein, the change conflict refers to multiple style or layout updates occurring simultaneously in a concurrent environment, resulting in inconsistent rendering states or layout jitter.

[0154] The process of ensuring data consistency through version control and transaction mechanisms is as follows:

[0155] Versioning: Each style or layout change is assigned a unique version number (e.g., timestamp or sequence number). The system maintains a global version state that records the current rendering version. When a change occurs, the version number is incremented. The system compares the changed version with the current version, ensuring that only new version changes are processed, and old changes are discarded or merged.

[0156] Transaction mechanism: Multiple related changes are packaged into a transaction. The transaction has atomicity: either all are applied, or all are rolled back.

[0157] Transaction start: The system creates a transaction context that records the initial state.

[0158] Change collection: Within the transaction, all style and layout changes are cached without immediate application.

[0159] Conflict detection: When the transaction is committed, the system checks for conflicts between changes (e.g., modifying the same property). Conflicts are resolved by priority rules (e.g., later occurrence takes precedence) or property dependencies.

[0160] Batch processing: Changes within the transaction are combined into a batch update unit, which is applied to the underlying rendering engine at once. This reduces intermediate state rearrangement and repainting.

[0161] Commit or rollback: If conflicts cannot be resolved, the transaction is rolled back to the initial state; otherwise, the changes are committed, and the global version is updated.

[0162] Further, in embodiments of the present application, a declarative JavaScript interface can also be provided, allowing developers to define rendering optimization rules through configuration objects. Developers can specify element rendering priority, cache strategy, invalid region detection precision, and other parameters, which are automatically integrated into the optimization process by the system. Monitoring interfaces expose rendering performance indicators in real time, such as invalid region quantity, rendering time consumption, and cache hit rate, and notify developers of key performance events through event callbacks. Rendering strategy hot reloading is supported, allowing runtime adjustments to configurations without refreshing the page.

[0163] Further, in embodiments of the present application, through weak reference and dependency tracking, the cache can be associated with the corresponding DOM element, and automatically released when the element is unloaded or the style is reset. The resource recycler cooperates with the browser garbage collection, periodically cleaning up rendering resources that are not referenced, and uses FinalizationRegistry to register cleanup callbacks to ensure timely memory release. The lifecycle manager also supports rendering state serialization, saving the rendering context when the application is suspended or running in the background, and quickly rebuilding when it is restored, improving user experience consistency.

[0164] In this embodiment of the invention, feature detection can also identify the browser's support for LayoutNG and style invalidation, and automatically fill in or simulate missing functions. A unified rendering scheduler coordinates the rendering sequence on different platforms to ensure consistent rendering behavior across web, mobile, and embedded environments. The scheduler also integrates a standards compatibility layer to convert optimized rendering instructions into native engine calls, avoiding behavioral differences.

[0165] This invention improves invalid region detection accuracy and reduces unnecessary layout calculations and rendering operations by listening to CSS style change events and extracting changed attributes; when a CSS style change event triggers layout invalidation, it determines the changed node based on the changed attributes; calculates the invalid region of the changed node and generates an original invalid region set using the invalid regions of all changed nodes; and optimizes the original invalid region set to generate a minimum rendering dirty region. This invention also identifies unmatched minimum rendering dirty regions by matching them in a preset cache; it acquires device performance and interaction scenarios and determines the optimal rendering strategy based on these factors; and it renders the unmatched minimum rendering dirty regions using the optimal rendering strategy, thereby reducing memory and load burden and achieving reasonable resource allocation.

[0166] Please see Figure 2 , Figure 2 This is a structural block diagram of an invalid region rendering device provided in an embodiment of the present invention.

[0167] This invention provides an invalid region rendering apparatus, comprising:

[0168] The property change extraction module 201 is used to listen for CSS style change events and extract the changed properties;

[0169] The change node determination module 202 is used to determine the change node based on the changed attributes when a CSS style change event triggers layout invalidation.

[0170] The original invalid region set generation module 203 is used to calculate the invalid regions of the changed nodes and generate the original invalid region set using the invalid regions of all changed nodes;

[0171] Minimum rendering dirty region generation module 204 is used to optimize the original invalid region set and generate the minimum rendering dirty region;

[0172] Matching module 205 is used to match the minimum dirty rendering region in the preset cache and identify the unmatched minimum dirty rendering region that cannot be matched.

[0173] The optimal rendering strategy determination module 206 is used to obtain device performance and interaction scenario, and determine the optimal rendering strategy based on device performance and interaction scenario;

[0174] Rendering module 207 is used to render the unmatched minimum dirty region using the optimal rendering strategy.

[0175] In this embodiment of the invention, the change node determination module 202 includes:

[0176] The potential impact range calculation submodule is used to calculate the potential impact range of the changed properties when a CSS style change event triggers layout invalidation.

[0177] The Change Node Determination Submodule is used to identify potential impact elements within the potential impact range and to determine these potential impact elements as change nodes.

[0178] In this embodiment of the invention, the potential impact range calculation submodule includes:

[0179] The inheritability check unit is used to determine whether a changed attribute is inheritable.

[0180] The inherited element retrieval unit is used to retrieve all inherited elements with modified inherited attributes if the condition is met.

[0181] The stacking context impact judgment unit is used to determine whether changing attributes affects the stacking context.

[0182] In-text element marker unit, used if, to query the overlay context, to mark all in-text elements within the overlay context;

[0183] Merge unit, used to merge inherited elements and in-text elements to obtain the potential scope of impact of changed attributes.

[0184] In this embodiment of the invention, the original invalid region set generation module 203 includes:

[0185] The dependency node retrieval submodule is used to retrieve the dependency nodes of the changed node through the element layout dependency graph;

[0186] The invalid region determination submodule is used to calculate the actual impact area of ​​the changed node within the current viewport by combining the dependent nodes, and to determine the actual impact area as the invalid region of the changed node;

[0187] The Original Invalid Region Set Generation Submodule is used to generate an original invalid region set from the invalid regions of all changed nodes.

[0188] In this embodiment of the invention, the invalid region determination submodule includes:

[0189] The first associated node acquisition unit is used to acquire the layout bounding box of the changed node before the change, and query the first associated node that overlaps or is adjacent to the layout bounding box through spatial index.

[0190] The first affected node determination unit is used to determine the first affected node of the changed node based on the layout type of the changed node in the first associated node, and add the first affected node to the set of affected nodes;

[0191] The second associated node acquisition unit is used to acquire the second associated node of the dependent node;

[0192] The influence judgment unit is used to determine whether the second associated node is affected by the dependent node;

[0193] The first return unit is used to generate a second affected node if the condition is met, add the second affected node to the set of affected nodes, obtain the dependent nodes of the dependent nodes, and return the step of obtaining the second associated node of the dependent nodes.

[0194] The invalid region generation unit is used to generate an invalid region for the changed node if no, by using the set of changed nodes, dependent nodes, and affected nodes.

[0195] In this embodiment of the invention, the minimum rendering dirty region generation module 204 includes:

[0196] The sorting submodule is used to obtain the ordinates of all invalid regions and sort them according to their ordinates.

[0197] The starting region determination submodule is used to select the first invalid region as the starting region.

[0198] The submodule for obtaining the region to be analyzed is used to obtain invalid regions as regions to be analyzed by sorting them.

[0199] The adjacent or overlapping judgment submodule is used to determine whether the region to be analyzed is adjacent or overlaps with the starting region;

[0200] The first return submodule is used to merge the starting region and the region to be analyzed if the condition is met, obtain the merged region, use the merged region as the starting region, obtain the next invalid region as the region to be analyzed according to the sorting, and return the step of determining whether the region to be analyzed is adjacent or overlapped with the starting region.

[0201] The second return submodule is used to, if not, obtain the next invalid region as the region to be analyzed in sorted order, and return the step of determining whether the region to be analyzed is adjacent or overlapped with the starting region;

[0202] The third return submodule is used to determine the starting region among the unmerged invalid regions after all invalid regions have been traversed in sorted order, and return the steps of obtaining invalid regions as regions to be analyzed in sorted order, until no invalid region can participate in merging.

[0203] The optimization invalid region acquisition submodule is used to select each merged region and all invalid regions that cannot participate in merging as optimized invalid regions respectively;

[0204] The pruning submodule is used to prune invalid areas for optimization, resulting in the smallest dirty rendering area.

[0205] This invention also provides an electronic device, which includes a processor and a memory:

[0206] The memory is used to store program code and transfer the program code to the processor;

[0207] The processor is used to execute the invalid region rendering method of this invention according to the instructions in the program code.

[0208] This invention also provides a computer-readable storage medium for storing program code for executing the invalid region rendering method of this invention.

[0209] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0210] 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.

[0211] Those skilled in the art will understand that embodiments of the present invention can be provided as methods, apparatus, or computer program products. Therefore, embodiments of the present invention can take the form of entirely hardware embodiments, entirely software embodiments, or embodiments combining software and hardware aspects. Furthermore, embodiments of the present invention can take the form of computer program products implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0212] Embodiments of the present invention are described with reference to flowchart illustrations and / or block diagrams of methods, terminal devices (systems), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing terminal device to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing terminal device, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0213] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing terminal device to operate in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0214] These computer program instructions can also be loaded onto a computer or other programmable data processing terminal equipment, causing a series of operational steps to be performed on the computer or other programmable terminal equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable terminal equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0215] Although preferred embodiments of the present invention have been described, those skilled in the art, upon learning the basic inventive concept, can make other changes and modifications to these embodiments. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments as well as all changes and modifications falling within the scope of the embodiments of the present invention.

[0216] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties. Furthermore, the collection, use and processing of the relevant data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and corresponding operation entry points are provided for users to choose to authorize or refuse.

[0217] 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 terminal device 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 terminal device. 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 terminal device that includes said element.

[0218] The above-described embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for rendering invalid regions, characterized in that, include: Listen for CSS style change events and extract the changed properties; When the CSS style change event triggers layout invalidation, the change node is determined based on the changed attribute; Calculate the invalid regions of the changed nodes, and generate an original set of invalid regions using the invalid regions of all changed nodes; The original set of invalid regions is optimized to generate a minimum dirty rendering region; Match the minimum dirty region in the preset cache, and determine the unmatched minimum dirty region that cannot be matched; Obtain device performance and interaction scenarios, and determine the optimal rendering strategy based on the device performance and interaction scenarios; The optimal rendering strategy is used to render the unmatched minimum dirty region.

2. The method according to claim 1, characterized in that, When the CSS style change event triggers layout invalidation, the step of determining the changed node based on the changed attribute includes: When the CSS style change event triggers layout invalidation, calculate the potential impact range of the changed property; Within the scope of potential influence, identify potential influence elements and designate them as change nodes.

3. The method according to claim 2, characterized in that, The step of calculating the potential scope of impact of the changed attribute includes: Determine whether the changed attribute is inheritable; If so, retrieve all inheriting elements that inherit the changed attribute; Determine whether the changed attribute affects the stacking context; If so, query the overlay context and mark all text elements within that overlay context; By merging the inherited element and the text element, the potential scope of influence of the changed attribute is obtained.

4. The method according to claim 1, characterized in that, The step of calculating the invalid regions of the changed nodes and generating an original set of invalid regions using the invalid regions of all changed nodes includes: The dependent nodes of the changed node are obtained through the element layout dependency graph; The actual influence area of ​​the changed node within the current viewport is calculated based on the dependent nodes, and the actual influence area is determined as the invalid area of ​​the changed node; The original set of invalid regions is generated using the invalid regions of all changed nodes.

5. The method according to claim 4, characterized in that, The step of calculating the actual influence area of ​​the changed node within the current viewport by combining the dependent nodes, and determining the actual influence area as the invalid area of ​​the changed node, includes: Obtain the layout bounding box of the changed node before the change, and query the first associated node that overlaps with or is adjacent to the layout bounding box through spatial index; Based on the layout type of the changed node, the first affected node of the changed node is determined in the first associated node, and the first affected node is added to the set of affected nodes; Obtain the second associated node of the dependent node; Determine whether the second associated node is affected by the dependent node; If so, generate a second affected node, add the second affected node to the set of affected nodes, obtain the dependent nodes of the dependent node, and return to the step of obtaining the second associated node of the dependent node; If not, the invalid region of the changed node is generated using the changed node, the dependent node, and the set of affected nodes.

6. The method according to claim 1, characterized in that, The step of optimizing the original set of invalid regions to generate the minimum dirty rendering region includes: Get the y-coordinates of all invalid regions and sort them according to their y-coordinates; Use the first invalid region as the starting region; Invalid regions are sorted and selected as regions to be analyzed. Determine whether the region to be analyzed is adjacent to or overlaps with the starting region; If so, merge the starting region and the region to be analyzed to obtain a merged region, and use the merged region as the starting region. Obtain the next invalid region as the region to be analyzed according to the sorting, and return to the step of determining whether the region to be analyzed is adjacent or overlaps with the starting region. If not, obtain the next invalid region as the region to be analyzed according to the sorting, and return to the step of determining whether the region to be analyzed is adjacent or overlaps with the starting region; After traversing all invalid regions in sorted order, determine the starting region among the unmerged invalid regions and return to the step of obtaining invalid regions as regions to be analyzed in sorted order, until no invalid region can participate in merging. Each of the merged regions and all invalid regions that cannot participate in the merge are respectively regarded as invalid regions for optimization; The optimized invalid region is clipped to obtain the minimum dirty rendering region.

7. An apparatus for rendering invalid regions, characterized in that, include: The property change extraction module is used to listen for CSS style change events and extract the changed properties; The change node determination module is used to determine the change node based on the change attribute when the CSS style change event triggers layout invalidation. The original invalid region set generation module is used to calculate the invalid regions of the changed nodes and generate an original invalid region set using the invalid regions of all changed nodes; The minimum rendering dirty region generation module is used to optimize the original set of invalid regions and generate the minimum rendering dirty region. The matching module is used to match the minimum dirty rendering region in the preset cache and determine the unmatched minimum dirty rendering regions that cannot be matched. The optimal rendering strategy determination module is used to obtain device performance and interaction scenario, and determine the optimal rendering strategy based on the device performance and interaction scenario. The rendering module is used to render the unmatched minimum dirty rendering region using the optimal rendering strategy.

8. The apparatus according to claim 7, characterized in that, The change node determination module includes: The potential impact range calculation submodule is used to calculate the potential impact range of the changed attribute when the CSS style change event triggers layout invalidation; The change node determination submodule is used to determine potential impact elements within the potential impact range and to determine the potential impact elements as change nodes.

9. An electronic device, characterized in that, The device includes a processor and a memory: The memory is used to store program code and transmit the program code to the processor; The processor is configured to execute the invalid region rendering method according to any one of claims 1-7 according to the instructions in the program code.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium is used to store program code for executing the invalid region rendering method according to any one of claims 1-7.

Images