WebAssembly-based intelligent front-end resource preloading system and control method

Abstract

The invention belongs to the technical field of Web application development, and particularly provides an intelligent front-end resource preloading system based on WebAssembly and a control method.The method comprises the steps that when the system runs, a controller periodically triggers a working cycle, in each cycle, the controller firstly calls a WebAssembly analysis module to analyze the current user behavior and page structure, and then the current user behavior and page structure are stored in the WebAssembly analysis module; the output of the WebAssembly analysis module is transmitted to a machine learning prediction engine for prediction; the controller combines an analysis result of the WebAssembly analysis module and a prediction result of the machine learning prediction engine and transmits the combined result to the intelligent preloading decision maker, the intelligent preloading decision maker generates a preloading strategy based on the combined data, and the controller sends the generated preloading strategy to the resource loading optimizer for execution through the postMessage API. And the page loading time and the first content drawing time are reduced.

Description

Technical Field

[0001] The present invention relates to the technical field of Web application development, and in particular to an intelligent front-end resource preloading system and a control method based on WebAssembly. Background Art

[0002] In the current field of Web application development, there is a significant correlation between resource loading efficiency and user experience. However, existing Web applications face a series of challenges in resource loading, which not only affect the performance of the application, but also greatly reduce user satisfaction.

[0003] First, low resource loading efficiency is a common problem. Since Web applications usually contain a large number of resources such as images, scripts, style sheets, etc., the loading speed of these resources directly affects the rendering time of the first screen. Currently, many Web applications have problems with slow resource loading and long first screen loading time, which greatly affects the user's initial experience. Secondly, the unintelligent preloading strategy is also a key factor restricting the performance improvement of Web applications.

[0004] Traditional resource preloading methods often rely on static configuration or simple heuristic algorithms, which lack flexibility and cannot be dynamically adjusted according to the actual user behavior and network environment. Therefore, the preloaded resources often do not match the actual needs of users, resulting in poor preloading effects and even wasting valuable network resources. Due to unreasonable preloading strategies, a large number of unnecessary resources are loaded onto user devices, which not only wastes valuable bandwidth resources but also increases the energy consumption of the device. From the developer's perspective, implementing efficient resource loading strategies for Web applications usually requires complex manual optimization. This not only increases the difficulty and cost of development, but also may lead to unpredictability of optimization effects. Summary of the invention

[0005] In view of the problems faced by existing Web applications in resource loading, the present invention provides an intelligent front-end resource preloading system and control method based on WebAssembly, which provides an efficient and intelligent resource management solution for modern Web application development.

[0006] The technical solution of the present invention provides an intelligent front-end resource preloading system based on WebAssembly, including: a WebAssembly analysis module, a machine learning prediction engine, an intelligent preloading decision maker and a resource loading optimizer; The WebAssembly analysis module captures and analyzes the user's interactive behavior and the DOM structure of the page; The machine learning prediction engine uses a neural network model to predict user behavior and resource requirements; The intelligent preloading decider formulates the optimal resource preloading strategy based on the output of the WebAssembly analysis module and the machine learning prediction engine; The resource loading optimizer executes the strategy formulated by the intelligent preloading decider and implements resource loading control by intercepting and managing all network requests.

[0007] As a further limitation of the technical solution of the present invention, the system also includes a controller. When the system is running, the controller periodically triggers a working cycle. In each cycle, the controller first calls the WebAssembly analysis module to analyze the current user behavior and page structure, and the output of the WebAssembly analysis module is passed to the machine learning prediction engine for prediction; the controller combines the analysis results of the WebAssembly analysis module and the prediction results of the machine learning prediction engine, and passes them to the intelligent preloading decision maker. The intelligent preloading decision maker generates a preloading strategy based on the combined data, and the controller sends the generated preloading strategy to the resource loading optimizer for execution through the postMessage API.

[0008] As a further limitation of the technical solution of the present invention, the WebAssembly analysis module includes a user behavior analysis unit and a DOM structure parsing unit; The user behavior analysis unit captures user click, scroll, and mouse movement events through JavaScript API, aggregates the captured event data into specific behavior patterns, tracks the user's navigation path within the website, identifies common paths and potential points of interest, and extracts key features from the aggregated data; The DOM structure parsing unit traverses the DOM tree, identifies the structure and hierarchical relationship of the page, and determines the important information for first-screen rendering, including HTML elements, CSS, and JavaScript resources; analyzes the dependencies between page resources and builds a resource dependency graph; and determines the content within the visible area of ​​the first screen.

[0009] As a further limitation of the technical solution of the present invention, the WebAssembly analysis module includes a data input interface, an analysis result output interface and a configuration interface; The data input interface receives the original event data and DOM structure information transmitted by JavaScript; The analysis result output interface returns the processed user behavior pattern and DOM analysis results to the JavaScript environment; The configuration interface receives configuration information and dynamically adjusts analysis parameters.

