A large-scale flowchart front-end rendering method and system based on hybrid rendering and incremental updating

Abstract

This invention discloses a method and system for front-end rendering of large-scale flowcharts based on hybrid rendering and incremental updates, belonging to the technical field of Web front-end engineering. It aims to solve problems such as lag, weak interactivity, and low computational efficiency in front-end rendering of large-scale flowcharts. The method includes: loading flowchart data and constructing a two-dimensional grid spatial index and a node-line bidirectional association index; rendering nodes and connections using a hybrid HTML and SVG rendering model; implementing data-driven incremental updates based on an MVVM architecture; performing virtualized rendering and viewport culling; listening to interactive events and optimizing high-frequency events; and delegating complex layout calculations to Web Workers for asynchronous execution. The system correspondingly implements the above method and contains multiple loosely coupled functional modules. This invention breaks through the rendering performance bottleneck of large-scale data volumes, balances high interactivity and customization, optimizes computational efficiency, and has an easily expandable and maintainable architecture.

Description

Technical Field

[0001] This invention relates to the technical field of Web front-end engineering, and more particularly to a large-scale flowchart front-end rendering method and system based on hybrid rendering and incremental updates. Background Technology

[0002] With the increasing popularity of applications such as business process visualization and system architecture diagrams, front-end flowchart rendering engines in the browser environment are facing increasingly severe challenges in both performance and interactivity. The efficient rendering of large-scale flowcharts has become an urgent technical problem to be solved in the field of Web front-end engineering.

[0003] Current mainstream flowchart rendering technologies all have significant technical flaws, making it difficult to meet the rendering and interaction requirements of large-scale flowcharts: While pure SVG rendering offers advantages such as lossless vector scaling and convenient event binding, the number of DOM elements surges with the node size when rendering hundreds or thousands of nodes, severely consuming browser memory resources and easily causing page lag or even crashes; pure Canvas rendering can adapt to the rendering needs of large-scale graphics, but its bitmap characteristics easily lead to scaling distortion, and it cannot achieve fine-grained interactive event binding for individual graphic elements, resulting in high development complexity and a poor user experience; general graphics library solutions such as G6 and X6 still suffer from slow initial loading when rendering ultra-large-scale flowcharts with thousands of nodes, the topology layout calculation process blocks the browser's main thread, and there is a significant delay in the response of high-frequency interactive operations such as dragging. Their virtual DOM difference algorithm has a large computational overhead when facing complex graphic topology changes, and cannot achieve accurate local updates.

[0004] The numerous shortcomings of existing technologies have led to problems such as excessive memory consumption, rendering lag, poor interactive experience, and low computational efficiency in large-scale flowchart rendering. Therefore, there is an urgent need for a large-scale flowchart front-end rendering solution that balances rendering performance, interactive precision, and development scalability. Summary of the Invention

[0005] This invention aims to overcome the shortcomings of existing technologies and provide a stable and reliable graphical editor state management method and system based on immutable data flow. Specific goals include: ensuring absolute predictability and traceability of state changes by enforcing the use of an immutable data model, generating a new state instance for each state change, forming a complete state change history chain, facilitating debugging, logging, and state replay; achieving zero-cost and high-reliability undo / redo functions by leveraging the inherent characteristics of the immutable data model to simplify undo / redo functionality to reference switching within the state history chain, fundamentally simplifying implementation logic and eliminating errors; completely eliminating state pollution and race condition risks by preventing unexpected side effects caused by shared mutable references based on state immutability, thus improving system stability; and providing architectural support for high-performance responsive rendering by perfectly integrating immutable data with the responsive mechanisms of modern UI frameworks, accurately determining whether components need re-rendering through simple reference comparison, achieving ultimate rendering performance optimization in complex graphical scenes.

