Browser interaction event backtracking method and system and medium

Abstract

The invention discloses a browser interaction event backtracking method and system and a medium, and relates to the technical field of browsers, the method comprises the following steps: registering a to-be-monitored user interaction event after page loading is completed, capturing user operation to obtain target interaction event data, and recording page state information at the same time; optimizing and compressing the data and the information to obtain compressed event data and storing the compressed event data; reading and analyzing the compressed event data, restoring the page state, and obtaining the target interaction event data and the page state information again; and triggering the two in sequence to perform interaction event backtracking. According to the method and the device, the technical problem that in the prior art, when errors occur in software platform application, quick positioning and backtracking are difficult is solved, when errors occur in the software platform application, specific user operation and page states can be quickly positioned, browser interaction events can be completely recorded and accurately backtracked, and the user experience is improved. The browser optimization is promoted; and the user experience is improved.

Description

Technical Field

[0001] The present invention relates to the field of browser technology, and in particular to a browser interaction event backtracing method, system and medium. Background Art

[0002] In browser development and usage, users interact with browsers very frequently. Accurately understanding these interaction events is crucial for optimizing browser performance, improving user experience, and quickly locating and resolving issues.

[0003] Currently, the processing of browser interaction events mostly involves simply recording key operations. This approach can be effective in simple functional testing scenarios. However, as browser functionality becomes increasingly complex and user demands continue to increase, this approach has exposed many drawbacks. Existing methods struggle to fully capture all types of interaction events. For example, when multiple interaction events occur simultaneously on a complex page, recordings can easily miss them. Page status information is also not fully recorded, making it impossible to accurately restore user operation scenarios. This makes it difficult for developers to deeply analyze user behavior, creating numerous difficulties when troubleshooting browser issues, and failing to meet the needs for in-depth research and efficient optimization of browser interaction behavior. Summary of the Invention

[0004] This application solves the technical problem of the existing technology that it is difficult to quickly locate and trace back when errors occur in software platform applications. This application registers the user interaction events to be monitored after the browser page is loaded, captures the target interaction event data and records the page status information, optimizes and compresses these data and stores them; when tracing back, it reads the compressed data, decompresses and parses it to obtain the target interaction event data and restore the page status information, and triggers it in sequence according to the order of event records, thereby completely and accurately reproducing the user's interactive operation process in the browser, making the traceback results of browser interaction events more accurate and reliable, and facilitating developers and testers to efficiently locate and troubleshoot problems.

[0005] In response to the above technical problems, the present application proposes a technical solution of a browser interaction event backtracking method, system and medium.

[0006] In a first aspect, the present application provides a browser interaction event backtracing method, wherein the method includes: registering a user interaction event to be monitored, capturing target interaction event data based on the user interaction event to be monitored, and recording page status information at the same time; optimizing and compressing the target interaction event data and the page status information to obtain compressed event data, and storing the compressed event data; reading and parsing the compressed event data and restoring the page status to obtain the target interaction event data and the page status information; triggering the target interaction event data and the page status information in sequence according to the event record order to perform interaction event backtracing.

[0007] In the second aspect, the present application provides a browser interaction event backtracing system, wherein the system includes: an event registration module, which is used to register user interaction events to be monitored, and capture target interaction event data based on the user interaction events to be monitored, and record and obtain page status information at the same time; a data storage module, which is used to optimize and compress the target interaction event data and the page status information, obtain compressed event data, and store the compressed event data; a data acquisition module, which is used to read and parse the compressed event data and restore the page status to obtain the target interaction event data and the page status information; an event backtracing module, which is used to trigger the target interaction event data and the page status information in sequence according to the event record order to perform interaction event backtracing.

[0008] In a third aspect, the present application further provides a computer-readable storage medium storing a computer program, which, when executed by a processor, implements a browser interaction event backtracking method provided by the present application.

[0009] This application proposes one or more technical solutions, which have at least the following technical effects:

[0010] This application obtains the target interaction event data and page status information by registering the interaction event to be monitored after the browser page is loaded. Then, the data is processed and stored by optimization means such as removing duplicate information and compression algorithms. When backtracking, the compressed data is read, and the target interaction event data and page status information are restored after decompression and parsing. Then, these data are triggered in sequence according to the order of records to backtrack the interaction events. In this process, when in the destruction stage, the event listener is removed, the storage resources are released and the connection is closed to ensure the rational use of system resources and to achieve accurate backtracking of browser interaction events. When an error occurs in the software platform application, the specific user operation and page status can be quickly located, and the complete record and accurate backtracking of browser interaction events can be achieved, thereby promoting the technical effect of browser optimization and improving user experience.

