Front-end performance optimization method and device, equipment and storage medium

Abstract

The invention discloses a front-end performance optimization method and device, equipment and a storage medium. A browser event initiated by a target user at a front end is monitored in real time; extracting user behavior characteristics corresponding to the browser event; processing the user behavior characteristics by using a pre-trained behavior prediction model to obtain a behavior prediction result for the target user; the behavior prediction model is obtained by taking a behavior feature sample set of multiple users as a training sample and taking a real behavior result of each user as a sample label for training; determining each main thread task from the behavior prediction result, and generating a preloading task queue by each main thread task; and performing scheduling optimization on each main thread task in the preloading task queue to realize performance optimization of the front end. According to the resource loading method and device, the accurate behavior prediction result can be obtained, then the pre-loading task queue is constructed according to the behavior prediction result, scheduling optimization is carried out, therefore, resource loading can be accurately carried out, and the user experience is improved.

Description

Technical Field

[0001] This application relates to the technical field of front - end performance optimization, and specifically relates to a front - end performance optimization method, device, equipment, and storage medium. Background Art

[0002] In current Web application development, users' requirements for performance such as page loading speed and interaction fluency are becoming increasingly stringent. Therefore, performance optimization has always been a key factor in enhancing the user experience. With the continuous increase in the complexity of Web applications, front - end performance optimization technologies have also been continuously evolving. In recent years, the industry has developed various performance optimization solutions, such as resource compression, pre - loading, lazy loading, etc.

[0003] However, these existing solutions usually only rely on fixed rules or simple user behaviors, lacking in - depth analysis of user behaviors, resulting in a low accuracy of resource pre - loading and a poor user experience. Summary of the Invention

[0004] In view of this, this application provides a front - end performance optimization method, device, equipment, and storage medium, which is used to solve the problem that existing solutions usually only rely on fixed rules or simple user behaviors, lack in - depth analysis of user behaviors, result in a low accuracy of resource pre - loading, and a poor user experience.

[0005] To achieve the above objectives, the following solutions are proposed:

[0006] In a first aspect, a front - end performance optimization method includes:

[0007] Real - time monitoring of browser events initiated by a target user in the front - end;

[0008] Extracting user behavior characteristics corresponding to the browser events;

[0009] Using a pre - trained behavior prediction model to process the user behavior characteristics to obtain a behavior prediction result for the target user; the behavior prediction model is trained with a behavior characteristic sample set of multiple users as training samples and the real behavior results of each user as sample labels;

[0010] Determining each main - thread task from the behavior prediction result, and generating a pre - loading task queue by each main - thread task;

[0011] Scheduling and optimizing each main - thread task in the pre - loading task queue to achieve performance optimization of the front - end.

[0012] Preferably, the extracting of the user behavior characteristics corresponding to the browser events includes:

[0013] Determine each mouse click event, each page scroll event, and each keyboard key event in the browser event;

[0014] Extract temporal features and spatial features from each of the mouse click events, page scroll events, or keyboard key events;

[0015] Obtain the current page content and determine the page type according to the current page content;

[0016] Establish an operation sequence of the target user according to each of the mouse click events, page scroll events, and keyboard key events;

[0017] Determine the device type and screen size of the device where the front end is located;

[0018] Summarize the page type, operation sequence, device type, and screen size into context features;

[0019] Regard the temporal features, spatial features, and context features as user behavior features.

[0020] Preferably, the process of extracting temporal features includes:

[0021] Extract the click time from each of the mouse click events and calculate the first time difference between every two mouse click events according to the click time;

[0022] Calculate the click frequency based on the first time difference;

[0023] Extract the scroll trigger time and scroll position from each of the page scroll events;

[0024] Calculate the second time difference between every two page scroll events according to the scroll trigger time, and at the same time calculate the scroll distance difference between every two page scroll events according to the scroll position;

[0025] Calculate the scroll speed from the second time difference and the scroll distance difference;

