Front-end event processing method and related equipment

Abstract

The invention discloses a front-end event processing method and related equipment. The method comprises the following steps: acquiring operation binary data sent by a front-end main thread; analyzing the operation binary data, and classifying a plurality of operation messages obtained by analysis into an established message queue; the operation messages in the message queue are adjusted in real time according to a preset message optimization processing rule, and event cycle polling is started to process the message queue; and sending rendering data generated by polling processing to the front-end main thread to realize front-end rendering. According to the invention, efficient and stable front-end event processing can be realized, and the performance and response speed of a front-end system can be comprehensively improved.

Description

Technical Field

[0001] The present application relates to the field of computer processing, and more specifically, to a front-end event processing method and related equipment. Background Art

[0002] In the current front-end development field, there are many problems caused by the single-threaded nature of the front-end:

[0003] The front end usually operates based on a single-threaded model, which makes the event response mechanism have serious shortcomings. Take the common mouse interaction as an example. A simple mouse translation operation will generate a series of mouse events in succession because the front end can only process events in a single step. In the traditional mode, only when the current mouse event is fully processed, the receiver is qualified to obtain and process the next event. This linear processing method, when faced with complex user operation flows, can easily lead to a large number of unprocessed events piling up in the message queue, causing delays in subsequent event responses, seriously affecting the real-time performance of the system.

[0004] Front-end rendering is closely tied to the computing process, showing a synchronous execution trend. When executing functions for large-scale data processing, such as key frame data calculations for complex animations, page layout recalculations, and other tasks, the rendering process is forced to wait for the calculation to be completed due to the large amount of computing resources being occupied. During this period, the page cannot be rendered in real time. This causes obvious freezes in the interface, greatly undermining the user experience, and causing users to experience obvious lag and unsmoothness during operation.

[0005] In actual front-end interaction scenarios, interruption events often occur. For example, when a user is performing a series of continuous inputs or operations and suddenly changes his mind to perform other operations, it is necessary to quickly and once again remove the previously generated event responses to avoid erroneous or redundant operations being executed. However, the front-end system in single-threaded mode lacks an efficient mechanism for handling such interruption events, and often requires more system resources and time to clean up previous event traces, further increasing the system burden and response delays.

[0006] Based on this, the present application provides a more comprehensive front-end event processing solution, which effectively makes up for the deficiencies of the existing technology, realizes efficient and stable front-end event processing, and comprehensively improves the performance and response speed of the front-end system. Summary of the invention

[0007] In view of this, the present application provides a front-end event processing method and related equipment, which can realize efficient and stable front-end event processing and comprehensively improve the performance and response speed of the front-end system.

[0008] A front-end event processing method, comprising:

[0009] Get the operation binary data sent by the front-end main thread;

[0010] Parsing the operation binary data, and placing multiple operation messages obtained by parsing into an established message queue;

[0011] Adjust the operation messages in the message queue in real time according to the preset message optimization processing rules, and enable event loop polling to process the message queue;

[0012] The rendering data generated by the polling process is sent to the front-end main thread to implement front-end rendering.

[0013] Optionally, the preset message optimization processing rules include window size adjustment rules, mouse processing elimination rules, keyboard input merging rules, scroll bar operation rules, and animation merging optimization rules.

[0014] Optionally, adjusting the operation messages in the message queue in real time according to a preset message optimization processing rule includes:

[0015] According to the window size adjustment rules, the window size change messages are continuously monitored, the size change amplitudes of adjacent messages are compared according to the set time interval threshold, the messages with minor changes are eliminated, and the messages with continuous and regular changes are merged into the final target size messages in a short time.

[0016] According to the mouse processing elimination rule, the time interval and distance of each operation message belonging to the mouse translation event in the message queue are calculated, and the operation message that is less than the preset time interval threshold or distance threshold is considered invalid and eliminated;

[0017] According to the keyboard input merging rules, the message queue is checked regularly, the keyboard input characters in the same time window are merged into a string, and the input content is split or merged according to the specific separators in the input characters;

[0018] According to the scroll bar operation rules, based on the time interval and scroll distance threshold when the user quickly drags the scroll bar, the operation message with the longest scroll distance is retained, and the operation messages of small changes in a short period of time when the scroll bar is fine-tuned are merged;

