Website acceleration method and system, electronic equipment and storage medium
By splitting the multi-business unit system website into multiple micro applications and using Alibaba Cloud CDN and edge computing technology for resource distribution and cache management, the problem of complex loading order of micro applications and difficulty in dynamic content cache and update in traditional technologies has been solved, and the website performance and user experience have been significantly improved.
Patent Information
- Application Number
- CN202411969757.1
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-30
- Publication Date
- 2025-04-22
AI Technical Summary
When traditional micro front-end architecture and CDN technology deal with the performance optimization of multi-service unit system websites, there are problems such as complex micro-application loading order and dependency processing, difficulty in updating dynamic content caches, resource conflicts and duplicate loading, and inability to dynamically update configurations, which are particularly prominent under overseas network bandwidth limitations.
By splitting the website into multiple micro-applications, each micro-application represents a business unit and packaging its resources into static files, distributed using Alibaba Cloud CDN. Deploy it in conjunction with the express framework and docker imaging technology, and preload static files when users access it. At the same time, edge computing and content hash-based cache management strategies are adopted to dynamically adjust the preloading strategy to analyze user behavior based on machine learning algorithms.
It significantly improves the performance and user experience of the multi-business unit system website, reduces page loading time, improves resource loading speed and stability, greatly reduces the bandwidth required by the server, and reduces operation and maintenance costs and resource waste.
Smart Images

