A front-end multi-process computing method and system based on Web Worker

Abstract

The present invention discloses a front-end multi-process computing method and system based on Web Worker, the method comprising: judging whether the current thread is turned on, if the current thread is turned on, passing parameters to the background thread during the opening process to create a Worker thread; calculating the currently turned-on thread data, and naming each turned-on thread for finding the corresponding relationship in the background multiple threads; obtaining the context and input and output parameters of the current thread execution content, setting a success callback and an error callback; finding the named thread, and binding the named thread and the corresponding context, input and output parameters, success callback, and error callback; calling the corresponding data success callback or error callback to the main thread according to the background multi-thread execution result. The method and system can solve the main thread waiting and page pseudo-death phenomenon in the javascript single-thread execution of big data calculation by using the multi-thread of the browser, so that the main thread does not need to be blocked.

Description

Technical Field

[0001] The present invention relates to the field of Internet technology, and in particular to a front-end multi-process computing method and system based on Web Worker Background Art

[0002] At present, the front end of the existing technology needs to process the actual DOM due to the special operation mechanism. Therefore, according to the application scenario, when creating the JS prediction, it is determined by the inherent conditions that it is a single-threaded language, which also leads to performance bottlenecks in scenarios that require large amounts of front-end data calculations. In order to solve this problem, we can use the browser's multi-threading mechanism and communication to effectively solve the phenomenon that the front-end single-threaded calculation will cause the page to freeze or freeze. Web Worker provides a simple way for Web content to run scripts in background threads. And the separately opened thread will execute tasks independently and will not interfere with the main thread and can communicate with the main thread. The background thread execution capability provided by Web Worker can be used to move the front-end calculation to the background thread, and notify the main thread to update after the thread is executed, so as to achieve the purpose of not blocking the main thread calculation.

[0003] The above-mentioned prior art has the following technical problems: no matter through algorithm optimization or data optimization, it will always enter the main thread of JavaScript execution, causing other programs to be unable to execute. Even if an asynchronous solution is used, the asynchronous execution will still encounter the problem of execution taking too long and causing freezes, because other programs always need to wait when the main thread is executed. Summary of the invention

[0004] One of the inventive purposes of the present invention is to provide a front-end multi-process computing method and system based on Web Worker, which can realize the big data computing that takes a long time on the front end, and can avoid the defect of blocking the main thread and other threads during the execution process.

[0005] Another inventive object of the present invention is to provide a front-end multi-process computing method and system based on Web Worker, which utilizes the multi-process of the browser to achieve front-end performance improvement, and achieves management and interaction between multiple processes, thereby improving the front-end running experience in the browser.

[0006] Another inventive object of the present invention is to provide a front-end multi-process computing method and system based on Web Worker. The method and system utilize the multi-threading of the browser to solve the main thread waiting and page pseudo-death phenomena in the JavaScript single-thread execution of big data calculations, thereby eliminating the need to block the main thread.

[0007] In order to achieve at least one of the above-mentioned invention objects, the present invention further provides a front-end multi-process computing method based on Web Worker, the method comprising:

[0008] Use the browser to determine whether the current thread is open. If the current thread is open, pass parameters to the background thread during the opening process to create a Worker thread.

[0009] Calculate the currently opened thread data and assign a name to each opened thread, which is used to find the corresponding relationship among multiple background threads;

[0010] Get the context and input and output parameters of the current thread execution content, and set the success callback and error callback;

[0011] Find the named thread, and bind the named thread to the corresponding context, input and output parameters, success callback, and error callback;

[0012] Call the corresponding data success callback or error callback to the main thread according to the background multi-threaded execution results.

[0013] According to one of the preferred embodiments of the present invention, the method of passing parameters to the background thread includes: mounting a postMessage method on a work object through a created worker thread, passing parameters from a main thread to a worker thread through the postMessage method, and creating the worker thread, wherein the parameters are agreed parameters of the worker thread and the main thread.

[0014] According to another preferred embodiment of the present invention, when the main thread passes parameters to the worker thread, the parameters passed by the main thread are obtained by binding the self.onmessage method through the background process, wherein when postmessage is triggered, onmessage obtains the corresponding postmessage message.

[0015] According to another preferred embodiment of the present invention, after the background process obtains the corresponding parameters, the process is further executed according to the parameters, wherein the parameters are agreed parameters.

[0016] According to another preferred embodiment of the present invention, when the background process is executed, self.postMessage is used to obtain the result of the parameter execution process and pass it to the corresponding created thread in the form of parameters.

[0017] According to another preferred embodiment of the present invention, Worker.onmessage is used to obtain keyword information of the process execution result, and whether the obtained information is correct is determined based on the keyword information. If correct, the binding success callback is directly returned to the main thread.

[0018] According to another preferred embodiment of the present invention, if there is execution error information in the background process, it is determined whether the obtained information is correct based on the keyword information. If there is an error, the error information is obtained through Worker.onerror and the bound error callback is returned to the main thread.