[0019] According to the animation merging optimization rules, the operation messages corresponding to the consecutive animation frames with slight changes in the animation key frame attributes are merged. If it is detected that there are multiple operation messages in the message queue that frequently switch the pause and resume states of the animation in a short period of time, only the last operation message is retained.

[0020] Optionally, the process of enabling event loop polling to process each operation message in the message queue includes:

[0021] Performing synchronous and asynchronous logic judgment on the target operation message in the message queue currently being processed;

[0022] If the target operation message meets the synchronous execution condition, other operation messages in the message queue are ignored when processing the target operation message, and unprocessed operation messages in the message queue are retrieved after the target operation message is processed;

[0023] If the target operation message meets the asynchronous execution condition, a second target operation message is received when processing the target operation message, and the second target operation message is returned as the target operation message to execute the synchronous and asynchronous logic judgment process.

[0024] Optionally, the transmission is performed using a shareable memory with the front-end main thread.

[0025] Optionally, also include:

[0026] When a coroutine suspension event is detected, data processing is performed on the shareable memory using atomic operations.

[0027] A front-end event processing device, comprising:

[0028] A data acquisition unit, used to acquire the operation binary data sent by the front-end main thread;

[0029] A message inclusion unit, used for parsing the operation binary data, and including a plurality of operation messages obtained by parsing into an established message queue;

[0030] A polling processing unit, used to adjust the operation messages in the message queue in real time according to a preset message optimization processing rule, and enable event loop polling to process the message queue;

[0031] The rendering sending unit is used to send the rendering data generated by the polling process to the front-end main thread to achieve front-end rendering.

[0032] A front-end event processing device, comprising a memory and a processor;

[0033] The memory is used to store programs;

[0034] The processor is used to execute the program to implement each step of the front-end event processing method as described in any one of the above items.

[0035] A readable storage medium having a computer program stored thereon, characterized in that when the computer program is executed by a processor, each step of the front-end event processing method as described in any one of the above items is implemented.

[0036] A computer program product includes a computer program, characterized in that when the computer program is run by a processor, each step of the front-end event processing method as described in any one of the above items is executed.

[0037] It can be seen from the above technical solutions that the front-end event processing method and related devices provided in the embodiments of the present application have the following beneficial effects:

[0038] First, orderly data integration and efficient flow are achieved. The operation binary data is obtained from the front-end main thread and parsed into the message queue, an accurate information collection system is built, and all kinds of operation instructions are captured in an all-round way to avoid the risk of disorganized data. Afterwards, the message queue is optimized in real time with the help of message optimization processing rules, and invalid and redundant information is quickly eliminated, which not only accelerates data flow, but also allows the system to focus on core task processing, avoids unnecessary consumption of resources, and ensures the accuracy and efficiency of front-end interactive information processing.

[0039] Second, it provides smooth real-time rendering. After the message queue is optimized, the event loop polling process is started. By continuously scanning the message queue, tasks are reasonably allocated according to priority and timeliness, so that the operation messages are quickly converted into rendering data, and finally fed back to the front-end main thread for rendering. In this way, no matter whether the user drags the scroll bar, inputs the keyboard or performs complex mouse operations, the front-end can respond immediately and the screen is updated in real time, which completely overcomes the lag of traditional single-threaded rendering and greatly improves the smoothness and immediacy of the user experience.

[0040] Third, achieve resource optimization and performance improvement. On the one hand, accurately filter and merge messages, reduce the accumulation of invalid messages, and release memory and CPU resources, such as keyboard input merging rules to free up computing power for complex operations; on the other hand, orderly processing and efficient rendering work together to compress system waiting time, improve resource utilization, ensure the front end runs stably and efficiently in various operation scenarios, and enhance performance in all aspects. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.

[0042] Figure 1 A flowchart of a front-end event processing method disclosed in an embodiment of the present application;

[0043] Figure 2 A schematic diagram of a front-end event processing method disclosed in an embodiment of the present application;

[0044] Figure 3 A schematic diagram of another front-end event processing method disclosed in an embodiment of the present application;