[0010] As a further limitation of the technical solution of the present invention, the machine learning prediction engine includes a model training unit, a model deployment unit, a real-time prediction unit and a model update unit; The model training unit uses the Adam optimizer based on historical data, adopts the cross entropy loss function for classification tasks, and the binary cross entropy for multi-label classification tasks for model training; The model deployment unit converts the trained model into TensorFlow.js format, uses IndexedDB to store model weights, and sets a progressive model loading strategy; The real-time prediction unit obtains the user behavior feature data captured by the WebAssembly analysis module, preprocesses and standardizes the feature data, uses the tidy() function of TensorFlow.js to make predictions, and post-processes the prediction results and converts them into a set format; The model update unit sets up a sliding window buffer to store user interaction data for a set time period. When the accumulated new data is greater than the set threshold, it performs small batch gradient updates when the browser is idle, uses TensorFlow.js's tf.data API to process data streams and regularly synchronizes the updated model weights to IndexedDB.

[0011] As a further limitation of the technical solution of the present invention, the intelligent preloading decision maker receives the user behavior analysis results from the WebAssembly analysis module, and at the same time, receives the DOM structure analysis results provided by the WebAssembly analysis module, preliminarily evaluates the importance and urgency of each resource based on the received analysis results, and sets the initial weight of each resource according to the evaluation results to generate a decision matrix; receives the prediction results of the machine learning prediction engine and adjusts the weights of the resources according to the prediction results; sets a resource dependency parser, which is based on the resource dependency graph provided by the WebAssembly analysis module to ensure that the correct loading order is followed when preloading resources; sets an emergency intervention mechanism, which immediately triggers the preloading of key resources of the target page of the link when it is detected that the user is about to click on a link; outputs a structured preloading strategy including three levels, each level containing a resource list sorted by priority; at the same time, a decision report for recording the reasons for making each preloading decision is also generated; the three levels are immediate loading, delayed loading and on-demand loading respectively.

[0012] As a further limitation of the technical solution of the present invention, the resource loading optimizer sets a multi-level cache system, and when receiving the preloading strategy from the intelligent preloading decision maker, it starts to execute immediately. For resources marked as immediate loading, a network request is immediately initiated and the resources are stored in the memory cache; for resources marked as delayed loading, these resources are gradually loaded using the idle time of the browser, and for resources marked as on-demand loading, a loading strategy is prepared but they will not be actively loaded; The resource loading optimizer sets an intelligent cache update strategy. When it detects that a resource in the cache has been updated, it downloads the new version in the background and seamlessly switches to the new version the next time the page is loaded. The resource loading optimizer sets up a network quality detection module to continuously monitor the current network status and dynamically adjust the loading strategy according to the network status.

[0013] As a further limitation of the technical solution of the present invention, the system also includes a performance monitoring and self-optimization module that continuously monitors the performance indicators of the Web application, analyzes the performance data, and automatically adjusts and optimizes various components of the system based on the analysis results; When the performance monitoring and self-optimization module detects a performance anomaly or generates an optimization suggestion, it notifies the controller through a callback function. The controller evaluates the optimization suggestion and decides whether to adjust the parameters or strategies of the system module based on the evaluation results.

[0014] As a further limitation of the technical solution of the present invention, the performance monitoring and self-optimization module adopts an adaptive sampling strategy. Under normal circumstances, data is collected at a frequency less than a first threshold, but when a performance abnormality is detected, the sampling frequency is automatically increased; the performance monitoring and self-optimization module also sets a visual dashboard to provide an intuitive performance monitoring interface.

[0015] In a second aspect, the technical solution of the present invention provides a method for controlling intelligent front-end resource preloading based on WebAssembly, which is applied to the system described in the first aspect, and comprises: When the system is running, the controller triggers a work cycle periodically. In each cycle, the controller first calls the WebAssembly analysis module to analyze the current user behavior and page structure. The output of the WebAssembly analysis module is passed to the machine learning prediction engine for prediction. The controller combines the analysis results of the WebAssembly analysis module with the prediction results of the machine learning prediction engine and passes them to the intelligent preloading decision maker. The intelligent preloading decision maker generates a preloading strategy based on the combined data. The controller sends the generated preloading strategy to the resource loading optimizer for execution through the postMessage API. When the performance monitoring and self-optimization module detects a performance anomaly or generates an optimization suggestion, it notifies the controller through a callback function. The controller evaluates the optimization suggestion and decides whether to adjust the parameters or strategies of other modules based on the evaluation results.

[0016] It can be seen from the above technical solutions that the present invention has the following advantages: through intelligent prediction and optimized resource loading strategy, the page loading time and the first content drawing time are greatly reduced, providing a faster and smoother user experience. The system can adjust the preloading strategy in real time according to user behavior, device performance and network conditions to ensure that the best performance can be maintained in various environments, improving the adaptability and stability of the application. The automated performance monitoring and optimization process reduces the need for manual tuning, and the system's self-learning ability makes performance optimization a continuous and automatic process, greatly reducing the developer's workload and the maintenance cost of the application. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0018] Figure 1 is a schematic block diagram of a system according to an embodiment of the present invention. DETAILED DESCRIPTION

[0019] In order to enable those skilled in the art to better understand the technical solutions in the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present invention. The abbreviations and key terms of this application are defined as follows: WebAssembly (Wasm): A low-level assembly-like language that runs at near-native speeds in modern web browsers.

[0020] DOM (Document Object Model): Document Object Model, which represents the structure of an HTML or XML document.

