A relationship graph rendering method and apparatus
By using a main thread and multiple child threads to collaboratively process relationship graph rendering tasks, and combining WebAssembly and IndexedDB technologies, the problem of low performance in single-threaded rendering is solved, achieving efficient, flexible, and secure relationship graph rendering.
Patent Information
- Application Number
- CN202510059787.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-01-14
- Publication Date
- 2026-07-17
AI Technical Summary
In existing technologies, single-threaded JavaScript has low performance, poor flexibility and scalability when rendering complex relationship graphs, resulting in low rendering efficiency and security and memory consumption issues.
The main thread acquires the raw data, the first child thread generates and stores the rendering data, the second child thread stores and returns the data to the main thread, and finally the relationship graph is rendered on the rendering page. The WebAssembly technology is used to generate bytecode modules and multiple threads are used to process the rendering tasks. WebWorker and IndexedDB are used to optimize the data storage and rendering process.
It improves the efficiency, flexibility, and scalability of relationship graph rendering, enhances rendering speed and user experience, reduces memory consumption, and strengthens security.
Smart Images
Figure CN122415774A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of application development technology, and in particular to a method and apparatus for rendering relationship graphs. Background Technology
[0002] As internet applications become increasingly sophisticated, the complexity of the data they process also increases. Currently, relationship diagrams can be used to visualize dependencies in data or processes when dealing with data-related tasks, workflows, and data flows.
[0003] Currently, single-threaded development tools (such as JavaScript) are commonly used to develop code to implement functions such as building and rendering relationship graphs. Due to the single-threaded nature of these development tools, the rendering performance of relationship graphs is low when the structure of the relationship graph is complex. Furthermore, the strong coupling of the code for rendering relationship graphs also results in poor flexibility and scalability, thus reducing the efficiency of rendering relationship graphs. Summary of the Invention
[0004] In view of this, embodiments of the present invention provide a relationship graph rendering method and apparatus, which can utilize a main thread to obtain the original data of the relationship graph to be rendered, utilize a first sub-thread to generate rendering data corresponding to the relationship graph based on canvas parameters and the original data, utilize a second sub-thread to store the original data and the rendering data, and utilize the main thread to load the rendering data, thereby rendering the relationship graph in the rendering page. Embodiments of the present invention overcome the performance problem caused by the single thread in existing methods by handling the relationship graph rendering process through multiple threads, thus improving the efficiency, flexibility, and scalability of relationship graph rendering.
[0005] To achieve the above objectives, according to one aspect of the present invention, a relationship graph rendering method is provided, characterized by comprising: acquiring original data of a relationship graph to be rendered using a main thread, the original data defining the nodes and edges of the relationship graph, and sending the original data to a first sub-thread; acquiring canvas parameters of a canvas for displaying the relationship graph on a rendering page using the first sub-thread, generating rendering data corresponding to the relationship graph based on the canvas parameters and the original data, and sending the rendering data to a second sub-thread; storing the original data and the rendering data using the second sub-thread, and returning the rendering data to the main thread; and loading the rendering data using the main thread, thereby rendering the relationship graph on the rendering page.
[0006] Optionally, the relationship graph rendering method further includes: using the main thread to monitor the canvas parameters of the page, and if it is determined that the canvas parameters have changed, sending the original data of the relationship graph to the first sub-thread.
[0007] Optionally, the step of using the first sub-thread to obtain the canvas parameters of the canvas displaying the relationship graph in the rendering page, generating rendering data corresponding to the relationship graph based on the canvas parameters and the original data, and sending the rendering data to the second sub-thread includes: using the first sub-thread to obtain the changed canvas parameters, regenerating the rendering data corresponding to the relationship graph based on the changed canvas parameters and the original data, and sending the regenerated rendering data to the second sub-thread.
[0008] Optionally, a third sub-thread is used to generate a first virtual element tree corresponding to the relationship graph based on the rendering data; the step of using the main thread to monitor the canvas parameters of the page, and if it is determined that the canvas parameters have changed, further includes: using the third sub-thread to regenerate a second virtual element tree corresponding to the relationship graph based on the regenerated rendering data of the changed canvas parameters, and determining the difference data between the first virtual element tree and the second virtual element tree; and using the main thread to render the relationship graph based on the difference data.
[0009] Optionally, the relationship graph rendering method, after determining the difference data between the first virtual element tree and the second virtual element tree, further includes: sending the difference data to the second sub-thread; using the second sub-thread to store the difference data of the relationship graph, and sending the difference data to the main thread.
[0010] Optionally, using the first sub-thread, the canvas parameters of the canvas displaying the relationship graph in the rendering page are obtained, and rendering data corresponding to the relationship graph is generated based on the canvas parameters and the original data. This includes: using the first sub-thread, calling a preset relationship graph bytecode module to execute the steps of obtaining the canvas parameters of the canvas displaying the relationship graph in the rendering page, and generating rendering data corresponding to the relationship graph based on the canvas parameters and the original data.
[0011] Optionally, the step of generating the first virtual element tree corresponding to the relationship graph using a third sub-thread based on the rendering data includes: using the third sub-thread to call a preset virtual element tree bytecode module to execute the step of generating the first virtual element tree corresponding to the relationship graph based on the rendering data; the step of regenerating the second virtual element tree corresponding to the relationship graph using the third sub-thread based on the regenerated rendering data with the changed canvas parameters, and determining the difference data between the first virtual element tree and the second virtual element tree includes: using the third sub-thread to call the preset virtual element tree bytecode module to execute the step of regenerating the second virtual element tree corresponding to the relationship graph based on the changed canvas parameters and rendering data, and determining the difference data between the first virtual element tree and the second virtual element tree.
[0012] Optionally, the relationship graph rendering method further includes: any multiple threads among the main thread, the first sub-thread, the second sub-thread, and the third sub-thread calling a preset tool bytecode module to perform inter-thread communication.
[0013] To achieve the above objectives, according to a second aspect of the present invention, a relational graph rendering apparatus is provided, comprising: a data acquisition module, a data generation module, and a rendering module; wherein,
[0014] The data acquisition module is used to acquire the original data of the relationship graph to be rendered using the main thread. The original data defines the nodes and edges of the relationship graph and sends the original data to the first sub-thread.
[0015] The data generation module is used to use the first sub-thread to obtain the canvas parameters of the canvas that displays the relationship graph on the rendering page, generate rendering data corresponding to the relationship graph based on the canvas parameters and the original data, and send the rendering data to the second sub-thread.
[0016] The rendering module is used to store the original data and the rendering data using the second sub-thread, and return the rendering data to the main thread; the main thread loads the rendering data, thereby rendering the relationship graph in the rendering page.
[0017] Optionally, the relationship graph rendering device is further configured to use the main thread to monitor the canvas parameters of the page, and if it is determined that the canvas parameters have changed, send the original data of the relationship graph to the first sub-thread.
[0018] Optionally, the relationship graph rendering device is configured to use the first sub-thread to obtain the canvas parameters of the canvas displaying the relationship graph on the rendering page, generate rendering data corresponding to the relationship graph based on the canvas parameters and the original data, and send the rendering data to the second sub-thread, including: using the first sub-thread to obtain the changed canvas parameters, regenerating the rendering data corresponding to the relationship graph based on the changed canvas parameters and the original data, and sending the regenerated rendering data to the second sub-thread.
[0019] Optionally, the relationship graph rendering device is used to generate a first virtual element tree corresponding to the relationship graph using a third sub-thread based on the rendering data; the step of using the main thread to monitor the canvas parameters of the page, and determining that the canvas parameters have changed, further includes: using the third sub-thread to regenerate a second virtual element tree corresponding to the relationship graph based on the regenerated rendering data of the changed canvas parameters, and determining the difference data between the first virtual element tree and the second virtual element tree; and using the main thread to render the relationship graph based on the difference data.
[0020] Optionally, the relationship graph rendering apparatus, after determining the difference data between the first virtual element tree and the second virtual element tree, further includes: sending the difference data to the second sub-thread; using the second sub-thread to store the difference data of the relationship graph, and sending the difference data to the main thread.
[0021] Optionally, the relationship graph rendering device is used to obtain the canvas parameters of the canvas displaying the relationship graph in the rendering page using the first sub-thread, and generate rendering data corresponding to the relationship graph based on the canvas parameters and the original data, including: using the first sub-thread to call a preset relationship graph bytecode module to execute the steps of obtaining the canvas parameters of the canvas displaying the relationship graph in the rendering page, and generating rendering data corresponding to the relationship graph based on the canvas parameters and the original data.
[0022] Optionally, the relationship graph rendering apparatus is used to generate a first virtual element tree corresponding to the relationship graph using a third sub-thread based on the rendering data, including: using the third sub-thread to call a preset virtual element tree bytecode module to execute the step of generating the first virtual element tree corresponding to the relationship graph based on the rendering data; the step of using the third sub-thread to regenerate a second virtual element tree corresponding to the relationship graph based on the regenerated rendering data with the changed canvas parameters, and determining the difference data between the first virtual element tree and the second virtual element tree, includes: using the third sub-thread to call the preset virtual element tree bytecode module to execute the step of regenerating the second virtual element tree corresponding to the relationship graph based on the changed canvas parameters and rendering data, and determining the difference data between the first virtual element tree and the second virtual element tree.
[0023] Optionally, the relationship graph rendering device includes any number of threads among the main thread, the first sub-thread, the second sub-thread, and the third sub-thread, which call a preset tool bytecode module to perform communication between the threads.
[0024] To achieve the above objectives, according to a third aspect of the present invention, an electronic device for rendering a relational graph is provided, characterized in that it includes: one or more processors; and a storage device for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement any of the methods described in the above relational graph rendering methods.
[0025] To achieve the above objectives, according to a fourth aspect of the present invention, a computer-readable medium is provided having a computer program stored thereon, characterized in that, when the program is executed by a processor, it implements any of the methods described in the above-described relational graph rendering methods.
[0026] To achieve the above objectives, according to a fifth aspect of the present invention, a computer program product is provided, comprising a computer program, characterized in that, when executed by a processor, the computer program implements any of the methods described above for rendering relational graphs.
[0027] One embodiment of the above invention has the following advantages or beneficial effects: it can utilize the main thread to obtain the original data of the relationship graph to be rendered, utilize a first sub-thread to generate rendering data corresponding to the relationship graph based on canvas parameters and the original data, utilize a second sub-thread to store the original data and the rendering data, and utilize the main thread to load the rendering data, thereby rendering the relationship graph in the rendering page. This embodiment of the invention overcomes the performance problem caused by the single thread in existing methods by handling the relationship graph rendering process through multiple threads, thus improving the efficiency, flexibility, and scalability of relationship graph rendering.
[0028] The further effects of the aforementioned unconventional alternative methods will be explained below in conjunction with specific implementation methods. Attached Figure Description
[0029] The accompanying drawings are provided to better understand the invention and are not intended to unduly limit the scope of the invention. Wherein:
[0030] Figure 1 This is a flowchart illustrating a relationship graph rendering method provided in one embodiment of the present invention;
[0031] Figure 2 This is a schematic diagram of a relational graph rendering structure provided in one embodiment of the present invention;
[0032] Figure 3 This is a schematic diagram of a relationship graph rendering process provided in one embodiment of the present invention;
[0033] Figure 4 This is a schematic diagram of the structure of a relational graph rendering device provided in one embodiment of the present invention;
[0034] Figure 5 This is an exemplary system architecture diagram in which embodiments of the present invention can be applied;
[0035] Figure 6 This is a schematic diagram of the structure of a computer system suitable for implementing terminal devices or servers of the present invention. Detailed Implementation
[0036] The following description, in conjunction with the accompanying drawings, illustrates exemplary embodiments of the present invention, including various details to aid understanding. These details should be considered merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the invention. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.
[0037] It should be noted that the collection, use, storage, sharing and transfer of user personal information involved in the technical solution of the present invention all comply with the provisions of relevant laws and regulations, and require notification to users and obtaining their consent or authorization. When applicable, user personal information is subjected to de-identification and / or anonymization and / or encryption technical processing.
[0038] With the rapid development of front-end technologies, the continuous improvement of the browser ecosystem, and the continuous enhancement of performance, the technology for rendering relational graphs (such as DAGs, Directed Acyclic Graphs) in front-ends is also constantly evolving. As the complexity and scale of data continue to increase, the requirements for performance optimization and rendering optimization of DAGs are also getting higher and higher. How to improve the rendering speed and interactive responsiveness of DAGs, especially in scenarios with large data scales, is an important technical problem that needs to be solved.
[0039] Relationship graphs (such as DAGs) are powerful tools for representing dependencies and processes, and are widely used in task scheduling, workflows, data flows, and other fields. Therefore, the demand for visualizing, displaying, and manipulating these complex data structures is increasing. Existing methods for rendering relationship graphs typically use JavaScript directly, but these methods have the following problems:
[0040] 1) Performance bottleneck: Currently, graphics loading and rendering mainly rely on JavaScript. However, since JavaScript is single-threaded, it has a performance bottleneck when executed in the browser. Especially for scenarios that require high performance, its performance is low, which affects the page loading and rendering speed and the user experience.
[0041] 2) Memory consumption: Because JavaScript is a dynamically typed language, meaning that code is compiled at runtime and the type of variables can change at runtime, it will cause some memory consumption; in addition, since JavaScript has a built-in garbage collection mechanism to automatically manage memory, this will also bring some performance overhead and memory fragmentation issues.
[0042] 3) Layout and rendering complexity: The layout and rendering of a relationship graph is a complex task, involving operations such as calculating the position of nodes and drawing edges; using pure JavaScript to handle layout and rendering may require writing a lot of code and making trade-offs between performance and effect.
[0043] 4) Lack of access to underlying systems: In some cases, high-performance applications may need to directly access underlying system resources or perform complex computational operations, which JavaScript lacks.
[0044] 5) Security: JavaScript code executes on the client-side, meaning the code and client data can be maliciously tampered with or modified. This can lead to security vulnerabilities and attacks, such as injecting malicious code, modifying application behavior, or performing unauthorized operations. Additionally, using untrusted third-party code libraries can also pose security risks.
[0045] In view of this, such as Figure 1 As shown, this embodiment of the invention provides a method for rendering a relationship graph, which may include the following steps:
[0046] Step S101: Use the main thread to obtain the original data of the relationship graph to be rendered. The original data defines the nodes and edges of the relationship graph. Send the original data to the first child thread.
[0047] Step S102: Using the first sub-thread, obtain the canvas parameters of the canvas that displays the relationship graph on the rendering page, generate rendering data corresponding to the relationship graph based on the canvas parameters and the original data, and send the rendering data to the second sub-thread.
[0048] Step S103: Using the second sub-thread, store the original data and the rendering data, and return the rendering data to the main thread; use the main thread to load the rendering data, thereby rendering the relationship graph in the rendering page.
[0049] Specifically, relationship diagrams come in various types depending on the application scenario. For example: Centralized relationship diagrams: These have a central node as the main node, with other nodes connected to it, indicating that all other nodes have a direct relationship with it; Unidirectional intensive relationship diagrams: The relationships between nodes in this type of diagram are unidirectional, usually represented as a directed graph, where one node points to another, representing a dependency or influence relationship, such as a directed acyclic graph; Relationship representation diagrams: These are used to represent relationships between entities, with nodes connected by lines, and can represent various relationship types; Application-oriented relationship diagrams: These are used for specific application scenarios, such as organizational charts and flowcharts, specifically illustrating relationships in practical applications.
[0050] A relational graph's data structure includes nodes and edges. Nodes represent entities, and edges represent relationships between entities (such as dependencies, order relationships, etc.). In other words, the original data of the relational graph defines its nodes and edges.
[0051] Further, the main thread sends the original data to the first sub-thread; using the first sub-thread, the canvas parameters of the canvas used to display the relationship graph on the rendering page are obtained; based on the canvas parameters and the original data, rendering data corresponding to the relationship graph is generated, and the rendering data is sent to the second sub-thread; using the second sub-thread, the original data and the rendering data are stored, and the rendering data is returned to the main thread; using the main thread, the rendering data is loaded, thereby rendering the relationship graph on the rendering page.
[0052] This invention utilizes a main thread and multiple sub-threads to execute different operations, overcoming the performance bottleneck of JavaScript's single-threaded execution in a browser, improving page loading and relationship graph rendering speed, and enhancing user experience.
[0053] Furthermore, in embodiments of the present invention, each sub-thread can be created through the Web Worker interface. Web Worker is a technology for creating a multi-threaded environment for JavaScript. Web Worker is a script that runs in the background, independent of other scripts, and does not affect the performance of the page. It allows the main thread to create Worker threads to handle some time-consuming tasks, thereby improving the responsiveness and performance of the application.
[0054] The main thread can use the Web Worker's postMessage method to pass (send) the raw DAG graph data of the page request to the first child thread;
[0055] The first sub-thread calculates rendering data based on the calculated data structure and the parameters of the visible area of the page (i.e., the canvas parameters of the canvas displaying the relationship graph, such as size and style). The rendering data includes the nodes to be rendered and their positions, node relationships, node styles, edge styles, and other data.
[0056] Furthermore, the first sub-thread sends the rendering data to the second sub-thread; the second sub-thread stores the original data and the rendering data. In an embodiment of the present invention, IndexedDB can be used to store the original data and the rendering data. The second sub-thread performs the step of storing the original data and the rendering data by calling the IndexedDB interface; further, the second sub-thread returns the rendering data to the main thread; the main thread loads the rendering data, thereby rendering the relationship graph in the rendering page.
[0057] like Figure 2 As shown in the figure, this embodiment of the invention provides a schematic diagram of a relational graph rendering structure, including: a user browser 201, a view layer 202 (e.g., including HTML, CSS, WebAPI, etc.), a multi-threaded layer 203 (first sub-thread, second sub-thread, third sub-thread), multiple bytecode modules 204 (relational graph bytecode module, virtual DOM bytecode module, and utility bytecode module, etc.), data storage 205, a browser engine 206 (e.g., including multi-threaded support, network request processing, event handling, layout and rendering, HTML parsing, DOM construction, data storage, script parsing and execution, etc.), an operating system layer 207 (e.g., including CPU, GPU, input / output devices, network communication module, system calls, etc.), and a main thread 208.
[0058] In embodiments of this invention, a relationship graph bytecode module, a virtual DOM bytecode module, and a utility bytecode module are constructed for multiple threads. Each bytecode module is generated using WebAssembly technology. WebAssembly (Wasm for short) is a binary instruction format used in modern front-end browsers to improve page execution speed and performance. WebAssembly features high performance, cross-platform compatibility (WebAssembly can run on various browsers), security (WebAssembly code is isolated at runtime, providing enhanced security), and support for multiple programming languages: it supports C, C++, Rust, and other programming languages, enabling developers to write web applications using their familiar languages.
[0059] By generating relational graph bytecode modules, virtual DOM bytecode modules, and utility bytecode modules using WebAssembly technology, each bytecode module can run directly on the underlying hardware as a binary file, fully leveraging the characteristics of multi-core processors and hardware acceleration. Bytecode modules can be instantiated in the browser's sandbox environment to achieve interaction with JavaScript code. Combined with WebWorkers, IndexedDB, and the Virtual DOM (DOM Document Object Mode, a programming interface for HTML and XML documents), this provides better performance and faster rendering speeds for graphics rendering, while also improving security. This invention overcomes several problems of existing technologies, particularly in improving rendering speed and implementing complex interactions. By using WebAssembly technology, the computational tasks of rendering the relational graph can be delegated to the underlying hardware, fully utilizing the hardware's performance advantages to improve rendering speed. Simultaneously, combining WebWorker technology allows rendering tasks to be distributed to multiple threads for parallel processing, further accelerating the rendering process. Using IndexedDB as data storage effectively manages and processes large-scale data, improving rendering efficiency and scalability. Virtual DOM and data fragmentation techniques can optimize DOM operations during the rendering process, reduce unnecessary repaints and reflows, and improve rendering performance and user experience.
[0060] Furthermore, the relationship graph bytecode module is used to implement canvas-related functions. These include: constructing the data structure of the relationship graph based on the original data; methods for interacting with IndexedDB in JavaScript to read and update data; and methods for calculating the nodes and their positions and relationships in the currently visible area based on parameters such as the canvas's scaling, position, and node attributes (i.e., canvas parameters). Specifically, using the first sub-thread, the module obtains the canvas parameters of the canvas displaying the relationship graph on the rendering page, and generates the corresponding rendering data for the relationship graph based on the canvas parameters and the original data. This includes: using the first sub-thread, calling the preset relationship graph bytecode module to execute the steps of obtaining the canvas parameters of the canvas displaying the relationship graph on the rendering page, and generating the corresponding rendering data for the relationship graph based on the canvas parameters and the original data.
[0061] The Virtual DOM bytecode module is used to implement the calculation and difference comparison of the Virtual DOM, and can provide methods such as calculating the difference between two Virtual DOM trees and returning the difference data. Specifically, the step of generating the first virtual element tree corresponding to the relationship graph using a third sub-thread based on the rendering data includes: using the third sub-thread to call a preset virtual element tree bytecode module to execute the step of generating the first virtual element tree corresponding to the relationship graph based on the rendering data; the step of regenerating the second virtual element tree corresponding to the relationship graph using the third sub-thread based on the regenerated rendering data with the changed canvas parameters, and determining the difference data between the first virtual element tree and the second virtual element tree includes: using the third sub-thread to call the preset virtual element tree bytecode module to execute the step of regenerating the second virtual element tree corresponding to the relationship graph based on the changed canvas parameters and rendering data, and determining the difference data between the first virtual element tree and the second virtual element tree.
[0062] The utility bytecode module provides methods for communicating with JavaScript's IndexedDB, WebWorker, DOM, etc. Any number of threads among the main thread, the first child thread, the second child thread, and the third child thread can call the preset utility bytecode module to perform inter-thread communication. Specifically, this module also provides methods for communicating with JavaScript's IndexedDB, WebWorker, DOM, etc.
[0063] Specifically, the utility bytecode module can communicate with IndexedDB, including, for example, by: Initializing the database: providing a method to initialize the IndexedDB database and set up the necessary object stores; Reading data: providing one or more methods to read data from IndexedDB. This may include key lookups, range queries, etc.; Writing data: providing methods to write data to IndexedDB, including adding new records, updating existing records, or deleting records; Transaction management: providing methods to start, commit, and rollback transactions to ensure data consistency and integrity; Listening for changes: providing methods to listen for change events in IndexedDB, such as the addition, modification, or deletion of data.
[0064] The utility bytecode module communicates with WebWorkers, including: creating WebWorkers: providing methods to create new WebWorker instances; sending messages: providing methods to send messages to WebWorkers, for example, via the postMessage API; receiving messages: providing methods to receive messages from WebWorkers. This is typically achieved by setting an onmessage event handler in the WebWorker; terminating WebWorkers: providing methods to terminate the WebWorker instance and release resources.
[0065] The utility bytecode module's communication with the DOM includes: Retrieving DOM elements: providing methods to retrieve DOM elements, such as by ID, class name, or tag name selector. Manipulating DOM elements: providing methods to manipulate DOM elements, such as setting attributes, adding / removing classes, inserting / removing child nodes, etc. Event listening: providing methods to add event listeners to DOM elements to handle user interaction events (such as clicks, input, etc.). Style manipulation: providing methods to change the CSS styles of DOM elements, such as setting color, size, and position. Layout information: providing methods to retrieve the layout information of DOM elements, such as size and position.
[0066] The tool bytecode module provides various communication methods with underlying interfaces (such as JavaScript interfaces, server interfaces, etc.), improving the flexibility and scalability of individual threads and bytecode modules.
[0067] like Figure 3 As shown, this embodiment of the invention provides a process for rendering a relationship graph, which may include the following steps;
[0068] Step S301: Create a child thread and load the preset bytecode module.
[0069] Step S302: Listen for user operations on the canvas. Specifically, listen for events (callback functions) such as dragging, scaling, and node dragging on the canvas of the relationship graph to determine if the canvas parameters of the relationship graph have changed. Immediately, changes in canvas parameters will cause changes in the style of the relationship graph; therefore, the rendering data of the relationship graph needs to be recalculated. The specific method for calculating the rendering data is as follows: The main thread listens for the canvas parameters of the page. If it is determined that the canvas parameters have changed, the original data of the relationship graph is sent to the first sub-thread. The step of using the first sub-thread to obtain the canvas parameters of the canvas displaying the relationship graph on the rendering page, generating rendering data corresponding to the relationship graph based on the canvas parameters and the original data, and sending the rendering data to the second sub-thread includes: using the first sub-thread to obtain the changed canvas parameters, regenerating the rendering data corresponding to the relationship graph based on the changed canvas parameters and the original data, and sending the regenerated rendering data to the second sub-thread.
[0070] Step S303: Determine whether the relationship graph is being rendered for the first time. If so, proceed to step S304; otherwise, proceed to step S306.
[0071] Step S304: Using the first sub-thread, obtain the canvas parameters of the canvas that displays the relationship graph on the rendering page, generate the rendering data corresponding to the relationship graph based on the canvas parameters and the original data, and send the rendering data to the second sub-thread.
[0072] Step S305: Use the second sub-thread to store the original data and rendering data, and return the rendering data to the main thread; use the main thread to load the rendering data, thereby rendering the relationship graph in the rendering page.
[0073] Step S306: Use the third sub-thread to generate the first virtual element tree corresponding to the relationship graph based on the rendering data, and regenerate the second virtual element tree corresponding to the relationship graph based on the rendering data regenerated by the changed canvas parameters, and determine the difference data between the first virtual element tree and the second virtual element tree.
[0074] Step S307: Render the relationship graph based on the difference data using the main thread.
[0075] Specifically, in embodiments of the present invention, a third sub-thread generates a corresponding virtual element tree (virtual DOM tree) for each rendering of the relationship graph, thereby determining the difference data between two renderings of the relationship graph. Further, the main thread receives the difference data from the third sub-thread and can compare the differences between the virtual DOM tree and the actual DOM tree, and asynchronously execute a minimized DOM update operation via requestAnimationFrame. Incremental rendering only updates the nodes and edges of the relationship graph within the visible area of the canvas, further improving rendering performance and response speed. That is, the third sub-thread generates a first virtual element tree corresponding to the relationship graph based on the rendering data; the main thread monitors the canvas parameters of the page, and if it is determined that the canvas parameters have changed, it further includes: using the third sub-thread to regenerate a second virtual element tree corresponding to the relationship graph based on the regenerated rendering data from the changed canvas parameters, and determining the difference data between the first virtual element tree and the second virtual element tree; and using the main thread to render the relationship graph based on the difference data.
[0076] Furthermore, the second sub-thread stores the difference data of the virtual element tree calculated by the third sub-thread to the data source. That is, after determining the difference data between the first virtual element tree and the second virtual element tree, the method further includes: sending the difference data to the second sub-thread; using the second sub-thread to store the difference data of the relationship graph, and sending the difference data to the main thread.
[0077] This invention improves the performance of rendering relationship graphs by monitoring user operations on the canvas of the relationship graph, utilizing multiple sub-threads, the main thread, and multiple bytecode modules to execute operations on canvas parameter changes, and performing rendering by comparing with the virtual DOM tree.
[0078] like Figure 4 As shown, this embodiment of the invention provides a relational graph rendering apparatus 400, including: a data acquisition module 401, a data generation module 402, and a rendering module 403; wherein,
[0079] The data acquisition module 401 is used to acquire the original data of the relationship graph to be rendered using the main thread. The original data defines the nodes and edges of the relationship graph and sends the original data to the first sub-thread.
[0080] The data generation module 402 is used to use the first sub-thread to obtain the canvas parameters of the canvas that displays the relationship graph in the rendering page, generate rendering data corresponding to the relationship graph based on the canvas parameters and the original data, and send the rendering data to the second sub-thread.
[0081] The rendering module 403 is used to store the original data and the rendering data using the second sub-thread, and return the rendering data to the main thread; and use the main thread to load the rendering data, thereby rendering the relationship graph in the rendering page.
[0082] This invention also provides an electronic device for rendering relational graphs, comprising: one or more processors; and a storage device for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the method provided in any of the above embodiments.
[0083] This invention also provides a computer-readable medium having a computer program stored thereon, which, when executed by a processor, implements the method provided in any of the above embodiments.
[0084] This invention also provides a computer program product, including a computer program that, when executed by a processor, implements any of the methods described above for rendering relational graphs.
[0085] Figure 5 An exemplary system architecture 500 is shown that can be applied to the graph rendering method or apparatus of the present invention.
[0086] like Figure 5 As shown, system architecture 500 may include terminal devices 501, 502, and 503, a network 504, and a server 505. Network 504 serves as the medium for providing communication links between terminal devices 501, 502, and 503 and server 505. Network 504 may include various connection types, such as wired or wireless communication links, or fiber optic cables, etc.
[0087] Users can use terminal devices 501, 502, and 503 to interact with server 505 via network 504 to receive or send messages, etc. Various client applications can be installed on terminal devices 501, 502, and 503, such as e-commerce client applications, web browser applications, search applications, instant messaging tools, etc.
[0088] Terminal devices 501, 502, and 503 can be various electronic devices with displays and supporting various client applications, including but not limited to smartphones, tablets, laptops, and desktop computers.
[0089] Server 505 can be a server that provides various services, such as a backend management server that supports client applications used by users through terminal devices 501, 502, and 503. The backend management server can process received relationship graph rendering requests and feed back the rendered relationship graph data to the terminal devices.
[0090] It should be noted that the relationship graph rendering method provided in the embodiments of the present invention is generally executed by terminal devices 501, 502, and 503, and correspondingly, the relationship graph rendering device is generally set in terminal devices 501, 502, and 503.
[0091] It should be understood that Figure 5 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.
[0092] The following is for reference. Figure 6 It shows a schematic diagram of the structure of a computer system 600 suitable for implementing a terminal device of the present invention. Figure 6 The terminal device shown is merely an example and should not impose any limitations on the functionality and scope of use of the embodiments of the present invention.
[0093] like Figure 6 As shown, the computer system 600 includes a central processing unit (CPU) 601, which can perform various appropriate actions and processes based on programs stored in read-only memory (ROM) 602 or programs loaded from storage section 608 into random access memory (RAM) 603. The RAM 603 also stores various programs and data required for the operation of the system 600. The CPU 601, ROM 602, and RAM 603 are interconnected via a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.
[0094] The following components are connected to I / O interface 605: an input section 606 including a keyboard, mouse, etc.; an output section 607 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, etc.; a storage section 608 including a hard disk, etc.; and a communication section 609 including a network interface card such as a LAN card, modem, etc. The communication section 609 performs communication processing via a network such as the Internet. A drive 610 is also connected to I / O interface 605 as needed. A removable medium 611, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., is installed on drive 610 as needed so that computer programs read from it can be installed into storage section 608 as needed.
[0095] In particular, according to the embodiments disclosed in this invention, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments disclosed in this invention include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication section 609, and / or installed from removable medium 611. When the computer program is executed by central processing unit (CPU) 601, it performs the functions defined above in the system of this invention.
[0096] It should be noted that the computer-readable medium shown in this invention can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this invention, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this invention, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. Computer-readable signal media can also be any computer-readable medium other than computer-readable storage media, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wireless, wire, optical fiber, RF, etc., or any suitable combination thereof.
[0097] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of the present invention. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram or flowchart, and combinations of blocks in a block diagram or flowchart, may be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.
[0098] The modules and / or units described in the embodiments of the present invention can be implemented in software or hardware. The described modules and / or units can also be housed in a processor; for example, a processor can be described as including a data acquisition module, a data generation module, and a rendering module. The names of these modules do not necessarily limit the module itself; for example, the data acquisition module can also be described as "a module that uses the main thread to acquire the raw data of the relational graph to be rendered."
[0099] In another aspect, the present invention also provides a computer-readable medium, which may be included in the device described in the above embodiments; or it may exist independently and not assembled into the device. The computer-readable medium carries one or more programs that, when executed by the device, cause the device to include: using a main thread to obtain raw data of a relationship graph to be rendered, the raw data defining the nodes and edges of the relationship graph, and sending the raw data to a first sub-thread; using the first sub-thread to obtain canvas parameters of a canvas for displaying the relationship graph on a rendering page, generating rendering data corresponding to the relationship graph based on the canvas parameters and the raw data, and sending the rendering data to a second sub-thread; using the second sub-thread to store the raw data and the rendering data, and returning the rendering data to the main thread; and using the main thread to load the rendering data, thereby rendering the relationship graph on the rendering page.
[0100] In embodiments of the present invention, the main thread acquires the original data of the relationship graph to be rendered, a first sub-thread generates rendering data corresponding to the relationship graph based on canvas parameters and the original data, a second sub-thread stores the original data and the rendering data, and the main thread loads the rendering data, thereby rendering the relationship graph on the rendering page. This embodiment of the present invention overcomes the performance problem caused by the single thread in existing methods by handling the relationship graph rendering process through multiple threads, thus improving the efficiency, flexibility, and scalability of relationship graph rendering.
[0101] The specific embodiments described above do not constitute a limitation on the scope of protection of this invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can occur depending on design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this invention should be included within the scope of protection of this invention.
Claims
1. A method for rendering a relationship graph, characterized in that, include: The main thread obtains the original data of the relationship graph to be rendered, which defines the nodes and edges of the relationship graph, and sends the original data to the first child thread. Using the first sub-thread, obtain the canvas parameters of the canvas that displays the relationship graph on the rendering page, generate rendering data corresponding to the relationship graph based on the canvas parameters and the original data, and send the rendering data to the second sub-thread; The second sub-thread stores the original data and the rendering data, and returns the rendering data to the main thread; The main thread loads the rendering data, thereby rendering the relationship graph on the rendering page.
2. The method according to claim 1, characterized in that, Further includes: The main thread monitors the canvas parameters of the page, and if it determines that the canvas parameters have changed, it sends the original data of the relationship graph to the first child thread.
3. The method according to claim 2, characterized in that, The step of using the first sub-thread to obtain the canvas parameters of the canvas displaying the relationship graph on the rendering page, generating rendering data corresponding to the relationship graph based on the canvas parameters and the original data, and sending the rendering data to the second sub-thread includes: Using the first sub-thread, the changed canvas parameters are obtained, and based on the changed canvas parameters and the original data, the rendering data corresponding to the relationship graph is regenerated, and the regenerated rendering data is sent to the second sub-thread.
4. The method according to claim 2, characterized in that, A third sub-thread is used to generate the first virtual element tree corresponding to the relationship graph based on the rendering data; The step of using the main thread to monitor the canvas parameters of the page, and further including, if it is determined that the canvas parameters have changed: Using the third sub-thread, based on the regenerated rendering data of the changed canvas parameters, the second virtual element tree corresponding to the relationship graph is regenerated, and the difference data between the first virtual element tree and the second virtual element tree is determined; The main thread is used to render the relationship graph based on the difference data.
5. The method according to claim 4, characterized in that, After determining the difference data between the first virtual element tree and the second virtual element tree, the process further includes: Send the difference data to the second sub-thread; The second sub-thread stores the difference data of the relationship graph and sends the difference data to the main thread.
6. The method according to claim 1, characterized in that, Using the first sub-thread, the canvas parameters of the canvas displaying the relationship graph on the rendering page are obtained. Based on the canvas parameters and the original data, rendering data corresponding to the relationship graph is generated, including: Using the first sub-thread, a preset relationship graph bytecode module is called to execute the steps of obtaining the canvas parameters of the canvas displaying the relationship graph on the rendering page, and generating the rendering data corresponding to the relationship graph based on the canvas parameters and the original data.
7. The method according to claim 4, characterized in that, The step of generating the first virtual element tree corresponding to the relationship graph using a third sub-thread based on the rendering data includes: Using the third sub-thread, a preset virtual element tree bytecode module is called to execute the step of generating the first virtual element tree corresponding to the relationship graph based on the rendering data; The step of using a third sub-thread to regenerate the second virtual element tree corresponding to the relationship graph based on the regenerated rendering data of the changed canvas parameters, and determining the difference data between the first virtual element tree and the second virtual element tree, includes: Using the third sub-thread, the preset virtual element tree bytecode module is called to execute the steps of regenerating the second virtual element tree corresponding to the relationship graph based on the changed canvas parameters and rendering data, and determining the difference data between the first virtual element tree and the second virtual element tree.
8. The method according to claims 1 to 7, characterized in that, Further includes: Any multiple threads among the main thread, the first sub-thread, the second sub-thread, and the third sub-thread call a preset tool bytecode module to perform inter-thread communication.
9. A relational graph rendering device, characterized in that, include: The system comprises a data acquisition module, a data generation module, and a rendering module; among which, The data acquisition module is used to acquire the original data of the relationship graph to be rendered using the main thread. The original data defines the nodes and edges of the relationship graph and sends the original data to the first sub-thread. The data generation module is used to use the first sub-thread to obtain the canvas parameters of the canvas that displays the relationship graph on the rendering page, generate rendering data corresponding to the relationship graph based on the canvas parameters and the original data, and send the rendering data to the second sub-thread. The rendering module is used to store the original data and the rendering data using the second sub-thread, and return the rendering data to the main thread; the main thread loads the rendering data, thereby rendering the relationship graph in the rendering page.
10. An electronic device, characterized in that, include: One or more processors; Storage device for storing one or more programs. When the one or more programs are executed by the one or more processors, the one or more processors implement the method as described in any one of claims 1-8.
11. A computer-readable medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the method as described in any one of claims 1-8.
12. A computer program product, comprising a computer program, characterized in that, When the program is executed by the processor, it implements the method as described in any one of claims 1-8.