A virtual DOM-based human-computer interaction component rendering method, device and medium

Abstract

The application discloses a kind of based on virtual DOM human-computer interaction component rendering method, equipment and medium, it is related to front end rendering technical field, including, according to the adding operation of target human-computer interaction component Generation component loading instruction, and the virtual DOM template of target component is fragmented and marked, and virtual DOM fragment tree is generated;Based on virtual DOM fragment tree creates shared cache area and completes off-screen rendering, extracts interactive fragment area and differential bypass update relationship, generates cache view package;The view container node in the view container node in target page virtual DOM tree is associated to cache view package, and the user trigger position in view container is positioned by interactive area index, and generates interactive batch record.The application forms continuous chain with interaction positioning, differential bypass and shared cache area local modification, is conducive to reducing repeated rendering overhead, and improve the state consistency of human-computer interaction component in reuse, pause, recovery and release process.

Description

Technical Field

[0001] This invention relates to the field of front-end rendering technology, and in particular to a method, device and medium for rendering human-computer interaction components based on virtual DOM. Background Technology

[0002] With the component-based development of web front-ends, mobile pages, and mini-program interfaces, the virtual DOM has gradually become a common intermediate representation in the rendering of human-computer interaction components. Related technologies typically generate a virtual DOM tree through component templates, style files, and event binding relationships. The rendering framework then performs differential comparisons, node updates, and page compositing on the virtual DOM tree. For target human-computer interaction components such as buttons, cards, widgets, pop-ups, and list items, existing page frameworks generally use the complete component subtree as the rendering unit, uniformly incorporating display content, event entry points, and state changes into the target page's virtual DOM tree management, and triggering component state updates after user interactions such as clicks, long presses, swipes, and focus switching.

[0003] In existing virtual DOM interactive component rendering methods, static display content, interactive areas, and state update content are typically coupled within the same complete virtual DOM subtree. When the target human-computer interaction component experiences frequent triggering, partial content changes, repeated additions, and page occlusion, the target page still needs to maintain a large number of virtual DOM nodes and is prone to repeatedly executing virtual DOM differentiation, event hitting, and page composition during partial display updates. While some caching rendering methods can reduce the burden of display repainting, the lack of a unified correspondence between cached views and interactive areas, update fragments, and event entry points makes it difficult to coordinate cached display with user trigger positioning, partial updates, and lifecycle management. This is especially true in scenarios where only text, icons, display states, or event entry points are changed without altering the node hierarchy, making it difficult to directly form a local modification path to the shared cache area. Summary of the Invention

[0004] In view of the aforementioned existing problems, the present invention is proposed.

[0005] Therefore, this invention provides a rendering method for human-computer interaction components based on virtual DOM to solve the problem of difficulty in coordinating full-tree difference and cached display when virtual DOM interaction components are frequently updated.

[0006] To solve the above-mentioned technical problems, the present invention provides the following technical solution: In a first aspect, the present invention provides a method for rendering human-computer interaction components based on a virtual DOM, comprising, Based on the addition operation of the target human-computer interaction component, a component loading instruction is generated, and the virtual DOM template of the target component is segmented and marked to generate a virtual DOM segment tree; A shared cache area is created based on the virtual DOM fragment tree and off-screen rendering is completed. Interactive fragment areas and differential bypass update relationships are extracted to generate a cached view package. The cached view package is associated with the view container node in the virtual DOM tree of the target page, and the user trigger position within the view container is located by the interaction area index to generate an interaction batch record. Based on the interactive batch records, query the bypass update table, extract the update fragment identifier, drawing area, resource reference position and event entry from the differential bypass records, locate the target area of ​​the shared cache and match the replacement content, and generate a local modification record of the shared cache. By maintaining the display, reuse, pause, resume, and release states of view container nodes through local modification records in the shared cache, the rendering results of interactive components are generated.

[0007] As a preferred embodiment of the virtual DOM-based human-computer interaction component rendering method of the present invention, the step of generating component loading instructions based on the addition operation of the target human-computer interaction component specifically includes: Analyze the addition operation of the target human-computer interaction component, extract the component identifier, style identifier, display size and page position of the target component, and generate component positioning parameters; The component positioning parameters are used to determine the display range of the target component on the target page and the source of the component style, and a component loading instruction is generated.

[0008] As a preferred embodiment of the human-computer interaction component rendering method based on virtual DOM described in this invention, the generation of the virtual DOM fragment tree specifically includes: The component loading directive is invoked to determine the virtual DOM template, style file, and event binding relationships of the target component, and to generate the template parsing results; Based on the event entry points and display content determination rules in the template parsing results, the virtual DOM template of the target component is divided into static fragments, interactive fragments, and update fragments, generating a set of virtual DOM fragments; The static fragments, interactive fragments, and update fragments in the virtual DOM fragment set are marked with compilation flags, and the update fragments that do not change the node hierarchy are marked with differential bypass flags. A set of flagged fragments is generated, and the parent-child relationship, hierarchy relationship, and style inheritance relationship in the set of flagged fragments are preserved to generate a virtual DOM fragment tree.

[0009] As a preferred embodiment of the human-computer interaction component rendering method based on virtual DOM described in this invention, the generation of the cached view package specifically includes: A shared buffer is created according to the display size corresponding to the virtual DOM fragment tree, and the shared buffer is determined as the off-screen drawing target, generating a buffer drawing environment and a shared buffer handle; The cached rendering environment is used to render the visual content of static and interactive fragments in the order of fragment hierarchy, generating a cached view; When drawing static fragments, the static fragment region and hierarchical position are extracted simultaneously to generate a static fragment drawing index. When drawing interactive fragments, the interactive fragment region, event type, event entry point and compilation flag are extracted simultaneously to generate an interactive region index. Extract the update fragment identifier, drawing area, resource reference location and event entry point from the update fragment, determine the associated interactive fragment identifier by combining the parent-child relationship and hierarchical relationship in the virtual DOM fragment tree, and establish a correspondence between the drawing area and the static fragment drawing index to generate the update fragment location table and the bypass update table. The shared cache handle, cache view, static fragment drawing index, interactive region index, updated fragment position table, bypass update table, and virtual DOM fragment tree version are encapsulated into a cache view package.

[0010] As a preferred embodiment of the human-computer interaction component rendering method based on virtual DOM described in this invention, the generation of interaction batch records specifically includes: Create a view container node in the virtual DOM tree of the target page, and replace the complete virtual DOM subtree inside the target component with the view container node to generate the page container node; Bind the shared cache handle, static fragment drawing index, interactive area index, update fragment position table and bypass update table in the cached view package to the page container node to generate an event delegate node; The user-triggered location within the event delegate node is converted into local coordinates of the target component, and the corresponding interaction fragment is matched using the interaction area index to generate a trigger fragment record; Trigger fragment records are arranged according to the hierarchical relationship in the virtual DOM fragment tree, and consecutive triggers belonging to the same interactive fragment within the same display cycle are merged to generate interactive batch records.