[0045] Figure 4 A schematic diagram of a front-end event processing device disclosed in an embodiment of the present application;

[0046] Figure 5 This is a hardware structure block diagram of a front-end event processing device disclosed in an embodiment of the present application. DETAILED DESCRIPTION

[0047] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0048] The present application can be used in many general or special computing device environments or configurations, such as personal computers, server computers, handheld or portable devices, tablet devices, multi-processor devices, distributed computing environments including any of the above devices or equipment, etc.

[0049] Next, the present application scheme is introduced. The present application proposes the following technical scheme, please see below for details.

[0050] Figure 1 This is a flowchart of a front-end event processing method disclosed in an embodiment of the present application.

[0051] Figure 2 A schematic diagram of a front-end event processing method disclosed in an embodiment of the present application.

[0052] like Figure 1 and Figure 2 As shown, the method may include:

[0053] Step S1, obtaining the operation binary data sent by the front-end main thread.

[0054] Specifically, the front-end main thread, as a core component directly facing user operations, is equipped with a highly sensitive event capture mechanism. It can monitor various interactive behaviors of users on the browser interface in real time, including but not limited to mouse clicks, double clicks, panning, scrolling, keyboard key presses and releases, and window zooming, moving, minimizing / maximizing, etc. Through the built-in conversion module, these rich and diverse operations are accurately converted into operation binary data. Taking mouse operation as an example, every time the mouse moves a small distance, the change in its coordinates in the horizontal and vertical directions will be accurately recorded and encoded into binary data form. Similarly, each character input by the keyboard has a corresponding character code included in the binary data sequence. The front-end main thread encapsulates the user's operation data into a binary format and sends it to the back end through WebSocket, AJAX or other communication technologies. After receiving these binary data, the back-end server performs preliminary verification and parsing preparation.

[0055] Step S2: parsing the operation binary data, and placing multiple operation messages obtained by parsing into an established message queue.

[0056] Specifically, the system has a built-in parsing module for processing the binary data of operations from the front-end main thread. The parsing module deeply disassembles the binary data according to the parsing rules. For example, when receiving a complex binary sequence representing the mouse movement trajectory, the parsing module can accurately extract the mouse position information at each time node, the movement direction information, and the movement time interval information between adjacent positions according to the established rules, and encapsulate this information into operation messages with clear semantics. These operation messages not only contain the key points of the original data, but also come with some metadata for subsequent processing, such as the timestamp of the message generation, the message source identifier, etc. Subsequently, these operation messages are added to an established message queue. This process ensures that the operation messages will not be confused, lost or misplaced, providing a solid guarantee for subsequent centralized and orderly processing, and greatly improving processing efficiency and accuracy.

[0057] Step S3: adjusting the operation messages in the message queue in real time according to preset message optimization processing rules, and enabling event loop polling to process the message queue.

[0058] Specifically, the message queue is managed efficiently by implementing message optimization processing rules and event loop polling mechanism. First, the operation messages in the message queue can be adjusted and merged in real time according to preset rules such as window resizing, mouse processing elimination, keyboard input merging, scroll bar operation, and animation merging. These rules are designed to reduce unnecessary message processing and improve system response speed and smoothness. Subsequently, each operation message in the message queue is processed by enabling event loop polling.

[0059] like Figure 3 As shown, in this process, the present application can also perform synchronous and asynchronous logical judgments on the current target operation message to determine its execution mode. For example, for those key update operations that are directly related to the currently rendering screen, such as messages about instant changes in element positions caused by users dragging page elements in real time, due to their extremely high real-time requirements, the continuity and smoothness of the screen must be guaranteed, and such messages are usually judged to be executed synchronously. However, some relatively independent operation messages such as those used for background data preloading and initial resource preparation for non-critical animations, which do not affect the instant display of the current screen in a short period of time, may be classified as asynchronous execution.