[0021] FCP (First Contentful Paint): First content drawing, one of the indicators to measure page loading performance.

[0022] LCP (Largest Contentful Paint): Largest contentful paint, an indicator to measure the loading speed of the main content of the page.

[0023] TTI (Time to Interactive): Time to Interactive, which indicates the time when the page is first fully interactive.

[0024] Service Worker: A script that runs in the background of the browser and can intercept network requests and implement functions such as offline caching.

[0025] Cache API: A network API that provides cached resources, usually used in conjunction with Service Worker.

[0026] Lazy Loading: Lazy loading is a technique for loading resources on demand.

[0027] Critical Rendering Path: The process by which the browser converts HTML, CSS, and JavaScript into pixels on the screen.

[0028] Resource Hints: Resource hints, such as preload and prefetch, are used to instruct the browser to preload certain resources.

[0029] like Figure 1 As shown, an embodiment of the present invention provides an intelligent front-end resource preloading system based on WebAssembly, including: a WebAssembly analysis module, a machine learning prediction engine, an intelligent preloading decision maker, a resource loading optimizer, and a performance monitoring and self-optimization module; The WebAssembly analysis module captures and analyzes the user's interactive behavior and the DOM structure of the page; The machine learning prediction engine uses a neural network model to predict user behavior and resource requirements; The intelligent preloading decider formulates the optimal resource preloading strategy based on the output of the WebAssembly analysis module and the machine learning prediction engine; The resource loading optimizer executes the strategy formulated by the intelligent preloading decider and implements resource loading control by intercepting and managing all network requests.

[0030] The performance monitoring and self-optimization module continuously monitors the performance indicators of Web applications, analyzes performance data, and automatically adjusts and optimizes various components of the system based on the analysis results; The system also includes a controller. When the system is running, the controller periodically triggers a working cycle. In each cycle, the controller first calls the WebAssembly analysis module to analyze the current user behavior and page structure. The output of the WebAssembly analysis module is passed to the machine learning prediction engine for prediction; the controller combines the analysis result of the WebAssembly analysis module with the prediction result of the machine learning prediction engine and passes them to the intelligent preloading decision maker. The intelligent preloading decision maker generates a preloading strategy based on the combined data, and the controller sends the generated preloading strategy to the resource loading optimizer for execution through the postMessage API.

[0031] When the performance monitoring and self-optimization module detects a performance anomaly or generates an optimization suggestion, it notifies the controller through a callback function. The controller evaluates the optimization suggestion and decides whether to adjust the parameters or strategies of the system module based on the evaluation results.

[0032] async function mainLoop() { while (true) { const userBehavior = await WAM.analyzeUserBehavior(); const pageStructure = await WAM.analyzePageStructure(); const prediction = await MLPE.predict(userBehavior, pageStructure); const preloadStrategy = await IPD.decideStrategy(userBehavior,pageStructure, prediction); await RLO.applyStrategy(preloadStrategy); await sleep(LOOP_INTERVAL); } } In some embodiments, the specific implementation of the WebAssembly Analysis Module (hereinafter referred to as WAM) is as follows: WAM is one of the core components of this system, responsible for efficiently analyzing user behavior and DOM structure. It is written in Rust and compiled into WebAssembly to achieve near-native execution speed.

[0033] WAM mainly includes user behavior analysis unit and DOM structure parsing unit.

[0034] User behavior analysis unit: responsible for capturing and analyzing user interaction behaviors. The functions implemented are as follows: Event monitoring: Capture user clicks, scrolls, mouse movements and other events through the JavaScript API, and pass the raw data to the WebAssembly module.

[0035] Behavior aggregation: Aggregate the captured event data into meaningful behavior patterns, such as click heatmaps, scroll depth, page dwell time, etc.

[0036] Path analysis: Track users’ navigation paths within a website, identifying common paths and potential points of interest.

[0037] Behavioral feature extraction: Extract key features from aggregated data, such as user interest tendencies, interaction frequency, etc.

[0038] DOM structure parsing unit: responsible for analyzing the DOM structure of the page to optimize the resource loading strategy. The functions are as follows: DOM tree traversal: Efficiently traverse the DOM tree and identify the structure and hierarchical relationship of the page.

[0039] Critical rendering path analysis: Identify the HTML elements, CSS, and JavaScript resources that are critical to the first render.

[0040] Resource dependency graph construction: Analyze the dependencies between page resources and build a resource dependency graph.

[0041] Visual content identification: Identify the content within the visible area of ​​the first screen and prioritize resources related to these elements.

[0042] The above functions of WAM take advantage of the high performance characteristics of WebAssembly, including: directly operating linear memory to reduce the overhead of data serialization and deserialization. Using SIMD (single instruction multiple data) instructions to process data in parallel to improve analysis efficiency. Using the multi-threading capabilities of Web Workers and WebAssembly to process complex computing tasks in parallel.

[0043] The interaction between WAM and the JavaScript environment is achieved through a clearly defined interface, which mainly includes: Data input interface: receives raw event data and DOM structure information passed by JavaScript.

[0044] Analysis result output interface: returns the processed user behavior pattern and DOM analysis results to the JavaScript environment.

[0045] Configuration interface: allows dynamic adjustment of analysis parameters such as event sampling rate, heatmap resolution, etc.