[0011] As a preferred embodiment of the human-computer interaction component rendering method based on virtual DOM described in this invention, the step of extracting the update fragment identifier, drawing area, resource reference position, and event entry point from the differential bypass record specifically includes: Extract the interaction fragment identifier and event type from the interaction batch record, generate bypass query conditions, and use the bypass query conditions to match the associated interaction fragment identifier in the bypass update table to determine the target bypass entry; When a target bypass entry exists in the bypass update table, the update fragment identifier, drawing area, resource reference location, and event entry are extracted from the target bypass entry to generate a differential bypass record. When the target bypass entry is not found in the bypass update table, the corresponding update fragment is determined by calling the update fragment location table, and the update fragment identifier, drawing area, resource reference location and event entry of the corresponding update fragment are included in the differential bypass record.

[0012] As a preferred embodiment of the human-computer interaction component rendering method based on virtual DOM described in this invention, the generation of local modification records in the shared cache specifically includes: Based on the drawing area and static fragment drawing index in the differential bypass record, the target area is determined in the shared cache area, and a positional correspondence is established between the target area and the currently displayed content in the cache view to generate a cache area target area record; Extract the content to be replaced from the resource reference position in the differential bypass record, and verify the fragment ownership between the content to be replaced and the updated fragment identifier to generate a replacement content record; When the index of the interactive area corresponding to the event entry changes, the event entry is used to correct the event pointer in the interactive area index, thus forming the index modification content. The target area record in the cache, the replacement content record, the index modification content, and the updated fragment identifier are combined into a local modification item to generate a local modification record in the shared cache.

[0013] As a preferred embodiment of the human-computer interaction component rendering method based on virtual DOM described in this invention, the generation of the interactive component rendering result specifically includes: The cached view package bound to the view container node is updated using a shared cache area to record local modifications, thereby generating a display status record; When a new target human-computer interaction component has the same component identifier, style identifier and display size, the cached view package corresponding to the display state record is reused, and a reference record is established for the new view container node to generate a reused state record. When the target page is not visible and the view container node is obscured, retain the cached view package, interactive area index, update fragment position table, bypass update table and shared cache area local modification record corresponding to the reuse state record, and generate a pause state record. When the view container node becomes visible again, the bypass update table in the paused state record is used to verify the update fragment identifier corresponding to the local modification record in the shared cache area, and the verified local modification record in the shared cache area is applied to the cached view package bound to the view container node to generate a recovery state record. When the last view container node that references the cached view package is deleted, the binding relationship between the view container node and the shared cache is released, and the virtual DOM fragment tree, interactive area index, update fragment position table, bypass update table, local modification record of the shared cache and the shared cache corresponding to the view container node are cleared, and the rendering result of the interactive component is generated.

[0014] In a second aspect, the present invention provides a computer device, including a memory and a processor, wherein the memory stores a computer program, wherein when the computer program is executed by the processor, it implements any step of the human-computer interaction component rendering method based on virtual DOM as described in the first aspect of the present invention.

[0015] Thirdly, the present invention provides a computer-readable storage medium having a computer program stored thereon, wherein: when the computer program is executed by a processor, it implements any step of the human-computer interaction component rendering method based on virtual DOM as described in the first aspect of the present invention.

[0016] The beneficial effects of this invention are as follows: By dividing the virtual DOM template of the target human-computer interaction component into static fragments, interactive fragments, and update fragments, and establishing fragment-level update boundaries through compilation flags and differential bypass flags, update content that does not change the node hierarchy can be separated from the differential path of the complete virtual DOM; a shared cache area is created through the virtual DOM fragment tree and off-screen rendering is performed. The static fragment drawing index, interactive area index, update fragment position table, and bypass update table are encapsulated together into a cached view package, so that the cached view is no longer just a simple static display result, but also carries structured rendering data of display area, interactive entry point, and update position; the target page carries the cached view package through the view container node, and generates interactive batch records through the interactive area index, which can reduce the continuous maintenance of the complete virtual DOM subtree by the target page; the bypass update table is queried based on the interactive batch records to extract the update fragment identifier, drawing area, resource reference position, and event entry point, directly forming a local modification record of the shared cache area, so that changes in local text, icons, display status, and event entry points can be located in the target area of ​​the shared cache area to complete the update. Compared with existing methods that rely on differential rendering of the complete virtual DOM subtree and whole component refresh, this invention forms a continuous chain of interactive positioning, differential bypass, and local modification of the shared cache, which helps to reduce the overhead of repeated rendering and improve the state consistency of human-computer interaction components during reuse, pause, resumption, and release. Attached Figure Description

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

[0018] Figure 1 This is a flowchart of the rendering method for human-computer interaction components based on the virtual DOM.

[0019] Figure 2 A schematic diagram illustrating the construction of a virtual DOM fragment tree and cached view package.

[0020] Figure 3 Flowchart for interactive trigger location and local modification of shared cache area.

[0021] Figure 4 A flowchart for maintaining the lifecycle state of human-computer interaction components. Detailed Implementation

[0022] To make the above-mentioned objects, features and advantages of the present invention more apparent and understandable, the specific embodiments of the present invention will be described in detail below with reference to the accompanying drawings.

[0023] Many specific details are set forth in the following description in order to provide a full understanding of the invention. However, the invention may also be practiced in other ways different from those described herein, and those skilled in the art can make similar extensions without departing from the spirit of the invention. Therefore, the invention is not limited to the specific embodiments disclosed below.

[0024] Secondly, the term "one embodiment" or "embodiment" as used herein refers to a specific feature, structure, or characteristic that may be included in at least one implementation of the present invention. The phrase "in one embodiment" appearing in different places in this specification does not necessarily refer to the same embodiment, nor is it a single or selective embodiment that is mutually exclusive with other embodiments.

[0025] Reference Figures 1-4 As one embodiment of the present invention, this embodiment provides a method for rendering human-computer interaction components based on a virtual DOM, including the following steps: S1. Generate component loading instructions based on the addition operation of the target human-computer interaction component, and divide and mark the virtual DOM template of the target component into segments to generate a virtual DOM segment tree.

[0026] S1.1. Receive the add operation of the target human-computer interaction component, parse the target component entry information carried by the add operation, extract the component identifier, style identifier, display size and page position from the target component entry information, and generate component positioning parameters; wherein, the component identifier is used to point to the target human-computer interaction component, the style identifier is used to point to the display style adopted by the target human-computer interaction component, the display size is used to limit the width and height of the target human-computer interaction component in the target page, and the page position is used to limit the placement area of ​​the target human-computer interaction component in the target page.

[0027] If the component identifier, style identifier, display size, and page position can all be obtained from the add operation, generate valid component positioning parameters; if any one of them is missing, stop generating component loading instructions and return an invalid result for the add operation.

[0028] The display range of the target component on the target page is determined by using effective component positioning parameters, and the source of the component style of the target component is determined according to the component identifier and style identifier, and a component loading instruction is generated. The display range is determined by the page position and display size, and the source of the component style is determined by the target component corresponding to the component identifier and the style file corresponding to the style identifier.

[0029] When the display area is within the target page's placement area and the component style source can be mapped to a style file, the component identifier, style identifier, display area, and component style source are encapsulated into a component loading directive. When the display area exceeds the target page's placement area, the page position is adjusted according to the target page's placement area before generating the component loading directive. When the component style source cannot be mapped to a style file, fragment segmentation is stopped and an invalid style source result is returned. By retaining both the display area and the component style source in the component loading directive, subsequent virtual DOM templates, style files, and event binding relationships can have the same component reference, avoiding inconsistencies between the target page style and the target component's event entry point.