[0006] To achieve the above objectives, the technical solution adopted by the present invention is as follows: A large-scale flowchart front-end rendering method based on hybrid rendering and incremental updates includes the following steps: Load the initial nodes and connection data of the flowchart, and construct a two-dimensional grid spatial index and a node-line bidirectional association index based on the initial nodes and connection data; A hybrid rendering model using HTML and SVG is adopted. In this model, flowchart nodes are rendered using native HTML elements, and flowchart connection lines are rendered using SVG path elements. A flowchart data model with separation from the view is established based on the MVVM architecture. When the flowchart data model changes, the minimum change set of nodes and connections is calculated through the virtual DOM difference algorithm, and the view is incrementally updated based on the minimum change set. Perform virtualization rendering and viewport culling operations, calculate the viewport position of the scroll container, render only the nodes and connections within the visible area, and unload or placeholder elements outside the visible area. Listen for user interaction events in the flowchart, transfer complex topology layout calculation tasks to the Web Worker background thread for asynchronous execution, update the view after synchronizing the calculation results to the main thread, and optimize high-frequency interaction events to reduce rendering overhead.

[0007] As a preferred method, the two-dimensional grid spatial index is constructed as follows: the flowchart canvas is divided into two-dimensional grids according to a fixed pixel size, the grid ID corresponding to each node is pre-calculated, and a mapping relationship is established between the grid ID and the set of node IDs, thereby reducing the complexity of global node retrieval to nearly O(1).

[0008] Preferably, the node-line bidirectional association index is a bidirectional index relationship object, which is used to realize fast forward and reverse queries based on nodes to query all associated lines and based on lines to query the corresponding nodes at both ends.

[0009] As a preferred approach, DIV is used as the native HTML element for rendering nodes, leveraging the UI layout and styling capabilities of HTML and CSS to achieve node rendering. Nodes are rendered through embedded Vue / React components, forms, or button-like interactive controls. SVG path elements achieve smooth rendering of connecting lines through the advantages of vector drawing.

[0010] As a preferred option, the flowchart data model based on the MVVM architecture integrates the Zustand and Immer libraries for state management. The Immer library ensures that new objects are generated when the state changes and that the original references are reused for the unchanged parts. The Zustand library is used to implement lightweight and efficient data flow management.

[0011] As a preferred approach, when performing virtualization rendering, a progressive loading strategy is used to render large-scale node and connection data in batches.

[0012] Preferably, the complex topology layout calculation task is a force-directed layout calculation, which is handed over to the Web Worker background thread for execution to avoid the UI interaction thread being blocked by computationally intensive tasks.

[0013] As a preferred approach, the optimized processing of high-frequency interactive events includes throttling events such as canvas scaling and viewport panning, merging multiple consecutive model operations into a single transaction for batch updates, and when a node drag event is detected, marking the dragged node as the focus node, using a breadth-first search algorithm to find all related nodes to form a set of related nodes, rendering only the connections where both ends of the node are in the set, and restoring the display of all connections after the drag event ends.

[0014] In another aspect of the present invention, a large-scale flowchart front-end rendering system based on hybrid rendering and incremental updates is also provided, applied to the aforementioned large-scale flowchart front-end rendering method based on hybrid rendering and incremental updates, comprising: The data loading and index building module is used to load the initial node and connection data of the flowchart, and to build and maintain the two-dimensional grid space index and the node-line bidirectional association index. The hybrid rendering module is used to render flowchart nodes and connecting lines using a hybrid rendering model of HTML and SVG, respectively, through native HTML elements and SVG path elements. The data-driven and incremental update module is used to build a flowchart data model based on the MVVM architecture, calculate the minimum change set through the virtual DOM difference algorithm, and perform incremental updates of the view. The virtualization rendering module is used to calculate the viewport position and perform viewport culling, rendering only flowchart elements within the visible area; the interaction processing and asynchronous calculation module is used to listen for user interaction events, optimize the handling of high-frequency events, transfer complex topology layout calculation tasks to the Web Worker background thread for asynchronous execution, and synchronize the calculation results to the main thread to update the view.

[0015] Preferably, the hybrid rendering module supports embedding Vue / React components, forms, or button-like interactive controls within HTML-rendered nodes, balancing node interaction flexibility with connection vector accuracy; the interaction processing and asynchronous calculation module integrates dynamic connection hiding sub-units and event optimization sub-units, enabling intelligent filtering and display of associated connections, as well as throttling and transactional batch updates for high-frequency interactive events; each module of the system adopts a loosely coupled architecture design, supports integration with different backend engines, and facilitates the expansion of undo / redo and collaborative editing functions.