[0026] Regard the click frequency and the scroll speed as temporal features.

[0027] Preferably, the process of extracting spatial features includes:

[0028] Determine each element corresponding to each of the mouse click events;

[0029] Obtain the position information and size information of each of the elements;

[0030] Calculate the coordinates of each focus element based on the position information and size information;

[0031] Obtain the coordinate information of each of the mouse click events;

[0032] Map each of the coordinate information to the current page respectively to obtain area click statistics information, area click density information and area click event distribution information;

[0033] Take the focus element coordinates, area click statistics information, area click density information and area click event distribution information as spatial features.

[0034] Preferably, the generating the preloading task queue from each of the main thread tasks includes:

[0035] Monitor the call patterns of each of the main thread tasks to the front end;

[0036] Establish resource access feature vectors corresponding to each of the main thread tasks based on the call patterns;

[0037] Predict the task trigger probabilities corresponding to each according to the resource access feature vectors;

[0038] Determine the main thread task with the highest task trigger probability as the first task;

[0039] Calculate the correlation degrees between each of the remaining main thread tasks except the first task and the first task;

[0040] Sort the remaining main thread tasks according to the correlation degrees, and insert the first task at the forefront of the sorting to obtain a first sorting;

[0041] Generate a preloading task queue according to the order of the first sorting.

[0042] Preferably, the scheduling optimization of each of the main thread tasks in the preloading task queue includes:

[0043] Determine the priorities of each of the main thread tasks in the preloading task queue;

[0044] Compare the priorities of each of the main thread tasks;

[0045] Determine the browser idle time period of the front end;

[0046] Allocate the main thread tasks with priorities lower than a preset priority threshold to be executed during the browser idle time period;

[0047] Real-time monitor whether the target user has a behavior mutation. When it is monitored that the target user has a behavior mutation, dynamically adjust the preloading task queue.

[0048] Preferably, the method further includes:

[0049] Call the asynchronous storage interface of the front end to store the loading resources of each main thread task in the preloading task queue;

[0050] Set a weight for each of the loading resources;

[0051] Determine the cache validity period according to the weight;

[0052] Set the corresponding cache validity period for each of the loading resources.

[0053] In a second aspect, a front-end performance optimization device includes:

[0054] A listening module for listening in real time to browser events initiated by a target user on the front end;

[0055] A user behavior feature extraction module for extracting user behavior features corresponding to the browser events;

[0056] A model prediction module for using a pre-trained behavior prediction model to process the user behavior features to obtain a behavior prediction result for the target user; the behavior prediction model is trained with a multi-user behavior feature sample set as training samples and the true behavior results of each user as sample labels;

[0057] A preloading task queue generation module for determining each main thread task from the behavior prediction result and generating a preloading task queue from each of the main thread tasks;

[0058] A scheduling optimization module for scheduling and optimizing each main thread task in the preloading task queue to achieve performance optimization of the front end.

[0059] In a third aspect, a front-end performance optimization device includes a memory and a processor;

[0060] The memory is used to store programs;

[0061] The processor is used to execute the program to implement each step of the front-end performance optimization method described in any item of the first aspect.

[0062] In a fourth aspect, a storage medium stores a computer program, and when the computer program is executed by a processor, each step of the front-end performance optimization method described in any item of the first aspect is implemented.