[0060] If the message meets the synchronous execution conditions, such as high-priority UI updates or critical user input, all processing resources will be centrally allocated to the processing of the target operation message, and the message will be processed immediately. During this period, other messages in the queue will be ignored until the unprocessed messages are retrieved after processing. On the contrary, if the message meets the asynchronous execution conditions, such as low-priority background tasks or non-critical interface updates, it is allowed to receive and process new operation messages while processing the message. At the same time, once a new second target operation message is received, it will immediately be used as the new focus of attention, and the synchronous and asynchronous logic judgment process will be started again. This combination of synchronous and asynchronous processing strategy not only ensures that critical tasks are responded to in a timely manner, but also realizes multi-task parallel processing, thereby effectively improving system performance and user experience.

[0061] That is, the process of enabling the event loop to poll and process each operation message in the message queue includes:

[0062] ① Perform synchronous and asynchronous logic judgment on the target operation message in the message queue currently being processed;

[0063] ② If the target operation message meets the synchronous execution condition, other operation messages in the message queue are ignored when processing the target operation message, and unprocessed operation messages in the message queue are retrieved after the target operation message is processed;

[0064] ③ If the target operation message meets the asynchronous execution condition, a second target operation message is received when processing the target operation message, and the second target operation message is returned as the target operation message to execute the synchronous and asynchronous logic judgment process.

[0065] Step S4: Send the rendering data generated by the polling process to the front-end main thread to implement front-end rendering.

[0066] Specifically, after the processing of the previous steps, the rendering data generated during the event loop polling process has met the complete conditions for direct use in the front-end display. These rendering data are a comprehensive summary of the update information of the front-end page elements, covering the changes in the position, size, color, text content and other aspects of the page elements. For example, it may contain the position movement information of a button after the user clicks it, the display color adjustment information of a picture after it is loaded, or the text content update information of the text input box after the user enters characters. With its powerful rendering engine, the front-end main thread quickly renders and updates the page based on this data, and presents the latest effects after the user's operation in real time at the fastest speed, allowing users to intuitively and instantly feel the feedback effect of their operations, perfectly completing the closed loop of the entire front-end event processing, and greatly improving the fluency and satisfaction of the user experience.

[0067] In addition, the front-end main thread uses sharable memory for transmission.

[0068] Specifically, the front-end main thread uses shared memory for transmission, which is an innovative measure to further optimize the data interaction process. Shared memory allows the front-end main thread and related background processing units to directly share data storage space, avoiding multiple data copies in traditional data transmission methods, greatly reducing memory overhead, and significantly improving data transmission efficiency. For example, when frequently transmitting and operating binary data or rendering data, there is no need to repeatedly open up additional memory space for data transfer, and you can directly read and write in the shared memory area, which speeds up the entire front-end event processing process.

[0069] On this basis, the application may also include:

[0070] When a coroutine suspension event is detected, data processing is performed on the shareable memory using atomic operations.

[0071] Specifically, when a coroutine suspension event is detected, atomic operations are used to process data in the shareable memory. Coroutine suspension is usually triggered by specific conditions in a multi-coroutine operating environment, such as waiting for a certain resource to be ready, reaching a preset execution time limit, etc., causing the current coroutine to suspend execution and enter a waiting state. At this time, atomic operations are crucial. It can ensure that during the coroutine suspension, the data processing of the shared memory can not only quickly respond to the needs of subsequent resumption of execution, but also avoid data errors that may be caused by concurrent access to shared memory by multiple threads or multiple coroutines, ensure data consistency and integrity, and ensure the stability of front-end event processing.

[0072] It can be seen from the above technical solutions that the front-end event processing method and related devices provided in the embodiments of the present application have the following beneficial effects:

[0073] First, orderly data integration and efficient flow are achieved. The operation binary data is obtained from the front-end main thread and parsed into the message queue, an accurate information collection system is built, and all kinds of operation instructions are captured in an all-round way to avoid the risk of disorganized data. Afterwards, the message queue is optimized in real time with the help of message optimization processing rules, and invalid and redundant information is quickly eliminated, which not only accelerates data flow, but also allows the system to focus on core task processing, avoids unnecessary consumption of resources, and ensures the accuracy and efficiency of front-end interactive information processing.