[0046] To ensure real-time performance and performance, WAM uses the following optimization strategies: Incremental analysis of user behavior instead of processing the full amount of data each time. Cache intermediate analysis results to avoid repeated calculations. Dynamically adjust the data sampling rate according to system load to balance analysis accuracy and performance overhead. WAM can quickly and efficiently analyze user behavior and page structure, providing key input for intelligent preloading decisions, thereby significantly improving the performance and user experience of Web applications.

[0047] The specific implementation of the machine learning prediction engine (hereinafter referred to as MLPE) is as follows: MLPE is the intelligent core of this system, responsible for predicting user behavior and resource requirements. It uses a lightweight neural network model and is specially designed to run efficiently in a browser environment. MLPE is implemented based on the TensorFlow.js library to ensure cross-browser compatibility and optimized performance.

[0048] MLPE uses a multi-layer perceptron MLP structure, which includes an input layer, two hidden layers, and an output layer. The input layer receives user behavior features and current page structure information, with a dimension of 50. The first hidden layer has 64 neurons and uses the ReLU activation function. The second hidden layer has 32 neurons and uses the ReLU activation function. The output layer predicts the next possible user operation (classification task) and the resources that may be needed (multi-label classification task). Obtain user behavior features and page structure features; user behavior features include click frequency, scroll depth, page dwell time, etc., which are standardized using the data provided by WAM. Page structure features include information such as the depth, width, and key element distribution of the DOM tree, which are processed through one-hot encoding and numerical standardization. Large-scale historical data is used for initial training on the server side. The Adam optimizer is used with a learning rate of 0.001 and a batch size of 64. The cross entropy loss function is used for classification tasks, and the binary cross entropy is used for multi-label classification tasks. Early stopping is used to prevent overfitting, and the performance on the validation set is used as the stopping criterion. Use quantization to compress model weights from 32-bit floating point numbers to 8-bit integers to reduce model size. Apply knowledge distillation to mimic the behavior of a large teacher model with a smaller student model. Use TensorFlow.js's graph optimization capabilities to merge operations and remove redundant computations. Convert the trained model to TensorFlow.js format. Use IndexedDB to store model weights for fast loading. Implement a progressive loading strategy to load a small base model first, then load the full model in the background.

[0049] Whenever a user interacts with the page, get the latest feature data from WAM. Preprocess and normalize the feature data. Use TensorFlow.js's tidy() function to make predictions, automatically managing memory. Post-process the prediction results and convert them into an interpretable format.

[0050] During training, implement a sliding window buffer to store recent user interaction data. When enough new data is accumulated, perform small batch gradient updates when the browser is idle. Use TensorFlow.js's tf.data API to efficiently process data streams. Regularly synchronize updated model weights to IndexedDB. Use Web Workers to run prediction tasks in background threads to avoid blocking the main thread. Implement prediction result caching and directly return cached results for similar inputs. Use tf.enableProdMode() to disable development mode and improve runtime performance.

[0051] MLPE sets error handling and fallback strategies to implement a simple rule-based predictor as an alternative. b) When the ML model fails to load or the prediction is abnormal, it automatically switches to the rule-based predictor. Integrate the TensorFlow.js Vis component to visualize the model structure and performance indicators, implement custom logging, and track prediction accuracy and resource usage. Provide a developer mode that allows real-time viewing of prediction results and model status. With this implementation, MLPE can run efficiently in a browser environment, provide real-time user behavior prediction and resource demand prediction, and provide key input for intelligent preloading decisions, thereby optimizing the performance and user experience of web applications.

[0052] The Intelligent Preloading Decider (hereinafter referred to as IPD) is the core decision-making component of this system, responsible for formulating the optimal resource preloading strategy based on the output of WAM and MLPE. The implementation of IPD adopts a multi-factor weighted decision algorithm combined with heuristic rules and dynamic adjustment mechanism to adapt to different user behavior patterns and network environments.

[0053] At the core of IPD is a decision matrix that contains a combination of various resource types (such as JavaScript, CSS, images, videos, etc.) and preloading priorities (immediate loading, lazy loading, on-demand loading). Each cell of the decision matrix contains an initial weight value that is pre-set based on historical data and expert knowledge. At runtime, IPD dynamically adjusts these weights based on input from WAM and MLPE.

[0054] Specifically, IPD first receives the user behavior analysis results from WAM, including information such as user click heatmaps, scrolling patterns, and page dwell time. At the same time, it also receives DOM structure analysis results provided by WAM, such as critical rendering paths and resource dependency graphs. This information is used to preliminarily assess the importance and urgency of each resource. For example, image resources located on the first screen or CSS files on the critical rendering path will be given a higher initial weight.

[0055] Next, IPD integrates MLPE’s prediction results into the decision-making process. MLPE provides the user’s possible next actions and potential resources. IPD further adjusts the weight of resources based on these prediction results. For example, if MLPE predicts that the user is likely to click on a link, the weight of the key resources required for the page pointed to by the link will be increased.

[0056] In order to handle different network conditions and device performance, IPD also implements an adaptive mechanism. It takes into account factors such as current network bandwidth, latency, and device processing power. In the case of poor network conditions or limited device performance, IPD will tend to prefer a more conservative preloading strategy, prioritizing the loading of absolutely necessary resources and deferring the loading of secondary resources until the network is idle.