[0063] As can be seen from the above technical solution, this application monitors in real time the browser events initiated by the target user at the front end; extracts the user behavior characteristics corresponding to the browser events; uses a pre-trained behavior prediction model to process the user behavior characteristics to obtain a behavior prediction result for the target user; the behavior prediction model is trained with a behavior characteristic sample set of multiple users as the training samples and the real behavior results of each user as the sample labels; determines each main thread task from the behavior prediction result, and generates a preloading task queue by each of the main thread tasks; schedules and optimizes each main thread task in the preloading task queue to achieve performance optimization of the front end. This application monitors in real time the browser events initiated by the user at the front end, so that user behavior characteristics can be extracted from the browser events, and a pre-constructed behavior prediction model is used to make a prediction based on the user behavior characteristics, so that an accurate behavior prediction result can be obtained. Then, a preloading task queue is constructed according to the behavior prediction result, and the predicted user behavior can be pre-loaded in the form of a task queue in advance and scheduled and optimized, so as to accurately load resources and improve the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0064] In order to more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the following will briefly introduce the drawings required for the description of the embodiments or the prior art. Obviously, the drawings in the following description are only the embodiments of the present invention. For those of ordinary skill in the art, other drawings can be obtained according to the provided drawings without creative efforts.

[0065] Figure 1 It is an optional flowchart of a front-end performance optimization method provided by an embodiment of this application;

[0066] Figure 2 It is a schematic structural diagram of a front-end performance optimization device provided by an embodiment of this application;

[0067] Figure 3 It is a schematic structural diagram of a front-end performance optimization device provided by an embodiment of this application. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0068] The following will clearly and completely describe the technical solutions in the embodiments of this application with reference to the drawings in the embodiments of this application. Obviously, the described embodiments are only a part of the embodiments of this application, rather than all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of this application.

[0069] The present invention can be used in numerous general or specific computing device environments or configurations. For example: personal computers, server computers, handheld devices or portable devices, tablet devices, multi-processor devices, distributed computing environments including any of the above devices or equipment, and so on.

[0070] An embodiment of the present invention provides a front-end performance optimization method, which can be applied to various computer terminals or intelligent terminals, and the execution subject thereof can be a processor or a server of a computer terminal or an intelligent terminal. The method flow chart of the method is as Figure 1 shown, and specifically includes:

[0071] S1: Real-time monitor browser events initiated by a target user at the front end.

[0072] The browser events initiated by the target user at the front end can refer to click, scroll, keydown, etc. The click event is triggered when the user clicks on an element with a mouse (or touches a touch screen), the scroll is triggered when the position of the scroll bar of an element (or the entire page) changes, and the keydown is triggered when the user presses any key on the keyboard.

[0073] When a browser event initiated by the target user at the front end is monitored, some information related to the browser event can be obtained, so that the user interaction can be perceived in real time, which is closer to the actual needs than the traditional method, and the fine-grained behavior can be captured by monitoring the browser event, providing rich data support for subsequent analysis.

[0074] S2: Extract the user behavior characteristics corresponding to the browser event.

[0075] When a browser event is monitored, some information can be determined, such as the event type, the triggering event, the element position, etc., and the user behavior characteristics can be extracted therefrom, so as to quantify the user behavior pattern.

[0076] For example, temporal characteristics: scrolling speed, click frequency, etc.; spatial characteristics: the position of the focused element; context characteristics: the current page type.

[0077] S3: Process the user behavior characteristics by using a pre-trained behavior prediction model to obtain a behavior prediction result for the target user; the behavior prediction model is trained with a behavior characteristic sample set of multiple users as the training samples and the real behavior results of each user as the sample labels.

[0078] The behavior prediction model can predict the behavior results of different users through different user behavior characteristics and can distinguish the behavior patterns of different users.

[0079] The model can select the LSTM model, use the behavior data of all users in the front end to train a lightweight LSTM model, and input a behavior feature sample set containing the behavior features of countless users, and output the real behavior results. The behavior prediction results referred to in this application can refer to the probability distribution of the target user's future operations, such as "the probability of clicking on the product detail page is 80%", "the list of product IDs that the user may visit within the next 5 seconds".

[0080] The model can also be run asynchronously through Web Workers to avoid blocking the main thread.

[0081] S4: Determine each main thread task from the behavior prediction results, and generate a preloading task queue by each of the main thread tasks.