[0030] S1.2. Based on the component identifier, style identifier, display range, and component style source in the component loading instruction, match the virtual DOM template, style file, and event binding relationship corresponding to the same component identifier and style identifier in the component description list of the target component; when the virtual DOM template, style file, and event binding relationship all match the same component identifier and style identifier, determine the matched virtual DOM template, style file, and event binding relationship as the virtual DOM template, style file, and event binding relationship of the target component; when any item in the virtual DOM template, style file, and event binding relationship does not match the same component identifier and style identifier, stop generating template parsing results and return a component resource inconsistency result.

[0031] The virtual DOM template of the target component is expanded node by node. Starting from the root node, the node label and component type of each node are identified level by level to obtain the node type. The attribute fields, class name fields, style reference fields and event reference fields carried by each node are extracted to obtain the node attributes. The direct parent node and direct child node of each node are recorded to obtain the parent-child relationship. The node hierarchy is determined according to the number of nodes traversed from the root node to the current node to obtain the virtual DOM template structure record.

[0032] The style matching process is performed on the style file of the target component. The selectors, class names and style reference fields in the style file are matched with the node attributes in the virtual DOM template structure record to determine the style source corresponding to text, icons, colors, borders and display status, and thus obtain the display content determination rules.

[0033] Event matching is performed on the event binding relationships of the target component. The event names of click, long press, swipe, focus, and state toggle events in the event binding relationships are matched with the event reference fields in the virtual DOM template structure record to determine the event entry corresponding to each event reference field and obtain the event entry record.

[0034] The virtual DOM template structure record, display content determination rules, and event entry record are merged into the template parsing result; among them, the event entry is one of the click entry, long press entry, swipe entry, focus entry, and state switching entry recorded in the event binding relationship, and the display content determination rules are the rules in the style file that can determine the text, icon, color, border, and display status.

[0035] When the virtual DOM template, style file, and event binding relationships are all consistent with the component identifier and style identifier in the component loading directive, a valid template parsing result is generated; when the virtual DOM template lacks parent-child relationships, the parent-child relationships are supplemented according to the node hierarchy in the virtual DOM template; when the event binding relationship lacks event entry points, the interactive attributes of the corresponding node are canceled while the display attributes of the corresponding node are retained.

[0036] S1.3. According to the event entry and display content determination rules in the valid template parsing results, traverse the virtual DOM template of the target component, divide the nodes that do not contain event entry and whose display content can be determined by the style file into static fragments, divide the nodes that contain click entry, long press entry, swipe entry and focus entry into interactive fragments, and divide the nodes that cause changes in text, icons, colors, borders and display status into update fragments, and generate a set of virtual DOM fragments.

[0037] When the same node contains both a user-triggered entry point and display state change content, the node containing the user-triggered entry point is classified as an interactive fragment, and the node containing the display state change content is classified as an update fragment, while preserving the correspondence between interactive and update fragments. When the parent node is a static fragment and the child node is an interactive fragment, the parent-child relationship between the parent node's static fragment and the child node's interactive fragment is preserved. By separating static, interactive, and update fragments, subsequent off-screen rendering can only expand the necessary visible content and interactive areas.

[0038] S1.4. Annotate static, interactive, and update fragments in the virtual DOM fragment set with compilation flags, and annotate update fragments that do not change the node hierarchy with differential bypass flags, generating a flagged fragment set. The compilation flag identifies the fragment type of static, interactive, and update fragments, while the differential bypass flag identifies update fragments that only change text content, icon references, display status, and event entry points without altering the node hierarchy. When the update content of an update fragment changes parent-child relationships, node hierarchy, and node arrangement, the differential bypass flag is not annotated, and the update fragment is retained as a regular virtual DOM differential object. When the update content of an update fragment only corresponds to changes in the drawing area and resource reference position, the drawing area and resource reference position corresponding to the update fragment are retained, and the differential bypass flag is annotated. Distinguishing update fragments that can be directly modified in the shared cache using the differential bypass flag ensures that the subsequent bypass update table has a clear source, avoiding the need for runtime re-comparison of the complete virtual DOM fragment tree.

[0039] Preserve the fragment structure relationships, fragment hierarchy relationships, and style propagation relationships in the fragment set, and arrange static fragments, interactive fragments, update fragments, compilation flags, differential bypass flags, drawing areas, and resource reference positions according to the virtual DOM template structure of the target component to generate a virtual DOM fragment tree. Among them, the fragment structure relationship is the inclusion relationship between parent fragments and child fragments determined by the direct parent node and direct child node in the virtual DOM template; the fragment hierarchy relationship is the order of each fragment in the display order and node depth of the target component; and the style propagation relationship is the relationship that the common style fields of the parent fragment continue to be effective for child fragments that have not separately declared the same type of style fields.

[0040] When there is a style transitive relationship between fragments in the flag fragment set, the common style field, the scope of the affected fragment, and the overridden style field are preserved between the parent and child fragments; when an interactive fragment in the flag fragment set corresponds to an update fragment, the correspondence between the interactive fragment identifier, the update fragment identifier, the drawing area, and the resource reference position is preserved in the virtual DOM fragment tree.

[0041] S2. Create a shared cache area based on the virtual DOM fragment tree and complete off-screen rendering, extract the interactive fragment area and differential bypass update relationship, and generate a cached view package.

[0042] S2.1. Extract the display size, static fragment, interactive fragment, update fragment, compilation flag, differential bypass flag, drawing area, and resource reference position of the target component from the virtual DOM fragment tree, and generate cache creation parameters. The drawing area defines the drawing position of the fragment in the shared cache, and the resource reference position points to the resource source corresponding to text, icon, color, border, and display state. When the display size, drawing area, and resource reference position all exist, valid cache creation parameters are generated. When the display size is missing, creation of the shared cache is stopped, and an invalid cache creation result is returned. When the drawing area is missing, the drawing area is supplemented according to the fragment hierarchy in the virtual DOM fragment tree and the display size. When the resource reference position is missing, the fragment drawing area is retained, and the missing resource reference result is marked. By performing display size, drawing area, and resource reference position verification before creating the shared cache, the shared cache can maintain the same coordinate reference as the virtual DOM fragment tree, avoiding fragment position offset during off-screen rendering.

[0043] A shared cache is created using the display size in the effective cache creation parameters, and the shared cache is identified as the off-screen drawing target. A cache drawing environment and a shared cache handle are generated. The shared cache is a memory area that stores the off-screen drawing results of the target component. The off-screen drawing target is a drawing target that is not directly displayed on the target page and is used to generate a cached view. The cache drawing environment is the correspondence between the shared cache and the drawing area and resource reference location. The shared cache handle is the access identifier for subsequent view container nodes to identify the shared cache.

[0044] When the width and height of the shared buffer match the display size, a valid shared buffer handle is generated; when the width and height of the shared buffer do not match the display size, the shared buffer is recreated according to the display size; when the shared buffer creation fails, off-screen drawing is stopped and the buffer creation failure result is returned.