[0057] Another key feature of IPD is its feedback learning mechanism. It continuously monitors the effects of preloading decisions, including actual resource usage, loading time, and impact on user experience. This feedback information is used to fine-tune the weights in the decision matrix to continuously optimize the preloading strategy. For example, if it is found that a certain type of resource is frequently preloaded but rarely used, IPD will reduce the preloading tendency of this type of resource.

[0058] In the actual decision-making process, IPD uses a sliding time window to balance immediacy and stability. It not only considers the latest analysis results, but also refers to the decision history over the past period of time to avoid decision jitter caused by instantaneous fluctuations. The size of this time window is configurable and is set by default to the last 10 interactions or 30 seconds, whichever comes first.

[0059] To handle complex dependencies, IPD implements a resource dependency parser. This parser is based on the resource dependency graph provided by WAM to ensure that the correct loading order is followed when preloading resources. For example, if you decide to preload a JavaScript file, the parser will check the dependencies of the file and ensure that its dependent resources (such as another JavaScript file or a CSS file) are also appropriately scheduled for loading.

[0060] IPD also includes an emergency intervention mechanism to handle sudden high-priority demands. For example, if it detects that a user is about to click a link (based on a mouse hover event), IPD can immediately trigger the preloading of key resources of the link's target page, even if this may temporarily interrupt the current preloading queue.

[0061] Finally, IPD outputs a structured preloading strategy, including three levels: immediate loading, lazy loading, and on-demand loading. Each level contains a list of resources sorted by priority. This strategy will be passed to the resource loading optimizer (RLO) for execution. At the same time, IPD also generates a decision report to record the reasons for each preloading decision, which is very valuable for the interpretability and subsequent optimization of the system.

[0062] Through this complex and flexible decision-making mechanism, IPD can formulate an efficient and intelligent resource preloading strategy based on multiple factors, thereby significantly improving the performance and user experience of Web applications.

[0063] The Resource Loading Optimizer (RLO) is a key component in this system that is responsible for executing the strategies formulated by the Intelligent Preloading Decider (IPD) and optimizing the resource loading process. The core of RLO is a highly optimized Service Worker, which intercepts and manages all network requests to achieve fine-grained resource loading control.

[0064] The implementation of RLO begins with the Service Worker registration process. When the web application is first loaded, RLO registers a custom Service Worker. This Service Worker script contains complex caching strategies and resource management logic. After registration, the Service Worker immediately begins intercepting all network requests for the page.

[0065] Inside the Service Worker, RLO implements a multi-level cache system. This system includes memory cache, IndexedDB storage, and the browser's HTTP cache. The memory cache is used to store the most frequently accessed small resources, such as critical JavaScript modules or CSS files, for instant access. IndexedDB is used to store large resources, such as images or video files, and it provides large-capacity storage capabilities. The browser's HTTP cache serves as a last resort. RLO dynamically decides which level of cache to store the resource in based on its type, size, and access frequency.

[0066] When receiving a preload strategy from IPD, RLO starts executing immediately. For resources marked as "immediate load", RLO immediately initiates network requests and stores the resources in the appropriate cache. For "lazy load" resources, RLO uses the browser's idle time to load these resources gradually. This is achieved by using the requestIdleCallback API, ensuring that preloading does not affect the performance of the current page. "On-demand load" resources are not actively loaded, but RLO prepares loading strategies for these resources so that they can respond quickly when needed.

[0067] RLO also implements intelligent request merging and priority queue management. For multiple small files, such as icons or small JavaScript modules, RLO will try to merge them into one request to reduce the number of HTTP requests. At the same time, RLO maintains a dynamic priority queue, constantly adjusting the priority of resource loading based on the latest user interaction and page status.

[0068] In order to handle large resources, RLO implements a fragmented download mechanism. For large images or video files, RLO will split them into multiple small pieces and download them gradually using HTTP range requests. This allows large files to be downloaded without blocking the loading of other important resources. At the same time, this mechanism also supports breakpoint resumption, which improves the loading reliability in unstable network environments.

[0069] RLO also includes an adaptive predictive loading system. It analyzes the user's navigation pattern, predicts the possible next page, and preloads the key resources of these pages in the background. This system uses a simple Markov chain model to calculate the page transition probability based on the user's historical navigation data.

[0070] To optimize the experience of repeated visits, RLO implements an intelligent cache update strategy. When it detects that a resource in the cache has been updated, RLO does not immediately replace the old version, but downloads the new version in the background and switches seamlessly the next time the page is loaded. This ensures that users can always load the page quickly and get the latest content in a timely manner.

[0071] RLO also integrates a network quality detection module. This module continuously monitors the current network conditions, including bandwidth, latency, and packet loss rate. Based on this information, RLO can dynamically adjust its loading strategy. For example, when network conditions are poor, it may choose to load a low-quality version of an image or postpone the loading of non-critical resources.

[0072] To handle third-party resources, RLO implements a proxy mechanism. For resource requests from third-party domains, RLO forwards these requests through a configurable proxy server. This not only allows caching and optimization of third-party resources, but also provides an additional layer of security to filter out potentially malicious content.