[0011] The above content summarizes the present application's method, system, and medium for retracing browser interaction events. The present application will describe the steps of the technical solution in detail in the following specific implementation methods to facilitate a clear and complete understanding of the present application by technical personnel. BRIEF DESCRIPTION OF THE DRAWINGS

[0012] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0013] Figure 1 This is a flowchart of a browser interaction event backtracking method provided in an embodiment of the present application.

[0014] Figure 2 This is a structural diagram of a browser interaction event backtracking system provided in an embodiment of the present application.

[0015] Description of the accompanying figures: event registration module 1, data storage module 2, data acquisition module 3, event backtracking module 4. DETAILED DESCRIPTION

[0016] This application registers the user interaction events to be monitored after the browser page is loaded, captures the target interaction event data and records the page status information. The data is optimized and compressed by removing duplicate information to obtain compressed event data and store it. When backtracking is required, the compressed event data is read, decompressed and the event object is parsed to restore the target interaction event data and page status information. The data is then triggered in sequence according to the order of event records to backtrack the interaction events, and the event listener is removed, storage resources are released and the connection is closed during the destruction phase. This achieves the technical effect of being able to quickly locate specific user operations and page status when errors occur in software platform applications, and fully record and accurately backtrack browser interaction events, thereby promoting browser optimization and improving user experience.

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

[0018] It should be noted that any variations of the terms "include" and "have" are intended to cover non-exclusive inclusions. For example, a process, method, system, product or server that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or modules that are not clearly listed or are inherent to these processes, methods, products or devices.

[0019] Example 1, as Figure 1 As shown, a browser interaction event backtracking method, wherein the method includes:

[0020] Step A100: registering a user interaction event to be monitored, capturing target interaction event data according to the user interaction event to be monitored, and recording page status information.

[0021] In the embodiment of the present application, user interaction events refer to user operations on the browser page, including clicks, mouse movements, keyboard presses, and scrolling, etc. Page state information is a comprehensive description of the state of the browser page at a specific moment.

[0022] Specifically, registering the user interaction events to be listened to is to register listeners for events such as clicks, mouse movements, keyboard presses and scrolling after the browser page is loaded, and binding a callback function for each event listener. The specific steps are detailed in A110; when capturing target interaction event data, when the user operation triggers the event to be listened to, the target user interaction event is captured, the callback function is called to collect information, organize the event object, and obtain the target interaction event data including the event type, target element, mouse coordinates and key value. The specific steps are detailed in A120-A130; recording page status information is to take a snapshot of the DOM structure of the browser page to obtain the DOM tree (a programming interface that represents the content of a web page in a tree structure), collect CSS styles (used to describe Hypertext Markup Language, that is, the style presentation of HTML elements, including fonts, colors, layouts, sizes, etc.) and layout information, and then combine them into page status information. The specific steps are detailed in A140-A160.

[0023] Step A200: Optimize and compress the target interaction event data and the page status information to obtain compressed event data, and store the compressed event data.

[0024] Optionally, when obtaining compressed event data, first set up a page optimization program that includes removing duplicate information, merging events, and simplifying events. Then, optimize the target interactive event data and page status information according to the program to determine standard event data. Finally, use a compression algorithm to compress the standard event data to obtain compressed event data. The specific steps are described in detail in A210-A230.

[0025] Then, we enter the data storage phase, where there are multiple options for storage methods. Creating arrays or other data structures in memory for temporary storage is suitable for recording operations within a short period of time. For example, in a simple page testing scenario, data operated by the tester within 5 minutes can be temporarily stored in a memory array. If persistent storage is required, the data can be sent to the server according to actual needs, or a local database (such as IndexedDB, a low-level, transaction-based database system provided in the browser, used to store large amounts of structured data locally on the client) can be used for local storage. In enterprise-level applications, the operation data of a large number of users are generally sent to the server for centralized management, while local databases are suitable for scenarios with high real-time requirements and the desire to retain operation records locally, such as test operation record storage in a local development environment.