[0082] Each main thread task can be determined from the behavior prediction results. For example, the behavior prediction result is: the list of product IDs that the target user may visit within the next 5 seconds, and the probability of clicking on the product detail page is 80%. Then the main thread tasks are: the list of product IDs, the product detail page.

[0083] Then, according to the specific situation, main thread tasks such as the list of product IDs and the product detail page can be inserted into the preloading task queue for resource preloading.

[0084] S5: Schedule and optimize each main thread task in the preloading task queue to achieve performance optimization of the front end.

[0085] Due to situations such as changes in user behavior and changes in front-end resources, in order to make the preloading task queue more suitable for the target user and be able to load resources more accurately, it is also necessary to schedule and optimize each main thread task to achieve performance optimization of the front end.

[0086] As can be seen from the above technical solution, in this application, browser events initiated by a target user at the front end are listened to in real time; user behavior characteristics corresponding to the browser events are extracted; the user behavior characteristics are processed by a pre-trained behavior prediction model to obtain a behavior prediction result for the target user; the behavior prediction model is trained with a behavior characteristic sample set of multiple users as training samples and the true behavior result of each user as a sample label; various main thread tasks are determined from the behavior prediction result, and a pre-loading task queue is generated by each of the main thread tasks; the various main thread tasks in the pre-loading task queue are scheduled and optimized to achieve performance optimization of the front end. By listening to browser events initiated by a user at the front end in real time, this application can extract user behavior characteristics from the browser events, and use a pre-constructed behavior prediction model to predict based on the user behavior characteristics, so as to obtain an accurate behavior prediction result. Then, a pre-loading task queue is constructed according to the behavior prediction result, and the predicted user behavior can be pre-loaded in the form of a task queue in advance and scheduled and optimized, so as to accurately load resources and improve the user experience.

[0087] In the method provided by the embodiment of the present invention, the process of extracting the user behavior characteristics corresponding to the browser events is specifically described as follows:

[0088] Determine each mouse click event, each page scroll event, and each keyboard key event in the browser event;

[0089] Extract temporal features and spatial features from each of the mouse click events, page scroll events, or keyboard key events;

[0090] Obtain the current page content, and determine the page type according to the current page content;

[0091] Establish an operation sequence of the target user according to each of the mouse click events, page scroll events, and keyboard key events;

[0092] Determine the device type and screen size of the device where the front end is located;

[0093] Summarize the page type, operation sequence, device type, and screen size into context features;

[0094] Regard the temporal features, spatial features, and context features as user behavior characteristics.

[0095] Specifically, the mouse click event, page scroll event, and keyboard key event are click, scroll, and keydown respectively. Looking at these events separately can analyze some user behavior patterns, but looking at them together can also analyze deeper user behavior patterns. Therefore, they are analyzed separately first.

[0096] Temporal and spatial features are extracted from each event. Extracting temporal features can quantify user behavior. For example, by calculating indicators such as operation and duration, the user's operating habits can be identified. It can also detect mutation points in the behavior sequence. For example, a sudden increase in the mouse dwell time indicates that the content can attract users.

[0097] Spatial features can identify key areas of the page and optimize the spatial layout. They can also predict the user's browsing path based on the page scrolling speed and mouse movement direction.

[0098] At the same time, the page type can be determined based on the current page content, and the user's operation sequence can be analyzed based on each time, such as: mouse click ~ page scroll ~ mouse click ~ keyboard key. In addition, the device type and screen size can be analyzed, which can be used as context features, so that context features, temporal features and spatial features are all used as user behavior features.

[0099] The process of extracting time series features includes:

[0100] Extracting a click time from each of the mouse click events, and calculating a first time difference between every two mouse click events according to the click time;

[0101] Calculating the click frequency based on the first time difference;

[0102] Extracting the scroll trigger time and scroll position from each of the page scroll events;

[0103] Calculate the second time difference between every two page scrolling events according to the scroll trigger time, and calculate the scroll distance difference between every two page scrolling events according to the scroll position;