[0019] According to another preferred embodiment of the present invention, the main process closes the background process after obtaining the success callback and the error callback.

[0020] In order to achieve at least one of the above-mentioned invention purposes, the present invention further provides a front-end multi-process computing system based on Web Worker, and the system executes the above-mentioned front-end multi-process computing method based on Web Worker.

[0021] The present invention further provides a computer-readable storage medium storing a computer program, wherein the computer program can be executed by a processor to implement the front-end multi-process computing method based on Web Worker. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] Figure 1 Shown is a flow chart of a front-end multi-process computing method based on Web Worker of the present invention. DETAILED DESCRIPTION

[0023] The following description is used to disclose the present invention so that those skilled in the art can implement the present invention. The preferred embodiments described below are only examples, and those skilled in the art can think of other obvious variations. The basic principles of the present invention defined in the following description can be applied to other embodiments, variations, improvements, equivalents, and other technical solutions that do not deviate from the spirit and scope of the present invention.

[0024] It is to be understood that the term "one" should be understood as "at least one" or "one or more", that is, in one embodiment, the number of an element may be one, while in another embodiment, the number of the element may be multiple, and the term "one" should not be understood as a limitation on the quantity.

[0025] Please combine Figure 1The present invention discloses a front-end multi-process computing method and system based on Web Worker, wherein the method mainly includes the following steps: initializing the Worker thread, wherein the Worker thread can implement the initialization process in the js code of the main thread, provide an initialization file, and initialize the entry path of the Worker thread. After completing the initialization of the worker thread, further determine whether the worker thread is turned on, wherein the method for determining whether the worker thread is turned on includes but is not limited to: setting the event object in the threading library, in the initial state of the thread, the signal flag of the event object is set to false, at which time the thread will be blocked until the signal flag is true. When the signal flag of the event object is set to true, the thread waiting for the event object to be set will be awakened, so that it can be determined whether the thread is turned on.

[0026] When it is determined that the thread is started, new Worker() is further called to create a thread. After multiple threads are created, the data of each started thread is further collected. The data of each started thread is the input parameter agreed upon by the main thread and the worker thread.

[0027] After the worker thread is started, each started thread needs to be named, wherein the method for naming the started thread includes but is not limited to: naming each thread by means of a prctl() system call, wherein the prctl() method includes: setting the thread naming parameter option by calling the prctl() method, wherein the thread naming parameter option can use the PR_SET_NAME instruction to set the name of the current thread, and use the PR_GET_NAME instruction to obtain the thread name, wherein the arg after PR_SET_NAME is set stores the pointer to set the thread name, and provides a character pointer to an allocated space through PR_GET_NAME. Therefore, through the prctl() method, each started thread can be assigned a unique string as the corresponding thread name. This thread name can find the corresponding worker thread among many workers.

[0028] Further, after the naming of the opened thread is completed, the corresponding output parameters and input parameters, as well as the context data, are obtained from the corresponding background worker thread; if the context data and the input and output parameters are finally fixed in the background thread coding, they do not need to be obtained from the worker thread. A success callback method and an error callback method are further set. The success callback method, the error callback method, the context data, and the input and output parameters are respectively bound to the corresponding threads.

[0029] After completing the creation of multiple threads, a browser-based multi-threaded instance is generated. The parameter transmission method of the background thread includes: according to the multi-threaded work instance established by the browser, a postMessage method is mounted on the work object obtained by the created work instance, and the corresponding parameters can be passed from the main thread to the background worker thread through the postMessage method. The parameters passed are arbitrary values ​​as long as the background worker thread and the main thread agree.

[0030] The background process obtains different parameters according to the parameters passed by the main thread by binding the self.onmessage method. For example, the parameter passed from the main thread is e, and the data, origin, source and other attributes of the parameter e can be obtained through the self.onmessage method. In other words, after the postmessage is triggered, the background work process receives different types of messages sent from postmessage through onmessage. When the background process obtains the corresponding parameters, it can execute the corresponding process according to the obtained parameters. It should be noted that the process can be a manually agreed process, such as setting a custom execution method and return parameters.

[0031] When the background process is finished, the result of the process execution can be further returned to the work instance in the form of parameters according to self.postMessage, and the correct information is obtained by Worker.onmessage in the work instance, wherein the correct information judgment includes: obtaining keyword information in the work process, wherein the keyword information includes but is not limited to uuid, id, etc., and judging whether the obtained information is correct according to the keyword information, and if it is correct, directly returning the binding success callback to the main thread. The error information in the thread is obtained through Worker.onerror in the work instance, wherein the error information acquisition method in the thread includes: when the worker thread js executes the thread and reports an error, an error event will be automatically triggered, and the error event will be passed to the created work instance.

[0032] After returning the success callback or error callback to the main thread according to the process execution result, the main thread will automatically close the process.