[0016] This invention employs a core technical approach of hybrid rendering and incremental updates, combined with multi-dimensional optimization strategies, effectively solving various problems existing in large-scale flowchart rendering. Compared to existing technologies, it possesses the following significant advantages: Significantly improved rendering performance: By using virtualized rendering and viewport culling strategies, only flowchart elements within the visible area are rendered. Combined with two-dimensional grid spatial indexing, the global traversal complexity of node retrieval is reduced to near O(1). With the precise incremental update achieved by the virtual DOM difference algorithm, the rendering frame rate is significantly improved when rendering large-scale flowcharts with more than a few nodes, and a smooth experience of low-latency operation is maintained. This completely solves the problems of rendering stuttering and excessive memory consumption in existing technologies.

[0017] Highly unified interactive experience and customization: It adopts a hybrid rendering model of HTML and SVG, using HTML elements to render flowchart nodes. It supports embedding any complex UI components such as Vue / React components, forms, and buttons within nodes, achieving refined node interaction and solving the problem of weak interaction capabilities of pure Canvas solutions. At the same time, combined with intelligent interaction optimization strategies such as dynamic connection hiding, it significantly improves the smoothness of high-frequency interactive operations such as drag and drop. Moreover, the vector characteristics of SVG connections ensure lossless graphic scaling, taking into account both interactive experience and visualization customization needs.

[0018] Significantly optimized computational efficiency: Complex topology layout calculation tasks such as force-directed layout are offloaded to the Web Worker background thread for asynchronous execution, completely avoiding the blocking of the browser UI main thread by computationally intensive tasks and ensuring the smoothness of page interaction; the bidirectional node-line association index enables fast forward and reverse lookup of nodes and connections, providing efficient data support for various interaction and rendering optimization functions, and improving the overall computational efficiency of flowchart rendering.

[0019] High development and maintenance efficiency, strong scalability: Based on the MVVM architecture, data-driven view updates are implemented. Developers only need to focus on the business data model and do not need to directly manipulate the DOM. Combined with the lightweight state management of the Zustand and Immer libraries, the development complexity is greatly reduced. The system's functional modules adopt a loosely coupled architecture design, which not only effectively reduces subsequent maintenance costs, but also supports integration with different backend engines such as BPMN. It is easy to extend functions such as undo and redo, and collaborative editing, and has good engineering practicality. Attached Figure Description

[0020] Figure 1 This is a flowchart of a large-scale flowchart front-end rendering method based on hybrid rendering and incremental update in a specific embodiment of the present invention; Figure 2 This is the overall flowchart of the front-end flowchart rendering method in a specific embodiment of the present invention; Figure 3 This is a schematic diagram illustrating the working principle of the virtualization rendering mechanism and grid space index in a specific embodiment of the present invention; Figure 4 This is a flowchart of the dynamic connection hiding function in a specific embodiment of the present invention; Figure 5 This is a system architecture diagram in a specific embodiment of the present invention. Detailed Implementation

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

[0022] This embodiment combines mainstream Web front-end technology stacks to specifically describe the aforementioned large-scale flowchart front-end rendering method and system based on hybrid rendering and incremental updates, enabling those skilled in the art to reproduce the technical solution of the present invention based on the description of this embodiment. References Figure 1 and Figure 2As shown, this invention proposes a large-scale flowchart front-end rendering method based on hybrid rendering and incremental updates, including: Step 1: Load the initial node and connection data of the flowchart, and construct a two-dimensional grid spatial index and a node-line bidirectional association index based on the initial node and connection data, specifically including: The initial flowchart data is obtained from the backend BPMN engine through the front-end interface. The data format is JSON, which includes node data and connection data. The node data includes nodes, which contain fields such as id, coordinates, type, content, and style. The connection data includes edges, which contain fields such as id, source node id, target node id, path parameters, and style. The loaded raw data is stored in the global data pool as the basis for rendering.

[0023] The method begins with loading flowchart data and constructing the core index. Upon entering the main loop, it first quickly locates the nodes requiring rendering within the current viewport using the grid space index, then calculates the minimum change set through virtual DOM difference, and finally performs precise view updates, thus achieving high-performance virtualized rendering. When the user interacts, the system invokes corresponding optimization strategies (such as intelligent hiding and asynchronous computation) to handle the interaction and update the underlying data model. Changes to the data model automatically trigger a new rendering loop through the reactive system. This invention, through this data-driven closed-loop process, ensures rendering performance and smooth interaction even with large datasets.