[0045] S2.2. Using a cached drawing environment, the visual content of static and interactive fragments is drawn according to the fragment hierarchy order to generate a cached view. Specifically, the drawing order of static fragments is determined first according to the fragment hierarchy relationship in the virtual DOM fragment tree, and then the drawing order of interactive fragments is determined. The text, icons, colors, borders and display status of the static fragments are drawn to the corresponding drawing areas in the shared cache area, and then the visual content of the interactive fragments is drawn over the corresponding drawing areas.

[0046] When interactive and static fragments have overlapping drawing areas, the interactive fragment's visible content is retained according to the display order recorded in the virtual DOM fragment tree, prior to the one shown later. "Later in display order" means the interactive fragment is drawn last within the same drawing area in the virtual DOM fragment tree's fragment hierarchy. When static and interactive fragments do not have overlapping drawing areas, both the static and interactive fragments' visible content are retained separately, generating a complete cached view. By drawing static fragments first and interactive fragments last, the system ensures that static fragments form the stable underlying layer of the target component, while interactive fragments form the visible layer of the user-triggered area. Subsequent local modifications can be accurately located and displayed within the shared cache area.

[0047] When drawing static fragments, the static fragment region and hierarchical position are extracted simultaneously to generate a static fragment drawing index. The static fragment region is the drawing area of ​​the static fragment in the shared cache, and the hierarchical position is the node depth and display order of the static fragment in the virtual DOM fragment tree. When the static fragment region matches the currently displayed content in the cached view, the static fragment identifier, static fragment region, and hierarchical position are written to the static fragment drawing index. When the static fragment region does not match the currently displayed content in the cached view, the corresponding static fragment is redrawn using the cached drawing environment, and the redrawn content is written to the static fragment drawing index. By recording the static fragment region and hierarchical position through the static fragment drawing index, a positional correspondence can be established between the drawing area of ​​subsequently updated fragments and the underlying static fragment display, avoiding the problem of only extracting the interactive fragment region without being able to track the static fragment display content.

[0048] S2.3. When drawing interactive fragments, simultaneously extract the interactive fragment region, event type, event entry point, and compilation flag to generate an interactive region index; wherein, the interactive fragment region is the triggerable area of ​​the interactive fragment in the shared buffer, the event type and event entry point follow the event binding relationship corresponding to the interactive fragment in the virtual DOM fragment tree, and the compilation flag follows the annotation result of the interactive fragment in the virtual DOM fragment tree.

[0049] When the interactive fragment area is within the cached view and the event entry point exists, the interactive fragment identifier, interactive fragment area, event type, event entry point, and compilation flag are written to the interactive area index; when the interactive fragment area exceeds the cached view, the interactive fragment area is cropped according to the display size and then written to the interactive area index; when the event entry point is missing, the interactive fragment area is retained and the triggerable attribute of the corresponding event type is canceled.

[0050] The update fragment identifier, drawing area, resource reference location, and event entry point are extracted from the update fragment. The associated interactive fragment identifier is determined by combining the fragment structure relationship and fragment hierarchy relationship in the virtual DOM fragment tree. The drawing area is then mapped to the static fragment drawing index to generate an update fragment location table. Specifically, the interactive fragments with a parent-child containment relationship with the update fragment are first searched in the virtual DOM fragment tree. Then, the interactive fragments that are adjacent to the update fragment in display order and have the same event entry point are searched. The identifier of the found interactive fragment is determined as the associated interactive fragment identifier.

[0051] When the drawing area falls within a static fragment area recorded in the static fragment drawing index, the updated fragment identifier, associated interactive fragment identifier, drawing area, resource reference location, event entry point, and corresponding static fragment identifier are written to the updated fragment location table. When the drawing area does not fall within any static fragment area, the updated fragment identifier, associated interactive fragment identifier, drawing area, resource reference location, and event entry point are written to the updated fragment location table and marked as an independent updated area. By connecting the updated fragment location table to both interactive fragments and static fragments, subsequent differential bypass updates can find the updated fragment from the user-triggered area and the target area in the shared buffer from the updated fragment.

[0052] S2.4. Select update fragments with differential bypass flags from the update fragment location table, extract the update fragment identifier, associated interaction fragment identifier, drawing area, resource reference location, and event entry point, and generate a bypass update table. When an update fragment in the update fragment location table has a differential bypass flag, write the update fragment identifier, associated interaction fragment identifier, drawing area, resource reference location, and event entry point into the bypass update table. When an update fragment in the update fragment location table does not have a differential bypass flag, retain the update fragment in the update fragment location table as a regular virtual DOM differential object. By separately saving update fragments that can be directly modified in the shared cache through the bypass update table, subsequent batches of interaction records can prioritize matching the bypass update table and forming local modification records in the shared cache, avoiding the need to re-compare the complete virtual DOM fragment tree every time a user triggers it.

[0053] The shared cache handle, cached view, static fragment drawing index, interactive area index, updated fragment position table, bypass update table, and virtual DOM fragment tree version are encapsulated into a cached view package. The virtual DOM fragment tree version, derived from the current fragment structure and tagging results of the virtual DOM fragment tree, is used to distinguish cached view packages under different fragment partitioning states. A valid cached view package is generated when all of the shared cache handle, cached view, static fragment drawing index, interactive area index, updated fragment position table, bypass update table, and virtual DOM fragment tree version exist. When the interactive area index is empty and the target component does not contain interactive fragments, the cached view, static fragment drawing index, updated fragment position table, bypass update table, and virtual DOM fragment tree version are retained, and a cached view package that only displays is generated. When the bypass update table is empty and none of the updated fragments have differential bypass tags, the updated fragment position table is retained, and a regular updated cached view package is generated.

[0054] S3. Associate the cached view package with the view container node in the virtual DOM tree of the target page, and locate the user trigger position within the view container through the interaction area index to generate an interaction batch record.

[0055] S3.1. Extract the shared cache handle, cache view, static fragment drawing index, interactive area index, updated fragment position table, bypass update table, and virtual DOM fragment tree version from the cache view package to generate page access parameters; among them, the shared cache handle is used to point to the shared cache where the cache view is located, the cache view is used to display the visual content of the target human-computer interaction component on the target page, the static fragment drawing index is used to maintain the positional correspondence between the static fragment area and the cache view, the interactive area index is used to locate the interactive fragment corresponding to the user trigger position, and the updated fragment position table and bypass update table are used for subsequent partial updates.

[0056] When the shared cache handle, cached view, static fragment drawing index, and interactive area index all exist, valid page access parameters are generated. When the shared cache handle is missing, view container node creation is stopped and an invalid cached view package result is returned. When the interactive area index is empty and the target component does not contain interactive fragments, the cached view is retained and only display processing is initiated. By verifying the display data and interactive data in the cached view package before accessing the target page, the target page can avoid re-expanding the complete virtual DOM subtree inside the target component.

[0057] Using valid page access parameters, a view container node is created in the virtual DOM tree of the target page, and the view container node replaces the complete virtual DOM subtree inside the target component to generate a page container node. The view container node is the node in the virtual DOM tree of the target page used to carry the cached view, and the page container node retains the display range and page position of the target component in the target page.