[0073] Finally, RLO includes detailed performance monitoring and logging capabilities. It records information such as the loading time, cache hit rate, network errors, etc. of each resource. This data is not only used to adjust the loading strategy in real time, but is also sent back to the server regularly for long-term performance analysis and system optimization.

[0074] Through this complex and comprehensive implementation, RLO can accurately execute the preloading strategy of IPD, and dynamically adjust it according to actual conditions to maximize resource loading efficiency and significantly improve the performance and user experience of Web applications.

[0075] The Performance Monitoring and Self-Optimization Module (PMSOM) is a key component of this system. It is responsible for continuously monitoring the performance indicators of Web applications, analyzing performance data, and automatically adjusting and optimizing various components of the system based on these analysis results. The implementation of PMSOM combines real-time data collection, complex statistical analysis, and machine learning techniques to achieve continuous improvement and adaptive optimization of the system.

[0076] The core of PMSOM is a distributed performance data collection system. On the client side, it uses the Performance API provided by the browser and customized performance tracking points to collect various performance indicators. These indicators include but are not limited to Web core indicators such as First Contentful Paint (FCP), Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS), and customized application-specific indicators such as the rendering time of specific components, user interaction response time, etc. In order to minimize the impact of performance collection itself on application performance, PMSOM adopts an adaptive sampling strategy. Under normal circumstances, it collects data at a lower frequency, but when performance anomalies are detected, it automatically increases the sampling rate to obtain more detailed information.

[0077] Data collection is not limited to the client side. PMSOM also implements a performance monitoring mechanism on the server side. This includes the collection of indicators such as API response time, server resource utilization, and database query performance. Data collection on the server side uses distributed tracing technology to track the processing of a request in the entire system and identify potential performance bottlenecks.

[0078] The collected performance data is transmitted to a central data processing system in real time. This system uses a stream processing architecture and can process large amounts of performance data streams in real time. The data is first preprocessed, including denoising, outlier detection, and data normalization. Then, the processed data is input into multiple analysis modules running in parallel.

[0079] One of the key analysis modules is the trend analysis engine. This engine uses time series analysis techniques, such as ARIMA models and exponential smoothing, to detect long-term trends and periodic patterns in performance indicators. It can predict the future trend of performance indicators and provide a basis for proactive optimization. Another important analysis module is the correlation analysis engine, which uses machine learning algorithms, such as random forests and gradient boosting trees, to identify complex relationships between different performance indicators and their associations with system configuration parameters.

[0080] PMSOM also implements a sophisticated anomaly detection system. This system combines statistical methods and machine learning techniques, such as the Isolation Forest algorithm and autoencoders, to identify abnormal patterns in performance data. When an anomaly is detected, the system automatically triggers an alert and initiates the root cause analysis process. Root cause analysis uses causal inference techniques to try to infer the original cause of the performance problem from large amounts of performance data and system logs.

[0081] Based on these analysis results, PMSOM's optimization decision engine will generate a series of optimization suggestions. These suggestions may include adjusting resource preloading strategies, modifying cache configurations, optimizing database queries, refactoring front-end components, etc. The optimization decision engine uses a reinforcement learning algorithm, which can learn the most effective optimization strategy through continuous trials and feedback.

[0082] Another key feature of PMSOM is its automated A / B testing system. When the system generates a new optimization suggestion, it is not immediately implemented throughout the application, but first tested on a small group of users. The system automatically sets up a control group and an experimental group, and uses statistical hypothesis testing methods to evaluate the effect of the optimization. Only when the optimization is proven to be effective and has no negative impact will it be promoted to a larger user base.

[0083] In order to process large-scale performance data and support complex analytical tasks, PMSOM adopts a distributed computing framework. It uses Apache Spark for big data processing and machine learning tasks, and Elasticsearch for real-time log analysis and search. This architecture ensures that the system can scale as the application scale grows while maintaining real-time analysis capabilities.

[0084] PMSOM also includes a visual dashboard that provides an intuitive performance monitoring interface for developers and operations teams. This dashboard not only displays real-time and historical data of various performance indicators, but also provides interactive analysis tools that allow users to deeply explore performance data, identify problems, and simulate the potential impact of different optimization strategies.

[0085] Through this comprehensive and complex implementation, PMSOM can continuously monitor the performance of Web applications, quickly identify and diagnose problems, and automatically implement optimization measures. It not only improves the overall performance and reliability of the system, but also greatly reduces the workload of manual performance tuning, allowing the system to maintain optimal performance in a constantly changing environment.

[0086] The integration of WebAssembly analysis module, machine learning prediction engine, intelligent preloading decider, resource loading optimizer, and performance monitoring and self-optimization module is achieved through a central controller. This controller acts as the brain of the system, coordinating the work of various modules to ensure the smooth transmission of data and control flow.

[0087] The controller also implements an event-driven mechanism to respond to asynchronous events from various modules. For example, when the RLO completes the preloading of a resource, it sends an event to notify the controller. After receiving this event, the controller updates the system status and may trigger a new round of decision-making process.