[0024] Please see Figure 3 As shown, by defining the canvas grid size as 100×100px, a grid index mapping object gridIndex={} is created, whose key is the grid ID, whose format is xy, where x and y are the grid horizontal and vertical axis numbers, and the value is an array of node IDs in the corresponding grid. Then, iterate through all nodes and calculate the grid ID of the node based on its top-left corner coordinates (x, y): gridX=Math.floor(x / 100), gridY=Math.floor(y / 100), gridId=${gridX}-${gridY}; Finally, the node ID is added to the array of corresponding grid IDs. If the grid ID is not in gridIndex, an empty array is initialized. After completion, the mapping from grid ID to node ID set is realized, which reduces node retrieval from global traversal O(n) to near O(1).

[0025] Figure 3This invention demonstrates the working principle of its virtualized rendering mechanism and grid spatial index. The entire flowchart canvas is divided into uniform grids. When the user scrolls or pans the canvas, the system first calculates the grids covered by the current viewport (e.g., grids (1,1), (1,2), etc.). Then, it queries the grid spatial index table to quickly obtain the set of node IDs to be rendered within these grids. Finally, the rendering engine only needs to create or update the nodes in this set, while unloading or ignoring nodes outside the set (outside the viewport), thus greatly reducing the browser's rendering burden and achieving high-performance rendering of large-scale flowcharts.

[0026] Please see Figure 4 The diagram shows the flowchart for the dynamic connection hiding function. This function is triggered when the user drags nodes in a force-directed layout. Its core principle is to use a node-line association index and a breadth-first search algorithm to find all nodes directly or indirectly related to the dragged "focus node," forming a "set of associated nodes." Then, the system traverses all connections in the graph, displaying only those connections where both ends are within this set of associated nodes, while hiding all other unrelated connections. When the drag event ends, all hidden connections are immediately restored. This method significantly reduces the number of graphical elements that need to be rendered during dragging, thus effectively improving the smoothness of the interaction and the page rendering frame rate.

[0027] By creating a bidirectional index object nodeEdgeIndex={}, which contains two sub-objects node2edge and edge2node; The key of node2edge is the node ID, and the value is an object containing the keys sources, targets, inEdges, and outEdges. The value of sources is an array of upstream node IDs of this node, the value of targets is an array of downstream node IDs of this node, the value of inEdges is an array of connection IDs passed to this node, and the value of outEdges is an array of connection IDs passed to this node. The key of edge2node is the connection ID, and the value is an object containing the keys source and target. The value of source is the source node ID, and the value of target is the target node ID. Traverse all connections and assign values ​​to the bidirectional index based on the source and target node IDs to enable fast forward and reverse queries for finding upstream and downstream nodes, nodes for finding connections, and connections for finding nodes.

[0028] Step 2: Employ a hybrid rendering model combining HTML and SVG. In this model, flowchart nodes are rendered using native HTML elements, and flowchart connecting lines are rendered using SVG path elements. Specifically, this includes: It renders nodes based on native DIVs, creates node containers through React dynamic components, generates a unique DOM ID for each node, and uses HTML and CSS to implement the layout, style, and internal interaction of the nodes. Vue3 components can be embedded inside the nodes, including complex UIs such as form input boxes, action buttons, status labels, and ECharts mini-charts, to achieve fine-grained interaction, such as adding hover events to the nodes to trigger detail prompts and clicking buttons to edit node attributes.

[0029] By creating a global SVG canvas (where the SVG canvas is the same size as the flowchart canvas), <path>Tag-based line rendering leverages the advantages of SVG vector graphics to achieve smooth lines, generating lines for each connection. <path>The details are as follows: in <path :d="edge.path" :id="edge.id" class="flow-edge" :style="{stroke: edge.color, strokeWidth: edge.width}" / > , where the d attribute is the Bézier curve path parameter, which is calculated from the coordinates of the source and target nodes; The SVG canvas and the HTML node container are sibling elements. By setting z-index, the SVG connection is placed below the node, ensuring that node interaction is not obscured. At the same time, the SVG connection supports vector scaling to ensure no distortion issues.