[0026] By setting up a page optimization program to optimize the target interactive event data and page status information, and then using a compression algorithm to compress the compressed event data and store it, the effect of reducing the amount of data, improving storage and transmission efficiency, and facilitating subsequent backtracking is achieved.

[0027] Step A300: Read and parse the compressed event data and restore the page status to obtain the target interaction event data and the page status information.

[0028] In one embodiment of the present application, when obtaining target interaction event data and page status information, it is necessary to first read the compressed event data and decompress it, and then perform event object parsing on the decompressed event data to obtain the target interaction event data and page parsing data, and finally perform DOM structure reconstruction and CSS style application on the page parsing data to obtain the page status information. The specific steps are described in detail in A310-A320.

[0029] Step A400: triggering the target interaction event data and the page status information in sequence according to the event record order to perform interaction event backtracing.

[0030] In the embodiment of the present application, interactive event backtracking is a technical means for reproducing the user's operation process on the browser.

[0031] Specifically, the first step is to read and parse the data. During replay, the recorded data needs to be read from the storage medium (memory, local database or server). Assuming that the data is read from the local database, since the data was compressed and stored in the previous step, it is necessary to decompress the compressed event data read. For example, data compressed using the gzip algorithm (GNUZip, GNU compression tool) is restored using the corresponding decompression algorithm at this stage. After decompression, the event data is parsed for event objects, and the serialized DOM structure and event data are parsed into actually usable objects and data structures, thereby obtaining the target interactive event data and page parsing data.

[0032] The next step is to restore the page state. Based on the parsed DOM snapshot and CSS style information, the DOM structure of the page is rebuilt and the corresponding CSS style is applied. Take a simple web page as an example. When recording, the page contains a button. Its DOM structure information records the button's tag name, attributes, etc., and the CSS style information records the button's color, size, position, etc. When restoring, DOM nodes are created based on this information, and the node's attributes and styles are set. For example, create a <button>Node (a standard HTML tag), set its id, class and other attributes, and then add it to the correct position to make the page consistent in appearance with that when it was recorded, thereby obtaining the same page status information as when it was recorded.

[0033] Finally, there's the event playback phase. The stored user interaction events are triggered sequentially in the order they were recorded. For example, if there's a button click event in the recording, during playback, the dispatchEvent method (i.e., manually triggering an event on a specified element) is used to trigger a simulated click event, sending the event to the corresponding target element, which is the previously restored button element. Assuming that during recording, the button click triggered a JavaScript code that switched the page content, then during playback, the same operation would cause the page content to switch again, recreating the user's interactive behavior and allowing the page to display and interact according to the recorded operation process, fully implementing interactive event retracing.

[0034] Through the above steps, we can accurately reproduce the user's interactive operation process on the browser, help operation and maintenance and technical personnel intuitively view the scene where the error information is generated, and thus more efficiently locate and solve software platform application errors.

[0035] Furthermore, step A100 in the method provided in the embodiment of the present application includes:

[0036] A110: After the browser page is loaded, a listener is registered for the user interaction events to be monitored, where the user interaction events to be monitored include clicks, mouse movements, keyboard presses, and scrolling. At the same time, a corresponding callback function is bound to each event listener of the user interaction events to be monitored.

[0037] In the embodiment of the present application, a callback function is a program that can be passed as a parameter to other codes.

[0038] Specifically, when the browser page is loaded, all the elements and functions of the page are ready and can accurately capture the user's operations. The system will start preparing to monitor specific user interaction events.

[0039] Next, register listeners for common and critical user interaction events such as clicks, mouse movements, keyboard presses, and scrolling. These events cover the main ways users interact with the page. For example, on an e-commerce website, actions such as clicking on product images to view details, moving the mouse to browse the product list, typing search keywords on the keyboard, and scrolling the page to view more product information all fall within the scope of these events to be monitored.

[0040] Then, bind a corresponding callback function to each listener that is to monitor user interaction events. The callback function is a command receiver. When a certain interaction event is triggered, the corresponding callback function will be called. For example, when a user clicks the buy button on the page, this click event is captured by the listener, and the callback function bound to it will start working immediately. The main task of the callback function is to collect detailed information related to the event, including the event type (such as this is a click event), the target element (that is, the buy button that was clicked), the mouse coordinates (reflecting the position of the mouse on the page when the user clicked the button), etc. Suppose that in a survey web page, the user performs various operations on the page. On average, one operation may trigger 5-10 different types of interaction events. Each event collects detailed information through the corresponding callback function. This information will become the key data support for subsequent backtracking operations.

