A browser big data rendering implementation method and system

Abstract

The present invention discloses a browser big data rendering implementation method and system, and relates to the field of computer software technology. Compared with the previous table rendering technology, the present invention solves the problem that the existing technology of reducing the amount of data loaded at one time cannot meet the user's demand for continuous data flow; lacks an effective mechanism to optimize the rendering process of large data sets that need to be updated and interacted in real time on the client; realizes parallel processing of data through WebWorker, combines SSE technology to use sub-threads to receive data in segments, and also uses virtual scrolling technology to optimize user interface rendering, and also uses cache processing technology to improve rendering efficiency and reduce pressure on back-end servers; uses a hybrid compression algorithm to compress data to reduce data storage and transmission costs; transmits data based on a secure encryption channel to ensure data security; dynamically adjusts the rendering process based on a machine learning algorithm to improve browser-side data display performance and user experience.

Description

Technical Field

[0001] The present invention relates to the field of computer software technology, and in particular to a browser big data rendering implementation method and system. Background Art

[0002] With the rapid development of modern information technology, big data has become a key field, and its applications cover multiple industries such as finance, healthcare, and education. With the surge in data volume, how to efficiently display and process this data in client environments such as browsers has become a technical challenge. When faced with large amounts of data, traditional table rendering technology often leads to reduced browser performance, slow page loading, scrolling jams, and even crashes.

[0003] Tabular data is usually displayed by constructing table rows and cells directly in the DOM (Document Object Model). This method is simple and intuitive, but it will increase the browser rendering burden when the amount of data is large, because each element of the DOM requires the browser to perform layout calculations and rendering. In addition, as the user scrolls to view the data, the browser needs to constantly recalculate and render the elements in the viewport, which further exacerbates the performance problem.

[0004] To solve these problems, existing technologies try to reduce the amount of data loaded at one time by paging or lazy loading, but this limits the user's viewing range and cannot meet the needs of continuous data flow in some scenarios. At the same time, existing technologies also lack effective mechanisms to optimize the rendering process of large data sets on the client, especially in Web applications that require real-time updates and interactions.

[0005] In order to solve the above problems, the present invention proposes a browser big data rendering implementation method and system. Summary of the invention

[0006] The purpose of the present invention is to propose a browser big data rendering implementation method and system to solve the problems raised in the background technology:

[0007] The existing technology for reducing the amount of data loaded at one time cannot meet the user's demand for continuous data flow; the existing technology also lacks an effective mechanism to optimize the rendering process of large data sets that require real-time updates and interactions on the client.

[0008] In order to achieve the above object, the present invention adopts the following technical solutions:

[0009] A method for implementing browser big data rendering includes the following steps:

[0010] S1: Create one or more child threads through WebWorker technology to process data in parallel;

[0011] S2: Initialize the row height and visual height of the table according to different resolutions and screen sizes in the child thread;

[0012] S3: The child thread receives the large data set from the server in segments through the server-sent event technology, namely SSE technology, and stores it in memory;

[0013] S4: The child thread sends the total amount of received data to the main thread through the message passing mechanism;

[0014] S5: The main thread monitors and obtains the ScrollTop value of the table in real time, and passes the ScrollTop value to the child thread;

[0015] S6: The child thread calculates the data row to be displayed in the current viewport according to the received ScrollTop value using a preset algorithm;

[0016] S7: The child thread sends the calculation results to the main thread through the message passing mechanism, and the main thread renders the data.

[0017] Preferably, after receiving the large data set, the sub-thread divides the data into several data blocks for processing based on the data block technology; when calculating the data to be displayed, the sub-thread adopts the virtual scrolling technology to only render the data in the current viewport.

[0018] Preferably, the main thread and the child thread perform bidirectional data exchange via WebSocket or SharedWorker; the main thread and the child thread also perform message transmission via asynchronous communication, queue sorting the messages, and classifying and managing the messages via a priority matrix.

[0019] Preferably, the main thread also compresses and encodes the data based on a hybrid compression algorithm, and the compression process of the hybrid compression algorithm is as follows:

[0020] Step A: preprocess the data to be compressed;

[0021] Step B: First, use dictionary encoding to perform preliminary compression on the data; the details are as follows:

[0022] Step B1: Analyze the data to be compressed, find repeated strings or patterns, analyze them, and build a dictionary based on the analysis results, in which each repeated string corresponds to a unique code;