[0033] The above technical solution can achieve the following technical effects: utilize the multi-process of the browser to improve the performance of the front-end, and manage and interact between multiple processes, thereby improving the running experience of the front-end in the browser. The multi-threading of the browser can effectively avoid the phenomenon of single-threaded execution being stuck by managing background processes and running them in the background, thereby realizing a solution that does not block the main process.

[0034] In particular, according to the embodiments disclosed in the present invention, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments of the present disclosure include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network through the communication part, and / or installed from a removable medium. When the computer program is executed by the central processing unit (CPU), the above-mentioned functions defined in the method of the present application are executed. It should be noted that the above-mentioned computer-readable medium of the present application can be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium can be, for example, but not limited to, a system, device or device of an electrical, magnetic, optical, electromagnetic, infrared segment, or semiconductor, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to, an electrical connection with one or more wire segments, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present application, a computer-readable storage medium may 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 the present application, a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, which carries a computer-readable program code. Such propagated data signals may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium, which may send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device. The program code embodied on the computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, electrical wire, optical cable, RF, etc., or any suitable combination of the foregoing.

[0035] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present invention. In this regard, each square box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two square boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0036] Those skilled in the art should understand that the embodiments of the present invention described above and shown in the accompanying drawings are only examples and do not limit the present invention. The objectives of the present invention have been fully and effectively achieved. The functional and structural principles of the present invention have been demonstrated and explained in the embodiments. Without departing from the principles, the implementation methods of the present invention may be deformed or modified in any way.

Claims

1. A front-end multi-process computing method based on Web Worker, characterized in that: The method comprises: Use the browser to determine whether the current thread is open. If the current thread is open, pass parameters to the background thread during the opening process to create a Worker thread. Calculate the currently opened thread data and assign a name to each opened thread, which is used to find the corresponding relationship among multiple background threads; Get the context and input and output parameters of the current thread execution content, and set the success callback and error callback; Find the named thread, and bind the named thread to the corresponding context, input and output parameters, success callback, and error callback; Call the corresponding data success callback or error callback to the main thread according to the background multi-thread execution results; Initialize the Worker thread, wherein the Worker thread implements the initialization process in the js code of the main thread, and after completing the initialization of the Worker thread, further determine whether the Worker thread is turned on; The method for determining whether the Worker thread is started includes: setting an event object in a threading library, in the initial state of the thread, the signal flag of the event object is set to false, at which time the thread will be blocked until the signal flag is true, when the signal flag of the event object is set to true, the thread waiting for the set event object will be awakened, thereby determining that the thread is started, and calling new Worker() to create a thread; The method for naming the opened threads includes: naming each thread by a prctl() system call, and assigning a unique string as a corresponding thread name to each opened thread by the prctl() method; After completing the naming of the opened thread, obtain the corresponding output and input parameters, as well as context data from the corresponding background Worker thread, and further set the success callback method and error callback method; Use Worker.onmessage to obtain the keyword information of the process execution result, and determine whether the obtained information is correct based on the keyword information. If correct, directly return the bound success callback to the main line; After returning a successful callback or an error callback to the main thread according to the process execution result, the main thread will automatically close the process.

2. A front-end multi-process computing method based on Web Worker according to claim 1, characterized in that: The method for passing parameters to the background thread includes: mounting a postMessage method on a Worker object through the created Worker thread, passing parameters from the main thread to the Worker thread through the postMessage method, and creating the Worker thread, wherein the parameters are agreed parameters of the Worker thread and the main thread.

3. A front-end multi-process computing method based on Web Worker according to claim 1, characterized in that: When the main thread passes parameters to the Worker thread, the parameters passed by the main thread are obtained by binding the self.onmessage method through the background process, wherein when postmessage is triggered, onmessage obtains the corresponding postmessage message.

4. A front-end multi-process computing method based on Web Worker according to claim 1, characterized in that: After the background process obtains the corresponding parameters, the process is further executed according to the parameters, wherein the parameters are agreed parameters.

5. A front-end multi-process computing method based on Web Worker according to claim 4, characterized in that: When the background process is executed, self.postMessage is used to pass the result of the parameter execution process to the corresponding created thread in the form of parameters.

6. A front-end multi-process computing method based on Web Worker according to claim 1, characterized in that: If there is execution error information in the background process, it is determined whether the obtained information is correct based on the keyword information. If there is an error, the error information is obtained through Worker.onerror and the bound error callback is returned to the main thread.

7. A front-end multi-process computing method based on Web Worker according to claim 1, characterized in that: After obtaining the success callback and error callback, the main process closes the background process.

8. A front-end multi-process computing system based on Web Worker, characterized in that: The system executes a front-end multi-process computing method based on Web Worker as described in any one of claims 1-7.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and the computer program can be executed by a processor to implement a front-end multi-process computing method based on Web Worker as described in any one of claims 1 to 7.

Images