Figure CN119862338A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of website acceleration, and in particular to a website acceleration method, system, electronic device and storage medium. Background Art
[0002] In modern Web applications, traditional monolithic architectures are difficult to cope with complex business requirements and high concurrent traffic. In order to improve website performance and development efficiency, more and more websites are using micro-frontend architectures to separate different business units into multiple independent micro-applications (Micro Frontends). Each micro-application can be developed, deployed, and updated independently. However, with the web-based application, the project size has increased dramatically, and the widespread application of micro-frontend architectures has made website performance optimization, especially the loading speed, more prominent.
[0003] Traditional CDN technology is mainly used to cache and distribute static resources (such as HTML, CSS, JavaScript and image files, etc.) to reduce server load and improve response speed. Combining micro front-end and CDN technology can more effectively optimize the performance of multi-business unit system websites, but in actual applications, there are still the following problems: the loading order and dependency processing of micro applications are complex; cache update problems of dynamic content; resource conflicts and repeated loading; inability to dynamically update configuration; especially in overseas network bandwidth limitations and other factors, which bring great challenges. Summary of the invention
[0004] In view of the shortcomings existing in the above problems, the present invention provides a website acceleration method, system, electronic device and storage medium.
[0005] To achieve the above object, the present invention provides a website acceleration method, comprising:
[0006] Split the website into multiple micro-applications, each of which represents a business unit and the business units are based on business interaction processes;
[0007] The resources of each micro-application are packaged into static files;
[0008] Utilize Alibaba Cloud CDN to distribute the static files of each micro-application to multiple CDN nodes;
[0009] The entry index.html template generated by the business unit site packaging is packaged into a docker image through the express framework, and then the image service is deployed to the business server;
[0010] When a user visits the website of the business unit, the required static files are preloaded.
[0011] Preferably, the micro-applications are integrated through a unified framework Qiankun.
[0012] Preferably, for dynamic content that needs to be updated in real time, edge computing technology and CDN edge nodes are used for dynamic acceleration processing.
[0013] Preferably, when the user visits the website of the business unit, preloading the required static files includes preloading the required static files according to historical data and the user behavior prediction before the user visits a certain page.
[0014] Preferably, in the process of the user accessing the page, the usage frequency data of each micro-application is recorded in real time;
[0015] Based on the usage frequency data, dynamically adjust the preloading strategy;
[0016] The user behavior is analyzed and predicted in combination with a machine learning algorithm to generate the strategy.
[0017] Preferably, each of the micro-applications is ranked based on the usage frequency data.
[0018] Preferably, the micro-application adopts a cache management strategy based on content hash, and generates a new hash value each time the static resources of the micro-application are updated; and the hash value is used to determine whether the micro-application is updated.
[0019] The present application also provides a website acceleration system, including:
[0020] A splitting module is used to split the website into multiple micro-applications, each of which represents a business unit and the business units are based on business interaction processes;
[0021] A packaging module, used to package the resources of each micro-application into a static file;
[0022] A distribution module, used to distribute the static files of each micro-application to multiple CDN nodes using Alibaba Cloud CDN;
[0023] The mirror module is used to package the site of the business unit to generate the entry index.html template, package it into a docker image through the express framework, and then deploy the mirror service to the business server;
[0024] The loading module is used to preload the required static files when a user visits the website of the business unit.
[0025] The present invention also provides a storage medium storing a computer program executable by an electronic device, and when the program runs on the electronic device, the electronic device executes the above method.
[0026] Compared with the prior art, the present invention has the following beneficial effects:
[0027] The present invention adopts the principle of micro-frontend to split resources and load them on demand, thereby reducing page loading time; it reasonably uses Alibaba Cloud CDN global node acceleration to improve resource loading speed and stability, and significantly reduces the bandwidth required by the server. BRIEF DESCRIPTION OF THE DRAWINGS
[0028] Figure 1 It is a flow chart of the website acceleration method of the present invention. DETAILED DESCRIPTION
[0029] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution 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 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 are within the scope of protection of the present invention.
[0030] This method and system propose to obtain detailed VIP drift events and abnormal events of failure to connect to VIP based on eBPF technology, and after obtaining the abnormal failure event of connecting to VIP, construct a network detection task according to the destination IP of VIP, further obtain the network link information of the failed connection, and finally pre-process the task and network link data according to the constraints of large model reasoning and input them into the large model for intelligent analysis to give the analysis result of failure. This method can accurately capture the VIP drift behavior without modifying the keepalived component source code. Due to the use of eBPF kernel technology, it can avoid missing any drift events, and can also obtain better real-time performance, lower latency and system overhead. This method can also achieve VIP access failure, that is, when a connection abnormality occurs, further diagnostic information acquisition is carried out, and the large model is used as the base to provide an intelligent analysis process to reduce the expert experience of operation and maintenance troubleshooting; at the same time, this method is universal, and any high-availability software based on the VRRP protocol can realize drift perception based on this method. Finally, this method can further shorten the troubleshooting time for operation and maintenance in high-availability scenarios.
[0031] Reference Figure 1 The present invention provides a website acceleration method, comprising:
[0032] Split the website into multiple micro-applications, each of which represents a business unit and the business units are divided into business interaction processes;
[0033] The resources of each micro-application are packaged into static files;
[0034] Use Alibaba Cloud CDN to distribute the static files of each micro-application to multiple CDN nodes;
[0035] The entry index.html template generated by the business unit site is packaged into a docker image through the express framework, and then the image service is deployed to the business server;
[0036] When a user visits the business unit's site, the required static files are preloaded.
[0037] In this embodiment, the application solves the problems in the traditional method by reasonably organizing and optimizing the loading order of micro-applications and using CDN to efficiently distribute and cache static resources, thus significantly improving the performance and user experience of the multi-business unit system website. The specific solutions include:
[0038] Through the modular design and optimization of the micro front-end architecture, it is packaged into a business unit site:
[0039] Specifically, the entire website is split into multiple micro-applications, each of which represents a business unit, such as user management, space management, execution framework management, execution unit management, digital human 3D interaction model management, etc.; business units are divided into business interaction processes; micro-applications can be independently developed, tested, deployed and updated, and integrated together through a unified framework Qiankun; the resources of each micro-application (HTML, CSS, JavaScript, etc.) are packaged as independent static files, packaged according to certain module specifications, extracting common reusable components (js, css), resources (pictures, icons) and third-party dependency packages, so as to facilitate caching and distribution on different CDN nodes and cache sharing of resources on client browsers.
[0040] Upload the business unit code resources to CDN. CDN acceleration and resource distribution strategy:
[0041] Specifically, static resource distribution: Using Alibaba Cloud CDN technology, the static resources (including JS, CSS, images, videos, etc.) of each micro-application are distributed to multiple CDN nodes. Alibaba Cloud global nodes select the best CDN node to provide services based on geographic location and network latency, reducing network transmission time. Dynamic content acceleration: For dynamic content that needs to be updated in real time, use edge computing technology (Edge Computing) and CDN edge nodes for dynamic acceleration processing to reduce server response time and load.
[0042] The entry index.html template generated by the business unit site is packaged into docker images through the express framework as the SSR server, and then the image service is deployed to the business server.
[0043] When users visit the business unit site, resource preloading and lazy loading strategies are implemented:
[0044] Specifically, resource preloading optimization: Before a user visits a page, based on historical data and user behavior prediction, preload the resource files that may be needed (such as CSS and JavaScript) to speed up page switching. Intelligent resource preloading based on usage frequency: During the user's use of the website, the system will record the usage frequency data of each functional module (i.e., micro-application) in real time. Frequency statistics can be achieved through embedded front-end monitoring scripts or log analysis tools, and the statistical data includes the number of module loads, user stay time, number of interactions, etc. Intelligent preloading strategy: Based on the statistical usage frequency data, the system will dynamically adjust the preloading strategy and order. Prioritize loading the modules that users visit most frequently or the functional modules that are about to be used, which can reduce user waiting time and improve page response speed. For example, when the system detects that the access frequency of a micro-application is particularly high within a certain period of time, the micro-application will be preloaded first when the user visits it later. Dynamic adjustment of loading strategy: Combined with machine learning algorithms (such as collaborative filtering, decision trees, or deep learning models), the system analyzes and predicts user behavior and generates personalized preloading strategies. Through continuous learning and adjustment, the preloading order of micro-applications can be dynamically optimized to adapt to the ever-changing user needs. Cache refresh and update mechanism: In the process of dynamically adjusting the preloading strategy, if the usage frequency of a functional module decreases significantly, the system will reduce the priority of the module and update the CDN cache strategy in a timely manner to reduce unnecessary bandwidth consumption and server load. Lazy loading: For secondary resources or resources that users do not currently need, the lazy loading strategy is used to load them when the user scrolls or triggers a specific event, reducing the initial loading time and server pressure.
[0045] Independent cache management and version control for micro-applications;
[0046] Specifically, a cache management strategy based on content hash is adopted. Every time the static resources of the micro-application are updated, a new hash value is generated. The browser and CDN node determine whether the resource needs to be updated by comparing the hash value, thereby avoiding repeated loading of unchanged resources. The version control mechanism allows different versions of micro-applications to coexist on the same website, which is convenient for rollback operations and gradual release (Canary Release).
[0047] Integrated optimization and dynamic module loading:
[0048] Specifically, the characteristics of the micro-frontend framework are used to support dynamic loading and unloading of each micro-application. Unused micro-application modules will not be loaded into memory, reducing client memory usage. The server-side rendering (SSR) technology is combined with the CDN cache strategy to increase the first screen rendering speed and improve user experience.
[0049] Based on the above characteristics, the more business units there are, the greater the probability that resources will be cached and shared, the more shared and reused they are, the shorter the bandwidth consumed and loading time, the better the site opening experience, and the more costs reduced.
[0050] In this embodiment, the solution provided by this application is used in scenarios where there are many business units and they are deployed abroad and require fast access both at home and abroad. By modularizing the micro-application design, optimizing CDN resource distribution, using frequency statistics and intelligent preloading strategies, the present invention significantly improves the performance and user experience of the multi-business unit system website. Compared with the prior art, it has the following advantages:
[0051] Significantly improved loading speed
[0052] Compared with the traditional monolithic architecture or simple micro-frontend architecture, the present invention achieves a significant improvement in website loading speed in the following ways:
[0053] Modular micro-frontend architecture: By dividing the website frontend into multiple independent micro-applications, each micro-application is loaded independently, which reduces the initial loading time of the page. Experimental data shows that after adopting this solution optimization, the first loading time (TTFB, Time to First Byte) of the website homepage is shortened by an average of 30%, from 2.5 seconds to 1.75 seconds.
[0054] CDN optimizes distribution and cache strategies: By using CDN technology to optimize the distribution and cache management of static resources, user requests can be quickly routed to the nearest CDN node, significantly reducing network latency. According to experimental results, global tests have shown that after using CDN optimization strategies, the average loading time of static resources has been reduced by 40%, from 600 milliseconds to 360 milliseconds.
[0055] Smart preloading strategy: This application introduces a smart preloading strategy based on usage frequency, which prioritizes loading the functional modules that users access most frequently, thereby reducing the waiting time when switching pages. Through the tracking experiment of 1,000 user behaviors, it was found that the smart preloading strategy reduced the page switching time by 50%, from 2 seconds to 1 second.
[0056] Significantly improved user experience
[0057] The present invention improves user experience by optimizing resource loading sequence and preloading strategy:
[0058] Reduce page white screen time: By combining server-side rendering (SSR) and CDN caching, the present invention significantly reduces the page white screen time. Experimental data shows that the white screen time of the homepage is shortened from 1.2 seconds to 0.6 seconds, a reduction of 50%, and the user experience during page loading is smoother.
[0059] Improve page interaction response speed: When users interact with the website (such as clicking a button, loading a new page, etc.), the present invention reduces the page response time. In a real user environment, by introducing an intelligent preloading strategy, the average response time of page switching after a user click is shortened by 40%, from 500 milliseconds to 300 milliseconds.
[0060] Reduce user churn rate caused by loading speed: Experiments show that the improvement of loading speed directly affects the user retention rate. After applying the present invention, the user churn rate was reduced by 20%, from 25% to 20%, showing the significant effect of website loading speed optimization.
[0061] Resource utilization optimization
[0062] By adopting a content hash-based cache management strategy and a dynamic module loading mechanism, the present invention improves resource utilization:
[0063] Reduce repeated loading and resource conflicts: In traditional website architecture, resource conflicts and repeated loading problems are common. Through independent cache management and version control mechanisms, the present invention effectively reduces repeated resource loading. According to experimental data statistics, after adopting the present invention, the amount of repeatedly loaded resources is reduced by 60% and the bandwidth utilization rate is increased by 30%.
[0064] Reduce server load and operation and maintenance costs: Due to the effective management of CDN cache and the application of edge computing, the server load is significantly reduced. Experimental data shows that the CPU utilization of core servers has been reduced by 35%, from 70% to 45%. At the same time, due to the reduction of server load and the effective allocation of resources, the operation and maintenance costs have been reduced by 25%.
[0065] Enhance system scalability and maintainability
[0066] Compared with the traditional architecture, this application enhances the scalability and maintainability of the system:
[0067] Modular development and deployment: This application realizes modular development and deployment of business units through the micro-frontend architecture, so that different business modules can be updated and maintained independently, greatly improving development efficiency and system maintainability. Experimental data shows that the average update cycle of functional modules has been shortened from two weeks to three days, reducing development and maintenance costs.
[0068] Personalization and flexibility: The present invention performs intelligent preloading based on the analysis of user behavior, supports personalized page loading strategies, and enhances the flexibility and adaptability of the system. Experimental data shows that the application of personalized preloading strategies improves the user satisfaction index (NPS, NetPromoter Score) by 15%.
[0069] Theoretical analysis and experimental verification
[0070] Theoretically, this application can significantly reduce page loading time and resource consumption through the modular design of the micro-frontend architecture, the optimized distribution strategy of CDN, and the intelligent preloading method based on the frequency of use. The experimental results verify the accuracy of the theoretical analysis and show the significant effect of this application in practical applications. Through the above optimization, this application not only improves the performance and user experience of the website, but also reduces the operation and maintenance costs and resource waste, providing an effective solution for the efficient operation of large-scale multi-business unit systems.
[0071] Test conditions and methods
[0072] In order to verify the effect of this application, a comparative experiment was carried out under the following conditions:
[0073] Test environment: A multi-business unit system website was built, including multiple micro-application modules such as user management, space management, execution framework management, and digital human 3D. Real user behavior data was used for simulation.
[0074] Control group: The traditional monolithic architecture website and the unoptimized micro-frontend architecture website were used as the control group.
[0075] Experimental tools: Use tools such as Lighthouse and WebPageTest for performance testing and data analysis; use Google Analytics and custom log systems to collect user behavior data.
[0076] Testing period: The testing period is two months, covering user access data at different times, including peak and trough periods.
[0077] Through experimental verification and theoretical analysis, this application significantly optimizes the loading speed and user experience of multi-business unit system websites, reflecting its innovation and practicality in modern Web development.
[0078] The present application also provides a website acceleration system, including:
[0079] The splitting module is used to split the website into multiple micro-applications. Each micro-application represents a business unit and the business units are divided into business interaction processes.
[0080] The packaging module is used to package the resources of each micro-application into static files;
[0081] The distribution module is used to distribute the static files of each micro-application to multiple CDN nodes using Alibaba Cloud CDN;
[0082] The mirror module is used to package the business unit's site into a docker image using the express framework, and then deploy the mirror service to the business server;
[0083] The loading module is used to preload the required static files when users visit the site of the business unit.
[0084] The present invention also provides an electronic device, comprising at least one processing unit and at least one storage unit, wherein the storage unit stores a computer program, and when the program is executed by the processing unit, the processing unit executes the above method.
[0085] The present invention also provides a storage medium storing a computer program executable by an electronic device. When the program runs on the electronic device, the electronic device executes the above method.
[0086] The above are only preferred embodiments of the present invention and are not intended to limit the present invention. For those skilled in the art, the present invention may have various modifications and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.
Claims
1. A website acceleration method, characterized in that: include: Split the website into multiple micro-applications, each of which represents a business unit and the business units are based on business interaction processes; The resources of each micro-application are packaged into static files; Utilize Alibaba Cloud CDN to distribute the static files of each micro-application to multiple CDN nodes; The entry index.html template generated by the business unit site packaging is packaged into a docker image through the express framework, and then the image service is deployed to the business server; When a user visits the website of the business unit, the required static files are preloaded.
2. The website acceleration method according to claim 1, characterized in that: The micro-applications are integrated through a unified framework Qiankun.
3. The website acceleration method according to claim 2, characterized in that: For dynamic content that needs to be updated in real time, edge computing technology and CDN edge nodes are used for dynamic acceleration processing.
4. The website acceleration method according to claim 3, characterized in that: When the user visits the website of the business unit, preloading the required static files includes preloading the required static files according to historical data and the user behavior prediction before the user visits a certain page.
5. The website acceleration method according to claim 4, characterized in that: In the process of the user accessing the page, the usage frequency data of each micro-application is recorded in real time; Based on the usage frequency data, dynamically adjust the preloading strategy; The user behavior is analyzed and predicted in combination with a machine learning algorithm to generate the strategy.
6. The website acceleration method according to claim 5, characterized in that: Each of the micro-applications is ranked based on the usage frequency data.
7. The website acceleration method according to claim 6, characterized in that: The micro-application adopts a cache management strategy based on content hash, and generates a new hash value each time the static resources of the micro-application are updated; and the hash value is used to determine whether the micro-application is updated.
8. A website acceleration system, characterized in that: include: A splitting module is used to split the website into multiple micro-applications, each of which represents a business unit and the business units are based on business interaction processes; A packaging module, used to package the resources of each micro-application into a static file; A distribution module, used to distribute the static files of each micro-application to multiple CDN nodes using Alibaba Cloud CDN; The mirror module is used to package the site of the business unit to generate the entry index.html template, package it into a docker image through the express framework, and then deploy the mirror service to the business server; The loading module is used to preload the required static files when a user visits the website of the business unit.
9. An electronic device, characterized in that: The method comprises at least one processing unit and at least one storage unit, wherein the storage unit stores a computer program, and when the program is executed by the processing unit, the processing unit executes the method according to any one of claims 1 to 7.
10. A storage medium, characterized in that: It stores a computer program executable by an electronic device, and when the program runs on the electronic device, the electronic device executes the method described in any one of claims 1 to 7.
Citation Information
Patent Citations
Docker technology based CDN dynamic content acceleration method and system
CN107105029A
Static resource caching method, system and device, computer equipment and storage medium
CN110866198A
Micro-front-end application resource processing method and device, equipment and storage medium
CN113760303A
Resource preloading method and device, electronic equipment and computer readable storage medium
CN117492854A