[0058] A valid page container node is generated when the position of the view container node in the target page's virtual DOM tree matches the page position in the component loading instruction. When the view container node overlaps with the display area of ​​an existing node on the target page, the display position of the view container node is determined according to the display order in the target page's virtual DOM tree. When the target page's virtual DOM tree cannot establish a view container node, the generation of interaction batch records is stopped, and a page container creation failure result is returned. By replacing the complete virtual DOM subtree with a view container node, the target page can retain the display entry and event entry points of the human-computer interaction components, while reducing the number of virtual DOM nodes maintained by the target page.

[0059] S3.2. Bind the shared cache handle, static fragment drawing index, interactive area index, update fragment position table, and bypass update table in the cached view package to the page container node to generate an event proxy node; wherein, the event proxy node is a node in the page container node that receives the user's trigger position and forwards it to the interactive area index for matching.

[0060] When the shared cache handle is successfully bound to the page container node, the page container node retrieves the cached view according to the shared cache handle and displays the visual content of the target human-computer interaction component. When the shared cache handle fails to bind to the page container node, event delegate node generation stops and the shared cache binding failure result is returned. When the static fragment drawing index, updated fragment position table, and bypass update table are all consistent with the same virtual DOM fragment tree version, the static fragment drawing index, updated fragment position table, and bypass update table are retained in the event delegate node. By centralizing the cached view display and event delegation within the page container node, the target page can use the cached view during the compositing and display phase and use the interactive area index during the user trigger phase, avoiding trigger position offset caused by the separation of the display path and the event path.

[0061] Receive the user trigger position within the event delegate node, convert the user trigger position into the local coordinates of the target component, and generate local trigger coordinates; where the user trigger position is the position formed when the user performs click, long press, swipe, and focus operations within the view container node, and the local trigger coordinates are the position of the user trigger position relative to the upper left corner of the target component's display range.

[0062] When the user trigger position is within the display range of the view container node, first obtain the page trigger coordinates of the user trigger position in the target page, and then obtain the page start coordinates of the top left corner of the target component's display range in the target page; subtract the horizontal position of the page start coordinates from the horizontal position of the page trigger coordinates to obtain the local horizontal position, and subtract the vertical position of the page start coordinates from the vertical position of the page trigger coordinates to obtain the local vertical position; when the display size of the cached view is consistent with the display range of the target component, combine the local horizontal position and the local vertical position into the local trigger coordinates.

[0063] When the display size of the cached view differs from the display range of the target component, the local horizontal position is corrected according to the width ratio between the cached view's display size and the target component's display range, and the local vertical position is corrected according to the height ratio between the cached view's display size and the target component's display range. The corrected local horizontal and vertical positions are then combined into local trigger coordinates. When the user trigger position is outside the display range of the view container node, the interaction area index matching stops and an invalid trigger position result is returned. When the target page is scaled, the above conversion is first performed according to the trigger coordinates of the scaled target page, and then the local trigger coordinates are corrected according to the ratio between the cached view's display size and the target component's display range. By converting the user trigger position into local trigger coordinates, the interaction area index can be matched using a coordinate reference consistent with the shared cache area, avoiding inconsistencies between the target page coordinates and the cached view coordinates.

[0064] S3.3. Use the interaction area index to match the interaction fragments corresponding to the local trigger coordinates and generate trigger fragment records; specifically, compare the local trigger coordinates with the interaction fragment areas in the interaction area index item by item, select the interaction fragments that contain the local trigger coordinates and whose event type is consistent with the user's trigger operation, and obtain the interaction fragment identifier, event type, event entry point and compilation flag.

[0065] When only one interactive fragment region contains local trigger coordinates, the interactive fragment identifier, local trigger coordinates, event type, event entry point, and compilation flag are written to the trigger fragment record. When multiple interactive fragment regions contain local trigger coordinates simultaneously, the interactive fragment corresponding to the selected position is drawn according to the fragment hierarchy in the virtual DOM fragment tree, and the selected interactive fragment is written to the trigger fragment record. When no matching interactive fragment exists in the interactive region index, the generation of trigger fragment records is stopped and the result of missing interactive region is returned.

[0066] Trigger fragment records are arranged according to the hierarchical relationship in the virtual DOM fragment tree, and consecutive triggers belonging to the same interactive fragment within the same display period are merged to generate an interactive batch record; where the same display period is the time period during which the target page completes one cached view composite display, and consecutive triggers are multiple user triggers generated by the same interactive fragment within the same display period.

[0067] When multiple trigger fragment records belong to the same interactive fragment and are within the same display cycle, they are merged into a single event record, retaining the local trigger coordinates, event type, and event entry point corresponding to the last trigger. When multiple trigger fragment records belong to different interactive fragments, they are arranged according to the fragment hierarchy and display order in the virtual DOM fragment tree. When a trigger fragment record only changes the event entry point and does not change the interactive fragment area, it is marked as an index update event. By merging and arranging trigger fragment records, duplicate local updates caused by repeated triggers within the same display cycle can be reduced, and the display order and event order between different interactive fragments can be kept consistent.

[0068] Establish a correspondence between the interactive batch records and the update fragment location table and bypass update table stored in the event broker node to generate interactive batch records that can be used for subsequent local updates. The interactive batch records include interactive fragment identifier, local trigger coordinates, event type, event entry, compilation flag, display cycle identifier, and index update event flag.

[0069] When the interaction fragment identifier in the interaction batch record matches the associated interaction fragment identifier in the update fragment location table, the interaction batch record is retained and the subsequent bypass update table query is initiated; when the interaction fragment identifier in the interaction batch record does not match the associated interaction fragment identifier in the update fragment location table, the event entry in the interaction batch record is retained and marked as no update event.

[0070] S4. Based on the interactive batch record, query the bypass update table, extract the update fragment identifier, drawing area, resource reference position and event entry from the differential bypass record, locate the target area of ​​the shared cache and match the replacement content, and generate a local modification record of the shared cache.

[0071] S4.1. Extract the interaction fragment identifier, event type, event entry, local trigger coordinates, compilation flag, and index update event flag from the interaction batch record to generate bypass query conditions; among them, the interaction fragment identifier is used to correspond to the associated interaction fragment identifier in the bypass update table, the event type is used to verify the user-triggered operation, the event entry is used to verify the updated content pointed to after the interaction fragment is triggered, and the index update event flag is used to determine whether the index of the interaction area needs to be modified.

[0072] When the interaction fragment identifier, event type, and event entry point all exist, valid bypass query conditions are generated; when the interaction fragment identifier is missing, the bypass update table query stops and an invalid interaction fragment result is returned; when the event type and event entry point are inconsistent, the interaction batch record is retained and a result indicating inconsistent event entry points is returned. By first generating valid bypass query conditions, the bypass update table query can be limited to the range of interaction fragments corresponding to the interaction batch record, avoiding a complete differential retrieval of the virtual DOM fragment tree.