[0041] By registering a listener to monitor user interaction events after the browser page is loaded, and binding a callback function that can collect detailed event information to each listener, we can achieve the effect of comprehensively and accurately recording the initial data of user interaction events, laying a solid foundation for the subsequent accurate browser interaction event backtracking.

[0042] Furthermore, step A100 in the method provided in the embodiment of the present application includes:

[0043] A120: When the user operates on the browser page, the user interaction event to be monitored is triggered, and the corresponding target user interaction event is captured.

[0044] A130: Call and execute a callback function, and collect information and organize event objects of the target user interaction event through the callback function to obtain target interaction event data. The target interaction event data includes event type, target element, mouse coordinates, and key value.

[0045] Optionally, the entire process of capturing target interaction event data begins when a user performs an operation on a browser page. For example, if a user opens an online document editing page and begins entering text, moving the mouse to select text, or clicking various function buttons, these operations will trigger the previously registered user interaction events to be monitored. For example, if a user clicks the bold button on a page, the pre-registered click event listener will be activated, and the corresponding target user interaction event will be captured.

[0046] After capturing the target user interaction event, the system will immediately call the callback function bound to it. It will collect detailed information about the target user interaction event. For example, for the operation of clicking the bold button mentioned above, the callback function will collect the event type to confirm that it is a click event; determine the target element, that is, the specific page element of the bold button; and record the mouse coordinates, that is, the position of the mouse on the page when the user clicks the button. This can be accurate to the pixel level. Assuming the mouse coordinates are (x, y), this coordinate information can accurately restore the scene details at the time of the user's operation. If the event is related to keyboard operation, the callback function will also collect the key value. For example, if the user presses the Enter key, the callback function will record this key value.

[0047] Finally, after capturing a series of action events and processing callback functions, the system organizes the collected information into multiple event objects containing key information such as event type, target element, mouse coordinates, and key press values. These event objects are aggregated to form the target interaction event data. For example, a 10-minute online document editing session may generate hundreds or even thousands of such target interaction event data, which record every detail of the user's operation during that time.

[0048] By triggering the interaction events to be monitored when the user operates the browser page, capturing the events and calling the callback function to collect information and organize the event objects, the effect of obtaining detailed and accurate target interaction event data is achieved, providing an important data foundation for subsequent interaction event backtracing, problem analysis, etc.

[0049] Furthermore, step A100 in the method provided in the embodiment of the present application includes:

[0050] A140: Take a snapshot of the DOM structure of the browser page and obtain the DOM tree.

[0051] A150: Collects and obtains CSS style and layout information of browser pages.

[0052] A160: According to the DOM tree, the CSS style and layout information, the page status information is obtained.

[0053] In the embodiment of the present application, a snapshot is a capture and recording of key information of a browser page at a specific point in time, forming a copy that can reflect the state of the page at that moment.

[0054] Specifically, we first take a snapshot of the browser page's DOM structure to obtain the DOM tree. The DOM tree is a tree-like representation of the page's structure, containing all the HTML elements and their relationships. As users operate on the browser page, the DOM structure of the page may change at any time. For example, clicking a button to bring up a new menu will result in new nodes being added to the DOM tree. By taking a snapshot of the DOM structure, we can capture these changes in a timely manner.

[0055] Technically, the entire DOM structure can be copied using the API provided by the browser to form a DOM tree copy. First, use document.documentElement (representing the root element of the HTML document) to obtain the root element of the page, which is the starting point of the entire DOM tree. Next, call the root element's cloneNode(true) method (a method of the DOM node object in JavaScript that creates and returns a copy of the node on which the method is called). The true parameter indicates a deep clone, which recursively copies the root element and all its child elements. This allows the entire DOM tree structure to be fully replicated, including element attributes, text content, and other information. Finally, the copied new DOM tree node is saved, recording the composition and hierarchical relationship of the page elements at that moment, which can be used for subsequent operations such as browser interaction event backtracking. For example, on a news and information webpage, each article's title, body, image, and other elements have corresponding nodes in the DOM tree. The DOM tree obtained through the snapshot can accurately present the organization of these elements.