[0088] PMSOM integrates slightly differently with other modules. It runs continuously in the background, collecting performance data. When PMSOM detects performance anomalies or generates optimization suggestions, it notifies the controller through a callback function. The controller evaluates these suggestions and decides whether to adjust the parameters or strategies of other modules.

[0089] The following is the pseudo code of the interaction between PMSOM and the controller: PMSOM.onOptimizationSuggestion(async (suggestion) =>{ if (suggestion.type === 'PRELOAD_STRATEGY_ADJUSTMENT') { await IPD.adjustStrategy(suggestion.params); } else if (suggestion.type === 'MODEL_UPDATE') { await MLPE.updateModel(suggestion.newModel); }}); To ensure system reliability and performance, the controller implements error handling and retry mechanisms. If any module throws an exception during operation, the controller will catch these exceptions and try to recover, falling back to a safe default state if necessary. The controller also implements a simple current limiting mechanism to prevent too many predictions or decision operations in a short period of time to avoid overloading user devices.

[0090] The controller is also responsible for managing the life cycle of the system. When the page is about to be unloaded, the controller will call the cleanup methods of each module to ensure that all states are correctly saved and resources are released. When the page is reloaded, the controller will restore the previous state from the persistent storage, allowing the system to quickly return to the previous working state.

[0091] Through this centralized yet flexible integration approach, the five core modules are able to work together to form an efficient and intelligent front-end resource preloading system. This architecture not only ensures high performance and reliability of the system, but also provides good scalability, allowing new modules to be easily integrated or existing modules to be replaced in the future.

[0092] The embodiment of the present invention further provides a method for controlling intelligent front-end resource preloading based on WebAssembly, which is applied to the system described in the above embodiment, and includes: When the system is running, the controller triggers a work cycle periodically. In each cycle, the controller first calls the WebAssembly analysis module to analyze the current user behavior and page structure. The output of the WebAssembly analysis module is passed to the machine learning prediction engine for prediction. The controller combines the analysis results of the WebAssembly analysis module with the prediction results of the machine learning prediction engine and passes them to the intelligent preloading decision maker. The intelligent preloading decision maker generates a preloading strategy based on the combined data. The controller sends the generated preloading strategy to the resource loading optimizer for execution through the postMessage API. When the performance monitoring and self-optimization module detects a performance anomaly or generates an optimization suggestion, it notifies the controller through a callback function. The controller evaluates the optimization suggestion and decides whether to adjust the parameters or strategies of other modules based on the evaluation results.

[0093] It should be understood that the order of execution of the steps in the above embodiment does not necessarily mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiment of the present invention.

[0094] The embodiment of the WebAssembly-based intelligent front-end resource preloading control method provided in an embodiment of the present invention belongs to the same inventive concept as the WebAssembly-based intelligent front-end resource preloading system of the above-mentioned embodiments. For details not described in detail in the embodiment of the WebAssembly-based intelligent front-end resource preloading control method, reference can be made to the above-mentioned embodiment of the WebAssembly-based intelligent front-end resource preloading system.

[0095] Although the present invention has been described in detail with reference to the accompanying drawings and in combination with the preferred embodiments, the present invention is not limited thereto. Without departing from the spirit and essence of the present invention, a person of ordinary skill in the art may make various equivalent modifications or substitutions to the embodiments of the present invention, and these modifications or substitutions shall be within the scope of the present invention. Any person of ordinary skill in the art may easily think of changes or substitutions within the technical scope disclosed by the present invention, and these shall be within the scope of protection of the present invention.

Claims

1. An intelligent front-end resource preloading system based on WebAssembly, characterized in that: include: WebAssembly analysis module, machine learning prediction engine, intelligent preloading decider, and resource loading optimizer; The WebAssembly analysis module captures and analyzes the user's interactive behavior and the DOM structure of the page; The machine learning prediction engine uses a neural network model to predict user behavior and resource requirements; The intelligent preloading decider formulates the optimal resource preloading strategy based on the output of the WebAssembly analysis module and the machine learning prediction engine; The resource loading optimizer executes the strategy formulated by the intelligent preloading decider and implements resource loading control by intercepting and managing all network requests.

2. The WebAssembly-based intelligent front-end resource preloading system according to claim 1, characterized in that: The system also includes a controller. When the system is running, the controller periodically triggers a working cycle. In each cycle, the controller first calls the WebAssembly analysis module to analyze the current user behavior and page structure. The output of the WebAssembly analysis module is passed to the machine learning prediction engine for prediction. The controller combines the analysis result of the WebAssembly analysis module with the prediction result of the machine learning prediction engine and passes them to the intelligent preloading decision maker. The intelligent preloading decision maker generates a preloading strategy based on the combined data. The controller sends the generated preloading strategy to the resource loading optimizer for execution through the postMessage API.

3. The WebAssembly-based intelligent front-end resource preloading system according to claim 2 is characterized in that: The WebAssembly analysis module includes a user behavior analysis unit and a DOM structure parsing unit; The user behavior analysis unit captures user click, scroll, and mouse movement events through JavaScript API, aggregates the captured event data into specific behavior patterns, tracks the user's navigation path within the website, identifies common paths and potential points of interest, and extracts key features from the aggregated data; The DOM structure parsing unit traverses the DOM tree, identifies the structure and hierarchical relationship of the page, and determines the important information for first screen rendering, including HTML elements, CSS, and JavaScript resources; Analyze the dependencies between page resources and build a resource dependency graph; Determine what content is within the visible area above the fold.