[0074] Second, it provides smooth real-time rendering. After the message queue is optimized, the event loop polling process is started. By continuously scanning the message queue, tasks are reasonably allocated according to priority and timeliness, so that the operation messages are quickly converted into rendering data, and finally fed back to the front-end main thread for rendering. In this way, no matter whether the user drags the scroll bar, inputs the keyboard or performs complex mouse operations, the front-end can respond immediately and the screen is updated in real time, which completely overcomes the lag of traditional single-threaded rendering and greatly improves the smoothness and immediacy of the user experience.

[0075] Third, achieve resource optimization and performance improvement. On the one hand, accurately filter and merge messages, reduce the accumulation of invalid messages, and release memory and CPU resources, such as keyboard input merging rules to free up computing power for complex operations; on the other hand, orderly processing and efficient rendering work together to compress system waiting time, improve resource utilization, ensure the front end runs stably and efficiently in various operation scenarios, and enhance performance in all aspects.

[0076] In some embodiments of the present application, the preset message optimization processing rules include window size adjustment rules, mouse processing elimination rules, keyboard input merging rules, scroll bar operation rules, and animation merging optimization rules.

[0077] On this basis, the process of adjusting the operation messages in the message queue in real time according to the preset message optimization processing rules in step S3 is further introduced, which may specifically include:

[0078] Step S31, according to the window size adjustment rule, continuously monitor the window size change message, compare the size change amplitude of adjacent messages according to the set time interval threshold, eliminate the small change messages, and merge the continuous and regular change messages into the final target size message in a short time.

[0079] Specifically, the system will continuously monitor the window size change messages. In order to filter out small and unnecessary size changes, a time interval threshold is set. When a new window size change message is received, it will be compared with the previous message, especially focusing on the magnitude of the size change. If the size change between adjacent messages is less than the preset small change threshold, and these messages appear continuously within the time interval threshold, these messages are regarded as small change messages and are eliminated. At the same time, if the window size shows continuous and regular changes in a short period of time (such as the user is resizing the window), these messages are merged into a message representing the final target size to reduce unnecessary layout adjustments and rendering operations.

[0080] Step S32: according to the mouse processing elimination rule, the time interval and distance of each operation message belonging to the mouse translation event in the message queue are calculated, and the operation message less than the preset time interval threshold or distance threshold is regarded as invalid and eliminated.

[0081] Specifically, the time interval and moving distance of each mouse translation event in the message queue are calculated. Specifically, the system records the timestamp and coordinate position of each event, and then compares the time difference and position change of adjacent events. If the time interval between an event and the previous event is less than the preset time interval threshold, and the moving distance is also less than the preset distance threshold, then this event is regarded as an invalid event and is removed from the message queue. This can reduce redundant messages generated by fast or small mouse movements, and improve the response speed and efficiency of the system.

[0082] For example, if a mouse pan event does not trigger any command (such as click, drag, etc.), it is considered an invalid event and removed from the message queue. If a mouse pan event triggers a command (such as the user moving the mouse while dragging an object), input processing is performed in units of 50ms. Specifically, the time interval between adjacent mouse pan events is calculated. If the time interval is less than 50ms, only the first event is retained and other events are ignored.

[0083] Step S33: According to the keyboard input merging rule, the message queue is checked regularly, the keyboard input characters in the same time window are merged into a string, and the input content is split or merged according to the specific separator in the input characters.

[0084] Specifically, the keyboard input messages in the message queue are checked regularly, and the character inputs within the same time window are merged into a string. This means that if the user presses multiple keys in succession, the system will merge these key events into a complete input string. In addition, the system will split or merge the input content according to specific separators in the input characters (such as the space bar, the enter key, etc.). When the user enters a string of characters and presses the space bar, the system will consider the input to be over and process the previous characters as a complete command or keyword. This method can improve the accuracy and efficiency of text input.

[0085] For example, if the user enters "line 10, 10, 10, 20, 20, 20", the system will split it into three keywords: "line", "10, 10, 10", and "20, 20, 20", and execute the corresponding commands respectively (such as drawing a straight line on the canvas).

[0086] Step S34: According to the scroll bar operation rules, based on the time interval when the user quickly drags the scroll bar and the scroll distance threshold, the operation message with the longest scroll distance is retained, and the operation messages of small changes in a short period of time when the scroll bar is fine-tuned are merged.