[0023] Step B2: Replace repeated strings in the original data using the codes in the dictionary;

[0024] Step B3: During the compression process, if a new repeated string is found, the dictionary is dynamically updated, the new repeated string is added to the dictionary, and a new code is assigned;

[0025] Step C: Perform Huffman coding on the dictionary-encoded data; the details are as follows:

[0026] Step C1: Perform character frequency statistics on the data to be compressed;

[0027] Step C2: construct a Huffman tree according to the character frequency, wherein each leaf node of the Huffman tree represents a character, and each non-leaf node represents an intermediate node;

[0028] Step C3: Starting from the root node of the Huffman tree, assign a binary code to each character;

[0029] Step D: storing or transmitting the data compressed by the hybrid compression algorithm;

[0030] The decompression process of the hybrid compression algorithm is as follows:

[0031] Step a: According to the rules of Huffman coding, read the binary code from the compressed data and gradually parse out the corresponding characters;

[0032] Step b: According to the dictionary encoding rules, replace the code in the Huffman decoded data with the original string;

[0033] Step c: After dictionary decoding, the data is restored to its original state;

[0034] In the hybrid compression algorithm, data features are monitored and analyzed based on a machine learning algorithm, and the character strings in the dictionary are automatically and dynamically adaptively adjusted according to new frequent patterns in the data; hierarchical division is performed according to the application degree of the character string pattern; the Huffman tree is dynamically adjusted; and the compression coding method is automatically switched;

[0035] The machine learning algorithm is based on a CNN-LSTM network optimized by an improved brainstorming algorithm. The improved brainstorming algorithm optimizes the model parameters in the CNN-LSTM network as follows:

[0036] Initialize the model parameters of the CNN-LSTM network, perform initial clustering of the model parameters based on the k-means algorithm, and define the optimal value for each class, that is, the model parameter value with the lowest output error of the CNN-LSTM network is the class center;

[0037] The algorithm randomly selects model parameters from one or two classes with a preset probability, and mutates the model parameters of the selected class based on the following method:

[0038]

[0039] in, are the mutated model parameters, is the model parameter to be mutated; , for A random number between is the variation factor; is the global optimal solution; and is the division coefficient;

[0040] For model parameters from different clusters, the following fusion is performed:

[0041]

[0042] in, is the variation model parameter generated by the fusion of the two model parameters, and are the two model parameters that are accepted for fusion; for A random number between

[0043] Update the model parameters as follows:

[0044]

[0045] in, For the Model parameters before the iteration update; For the The model parameters after the iteration update; For the The global optimal influence coefficient of the iteration.

[0046] Preferably, the main thread also dynamically adjusts the row height value and the table visible height value based on the improved brainstorming algorithm, and also dynamically adjusts the size of the data block and the preloaded amount of data according to the user's scrolling speed and frequency based on the improved brainstorming algorithm.

[0047] Preferably, the main thread and the sub-thread also use a secure communication channel encrypted based on the elliptic curve encryption algorithm to perform encrypted data communication.

[0048] Preferably, during the operation of the method, an adaptive rendering mode is used to automatically adjust the rendering strategy and the degree of detail according to the user's device performance, network conditions and browsing behavior; a cross-browser communication framework is also combined to perform big data adaptive rendering collaboration between different browsers; the data processing of the main thread and the child thread is monitored, and the rendering strategy is dynamically adjusted according to the monitoring results.

[0049] A browser big data rendering implementation system, comprising:

[0050] A main thread: used to obtain and process user input in real time and send it to the child thread;

[0051] One or more child threads: used to process data in parallel, receive the ScrollTop value sent by the main thread, calculate and return the data to be displayed in the current viewport;

[0052] A data storage unit: used to store the received large data set in the child thread.

[0053] Preferably, the system stores recently accessed data via a data cache mechanism.

[0054] A computer-readable storage medium stores computer program instructions, which implement the above method when executed.

[0055] Compared with the prior art, the present invention provides a browser big data rendering implementation method and system, which has the following beneficial effects:

[0056] The present invention realizes parallel processing of data through WebWorker, combines server-sent event technology, namely SSE technology, to receive a large amount of data in segments using child threads, and also uses virtual scrolling technology to optimize user interface rendering. At the same time, the present invention adopts cache processing technology, which can further improve rendering efficiency and reduce the pressure on the back-end server, and has high practical value and broad application prospects; it also uses a hybrid compression algorithm to compress browser big data, reduce data storage and transmission costs, and improve data processing efficiency. It also transmits data based on a secure encrypted channel to ensure data security; it further dynamically adjusts the rendering process based on a machine learning algorithm to improve the performance of browser-side data display and user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0057] Figure 1 This is a system block diagram mentioned in Embodiment 1 of the present invention;

[0058] Figure 2 This is a flow chart of the method mentioned in Example 1 of the present invention;

[0059] Figure 3This is a flow chart of the hybrid compression algorithm mentioned in Example 1 of the present invention. DETAILED DESCRIPTION

[0060] The technical solutions in the embodiments of the present invention will be described clearly and completely below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all the embodiments.

[0061] The present invention realizes parallel processing of data through WebWorker, combines the server-sent event technology, namely SSE technology, to receive a large amount of data in segments using child threads, and also uses virtual scrolling technology to optimize user interface rendering. At the same time, the present invention adopts cache processing technology, which can further improve rendering efficiency and reduce the pressure on the back-end server. It has high practical value and broad application prospects; it also uses a hybrid compression algorithm to compress browser big data, reduce data storage and transmission costs, and improve data processing efficiency. It also transmits data based on a secure encrypted channel to ensure data security; it further dynamically adjusts the rendering process based on a machine learning algorithm to improve the performance of browser-side data display and user experience. Specifically including the following contents.

[0062] Embodiment 1:

[0063] See also Figure 1-3 The present invention provides a browser big data rendering implementation system, comprising:

[0064] A main thread: used to obtain and process user input in real time and send it to the child thread;

[0065] One or more child threads: used to process data in parallel, receive the ScrollTop value sent by the main thread, calculate and return the data to be displayed in the current viewport;

[0066] A data storage unit: used to store the received large data set in the child thread.

[0067] The above system is implemented under the BS architecture, including two parts: the front-end browser interface and the server. The front-end requests the server data and listens to the user operation. After receiving the request, the server will transmit the data set in segments to the browser. The browser renders the corresponding data according to the user operation.

[0068] The above system can greatly share the computing pressure of the main thread by creating a sub-thread. By requesting data and caching data sets in the sub-thread, the main thread responds to user operations. This can reduce the rendering performance requirements for big data. The implementation of the above system specifically includes the following steps:

[0069] 1. The browser creates a child thread through WebWorker technology, obtains the visible height of the Dom element and the element height of each data item, and sends them to the child thread.

[0070] By creating child threads based on WebWorker technology, the main thread can focus on the interaction of the user interface without being blocked by time-consuming calculations or operations. Even if the main thread performs some time-consuming tasks, it can still remain responsive, thereby improving the overall responsiveness of the application. In addition, WebWorker technology allows the use of the parallel computing capabilities of multi-core CPUs. By assigning tasks to background threads for execution, the performance of computer hardware can be fully utilized to improve the execution efficiency of applications. WebWorker can also avoid long-term occupation of the main thread by transferring some time-consuming tasks to background threads for processing, thereby ensuring smooth rendering of the interface. The background thread where WebWorker is located can run continuously, and tasks can still be executed in the background even if the page is suspended or minimized. This makes WebWorker particularly suitable for operations that require long-term operation, such as background data updates or complex calculation tasks.

[0071] 2. The child thread receives and stores the element data related to the main thread.

[0072] The main thread and the child thread exchange data bidirectionally through WebSocket or SharedWorker; the main thread and the child thread also use asynchronous communication to transmit messages, which prevents the main thread from being blocked while waiting for the child thread to respond. The main thread can continue to perform other tasks after sending the message, and when the child thread's response arrives, it is processed through the callback function. The messages are queued and classified and managed through the priority matrix. The message queue and priority mechanism are introduced, and high priority can be set for important messages to ensure timely processing. At the same time, the messages are classified and managed, and different types of messages can adopt different processing strategies to improve communication efficiency.

[0073] 3. The child thread initiates an SSE request to the server. After receiving the relevant request, the server first returns the number of complete data sets, and then returns a complete data set in segments and transmits it to the browser. The browser receives the number of data sets and returns it to the main thread. The child thread caches the corresponding data sets.