[0104] Calculating a scrolling speed based on the second time difference and the scrolling distance difference;

[0105] The click frequency and scroll speed are used as timing features.

[0106] Specifically, the extraction based on time series features does not require complex image or text processing, and can be determined based on basic click and scroll behaviors. This can reduce the computing cost of the front end, is suitable for linear operations, and is suitable for Web Worker parallel processing to improve efficiency.

[0107] The click frequency is obtained by dividing the first time difference by 2; the scroll distance difference is obtained by subtracting the two scroll positions; and the scroll distance difference is divided by the second time difference to obtain the scroll speed.

[0108] Furthermore, the process of extracting spatial features includes:

[0109] Determine each element corresponding to each of the mouse click events;

[0110] Obtain the position information and size information of each of the elements;

[0111] Calculate the coordinates of each focus element based on the position information and size information;

[0112] Obtain the coordinate information of each of the mouse click events;

[0113] Map each of the coordinate information to the current page respectively to obtain area click statistics information, area click density information, and area click event distribution information;

[0114] Take the focus element coordinates, area click statistics information, area click density information, and area click event distribution information as spatial features.

[0115] Specifically, taking the focus element coordinates as spatial features in this application belongs to element-level positioning, rather than simply recording screen coordinates, and can accurately identify the user's interaction intention; the area click statistics information can reveal the usage frequency of the core functions, the area click density information can reveal the user's interested areas, and the click event distribution can also reveal the user's line of sight trajectory.

[0116] This application taking temporal features, spatial features, and context features as user behavior features can improve the accuracy of user behavior prediction and save the amount of preloaded resources.

[0117] The process of generating a preloading task queue from each of the main thread tasks in this application will be described in detail below.

[0118] Monitor the call patterns of each of the main thread tasks to the front end;

[0119] Based on the call patterns, establish resource access feature vectors corresponding to each of the main thread tasks;

[0120] Predict the task trigger probabilities corresponding to each according to the resource access feature vectors;

[0121] Determine the main thread task with the highest task trigger probability as the first task;

[0122] Calculate the correlation degrees between each of the remaining main thread tasks and the first task except the first task;

[0123] Sort each of the remaining main thread tasks according to the correlation degrees, and insert the first task at the forefront of the sorting to obtain a first sorting;

[0124] Generate a preloading task queue in the order of the first sorting.

[0125] Specifically, the call pattern can be detected by capturing real load characteristics such as CPU computing, I / O requests, and memory access, avoiding overfitting caused by static rules, and abnormal call patterns need to be identified to ensure normal operation.

[0126] Predict the corresponding task trigger probability according to the resource access feature vector, take the main thread task with the highest task trigger probability as the first task, take the first task as the task first triggered by the user, then calculate the correlation degree, and take each main thread task with a correlation degree greater than the correlation threshold as the associated task corresponding to the first task. Then, sort these associated tasks in descending order of task trigger probability and arrange them in sequence behind the first task. Next, select the main thread task with the highest task trigger probability among the remaining main thread tasks except the first task and each associated task as the new first task, select the associated tasks corresponding to the new first task according to the same process, then sort them and arrange them behind the first task and the corresponding associated tasks, and so on, so as to obtain the first sorting. In this way, the most accurate preloading task queue can be obtained.

[0127] In the above process, the priority parameter of the fetch API can also be used to dynamically set the request priority (high / low), and the preloading task queue can be set according to the priority level.

[0128] The following embodiments will explain in detail the steps of scheduling and optimizing each main thread task in the preloading task queue of the present application.

[0129] Determine the priorities of each main thread task in the preloading task queue;

[0130] Compare the priorities of each main thread task;

[0131] Determine the browser idle time period of the front end;

[0132] Allocate each main thread task with a priority lower than the pre-set priority threshold to be executed during the browser idle time period;