[0056] Next, collect and obtain the CSS style and layout information of the browser page. CSS styles determine the appearance of page elements, such as font color, size, background color, etc.; layout information controls the position and arrangement of page elements. When collecting CSS styles, the system will read the style attributes of each element. These attributes may come from external style sheets, internal style tags, or inline styles of elements. For example, a button element may have a style that defines a blue background color, white text color, and rounded border style. The acquisition of layout information involves the analysis of the positioning method of page elements, box model properties, etc., including the width, height, margins, floating and other attributes of the elements. On an e-commerce product display page, the layout of elements such as product images, prices, and descriptions is determined by CSS styles and layout properties.

[0057] Finally, the DOM tree, CSS styles, and layout information obtained above are integrated to form the page state information. This information together depicts the complete state of the page at a specific moment, covering not only the page structure but also the page's appearance and layout. For example, when recording a user's operation on a complex form page, the DOM tree records the structure of elements such as the form's input boxes and drop-down menus, while the CSS styles and layout information determine the appearance and arrangement of these elements. Combining these, we can accurately restore the state of the form page at that time.

[0058] By taking a snapshot of the DOM structure of the browser page to obtain the DOM tree, collecting CSS style and layout information, and integrating them together, the effect of completely recording the page status information is achieved. This provides strong support for subsequent accurate tracing of the page scene during user operations, and helps to more efficiently analyze problems and optimize page performance.

[0059] Furthermore, step A200 in the method provided in the embodiment of the present application includes:

[0060] A210: Setting a page optimization procedure, wherein the page optimization procedure includes removing duplicate information, merging events, and simplifying events.

[0061] A220: Optimize the target interaction event data and the page status information according to the page optimization program to determine standard event data.

[0062] A230: Compress the standard event data using a compression algorithm to obtain the compressed event data.

[0063] Specifically, first set up a page optimization program, which includes three functions: removing duplicate information, merging events, and simplifying events. When setting up the page optimization program, first build a data processing framework, and design the function of removing duplicate information to establish duplicate data identification rules by comparing the key identifiers of event data (such as event type, target element, timestamp, etc.). When multiple data with the same key identifier are detected, only one of them is retained; the event merging function formulates a merging strategy based on the relevance and temporality of events, such as setting a merging threshold for consecutive similar events, and merging similar events within the threshold range into a comprehensive event; the event simplification function sorts out the core elements of various events, defines information screening criteria, removes non-critical information, and finally integrates these three functional modules into the data processing process to complete the setting of the page optimization program, so that it can effectively optimize the target interactive event data and page status information.

[0064] In actual browser interaction scenarios, user operations may generate a lot of duplicate event information. For example, if a user clicks the same button multiple times in a short period of time, these click events have basically the same information except for the timestamps. The duplicate information removal function can identify and remove these duplicate data. The event merging function is applicable to some related events. For example, if a user performs multiple subtle mouse drag operations in succession, these operations can be merged into a more representative drag event, thereby reducing the number of events. The event simplification function mainly targets complex events, simplifying some non-critical information and retaining the core elements. For example, for keyboard input events, only the actual input characters and key control key information are retained, and some transitional key state change information is removed.

[0065] After setting up the page optimization program, use it to optimize the target interaction event data and page status information. For example, imagine a user operating on an online document editing page for 10 minutes generates 500 pieces of target interaction event data and related page status information. After processing through the page optimization program, duplicate mouse movement events are removed and continuous text input events are merged, ultimately resulting in 300 pieces of standard event data. This effectively reduces the data volume while ensuring that key information is not lost.

[0066] After obtaining the standard event data, it is compressed using the gzip compression algorithm. The core of the gzip algorithm for compressing standard event data is based on Lempel-Ziv coding (LZ77, a lossless data compression algorithm) and Huffman coding. First, the LZ77 encoding phase searches for recurring strings in the input data. A sliding window is maintained within this window, within which the longest string matching the string after the current processing position is searched. When a match is found, the starting position and length of the matching string, as well as the first character after the match, are recorded to represent the matching string. This replaces repeated data with relatively concise position and length information, achieving preliminary data compression. Next, the Huffman encoding phase counts the frequency of each character in the LZ77 encoding output (this character can be the triple generated by the LZ77 encoding) and constructs a Huffman tree based on the frequency. In the Huffman tree, characters with higher frequency are assigned shorter codes, while characters with lower frequency are assigned longer codes. The constructed Huffman tree is then used to re-encode the LZ77 encoding output, further reducing the data size. After these two stages of processing, the original 8KB file containing 300 pieces of standard event data can be compressed to about 2KB, forming compressed event data that is easy to store and transmit.