[0073] The target bypass entry is determined by matching the associated interaction fragment identifier in the bypass update table with the valid bypass query conditions. Specifically, the associated interaction fragment identifier that matches the interaction fragment identifier is first searched in the bypass update table. Then, it is checked whether the event entry in the target bypass entry matches the event entry in the bypass query conditions, and whether the drawing area in the target bypass entry is within the scope of the cache view corresponding to the cache view package.

[0074] When the associated interaction fragment identifiers, event entry points, and drawing areas are within the cached view range, the target bypass entry is determined. When the associated interaction fragment identifiers are consistent but the event entry points are inconsistent, the target bypass entry is not used, and an event entry mismatch result is returned. When the drawing area exceeds the cached view range, the target bypass entry is not used, and an invalid drawing area result is returned. When there is no associated interaction fragment identifier in the bypass update table that matches the interaction fragment identifier, the update fragment position table is queried. By checking the associated interaction fragment identifier, event entry point, and drawing area, it can be ensured that the target bypass entry in the bypass update table has a clear correspondence with the user-triggered interaction fragment.

[0075] S4.2. When a target bypass entry exists in the bypass update table, extract the update fragment identifier, drawing area, resource reference location, and event entry from the target bypass entry, and verify the update fragment identifier against the interaction fragment identifier in the interaction batch record to generate a differential bypass record.

[0076] When the updated fragment identifier can be matched with the interactive fragment identifier in the interactive batch record through the associated interactive fragment identifier in the target bypass entry, the updated fragment identifier, drawing area, resource reference location, and event entry point are written to the differential bypass record; when the updated fragment identifier cannot be matched with the interactive fragment identifier in the interactive batch record, the generation of differential bypass records is stopped and the result of inconsistent updated fragment attribution is returned.

[0077] When the target bypass entry is not found in the bypass update table, the update fragment location table stored in the event delegate node is called, and the interaction fragment identifier in the interaction batch record is matched with the associated interaction fragment identifier in the update fragment location table to determine the corresponding update fragment.

[0078] When a corresponding update fragment exists in the update fragment location table, the update fragment identifier, drawing area, resource reference location, and event entry point are retrieved from that fragment, and these information are added to the differential bypass record. When a corresponding update fragment does not exist in the update fragment location table, the event entry point in the interactive batch record is retained, and a result indicating no update fragment is returned is shown. By supplementing the bypass update table with the update fragment location table, the interactive batch record can still obtain the corresponding update fragment information, preventing user-triggered event interruptions during the bypass update table lookup phase.

[0079] S4.3. Determine the target region in the shared cache based on the drawing region and static fragment drawing index in the differential bypass record, and establish a positional correspondence between the target region and the currently displayed content in the cache view to generate a target region record in the cache. Specifically, first, perform a region inclusion check between the drawing region in the differential bypass record and the static fragment region in the static fragment drawing index, then map the drawing region that passes the region inclusion check to the same coordinate position in the shared cache, and extract the currently displayed content at the same coordinate position in the cache view.

[0080] When the drawing area falls within the static fragment area recorded in the static fragment drawing index, the drawing area, the corresponding static fragment identifier, and the currently displayed content are written into the target area record of the buffer. When the drawing area does not fall within the static fragment area recorded in the static fragment drawing index, the drawing area and the currently displayed content are written into the target area record of the buffer and marked as an independent target area. When the drawing area exceeds the range of the shared buffer, the generation of the target area record of the buffer is stopped and an invalid target area result is returned.

[0081] The replacement content of the target component is extracted by the resource reference position in the differential bypass record, and the replacement content is checked against the update fragment identifier to generate a replacement content record. Specifically, the replacement content corresponding to the text content, icon reference, color value, border style, display status and event entry is obtained according to the resource reference position. Then, it is checked whether the update fragment identifier to which the replacement content belongs is consistent with the update fragment identifier in the differential bypass record.

[0082] When the updated fragment identifier of the content to be replaced matches the updated fragment identifier in the differential bypass record, the content to be replaced, the resource reference location, and the updated fragment identifier are written to the replacement content record. When the updated fragment identifier of the content to be replaced does not match the updated fragment identifier in the differential bypass record, the generation of the replacement content record is stopped, and a result indicating inconsistent replacement content ownership is returned. When the content to be replaced cannot be obtained from the resource reference location, the target area record of the cache is retained, and a result indicating invalid resource reference is returned. Through fragment ownership verification, it can be ensured that the content to be replaced entering the target area of ​​the shared cache originates from the same updated fragment, avoiding resource replacement errors between different updated fragments.

[0083] S4.4. When the event entry in the differential bypass record changes to the corresponding interaction area index, the event entry is used to correct the event pointer in the interaction area index, forming the index modification content; specifically, first, the interaction area corresponding to the associated interaction segment identifier in the differential bypass record is found in the interaction area index, and then the original event entry in the interaction segment area is checked for consistency with the event entry in the differential bypass record.

[0084] When the original event entry point in the interactive fragment area is inconsistent with the event entry point in the differential bypass record, the event entry point in the differential bypass record is used as the new event pointer, and the interactive fragment identifier, interactive fragment area, and new event pointer are recorded to form the index modification content. When the original event entry point in the interactive fragment area is consistent with the event entry point in the differential bypass record, an empty index modification content is formed while retaining the original event pointer. When the corresponding interactive fragment area does not exist in the interactive area index, the formation of index modification content stops and an invalid interactive area index result is returned. By synchronously handling changes in event entry points, the modification of cached view content and the modification of interactive area index can be kept consistent, avoiding the situation where the displayed content has been updated but the user triggers the event, still pointing to the old event entry point.

[0085] The target area record of the cache, the replacement content record, the index modification content, and the update fragment identifier are combined into a local modification item, and the local modification items are arranged according to the display cycle identifier in the interaction batch record to generate a local modification record of the shared cache. Among them, the local modification item records the target area of ​​the shared cache, the currently displayed content, the content to be replaced, the resource reference position, the update fragment identifier, and the event entry.

[0086] When multiple local modification items exist within the same display period and these items correspond to the same shared cache target area, the local modification item displayed later is retained. When multiple local modification items exist within the same display period and these items correspond to different shared cache target areas, the multiple local modification items are arranged according to the fragment hierarchy in the virtual DOM fragment tree. When both the cache target area record and the replacement content record exist in a local modification item, a shared cache local modification record is generated.

[0087] S5. Maintain the display, reuse, pause, resume, and release states of view container nodes by locally modifying records in the shared cache, and generate rendering results for interactive components.

[0088] S5.1. Extract the target region record, replacement content record, index modification content, update fragment identifier, and event entry from the local modification record of the shared cache region, and generate display update parameters; among them, the target region record is used to determine the target region of the shared cache region that needs to be changed in the cache view package, the replacement content record is used to determine the content to be replaced corresponding to the target region of the shared cache region, and the index modification content is used to determine the event pointer change in the index of the interactive region.

[0089] When both the target region record and the replacement content record exist, the target region record is used to locate the shared target region in the cache view package bound to the view container node, and the replacement content record is used to replace the currently displayed content in the shared target region. When the index modification content is not empty, the interactive region index in the cache view package is updated according to the index modification content. When the index modification content is empty, the original interactive region index in the cache view package is retained.