[0133] Real-time monitor whether the target user has a behavior mutation. When it is monitored that the target user has a behavior mutation, the preloading task queue is dynamically adjusted.

[0134] Specifically, in addition to setting the preloading task queue using priorities, priorities can also be used to schedule and optimize the preloading task queue, which can reduce the main thread blocking rate, ensure that high-priority main thread tasks can be processed preferentially and smoothly, maximize the use of idle resources while ensuring key main thread tasks, and reduce redundant requests.

[0135] In addition, the user behavior time can also be recorded. For example, rules can be preset. When the rules are met, scheduling optimization is performed. In one example, when the user browses for more than 3 seconds, preloading is performed, so that simple dynamic scheduling can be achieved.

[0136] Furthermore, the present application can also implement intelligent cache management:

[0137] Call the asynchronous storage interface of the front end to store the loading resources of each main thread task in the preloading task queue;

[0138] Set weights for each of the loading resources;

[0139] Determine the cache validity period according to the weights;

[0140] Set the corresponding cache validity period for each of the loading resources.

[0141] Specifically, in addition to setting the cache validity period using weights to keep the resources valid, the page visibility can also be monitored in real time (visibilitychange event). When the page is hidden, the memory of non-critical resources is released.

[0142] Corresponding to Figure 1 the method described above, an embodiment of the present invention also provides a front-end performance optimization device for Figure 1 the specific implementation of the method. The front-end performance optimization device provided by the embodiment of the present invention can be in a computer terminal or various mobile devices, and in combination with Figure 2 introduce the front-end performance optimization device, as Figure 2 shown, the device may include:

[0143] A monitoring module 10, configured to monitor in real time browser events initiated by a target user at the front end;

[0144] A user behavior feature extraction module 20, configured to extract user behavior features corresponding to the browser events;

[0145] A model prediction module 30, configured to process the user behavior features by using a pre-trained behavior prediction model to obtain a behavior prediction result for the target user; the behavior prediction model is trained by using a behavior feature sample set of multiple users as training samples and the true behavior results of each user as sample labels;

[0146] A preloading task queue generation module 40, configured to determine each main thread task from the behavior prediction result, and generate a preloading task queue from each of the main thread tasks;

[0147] A scheduling optimization module 50 is used to perform scheduling optimization on each main thread task in the preloading task queue to achieve performance optimization of the front end.

[0148] As can be seen from the above technical solution, in this application, browser events initiated by a target user on the front end are listened to in real time; user behavior characteristics corresponding to the browser events are extracted; the user behavior characteristics are processed by a pre-trained behavior prediction model to obtain a behavior prediction result for the target user; the behavior prediction model is trained with a behavior characteristic sample set of multiple users as training samples and the real behavior result of each user as a sample label; each main thread task is determined from the behavior prediction result, and a preloading task queue is generated by each main thread task; scheduling optimization is performed on each main thread task in the preloading task queue to achieve performance optimization of the front end. By listening to browser events initiated by a user on the front end in real time, this application can extract user behavior characteristics from the browser events, and use a pre-constructed behavior prediction model to make predictions based on the user behavior characteristics, so as to obtain an accurate behavior prediction result. Then, a preloading task queue is constructed according to the behavior prediction result, and the predicted user behavior can be pre-loaded in the form of a task queue in advance and scheduling optimization is performed, so as to accurately load resources and improve the user experience.

[0149] Furthermore, an embodiment of this application provides a front-end performance optimization device. Optionally, Figure 3 shows a hardware structure block diagram of the front-end performance optimization device. Referring to Figure 3 , the hardware structure of the front-end performance optimization device may include: at least one processor 01, at least one communication interface 02, at least one memory 03, and at least one communication bus 04.

[0150] In the embodiment of this application, the number of the processor 01, the communication interface 02, the memory 03, and the communication bus 04 is at least one, and the processor 01, the communication interface 02, and the memory 03 complete communication with each other through the communication bus 04.

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