[0067] By setting up a page optimization program to optimize and obtain standard event data, and then using a compression algorithm to compress the standard event data, the effect of reducing data redundancy, improving data storage and transmission efficiency, reducing storage costs and increasing data processing speed is achieved, providing a more efficient data foundation for browser interaction event backtracking.

[0068] Furthermore, step A300 in the method provided in the embodiment of the present application includes:

[0069] A310: Read and decompress the compressed event data, and perform event object parsing on the decompressed event data to obtain the target interaction event data and page parsing data.

[0070] A320: Reconstructing the DOM structure and applying the CSS style to the page parsed data to obtain the page status information.

[0071] Specifically, when it is necessary to trace back an interactive event, first, the compressed event data is read and decompressed. In order to improve storage and transmission efficiency, the above steps optimize and compress the target interactive event data and page status information, and now they need to be restored. Taking the common gzip compression algorithm as an example, the decompression process is the inverse operation of the compression process. During gzip compression, the LZ77 encoding is first used to find repeated strings and record the position and length, and then Huffman encoding is used to re-encode according to the character frequency. During decompression, the encoded data is first decoded according to the Huffman tree to restore the output of the LZ77 encoding, and then the original data is restored based on the recorded position and length information. For example, 8KB of data was previously compressed to 2KB, and after decompression, it can be restored to a data size close to the original size.

[0072] After decompression, the decompressed event data undergoes event object parsing, re-parsing the pre-compression optimized event data into target interaction event data and page parsing data. The target interaction event data contains information such as the event type, target element, mouse coordinates, and keystroke values, which are key records of user interaction operations. The page parsing data contains previously recorded information about the page structure and style. For example, in the interaction records of an online shopping page, parsing can reveal specific information about user actions such as clicking the product details button and selecting product specifications, as well as the structure and style of the product display area on the page at that time.

[0073] Next, the DOM structure is reconstructed and CSS styles are applied to the page parsed data. DOM structure reconstruction is to reconstruct the element structure of the page based on the DOM tree information recorded in the page parsed data, and reassemble the various HTML elements according to their original hierarchical relationships and attributes. CSS style application is to add corresponding styles to the reconstructed DOM elements based on the recorded CSS style and layout information, so that the page presents the same appearance and layout as when the user operated it. For example, in a news information page, after the DOM structure is reconstructed, the title is set to a specific font size and color, and the article paragraphs are set to appropriate line spacing, etc., so as to completely restore the page status information at that time.

[0074] By reading and decompressing compressed event data, parsing event objects, and reconstructing the DOM structure and applying CSS styles to the page parsed data, we can accurately restore the target interaction event data and page status information from the compressed data, providing strong support for subsequent accurate tracing of browser interaction events, problem analysis, and page optimization.

[0075] Furthermore, step A500 in the method provided in the embodiment of the present application includes:

[0076] A510: When in the destruction phase, remove the event listener for the user interaction event to be monitored.

[0077] A520: Release the stored compressed event data and close the connection with the local database or server.

[0078] In one embodiment, the event listener for the previously registered user interaction event to be monitored must be removed. During page execution, in order to capture user interaction events such as clicks, mouse movements, keyboard presses, and scrolling, the system registers corresponding event listeners and binds callback functions.

[0079] When entering the destruction phase, the system will traverse all elements that have registered to listen for user interaction events. For each element, the removeEventListener method will be used to remove the corresponding listener based on the event type used when registering the listener (such as click, mouse movement, etc.), the callback function reference, and the optional event capture parameter (a Boolean value that determines whether the event triggers the listener in the capture phase or the bubbling phase). For example, if after the page is loaded, for a certain< / button> <button>When an element registers a click event listener and binds a specific callback function, during the destruction phase, the system accurately matches the element, the click event type, and the corresponding callback function, and executes removeEventListener, thereby canceling the listener for the element's click event, freeing up memory and other resources occupied by the listener and preventing ineffective listening from continuously consuming system performance. For example, after a form is submitted on a page, if the user will no longer perform related interactive operations, the click, input, and other event listeners bound to the form element can be removed to prevent the listener from continuing to occupy memory resources.