[0090] When the current displayed content in the target area of ​​the shared cache matches the record in the target area of ​​the cache, the cache view package update is completed and a display status record is generated; when the current displayed content in the target area of ​​the shared cache does not match the record in the target area of ​​the cache, the cache view package update is stopped and the result of inconsistent display content is returned.

[0091] Receive the display status record and verify the component identifier, style identifier, and display size of the newly added target HCI component, and generate a reuse judgment result; when the component identifier, style identifier, and display size of the newly added target HCI component are consistent with the component identifier, style identifier, and display size in the display status record, reuse the cached view package corresponding to the display status record, establish a reference record for the newly added view container node, and generate a reuse status record; when any of the component identifier, style identifier, and display size of the newly added target HCI component are inconsistent, return to S1 to regenerate the component loading instruction.

[0092] The reference record documents the identifier of the newly added view container node, the handle of the shared cache area, the cached view package, and the number of references. After a new view container node is created, the reference count increases once, and the new view container node is bound to the reused cached view package. By verifying the component identifier, style identifier, and display size before reusing the cached view package, it can be ensured that the reused object corresponds to the same target human-computer interaction component and the same display range, avoiding different styles and content from sharing the same cached view package.

[0093] When no new target human-computer interaction component is reused, the display state record is recorded as a reused state record containing a view container node reference, so that subsequent pause, resume and release processes can all use the reused state record as the state source.

[0094] S5.2. Receive the reuse status record, and detect the visibility status of the target page and the occlusion status of the view container node, and generate a pause judgment result; where the target page is not visible means that the target page is not participating in the current display composition, and the view container node is occluded means that the display range of the view container node is covered by the node in the target page at the later drawing position.

[0095] When the target page is not visible and the view container node is obscured, the cached view package, interaction area index, update fragment position table, bypass update table, and shared cache partial modification record corresponding to the reuse state record are retained, and a pause state record is generated; when the target page remains visible and the view container node is not obscured, the reuse state record is retained and the cached view package corresponding to the display state record is displayed.

[0096] The pause state record includes the view container node identifier, cached view package, interactive area index, update fragment position table, bypass update table, shared cache partial modification record, and reference record. By retaining the bypass update table and shared cache partial modification record in the pause state record, the update fragment identifier can be verified again when the view container node resumes display, without needing to regenerate the virtual DOM fragment tree.

[0097] When the view container node becomes visible again, the bypass update table and the shared cache partial modification record are retrieved from the paused state record. The bypass update table is used to verify the update fragment identifier corresponding to the shared cache partial modification record, and a recovery verification result is generated. Specifically, the bypass update table is searched for an update fragment identifier that matches the update fragment identifier in the shared cache partial modification record, and the drawing area, resource reference position, and event entry point in the bypass update table are checked to see if they correspond to the cache target area record, replacement content record, and index modification content in the shared cache partial modification record.

[0098] When the updated fragment identifier is consistent, and the drawing area, resource reference position, and event entry point all correspond to the local modification record in the shared cache, a verification pass result is generated, and the local modification record in the shared cache is applied to the cached view package bound to the view container node; when any of the following occurs: the updated fragment identifier does not exist, the drawing area does not correspond, the resource reference position does not correspond, or the event entry point does not correspond, the recovery process is stopped and a recovery verification failure result is returned.

[0099] When applying verified partial modifications to the shared cache area to the cached view package bound to the view container node, the shared cache area target area is first located according to the cache area target area record. Then, the cached view content in the shared cache area target area is updated according to the replacement content record. Finally, the interaction area index is updated according to the index modification content, generating a recovery status record. The recovery status record includes the recovered cached view package, the interaction area index, the updated fragment location table, the bypass update table, and the reference record.

[0100] S5.3. Receive the recovery status record, determine the number of references to the view container node corresponding to the cached view package based on the reference record, and generate a release judgment result; when a view container node that references the cached view package is deleted, remove the identifier of the deleted view container node from the reference record and reduce the number of references.

[0101] When the reference count is still greater than zero, retain the cached view package, interactive area index, update fragment location table, bypass update table, local modification record of shared cache, and shared cache, and continue to maintain the display status, reuse status, paused status, and resumed status according to the remaining view container nodes; when the reference count is zero, confirm that the last view container node that referenced the cached view package has been deleted, and release the binding relationship between the view container node and the shared cache.

[0102] After unbinding the view container node from the shared cache, clear the virtual DOM fragment tree, interactive area index, update fragment position table, bypass update table, local modification record of the shared cache, and the shared cache corresponding to the view container node, and generate the rendering result of the interactive component.

[0103] This embodiment also provides a computer device applicable to the rendering method of human-computer interaction components based on virtual DOM, including: a memory and a processor; the memory is used to store computer-executable instructions, and the processor is used to execute the computer-executable instructions to implement the rendering method of human-computer interaction components based on virtual DOM as proposed in the above embodiment.

[0104] The computer device can be a terminal, comprising a processor, memory, communication interface, display screen, and input devices connected via a system bus. The processor provides computing and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The communication interface is used for wired or wireless communication with external terminals; wireless communication can be achieved through Wi-Fi, carrier networks, NFC (Near Field Communication), or other technologies. The display screen can be an LCD screen or an e-ink screen. The input devices can be a touch layer covering the display screen, buttons, a trackball, or a touchpad on the computer device's casing, or an external keyboard, touchpad, or mouse.

[0105] This embodiment also provides a storage medium storing a computer program that, when executed by a processor, implements the method for rendering human-computer interaction components based on a virtual DOM as proposed in the above embodiments. The storage medium can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as Static Random Access Memory (SRAM), Electrically Erasable Programmable Read-Only Memory (EEPROM), Erasable Programmable Read Only Memory (EPROM), Programmable Red-Only Memory (PROM), Read-Only Memory (ROM), magnetic storage, flash memory, magnetic disk, or optical disk.

[0106] In summary, this invention divides the virtual DOM template of the target human-computer interaction component into static fragments, interactive fragments, and update fragments. It establishes fragment-level update boundaries using compilation flags and differential bypass flags, enabling update content that does not alter the node hierarchy to be separated from the complete virtual DOM differential path. A shared cache is created through the virtual DOM fragment tree and rendered off-screen. The static fragment drawing index, interactive area index, update fragment position table, and bypass update table are encapsulated into a cached view package. This makes the cached view not just a simple static display result, but also carries structured rendering data including display area, interaction entry point, and update position. The target page carries the cached view package through view container nodes and generates interaction batch records through the interactive area index, reducing the continuous maintenance of the complete virtual DOM subtree by the target page. The bypass update table is queried based on the interaction batch records to extract the update fragment identifier, drawing area, resource reference position, and event entry point, directly forming a local modification record in the shared cache. This allows changes in local text, icons, display status, and event entry points to be located in the target area of ​​the shared cache for updating. Compared with existing methods that rely on differential rendering of the complete virtual DOM subtree and whole component refresh, this invention forms a continuous chain of interactive positioning, differential bypass, and local modification of the shared cache, which helps to reduce the overhead of repeated rendering and improve the state consistency of human-computer interaction components during reuse, pause, resumption, and release.