[0152] The memory 03 may include a high-speed RAM memory, and may also include a non-volatile memory, such as at least one disk memory.

[0153] Among them, the memory stores a program, and the processor can call the program stored in the memory. The program is used to execute the following front-end performance optimization method, including:

[0154] Monitor in real time the browser events initiated by the target user at the front end;

[0155] Extract the user behavior characteristics corresponding to the browser events;

[0156] Process the user behavior characteristics by using a pre-trained behavior prediction model to obtain a behavior prediction result for the target user; the behavior prediction model is trained by using a behavior characteristic sample set of multiple users as training samples and the real behavior result of each user as a sample label;

[0157] Determine each main thread task from the behavior prediction result, and generate a preloading task queue by each main thread task;

[0158] Schedule and optimize each main thread task in the preloading task queue to achieve performance optimization of the front end.

[0159] Optionally, the refined functions and extended functions of the program can refer to the description of the front-end performance optimization method in the method embodiments.

[0160] The embodiment of the present application further provides a storage medium. The storage medium can store a program suitable for being executed by a processor. When the program runs, it controls the device where the storage medium is located to execute the following front-end performance optimization method, including:

[0161] Monitor in real time the browser events initiated by the target user at the front end;

[0162] Extract the user behavior characteristics corresponding to the browser events;

[0163] Process the user behavior characteristics by using a pre-trained behavior prediction model to obtain a behavior prediction result for the target user; the behavior prediction model is trained by using a behavior characteristic sample set of multiple users as training samples and the real behavior result of each user as a sample label;

[0164] Determine each main thread task from the behavior prediction result, and generate a preloading task queue by each main thread task;

[0165] Schedule and optimize each main thread task in the preloading task queue to achieve performance optimization of the front end.

[0166] Specifically, the storage medium may be a computer-readable storage medium, and the computer-readable storage medium may be an electronic memory such as a flash memory, an EEPROM (Electrically Erasable Programmable Read-Only Memory), an EPROM, a hard disk, or a ROM.

[0167] Optionally, the refinement function and the extension function of the program may refer to the description of the front-end performance optimization method in the method embodiments.

[0168] In addition, in each of the embodiments of the present disclosure, the functional modules may be integrated together to form an independent part, or each module may exist alone, or two or more modules may be integrated to form an independent part. If the function is implemented in the form of a software functional module and sold or used as an independent product, it may be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of the present disclosure, in essence, or the part that contributes to the prior art, or a part of the technical solution, may be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for causing a computer device (which may be a personal computer, a live broadcast device, or a network device, etc.) to execute all or part of the steps of the methods in the embodiments of the present disclosure.

[0169] Finally, it should also be noted that in this article, relational terms such as first and second are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the term "comprising", "including" or any other variant thereof is intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements not only includes those elements, but also includes other elements not expressly listed, or also includes elements inherent to such process, method, article or device. Without further limitation, an element defined by the statement "including a..." does not exclude the existence of additional identical elements in the process, method, article or device including the element.

[0170] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. The same or similar parts among the various embodiments can be referred to each other.

[0171] The foregoing description of the disclosed embodiments enables those skilled in the art to practice or use the present application. Various modifications to these embodiments will be readily 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. Thus, the present application is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A front-end performance optimization method, characterized in that: include: Monitor browser events initiated by target users on the front end in real time; Extracting user behavior features corresponding to the browser event; The user behavior features are processed using a pre-trained behavior prediction model to obtain a behavior prediction result for the target user; the behavior prediction model is trained using a behavior feature sample set of multiple users as training samples and a real behavior result of each user as a sample label; Determine each main thread task from the behavior prediction result, and generate a preload task queue from each main thread task; The main thread tasks in the preloaded task queue are scheduled and optimized to achieve performance optimization of the front end.