[0030] Step 3: Establish a flowchart data model separated from the view based on the MVVM architecture. When the flowchart data model changes, the minimum change set of nodes and connections is calculated using the virtual DOM difference algorithm. Incremental updates are then performed on the view based on this minimum change set, specifically including: Data model construction: Based on the MVVM architecture, the Model layer and View layer are separated. The Model layer is a flowchart data model containing nodes, edges, canvas states, interaction states, etc. State management is implemented using Zustand + Immer, and a store file is created. The `produce` method of `Immer` is used to implement immutable state updates, ensuring that only new objects of the changed parts are generated when the state changes, while the original references are reused for the unchanged parts, thus reducing memory usage. Zustand enables lightweight state distribution, exposing data acquisition and modification methods such as getNodes, updateNode, and addEdge.

[0031] Incremental update implementation: When the flowchart data model changes, such as modifying node coordinates, changing connection styles, or adding / deleting nodes, React's built-in virtual DOM differencing algorithm is used to calculate the minimum set of changes. Compare the node / connection data before and after the change, filter out only the elements that have been added, deleted, or modified, and generate a change list; Perform real DOM / SVG operations only on elements in the change list, and do not re-render elements that have not been changed. For example, only modify the transform style of the moving node, and do not redraw other nodes, so as to achieve precise incremental updates.

[0032] Step 4: Perform virtualization rendering and viewport culling operations. Calculate the viewport position of the scrolling container and render only nodes and connections within the visible area. Unload or placeholder elements outside the visible area. Specifically, this includes: Viewport Calculation: Obtain the DOM elements of the flowchart scrolling container and calculate the coordinate range of the current visible area (viewport) in real time. viewportX1=container.scrollLeft, viewportX2 =container.scrollLeft+container.clientWidth、viewportY1 =container.scrollTop、viewportY2 =container.scrollTop+container.clientHeight.

[0033] Grid Matching: Calculate all grid IDs that the viewport covers based on the viewport coordinate range. For example, if the viewport X range is 0-500px and the Y range is 0-300px, the covered grid IDs are 0-0, 0-1, 0-2, 1-0, 1-1, 1-2, 2-0, 2-0, 2-1, 2-2, 3-0, 3-1, 3-2, 4-0, 4-1, 4-2, 5-0, 5-1, 5-2.

[0034] Viewport Culling and Rendering: Obtain all node IDs within the grid using the grid space index, which serve as the set of nodes to be rendered; only render the nodes in the set and their associated connections, perform DOM unloading on nodes outside the viewport by removing real DOM elements and retaining only the data, and hide the connections outside the viewport by setting display:none; then, using a progressive loading strategy, render the set of nodes to be rendered in batches according to a preset number / batch, with each batch rendered at a 10ms interval to avoid prolonged blocking of the browser's main thread.

[0035] Step 5: Listen for user interaction events in the flowchart, delegate complex topology layout calculation tasks to a Web Worker background thread for asynchronous execution, update the view after synchronizing the calculation results to the main thread, and simultaneously optimize high-frequency interaction events to reduce rendering overhead, specifically including: In this embodiment, the monitored user interaction events include node dragging, canvas zooming / panning, line editing, and node addition, deletion, and modification. Optimization is performed on high-frequency events such as zooming, panning, and dragging, and complex calculations are offloaded to Web Workers for asynchronous execution. The specific implementation is as follows: High-frequency event throttling: Write throttling functions to wrap canvas scaling and panning events, ensuring that viewport calculation and rendering are triggered only once within a preset period, avoiding performance loss caused by frequent triggering; throttling is performed on node drag coordinate update events, updating the data model only when dragging stops or at intervals.

[0036] Transactional batch updates: Combine multiple consecutive operations on the data model into a single transaction. For example, when modifying the style of multiple nodes at the same time, the model can be updated in batches at once using Immer's produce method, triggering only one virtual DOM difference calculation and incremental update, thus reducing the number of view updates.

[0037] Asynchronous execution of complex computations using Web Workers: Create a background thread file named layout.worker.js to handle force-directed layout calculations. This file receives node and connection data from the main thread, executes the force-directed layout algorithm, and calculates the optimal coordinates of the nodes. The main thread creates a Worker instance using new Worker('. / layout.worker.js'). When the user triggers a force-guided layout operation, the main thread passes the data to the background thread via worker.postMessage({nodes, edges}), which simultaneously blocks the main thread's layout-related rendering. After the background thread completes its calculations, it returns the new node coordinate data to the main thread via self.postMessage(newNodes). The main thread receives the data via worker.onmessage, updates the data model, and triggers incremental rendering, completely avoiding the blocking of the UI main thread by computationally intensive tasks.