[0080] Next, the resources of the stored compressed event data are released. During the storage process, compressed event data occupies storage space in the local database or server. When this data is no longer needed, the resources it occupies need to be released. If the data is stored in the local database, the corresponding compressed event data record can be deleted from the database table by executing the corresponding delete statement; if it is stored on the server, the relevant data file can be deleted from the storage system by calling the interface provided by the server. For example, in an interactive event review scenario that temporarily records the user's browsing history, when the user leaves the page or completes a specific operation, the previously stored related compressed event data can be deleted to free up storage space.

[0081] Finally, close the connection to the local database or server. Whether interacting with data storage on a local database or server, a connection channel must be established. During the destruction phase, use the connection closing methods provided by the database or network connection library to close these connections. For example, use the close method of the MySQL database (an open source relational database management system) to close the connection to the local MySQL database, or use the relevant methods of the HTTP client library to close the network connection to the server. Promptly closing connections can effectively avoid wasting connection resources and prevent problems such as insufficient connection pool resources caused by connections being occupied for long periods of time.

[0082] By removing event listeners for user interaction events, releasing resources occupied by compressed event data, and closing connections to the local database or server during the destruction phase, we can achieve the effect of rationally managing system resources, avoiding memory leaks and resource waste, and ensuring the performance and stability of browsers and related applications.

[0083] In summary, the browser interaction event backtracking method provided by the embodiments of the present application has the following technical effects:

[0084] This application registers user interaction events to be monitored after the browser page is loaded, uses the listener to bind the callback function to capture user operations, takes a snapshot of the DOM structure, collects CSS styles and layout information to obtain the page status. By setting up a page optimization program that includes removing duplicate information, merging events and simplifying data, a compression algorithm is used to obtain compressed event data. In the destruction phase, the listener is removed, resources are released and connections are closed. Combined with operations such as decompression, parsing and DOM reconstruction, the efficient collection, storage, transmission and backtracking of browser interaction event data are guaranteed. When an error occurs in the software platform application, the specific user operation and page status can be quickly located, and the browser interaction events can be fully recorded and accurately backtracked, thereby promoting browser optimization and improving user experience.

[0085] Example 2, as Figure 2 As shown, based on the same inventive concept as in the aforementioned embodiment 1, this embodiment of the present application provides a browser interaction event backtracking system, the system comprising:

[0086] The event registration module 1 is used to register the user interaction event to be monitored, capture the target interaction event data according to the user interaction event to be monitored, and record the page status information.

[0087] The data storage module 2 is used to optimize and compress the target interaction event data and the page status information to obtain compressed event data, and store the compressed event data.

[0088] The data acquisition module 3 is used to read and parse the compressed event data and restore the page status to obtain the target interaction event data and the page status information.

[0089] The event backtracking module 4 is used to trigger the target interactive event data and the page status information in sequence according to the event record order to perform interactive event backtracking.

[0090] Furthermore, the event registration module 1 is used to perform the following steps:

[0091] After the browser page is loaded, a listener is registered for the user interaction events to be monitored, which include clicks, mouse movements, keyboard presses, and scrolling. At the same time, a corresponding callback function is bound to each event listener of the user interaction events to be monitored.

[0092] Furthermore, the event registration module 1 is used to perform the following steps:

[0093] When the user operates on the browser page, the user interaction event to be monitored is triggered, and the corresponding target user interaction event is captured; the callback function is called to execute, and the callback function is used to collect information and organize event objects of the target user interaction event to obtain target interaction event data, which includes event type, target element, mouse coordinates and key value.

[0094] Furthermore, the event registration module 1 is used to perform the following steps:

[0095] A snapshot of the DOM structure of the browser page is taken to obtain a DOM tree; CSS style and layout information of the browser page is collected and obtained; and the page status information is obtained based on the DOM tree, the CSS style and layout information.

[0096] Furthermore, the data storage module 2 is configured to perform the following steps:

[0097] A page optimization program is set up, which includes removing duplicate information, merging events, and simplifying events; optimizing the target interactive event data and the page status information according to the page optimization program to determine standard event data; and compressing the standard event data using a compression algorithm to obtain the compressed event data.