[0074] Real-time data communication with the server is achieved through SSE technology, so that child threads can receive large data sets in segments, avoiding performance problems caused by loading a large amount of data at one time. SSE technology can push data in real time and improve the real-time performance of data transmission. SSE technology only needs to establish a long connection and does not need to frequently establish and close connections, which can save more server and client resources. SSE also has the characteristics of one-way communication, which only allows the server to push data to the client, and does not support the client to send requests to the server. This one-way communication method makes SSE technology more practical in one-way data flow scenarios. ‌‌‌

[0075] 4: The child thread sends the total amount of received data to the main thread through the message passing mechanism.

[0076] 5 After the main thread receives the number of data sets, it can combine the virtual scrolling technology to render the height of the element.

[0077] After the main thread receives the data from the data set, it compresses and encodes the data based on the hybrid compression algorithm, which can minimize the size of data transmission and storage while ensuring data accuracy. Figure 3 ,The compression process of the hybrid compression algorithm is as follows:

[0078] Step A: pre-process the data to be compressed; for example, remove unnecessary spaces, line breaks and other characters, and perform other formatting to better perform subsequent compression operations.

[0079] Step B: First, use dictionary encoding to perform preliminary compression on the data; the details are as follows:

[0080] Step B1: Analyze the data to be compressed to find repeated strings or patterns, which can be text content, code snippets, image data, etc. Analyze and build a dictionary based on the analysis results, in which each repeated string corresponds to a unique code; this code is usually shorter than the original string and can be a fixed-length binary code or a variable-length code.

[0081] Step B2: Use the codes in the dictionary to replace repeated strings in the original data; for example, if there are multiple "hello world" strings in the original data, they can be replaced with a shorter code (such as "001"). For non-repeated strings, they can be directly retained in the compressed data or represented by special markers.

[0082] Step B3: During the compression process, if a new repeated string is found, the dictionary is dynamically updated, the new repeated string is added to the dictionary, and a new code is assigned; this can continuously improve the compression efficiency.

[0083] Step C: Perform Huffman coding on the dictionary-encoded data; the details are as follows:

[0084] Step C1: Perform character frequency statistics on the data to be compressed; count the number of times each character appears in the data and calculate its frequency of occurrence; for example, if the data contains the letter "A" 100 times and the total number of characters is 1000, then the frequency of occurrence of the letter "A" is 10%.

[0085] Step C2: Based on the character frequency, a Huffman tree is constructed, where each leaf node of the Huffman tree represents a character and each non-leaf node represents an intermediate node; the process of constructing the Huffman tree starts from the leaf node and gradually merges the two nodes with the smallest frequency until only one root node remains. Each node has a weight, which represents the sum of the frequencies of the corresponding characters.

[0086] Step C3: Starting from the root node of the Huffman tree, assign a binary code to each character; for each character, starting from the root node, assign "0" to the left and "1" to the right until reaching the leaf node corresponding to the character. For example, for characters with a higher frequency of occurrence, a shorter code such as "01" can be assigned; for characters with a lower frequency of occurrence, a longer code such as "1101" can be assigned.

[0087] Step D: Storing or transmitting the data compressed by the hybrid compression algorithm; the compressed data can be saved as a file, or transmitted to other devices through a network for decompression and processing.

[0088] The decompression process of the hybrid compression algorithm is as follows:

[0089] Step a: According to the rules of Huffman coding, read the binary code from the compressed data and gradually parse out the corresponding characters; since Huffman coding is a variable-length coding, it needs to be decoded according to the length of the code and the frequency of the character. The Huffman tree can be used to assist the decoding process, starting from the root node, and traversing down step by step according to each bit of the binary code until reaching the leaf node and obtaining the corresponding character.

[0090] Step b: According to the rules of dictionary encoding, replace the codes in the data after Huffman decoding with the original string; a pre-established dictionary can be used for decoding operations. For each code, find the corresponding string in the dictionary and replace it back in the data.

[0091] Step c: After dictionary decoding, the data is restored to its original state; the decompressed data can be further processed and analyzed, or rendered and displayed in a browser.

[0092] In the hybrid compression algorithm, data features are monitored and analyzed based on machine learning algorithms. According to new frequent patterns in the data, the strings in the dictionary are automatically and dynamically adjusted. The strings are divided into levels according to the degree of application of the string patterns. The Huffman tree is dynamically adjusted. The compression coding method is automatically switched.