[0038] Dynamic connection hiding: When a user drags a node, a dynamic connection hiding operation is triggered, specifically: The dragged node is marked as the focus node. Using the breadth-first search (BFS) algorithm combined with the node-line bidirectional association index, all directly / indirectly related nodes are traversed starting from the focus node to generate a set of related nodes. Iterate through all connections, keeping only those where both ends of the node are in the set of associated nodes, and hide the rest by setting display: none to reduce the number of rendered elements. When the user releases the mouse to end the dragging, the display of all connected lines is immediately restored, thus optimizing the dragging interaction.

[0039] Please see Figure 5 As shown, in a second aspect of the present invention, a large-scale flowchart front-end rendering system based on hybrid rendering and incremental updates is proposed, applied to the aforementioned large-scale flowchart front-end rendering method based on hybrid rendering and incremental updates, comprising: The data loading and index building module is used to load the initial node and connection data of the flowchart, and to build and maintain the two-dimensional grid space index and the node-line bidirectional association index. The hybrid rendering module is used to render flowchart nodes and connecting lines using a hybrid rendering model of HTML and SVG, respectively, through native HTML elements and SVG path elements. The data-driven and incremental update module is used to build a flowchart data model based on the MVVM architecture, calculate the minimum change set through the virtual DOM difference algorithm, and perform incremental updates of the view. The virtualization rendering module is used to calculate the viewport position and perform viewport culling, rendering only flowchart elements within the visible area; the interaction processing and asynchronous calculation module is used to listen for user interaction events, optimize the handling of high-frequency events, transfer complex topology layout calculation tasks to the Web Worker background thread for asynchronous execution, and synchronize the calculation results to the main thread to update the view.

[0040] This embodiment utilizes mainstream Web front-end technology stacks to specifically implement a large-scale flowchart front-end rendering method and system based on hybrid rendering and incremental updates. It achieves efficient data retrieval through two-dimensional grid spatial indexing and node-line bidirectional association indexing. It balances the interactive flexibility of nodes and the vector accuracy of lines through HTML+SVG hybrid rendering. It achieves accurate view rendering through MVVM data-driven and incremental updates. It reduces rendering overhead through virtualization rendering and viewport culling. It optimizes computational efficiency and interactive experience through Web Worker asynchronous computation and dynamic connection hiding.

[0041] The technical solution of this embodiment is reproducible and scalable, and is applicable to various modern browsers and front-end technology stacks. It solves the problems of lag, weak interaction, low computing efficiency and high architectural coupling in the rendering of large-scale flowcharts in existing technologies. It has extremely high engineering applicability in enterprise-level process visualization, large-scale system architecture modeling and other scenarios.

[0042] The above embodiments are merely descriptions of preferred embodiments of the present invention and are not intended to limit the scope of the present invention. Various modifications and improvements made by those skilled in the art to the technical solutions of the present invention without departing from the spirit of the present invention should fall within the protection scope defined by the claims of the present invention.< / path> < / path>

Claims

1. A large-scale flowchart front-end rendering method based on hybrid rendering and incremental updates, characterized in that, Includes the following steps: Load the initial nodes and connection data of the flowchart, and construct a two-dimensional grid spatial index and a node-line bidirectional association index based on the initial nodes and connection data; A hybrid rendering model using HTML and SVG is adopted. In this model, flowchart nodes are rendered using native HTML elements, and flowchart connection lines are rendered using SVG path elements. A flowchart data model with separation from the view is established based on the MVVM architecture. When the flowchart data model changes, the minimum change set of nodes and connections is calculated through the virtual DOM difference algorithm, and the view is incrementally updated based on the minimum change set. Perform virtualization rendering and viewport culling operations, calculate the viewport position of the scroll container, render only the nodes and connections within the visible area, and unload or placeholder elements outside the visible area. Listen for user interaction events in the flowchart, transfer complex topology layout calculation tasks to the Web Worker background thread for asynchronous execution, update the view after synchronizing the calculation results to the main thread, and optimize high-frequency interaction events to reduce rendering overhead.