[0107] It should be noted that the above 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 preferred embodiments, those skilled in the art should understand that modifications or equivalent substitutions can be made to the technical solutions of the present invention without departing from the spirit and scope of the technical solutions of the present invention, and all such modifications or substitutions should be covered within the scope of the claims of the present invention.

Claims

1. A method for rendering human-computer interaction components based on a virtual DOM, characterized in that: include, Based on the addition operation of the target human-computer interaction component, a component loading instruction is generated, and the virtual DOM template of the target component is segmented and marked to generate a virtual DOM segment tree; A shared cache area is created based on the virtual DOM fragment tree and off-screen rendering is completed. Interactive fragment areas and differential bypass update relationships are extracted to generate a cached view package. The cached view package is associated with the view container node in the virtual DOM tree of the target page, and the user trigger position within the view container is located by the interaction area index to generate an interaction batch record. Based on the interactive batch records, query the bypass update table, extract the update fragment identifier, drawing area, resource reference position and event entry from the differential bypass records, locate the target area of ​​the shared cache and match the replacement content, and generate a local modification record of the shared cache. By maintaining the display, reuse, pause, resume, and release states of view container nodes through local modification records in the shared cache, the rendering results of interactive components are generated.

2. The method for rendering human-computer interaction components based on virtual DOM as described in claim 1, characterized in that: The step of generating component loading instructions based on the addition operation of the target human-computer interaction component specifically includes: Analyze the addition operation of the target human-computer interaction component, extract the component identifier, style identifier, display size and page position of the target component, and generate component positioning parameters; The component positioning parameters are used to determine the display range of the target component on the target page and the source of the component style, and a component loading instruction is generated.

3. The method for rendering human-computer interaction components based on virtual DOM as described in claim 2, characterized in that: The generation of the virtual DOM fragment tree specifically includes: The component loading directive is invoked to determine the virtual DOM template, style file, and event binding relationships of the target component, and to generate the template parsing results; Based on the event entry points and display content determination rules in the template parsing results, the virtual DOM template of the target component is divided into static fragments, interactive fragments, and update fragments, generating a set of virtual DOM fragments; The static fragments, interactive fragments, and update fragments in the virtual DOM fragment set are marked with compilation flags, and the update fragments that do not change the node hierarchy are marked with differential bypass flags. A set of flagged fragments is generated, and the parent-child relationship, hierarchy relationship, and style inheritance relationship in the set of flagged fragments are preserved to generate a virtual DOM fragment tree.

4. The method for rendering human-computer interaction components based on virtual DOM as described in claim 3, characterized in that: The generation of the cached view package specifically includes: A shared buffer is created according to the display size corresponding to the virtual DOM fragment tree, and the shared buffer is determined as the off-screen drawing target, generating a buffer drawing environment and a shared buffer handle; The cached rendering environment is used to render the visual content of static and interactive fragments in the order of fragment hierarchy, generating a cached view; When drawing static fragments, the static fragment region and hierarchical position are extracted simultaneously to generate a static fragment drawing index. When drawing interactive fragments, the interactive fragment region, event type, event entry point and compilation flag are extracted simultaneously to generate an interactive region index. Extract the update fragment identifier, drawing area, resource reference location and event entry point from the update fragment, determine the associated interactive fragment identifier by combining the parent-child relationship and hierarchical relationship in the virtual DOM fragment tree, and establish a correspondence between the drawing area and the static fragment drawing index to generate the update fragment location table and the bypass update table. The shared cache handle, cache view, static fragment drawing index, interactive region index, updated fragment position table, bypass update table, and virtual DOM fragment tree version are encapsulated into a cache view package.

5. The method for rendering human-computer interaction components based on virtual DOM as described in claim 4, characterized in that: The generation of interactive batch records specifically includes: Create a view container node in the virtual DOM tree of the target page, and replace the complete virtual DOM subtree inside the target component with the view container node to generate the page container node; Bind the shared cache handle, static fragment drawing index, interactive area index, update fragment position table and bypass update table in the cached view package to the page container node to generate an event delegate node; The user-triggered location within the event delegate node is converted into local coordinates of the target component, and the corresponding interaction fragment is matched using the interaction area index to generate a trigger fragment record; Trigger fragment records are arranged according to the hierarchical relationship in the virtual DOM fragment tree, and consecutive triggers belonging to the same interactive fragment within the same display cycle are merged to generate interactive batch records.

6. The method for rendering human-computer interaction components based on virtual DOM as described in claim 5, characterized in that: The extraction of the update fragment identifier, drawing area, resource reference location, and event entry point from the differential bypass record specifically includes: Extract the interaction fragment identifier and event type from the interaction batch record, generate bypass query conditions, and use the bypass query conditions to match the associated interaction fragment identifier in the bypass update table to determine the target bypass entry; When a target bypass entry exists in the bypass update table, the update fragment identifier, drawing area, resource reference location, and event entry are extracted from the target bypass entry to generate a differential bypass record. When the target bypass entry is not found in the bypass update table, the corresponding update fragment is determined by calling the update fragment location table, and the update fragment identifier, drawing area, resource reference location and event entry of the corresponding update fragment are included in the differential bypass record.

7. The method for rendering human-computer interaction components based on virtual DOM as described in claim 6, characterized in that: The generation of local modification records in the shared cache specifically includes: Based on the drawing area and static fragment drawing index in the differential bypass record, the target area is determined in the shared cache area, and a positional correspondence is established between the target area and the currently displayed content in the cache view to generate a cache area target area record; Extract the content to be replaced from the resource reference position in the differential bypass record, and verify the fragment ownership between the content to be replaced and the updated fragment identifier to generate a replacement content record; When the index of the interactive area corresponding to the event entry changes, the event entry is used to correct the event pointer in the interactive area index, thus forming the index modification content. The target area record in the cache, the replacement content record, the index modification content, and the updated fragment identifier are combined into a local modification item to generate a local modification record in the shared cache.

8. The method for rendering human-computer interaction components based on virtual DOM as described in claim 7, characterized in that: The generated interactive component rendering result specifically includes: The cached view package bound to the view container node is updated using a shared cache area to record local modifications, thereby generating a display status record; When a new target human-computer interaction component has the same component identifier, style identifier and display size, the cached view package corresponding to the display state record is reused, and a reference record is established for the new view container node to generate a reused state record. When the target page is not visible and the view container node is obscured, retain the cached view package, interactive area index, update fragment position table, bypass update table and shared cache area local modification record corresponding to the reuse state record, and generate a pause state record. When the view container node becomes visible again, the bypass update table in the paused state record is used to verify the update fragment identifier corresponding to the local modification record in the shared cache area, and the verified local modification record in the shared cache area is applied to the cached view package bound to the view container node to generate a recovery state record. When the last view container node that references the cached view package is deleted, the binding relationship between the view container node and the shared cache is released, and the virtual DOM fragment tree, interactive area index, update fragment position table, bypass update table, local modification record of the shared cache and the shared cache corresponding to the view container node are cleared, and the rendering result of the interactive component is generated.

9. A computer device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that: When the processor executes the computer program, it implements the steps of the human-computer interaction component rendering method based on any one of claims 1 to 8.

10. A computer-readable 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 human-computer interaction component rendering method based on virtual DOM as described in any one of claims 1 to 8.

Images