[0093] The machine learning algorithm is based on the CNN-LSTM network optimized by the improved brainstorming algorithm. The improved brainstorming algorithm optimizes the model parameters in the CNN-LSTM network as follows:

[0094] Initialize the model parameters of the CNN-LSTM network, perform initial clustering of the model parameters based on the k-means algorithm, and define the optimal value for each class, that is, the model parameter value with the lowest output error of the CNN-LSTM network is the class center;

[0095] The algorithm randomly selects model parameters from one or two classes with a preset probability, and mutates the model parameters of the selected class based on the following method:

[0096]

[0097] in, are the mutated model parameters, is the model parameter to be mutated; , for A random number between is the variation factor; is the global optimal solution; and is the division coefficient;

[0098] For model parameters from different clusters, the following fusion is performed:

[0099]

[0100] in, is the variation model parameter generated by the fusion of the two model parameters, and are the two model parameters that are accepted for fusion; for A random number between

[0101] Update the model parameters as follows:

[0102]

[0103] in, For the Model parameters before the iteration update; For the The model parameters after the iteration update; For the The global optimal influence coefficient of the iteration.

[0104] The hybrid compression algorithm further optimized based on the above machine learning algorithm can effectively compress browser big data, reduce data storage and transmission costs, and improve data processing efficiency. Moreover, this hybrid compression algorithm combines the advantages of two encoding methods and has a higher compression ratio and better compression effect.

[0105] 6. The main thread monitors the scrolling data of the element in real time, and combines the anti-shake technology to send the scrolling data to the child thread. The anti-shake technology is used to limit the frequency to prevent it from being triggered by high frequency. The child thread receives ScrollTop and calculates the target data to be displayed through the Slice method, and then sends the target data to the main thread.

[0106] 7. After the main thread obtains the target data, it dynamically adjusts the row height value and the table visual height value based on the improved brainstorming algorithm, and dynamically adjusts the size of the data block and the preloaded amount of data according to the user's scrolling speed and frequency, and dynamically renders it into the interface. It can also automatically adjust the rendering strategy and degree of detail using adaptive rendering mode according to the user's device performance, network conditions, and browsing behavior; for example, on mobile devices or when the network is slow, a simplified rendering method is used to reduce the amount of data and graphics complexity to improve loading speed and response performance. It also combines the cross-browser communication framework to perform adaptive rendering collaboration of big data between different browsers; for example, in a multi-user collaborative data analysis scenario, different users can use different browsers, but can still jointly process and render large data sets. It also monitors the data processing of the main thread and the child thread, and dynamically adjusts the rendering strategy based on the monitoring results. In this way, whenever the user performs a scrolling operation, the above logic is repeated.

[0107] By using virtual scrolling technology, only the data in the current viewport is rendered, which can significantly reduce DOM operations and improve rendering efficiency. According to the user's scrolling speed and frequency, the size and preload of the data block can be dynamically adjusted to achieve a smooth scrolling experience. Using the above technology to optimize user interface rendering can greatly improve the data display effect on the browser side and enhance the user experience.

[0108] The above description is only a preferred specific implementation manner of the present invention, but the protection scope of the present invention is not limited thereto. Any technician familiar with the technical field can make equivalent replacements or changes according to the technical scheme and inventive concept of the present invention within the technical scope disclosed by the present invention, which should be covered by the protection scope of the present invention.

Claims

1. A browser big data rendering implementation method, characterized in that: The steps include: S1: Create one or more child threads through WebWorker technology to process data in parallel; S2: Initialize the row height and visual height of the table according to different resolutions and screen sizes in the child thread; S3: The child thread receives the large data set from the server in segments through the server-sent event technology, namely SSE technology, and stores it in memory; S4: The child thread sends the total amount of received data to the main thread through the message passing mechanism; S5: The main thread monitors and obtains the ScrollTop value of the table in real time, and passes the ScrollTop value to the child thread; S6: The child thread calculates the data row to be displayed in the current viewport according to the received ScrollTop value using a preset algorithm; S7: The child thread sends the calculation results to the main thread through the message passing mechanism, and the main thread renders the data; In view of the above content, after receiving a large data set, the sub-thread divides the data into several data blocks for processing based on the data block technology; when calculating the data to be displayed, the sub-thread adopts the virtual scrolling technology to only render the data within the current viewport; The main thread also dynamically adjusts the row height value and the table visual height value based on the improved brainstorming algorithm, and dynamically adjusts the size of the data block and the preloaded amount of data according to the user's scrolling speed and frequency based on the improved brainstorming algorithm; The main thread and the sub-thread also use a secure communication channel encrypted based on the elliptic curve encryption algorithm to encrypt data communication.