[0098] Furthermore, the data acquisition module 3 is used to perform the following steps:

[0099] The compressed event data is read and decompressed, and the decompressed event data is parsed for event objects to obtain the target interaction event data and page parsing data; the DOM structure is reconstructed and CSS style is applied to the page parsing data to obtain the page status information.

[0100] Furthermore, the event backtracking module 4 is configured to perform the following steps:

[0101] When in the destruction phase, the event listener for the user interaction event to be monitored is removed; the resources of the stored compressed event data are released, and the connection with the local database or the server is closed.

[0102] In embodiment three, the present application also provides a computer-readable storage medium that can be used to store software programs, computer executable programs, and modules, such as program instructions / modules corresponding to a browser interaction event backtracking method in an embodiment of the present application, thereby realizing the above-mentioned crowd-aware intelligent building lighting adjustment method.

[0103] It should be understood that the embodiments disclosed in this application and the above description can enable those skilled in the art to use this application to implement this application. At the same time, this application is not limited to the embodiments mentioned above. It should be understood that those skilled in the art can still modify the technical solutions described in the above embodiments or replace some of the technical features therein with equivalents; and these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should be included in the scope of protection of this application.< / button>

Claims

1. A browser interaction event backtracking method, characterized in that: The method comprises: Register the user interaction event to be monitored, capture the target interaction event data according to the user interaction event to be monitored, and record the page status information; Optimizing and compressing the target interaction event data and the page state information to obtain compressed event data, and storing the compressed event data; Reading and parsing the compressed event data and restoring the page state to obtain the target interaction event data and the page state information; The target interaction event data and the page status information are triggered in sequence according to the event record order to perform interaction event backtracing.

2. A browser interaction event backtracking method according to claim 1, characterized in that: The registering of user interaction events to be monitored includes: After the browser page is loaded, a listener is registered for the user interaction events to be monitored, which include clicks, mouse movements, keyboard presses, and scrolling. At the same time, a corresponding callback function is bound to each event listener of the user interaction events to be monitored.

3. A browser interaction event backtracking method as claimed in claim 2, characterized in that: The capturing of target interaction event data includes: When the user operates on the browser page, the user interaction event to be monitored is triggered, and the corresponding target user interaction event is captured; The callback function is called and executed, and information collection and event object organization of the target user interaction event are performed through the callback function to obtain target interaction event data, wherein the target interaction event data includes event type, target element, mouse coordinates and key value.

4. The browser interaction event backtracking method according to claim 1, wherein: The record obtains page status information, including: Take a snapshot of the DOM structure of the browser page and obtain the DOM tree; Collect and obtain CSS style and layout information of browser pages; The page status information is obtained based on the DOM tree, the CSS style and the layout information.

5. The browser interaction event backtracking method according to claim 1, wherein: The obtaining of compressed event data includes: Setting a page optimization program, wherein the page optimization program includes removing duplicate information, merging events, and simplifying events; Optimize the target interaction event data and the page status information according to the page optimization program to determine standard event data; The standard event data is compressed using a compression algorithm to obtain the compressed event data.

6. A browser interaction event backtracking method according to claim 5, characterized in that: The obtaining of the target interaction event data and the page status information includes: Reading and decompressing the compressed event data, and performing event object parsing on the decompressed event data to obtain the target interaction event data and page parsing data; The DOM structure is reconstructed and the CSS style is applied to the page parsed data to obtain the page status information.

7. A browser interaction event backtracking method according to claim 1, characterized in that: The method further comprises: When in the destruction phase, the event listener for the user interaction event to be monitored is removed; The stored compressed event data is released and the connection with the local database or the server is closed.

8. A browser interaction event backtracking system, characterized in that: A system for implementing a browser interaction event backtracking method according to any one of claims 1 to 7, comprising: An event registration module is used to register user interaction events to be monitored, capture target interaction event data based on the user interaction events to be monitored, and record page status information; a data storage module, configured to optimize and compress the target interaction event data and the page state information to obtain compressed event data, and store the compressed event data; A data acquisition module, configured to read and parse the compressed event data and restore the page state to obtain the target interaction event data and the page state information; The event backtracing module is used to trigger the target interaction event data and the page status information in sequence according to the event record order to perform interaction event backtracing.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, a browser interaction event backtracking method according to any one of claims 1 to 7 is implemented.

Images