2. The large-scale flowchart front-end rendering method based on hybrid rendering and incremental update according to claim 1, characterized in that, The two-dimensional grid spatial index is constructed as follows: the flowchart canvas is divided into two-dimensional grids according to a fixed pixel size, the grid ID corresponding to each node is pre-calculated, and a mapping relationship between the grid ID and the node ID set is established, reducing the complexity of global node retrieval to nearly O(1).

3. The large-scale flowchart front-end rendering method based on hybrid rendering and incremental update according to claim 1, characterized in that, The node-line bidirectional association index is a bidirectional index relationship object used to realize fast forward and reverse queries by querying all associated lines based on a node and by querying the corresponding nodes at both ends of a line.

4. The large-scale flowchart front-end rendering method based on hybrid rendering and incremental update according to claim 1, characterized in that, The DIV element is used as the native HTML element for rendering nodes. The UI layout and styling capabilities of HTML and CSS are used to render the nodes. Vue / React components, forms or button-like interactive controls are embedded in the nodes. SVG path elements achieve smooth rendering of connecting lines by leveraging the advantages of vector drawing.

5. The large-scale flowchart front-end rendering method based on hybrid rendering and incremental update according to claim 1, characterized in that, The flowchart data model based on the MVVM architecture integrates the Zustand and Immer libraries for state management. The Immer library ensures that new objects are generated when the state changes, while the original references are reused for the unchanged parts. The Zustand library is used to implement lightweight and efficient data flow management.

6. The large-scale flowchart front-end rendering method based on hybrid rendering and incremental update according to claim 1, characterized in that, When performing virtualization rendering, a progressive loading strategy is used to render large-scale node and connection data in batches.

7. The large-scale flowchart front-end rendering method based on hybrid rendering and incremental update according to claim 1, characterized in that, The complex topology layout calculation task is a force-directed layout calculation. The force-directed layout calculation is handed over to the Web Worker background thread for execution in order to avoid the UI interaction thread being blocked by the computationally intensive task.

8. The large-scale flowchart front-end rendering method based on hybrid rendering and incremental update according to claim 1, characterized in that, Optimization of high-frequency interactive events includes: throttling events such as canvas zooming and viewport panning, merging multiple consecutive model operations into a single transaction for batch updates; when a node drag event is detected, the dragged node is marked as the focus node, and all related nodes are found using a breadth-first search algorithm to form a set of related nodes. Only the connections between nodes in the set are rendered, and all connections are restored after the drag event ends.

9. A large-scale flowchart front-end rendering system based on hybrid rendering and incremental updates, used to implement the method of any one of claims 1-8, characterized in that, include: The data loading and index building module is used to load the initial node and connection data of the flowchart, and to build and maintain the two-dimensional grid space index and the node-line bidirectional association index. The hybrid rendering module is used to render flowchart nodes and connecting lines using a hybrid rendering model of HTML and SVG, respectively, through native HTML elements and SVG path elements. The data-driven and incremental update module is used to build a flowchart data model based on the MVVM architecture, calculate the minimum change set through the virtual DOM difference algorithm, and perform incremental updates of the view. The virtualization rendering module is used to calculate the viewport position and perform viewport culling, rendering only flowchart elements within the visible area; the interaction processing and asynchronous calculation module is used to listen for user interaction events, optimize the handling of high-frequency events, transfer complex topology layout calculation tasks to the Web Worker background thread for asynchronous execution, and synchronize the calculation results to the main thread to update the view.

10. The large-scale flowchart front-end rendering system based on hybrid rendering and incremental updates according to claim 9, characterized in that, The hybrid rendering module supports embedding Vue / React components, forms, or button-like interactive controls within HTML-rendered nodes, balancing node interaction flexibility with connection vector accuracy. The interaction processing and asynchronous computing module integrates dynamic connection hiding sub-units and event optimization sub-units, enabling intelligent filtering and display of associated connections, as well as throttling and transactional batch updates for high-frequency interactive events. The system's modules adopt a loosely coupled architecture design, supporting integration with different backend engines and facilitating the expansion of undo / redo and collaborative editing functions.

Images