2. The method for implementing browser big data rendering according to claim 1, characterized in that: The main thread and the child thread perform bidirectional data exchange via WebSocket or SharedWorker; the main thread and the child thread also perform message transmission via asynchronous communication, queue sorting the messages, and classifying and managing the messages via a priority matrix.

3. The method for implementing browser big data rendering according to claim 2, characterized in that: The main thread also compresses and encodes data based on a hybrid compression algorithm. The compression process of the hybrid compression algorithm is as follows: Step A: preprocess the data to be compressed; Step B: First, use dictionary encoding to perform preliminary compression on the data; the details are as follows: Step B1: Analyze the data to be compressed, find repeated strings or patterns, analyze them, and build a dictionary based on the analysis results, in which each repeated string corresponds to a unique code; Step B2: Replace repeated strings in the original data using the codes in the dictionary; Step B3: During the compression process, if a new repeated string is found, the dictionary is dynamically updated, the new repeated string is added to the dictionary, and a new code is assigned; Step C: Perform Huffman coding on the dictionary-encoded data; the details are as follows: Step C1: Perform character frequency statistics on the data to be compressed; Step C2: construct a Huffman tree according to the character frequency, wherein each leaf node of the Huffman tree represents a character, and each non-leaf node represents an intermediate node; Step C3: Starting from the root node of the Huffman tree, assign a binary code to each character; Step D: storing or transmitting the data compressed by the hybrid compression algorithm; The decompression process of the hybrid compression algorithm is as follows: Step a: According to the rules of Huffman coding, read the binary code from the compressed data and gradually parse out the corresponding characters; Step b: According to the dictionary encoding rules, replace the code in the Huffman decoded data with the original string; Step c: After dictionary decoding, the data is restored to its original state; In the hybrid compression algorithm, data features are monitored and analyzed based on a machine learning algorithm, and the character strings in the dictionary are automatically and dynamically adaptively adjusted according to new frequent patterns in the data; hierarchical division is performed according to the application degree of the character string pattern; the Huffman tree is dynamically adjusted; and the compression coding method is automatically switched; The machine learning algorithm is based on a CNN-LSTM network optimized by an improved brainstorming algorithm. The improved brainstorming algorithm optimizes the model parameters in the CNN-LSTM network as follows: Initialize the model parameters of the CNN-LSTM network, perform initial clustering of the model parameters based on the k-means algorithm, and define the optimal value for each class, that is, the model parameter value with the lowest output error of the CNN-LSTM network is the class center; The algorithm randomly selects model parameters from one or two classes with a preset probability, and mutates the model parameters of the selected class based on the following method: in, are the mutated model parameters, is the model parameter to be mutated; , for A random number between is the variation factor; is the global optimal solution; and is the division coefficient; For model parameters from different clusters, the following fusion is performed: in, is the variation model parameter generated by the fusion of the two model parameters, and are the two model parameters that are accepted for fusion; for A random number between Update the model parameters as follows: in, For the Model parameters before the iteration update; For the The model parameters after the iteration update; For the The global optimal influence coefficient of the iteration.

4. The method for implementing browser big data rendering according to claim 3, characterized in that: During the operation of the method, the rendering strategy and the degree of detail are automatically adjusted using an adaptive rendering mode according to the user's device performance, network conditions and browsing behavior; It also combines the cross-browser communication framework to carry out big data adaptive rendering collaboration between different browsers; it also monitors the data processing of the main thread and child threads, and dynamically adjusts the rendering strategy based on the monitoring results.

5. A browser big data rendering implementation system as described in any one of claims 1 to 4, characterized in that: include: A main thread: used to obtain and process user input in real time and send it to the child thread; One or more child threads: used to process data in parallel, receive the ScrollTop value sent by the main thread, calculate and return the data to be displayed in the current viewport; A data storage unit: used to store the received large data set in the child thread.

6. A browser big data rendering implementation system according to claim 5, characterized in that: The system stores recently accessed data through a data cache mechanism.

7. A computer-readable storage medium having computer program instructions stored thereon, wherein the program instructions implement the method according to any one of claims 1 to 4 when executed.

Images