[0087] Specifically, the system has also optimized the scroll bar operation events. When the user drags the scroll bar quickly, the system will filter valid events based on the time interval and scroll distance threshold. Specifically, if the scroll bar scrolls continuously within a short period of time (such as within 100 milliseconds), and the distance of each scroll exceeds the preset threshold (such as 50 pixels), the system will only retain the operation message with the longest scroll distance. This can reduce the redundant messages generated by the rapid movement of the scroll bar. In addition, when the scroll bar is fine-tuned (that is, the user scrolls the scroll bar slowly), the system will merge the operation messages of each small change in a short period of time into one event to reduce unnecessary scroll bar update operations.

[0088] Step S35: merge the operation messages corresponding to the continuous animation frames whose animation key frame attributes change slightly according to the animation merging optimization rules, and if it is detected that there are multiple operation messages in the message queue that frequently switch the pause and resume states of the animation in a short period of time, only retain the last operation message.

[0089] Specifically, when the system detects that the property changes of consecutive animation frames are small, it will merge these changes into one event. This can reduce the number of animation renderings and computing overhead. In addition, if the system detects that there are multiple operation messages in the message queue that frequently switch the pause and resume states of the animation in a short period of time, it will only retain the last operation message. This can avoid frequent switching of animation states and improve the smoothness and stability of animation playback.

[0090] A front-end event processing device provided in an embodiment of the present application is described below. The front-end event processing device described below and the front-end event processing method described above can refer to each other.

[0091] See also Figure 4 , Figure 4 A schematic diagram of a front-end event processing device disclosed in an embodiment of the present application.

[0092] like Figure 4 As shown, the front-end event processing device may include:

[0093] The data acquisition unit 110 is used to acquire the operation binary data sent by the front-end main thread;

[0094] The message inclusion unit 120 is used to parse the operation binary data and include multiple operation messages obtained by the parsing into an established message queue;

[0095] The polling processing unit 130 is used to adjust the operation messages in the message queue in real time according to the preset message optimization processing rules, and enable the event loop polling processing of the message queue;

[0096] The sending rendering unit 140 is used to send the rendering data generated by the polling process to the front-end main thread to implement front-end rendering.

[0097] It can be seen from the above technical solutions that the front-end event processing method and related devices provided in the embodiments of the present application have the following beneficial effects:

[0098] First, orderly data integration and efficient flow are achieved. The operation binary data is obtained from the front-end main thread and parsed into the message queue, an accurate information collection system is built, and all kinds of operation instructions are captured in an all-round way to avoid the risk of disorganized data. Afterwards, the message queue is optimized in real time with the help of message optimization processing rules, and invalid and redundant information is quickly eliminated, which not only accelerates data flow, but also allows the system to focus on core task processing, avoids unnecessary consumption of resources, and ensures the accuracy and efficiency of front-end interactive information processing.

[0099] Second, it provides smooth real-time rendering. After the message queue is optimized, the event loop polling process is started. By continuously scanning the message queue, tasks are reasonably allocated according to priority and timeliness, so that the operation messages are quickly converted into rendering data, and finally fed back to the front-end main thread for rendering. In this way, no matter whether the user drags the scroll bar, inputs the keyboard or performs complex mouse operations, the front-end can respond immediately and the screen is updated in real time, which completely overcomes the lag of traditional single-threaded rendering and greatly improves the smoothness and immediacy of the user experience.

[0100] Third, achieve resource optimization and performance improvement. On the one hand, accurately filter and merge messages, reduce the accumulation of invalid messages, and release memory and CPU resources, such as keyboard input merging rules to free up computing power for complex operations; on the other hand, orderly processing and efficient rendering work together to compress system waiting time, improve resource utilization, ensure that the front end runs stably and efficiently in a variety of operating scenarios, and enhance performance in all aspects. Optionally, the preset message optimization processing rules include window resizing rules, mouse processing elimination rules, keyboard input merging rules, scroll bar operation rules, and animation merging optimization rules.

[0101] Optionally, the polling processing unit may include:

[0102] The window adjustment unit is used to continuously monitor the window size change messages according to the window size adjustment rules, compare the size change amplitudes of adjacent messages according to the set time interval threshold, eliminate the messages with small changes, and merge the messages with continuous and regular changes into the final target size messages in a short time;