2. The method according to claim 1, characterized in that The extracting the user behavior feature corresponding to the browser event includes: Determine each mouse click event, each page scroll event and each keyboard key event in the browser event; Extracting temporal features and spatial features from each of the mouse click events, page scroll events or keyboard key events; Obtaining the current page content, and determining the page type according to the current page content; Establishing an operation sequence of the target user according to each of the mouse click events, page scroll events and keyboard key events; Determine the device type and screen size of the device where the front end is located; Aggregating the page type, operation sequence, device type, and screen size as context features; The temporal features, spatial features and contextual features are all used as user behavior features.

3. The method according to claim 2, characterized in that The process of extracting time series features includes: Extracting a click time from each of the mouse click events, and calculating a first time difference between every two mouse click events according to the click time; Calculating the click frequency based on the first time difference; Extracting the scroll trigger time and scroll position from each of the page scroll events; Calculate the second time difference between every two page scrolling events according to the scroll trigger time, and calculate the scroll distance difference between every two page scrolling events according to the scroll position; Calculating a scrolling speed based on the second time difference and the scrolling distance difference; The click frequency and scroll speed are used as timing features.

4. The method according to claim 2, characterized in that: The process of extracting spatial features includes: Determine each element corresponding to each of the mouse click events; Obtaining position information and size information of each of the elements; Calculate the coordinates of each focus element based on the position information and size information; Obtaining each coordinate information of each mouse click event; Mapping each of the coordinate information to the current page respectively to obtain regional click statistics information, regional click density information and regional click event distribution information; The focus element coordinates, regional click statistical information, regional click density information and regional click event distribution information are all used as spatial features.

5. The method according to claim 1, characterized in that The preloading task queue is generated by each of the main thread tasks, including: Monitoring the calling mode of each main thread task to the front end; Establishing resource access feature vectors corresponding to each of the main thread tasks based on the calling mode; Predicting the corresponding task triggering probability according to each of the resource access feature vectors; Determine the main thread task with the highest task triggering probability as the first task; Calculate the correlation between each main thread task other than the first task and the first task; Sort the remaining main thread tasks according to the correlation degree, and insert the first task at the front of the sorting to obtain a first sorting; A preload task queue is generated according to the order of the first sorting.

6. The method according to claim 1, characterized in that The scheduling and optimizing of each main thread task in the preloaded task queue includes: Determine the priority of each main thread task in the preload task queue; Compare the priorities of the main thread tasks; Determining a browser idle time period of the front end; Allocate each main thread task whose priority is lower than a preset priority threshold to the browser idle time period for execution; The target user is monitored in real time to see whether a sudden change in behavior occurs. When a sudden change in behavior occurs in the target user, the preload task queue is dynamically adjusted.

7. The method according to any one of claims 1 to 6, characterized in that: The method further comprises: Calling the asynchronous storage interface of the front end to store the loading resources of each main thread task in the preloading task queue; Setting a weight for each of the loaded resources; Determine the cache validity period according to the weight; A corresponding cache validity period is set for each of the loaded resources.

8. A front-end performance optimization device, characterized in that: include: The monitoring module is used to monitor the browser events initiated by the target user on the front end in real time; A user behavior feature extraction module, used to extract the user behavior features corresponding to the browser event; A model prediction module is used to process the user behavior characteristics using a pre-trained behavior prediction model to obtain a behavior prediction result for the target user; the behavior prediction model is trained using a behavior feature sample set of multiple users as training samples and the actual behavior results of each user as sample labels; A preload task queue generation module, used to determine each main thread task from the behavior prediction result, and generate a preload task queue from each main thread task; The scheduling optimization module is used to schedule and optimize each main thread task in the preloaded task queue to achieve performance optimization of the front end.

9. A front-end performance optimization 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 the various steps of the front-end performance optimization method as described in any one of claims 1-7.

10. A 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 performance optimization method as described in any one of claims 1 to 7 is implemented.

Images