4. The WebAssembly-based intelligent front-end resource preloading system according to claim 3 is characterized in that: The WebAssembly analysis module includes a data input interface, an analysis result output interface, and a configuration interface; The data input interface receives the original event data and DOM structure information transmitted by JavaScript; The analysis result output interface returns the processed user behavior pattern and DOM analysis results to the JavaScript environment; The configuration interface receives configuration information and dynamically adjusts analysis parameters.

5. The WebAssembly-based intelligent front-end resource preloading system according to claim 4 is characterized in that: The machine learning prediction engine includes a model training unit, a model deployment unit, a real-time prediction unit, and a model update unit; The model training unit uses the Adam optimizer based on historical data, adopts the cross entropy loss function for classification tasks, and the binary cross entropy for multi-label classification tasks for model training; The model deployment unit converts the trained model into TensorFlow.js format, uses IndexedDB to store model weights, and sets a progressive model loading strategy; The real-time prediction unit obtains the user behavior feature data captured by the WebAssembly analysis module, preprocesses and standardizes the feature data, uses the tidy() function of TensorFlow.js to make predictions, and post-processes the prediction results and converts them into a set format; The model update unit sets up a sliding window buffer to store user interaction data for a set time period. When the accumulated new data is greater than the set threshold, it performs small batch gradient updates when the browser is idle, uses TensorFlow.js's tf.data API to process data streams and regularly synchronizes the updated model weights to IndexedDB.

6. The WebAssembly-based intelligent front-end resource preloading system according to claim 5, characterized in that: The intelligent preloading decision maker receives the user behavior analysis results from the WebAssembly analysis module, and at the same time receives the DOM structure analysis results provided by the WebAssembly analysis module, preliminarily evaluates the importance and urgency of each resource based on the received analysis results, and sets the initial weight of each resource according to the evaluation results to generate a decision matrix; Receive prediction results from the machine learning prediction engine and adjust resource weights based on the prediction results; Setting a resource dependency parser, which is based on the resource dependency graph provided by the WebAssembly analysis module to ensure that the correct loading order is followed when preloading resources; Set up an emergency intervention mechanism to immediately trigger the preloading of key resources of the link target page when it is detected that the user is about to click a link; output a structured preloading strategy with three levels, each level contains a list of resources sorted by priority; at the same time, a decision report is generated to record the reasons for each preloading decision; the three levels are immediate loading, delayed loading and on-demand loading.

7. The WebAssembly-based intelligent front-end resource preloading system according to claim 6, characterized in that: The resource loading optimizer sets up a multi-level cache system. When receiving the preloading strategy from the intelligent preloading decider, it starts executing immediately. For resources marked as immediate loading, it immediately initiates a network request and stores the resources in the memory cache. For resources marked as lazy loading, it uses the browser's idle time to gradually load these resources. For resources marked as on-demand loading, it prepares a loading strategy but does not actively load them. The resource loading optimizer sets an intelligent cache update strategy. When it detects that a resource in the cache has been updated, it downloads the new version in the background and seamlessly switches to the new version the next time the page is loaded. The resource loading optimizer sets up a network quality detection module to continuously monitor the current network status and dynamically adjust the loading strategy according to the network status.

8. The WebAssembly-based intelligent front-end resource preloading system according to claim 7, characterized in that: The system also includes a performance monitoring and self-optimization module that continuously monitors the performance indicators of Web applications, analyzes performance data, and automatically adjusts and optimizes various components of the system based on the analysis results; When the performance monitoring and self-optimization module detects a performance anomaly or generates an optimization suggestion, it notifies the controller through a callback function. The controller evaluates the optimization suggestion and decides whether to adjust the parameters or strategies of the system module based on the evaluation results.

9. The WebAssembly-based intelligent front-end resource preloading system according to claim 8, characterized in that: The performance monitoring and self-optimization module adopts an adaptive sampling strategy. Under normal circumstances, it collects data at a frequency less than the first threshold, but when performance anomalies are detected, the sampling frequency is automatically increased. The performance monitoring and self-optimization module also sets a visual dashboard to provide an intuitive performance monitoring interface.

10. A WebAssembly-based intelligent front-end resource preloading control method, characterized in that: The method is applied to the system according to any one of claims 2 to 9, and the method comprises: When the system is running, the controller triggers a work cycle periodically. In each cycle, the controller first calls the WebAssembly analysis module to analyze the current user behavior and page structure. The output of the WebAssembly analysis module is passed to the machine learning prediction engine for prediction. The controller combines the analysis results of the WebAssembly analysis module with the prediction results of the machine learning prediction engine and passes them to the intelligent preloading decision maker. The intelligent preloading decision maker generates a preloading strategy based on the combined data. The controller sends the generated preloading strategy to the resource loading optimizer for execution through the postMessage API. When the performance monitoring and self-optimization module detects a performance anomaly or generates an optimization suggestion, it notifies the controller through a callback function. The controller evaluates the optimization suggestion and decides whether to adjust the parameters or strategies of other modules based on the evaluation results.

Images