[0103] A mouse rejection unit is used to calculate the time interval and distance of each operation message belonging to the mouse translation event in the message queue according to the mouse processing rejection rule, and the operation message less than the preset time interval threshold or distance threshold is considered invalid and rejected;

[0104] The keyboard merging unit is used to periodically check the message queue according to the keyboard input merging rules, merge the keyboard input characters in the same time window into a string, and split or merge the input content according to the specific separator in the input characters;

[0105] The scrolling operation unit is used to filter according to the scroll bar operation rules based on the time interval and scrolling distance threshold when the user quickly drags the scroll bar, retain the operation message with the longest scrolling distance, and merge the operation messages of each small change in a short period of time when the scroll bar is fine-tuned;

[0106] The animation merging unit is used to merge the operation messages corresponding to consecutive animation frames with slight changes in animation key frame attributes according to the animation merging optimization rules, and if it is detected that there are multiple operation messages in the message queue that frequently switch the pause and resume states of the animation in a short period of time, only the last operation message is retained.

[0107] Optionally, the polling processing unit may further include a logic judgment unit;

[0108] The process of the logic judgment unit enabling the event loop polling to process each operation message in the message queue includes:

[0109] Performing synchronous and asynchronous logic judgment on the target operation message in the message queue currently being processed;

[0110] If the target operation message meets the synchronous execution condition, other operation messages in the message queue are ignored when processing the target operation message, and unprocessed operation messages in the message queue are retrieved after the target operation message is processed;

[0111] If the target operation message meets the asynchronous execution condition, a second target operation message is received when processing the target operation message, and the second target operation message is returned as the target operation message to execute the synchronous and asynchronous logic judgment process.

[0112] Optionally, the transmission is performed using a shareable memory with the front-end main thread.

[0113] Optionally, the front-end event processing device also includes a coroutine suspension unit, which is used to use atomic operations to process data on the shareable memory when a coroutine suspension event is detected.

[0114] The front-end event processing apparatus provided in the embodiment of the present application can be applied to a front-end event processing device. Figure 5 The hardware structure diagram of the front-end event processing device is shown. Figure 5 ,The hardware structure of the front-end event processing device may include: at least one processor 1, at least one communication interface 2, at least one memory 3 and at least one communication bus 4;

[0115] In the embodiment of the present application, the number of the processor 1, the communication interface 2, the memory 3, and the communication bus 4 is at least one, and the processor 1, the communication interface 2, and the memory 3 communicate with each other through the communication bus 4;

[0116] The processor 1 may be a central processing unit CPU, or an application-specific integrated circuit ASIC (Application Specific Integrated Circuit), or one or more integrated circuits configured to implement the embodiments of the present invention, etc.;

[0117] The memory 3 may include a high-speed RAM memory, and may also include a non-volatile memory (non-volatile memory), etc., such as at least one disk memory;

[0118] The memory stores a program, and the processor can call the program stored in the memory, wherein the program is used to:

[0119] Get the operation binary data sent by the front-end main thread;

[0120] Parsing the operation binary data, and placing multiple operation messages obtained by parsing into an established message queue;

[0121] Adjust the operation messages in the message queue in real time according to the preset message optimization processing rules, and enable event loop polling to process the message queue;

[0122] The rendering data generated by the polling process is sent to the front-end main thread to implement front-end rendering.

[0123] Optionally, the detailed functions and extended functions of the program may refer to the above description.

[0124] The embodiment of the present application further provides a readable storage medium, which may store a program suitable for execution by a processor, wherein the program is used to:

[0125] Get the operation binary data sent by the front-end main thread;

[0126] Parsing the operation binary data, and placing multiple operation messages obtained by parsing into an established message queue;

[0127] Adjust the operation messages in the message queue in real time according to the preset message optimization processing rules, and enable event loop polling to process the message queue;

[0128] The rendering data generated by the polling process is sent to the front-end main thread to implement front-end rendering.

[0129] Optionally, the detailed functions and extended functions of the program may refer to the above description.

[0130] The present application also provides a computer program product, including a computer program. When the computer program is executed by a processor, the execution method is as follows:

[0131] Get the operation binary data sent by the front-end main thread;

[0132] Parsing the operation binary data, and placing multiple operation messages obtained by parsing into an established message queue;

[0133] Adjust the operation messages in the message queue in real time according to the preset message optimization processing rules, and enable event loop polling to process the message queue;

[0134] The rendering data generated by the polling process is sent to the front-end main thread to implement front-end rendering.

[0135] Optionally, the detailed functions and extended functions of the program may refer to the above description.

[0136] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the presence of other identical elements in the process, method, article or device including the elements.

[0137] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0138] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present application. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application will not be limited to the embodiments shown herein, but will conform to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A front-end event processing method, characterized in that: include: Get the operation binary data sent by the front-end main thread; Parsing the operation binary data, and placing multiple operation messages obtained by parsing into an established message queue; Adjust the operation messages in the message queue in real time according to the preset message optimization processing rules, and enable event loop polling to process the message queue; The rendering data generated by the polling process is sent to the front-end main thread to implement front-end rendering.

2. The method according to claim 1, characterized in that: The preset message optimization processing rules include window size adjustment rules, mouse processing elimination rules, keyboard input merging rules, scroll bar operation rules, and animation merging optimization rules.

3. The method according to claim 2, characterized in that The operation messages in the message queue are adjusted in real time according to the preset message optimization processing rules, including: According to the window size adjustment rules, the window size change messages are continuously monitored, the size change amplitudes of adjacent messages are compared according to the set time interval threshold, the messages with minor changes are eliminated, and the messages with continuous and regular changes are merged into the final target size messages in a short time. According to the mouse processing elimination rule, the time interval and distance of each operation message belonging to the mouse translation event in the message queue are calculated, and the operation message that is less than the preset time interval threshold or distance threshold is considered invalid and eliminated; According to the keyboard input merging rules, the message queue is checked regularly, the keyboard input characters in the same time window are merged into a string, and the input content is split or merged according to the specific separators in the input characters; According to the scroll bar operation rules, based on the time interval and scroll distance threshold when the user quickly drags the scroll bar, the operation message with the longest scroll distance is retained, and the operation messages of small changes in a short period of time when the scroll bar is fine-tuned are merged; According to the animation merging optimization rules, the operation messages corresponding to the consecutive animation frames with slight changes in the animation key frame attributes are merged. If it is detected that there are multiple operation messages in the message queue that frequently switch the pause and resume states of the animation in a short period of time, only the last operation message is retained.

4. The method according to claim 1, characterized in that The process of enabling the event loop to poll and process each operation message in the message queue includes: Performing synchronous and asynchronous logic judgment on the target operation message in the message queue currently being processed; If the target operation message meets the synchronous execution condition, other operation messages in the message queue are ignored when processing the target operation message, and unprocessed operation messages in the message queue are retrieved after the target operation message is processed; If the target operation message meets the asynchronous execution condition, a second target operation message is received when processing the target operation message, and the second target operation message is returned as the target operation message to execute the synchronous and asynchronous logic judgment process.

5. The method according to claim 1, characterized in that The front-end main thread uses a sharable memory for transmission.

6. The method according to claim 5, characterized in that Also includes: When a coroutine suspension event is detected, data processing is performed on the shareable memory using atomic operations.

7. A front-end event processing device, characterized in that: include: A data acquisition unit, used to acquire the operation binary data sent by the front-end main thread; A message inclusion unit, used for parsing the operation binary data, and including a plurality of operation messages obtained by parsing into an established message queue; A polling processing unit, used to adjust the operation messages in the message queue in real time according to a preset message optimization processing rule, and enable event loop polling to process the message queue; The rendering sending unit is used to send the rendering data generated by the polling process to the front-end main thread to achieve front-end rendering.

8. A front-end event processing device, characterized in that: including memory and processor; The memory is used to store programs; The processor is used to execute the program to implement each step of the front-end event processing method as described in any one of claims 1-6.

9. A readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, each step of the front-end event processing method as described in any one of claims 1 to 6 is implemented.

10. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, each step of the front-end event processing method as described in any one of claims 1 to 6 is executed.

Images