Page loading method and device, storage medium and electronic equipment

Abstract

The invention discloses a page loading method and device, a storage medium and electronic device.The page loading method comprises the steps that a page template is generated, and the page template comprises a CSS style of a page, an HTML structure of the page and a JS file; the page template is built in the application program; when the application program is started, pre-loading a target page template according to user behaviors; the front-end request is sent to the rear end, so that the rear end performs data processing and caching on the front-end request data by adopting Node.js and Koa2 frameworks in combination with Redis, and a data processing result is sent to the front end; the front end renders the target page template according to the data processing result to generate a target page; and displaying the target page. According to the method, the page loading speed can be increased.

Description

Technical Field

[0001] This application relates to the field of Internet technologies, and particularly to a page loading method, apparatus, storage medium, and electronic device. Background Art

[0002] In the modern digital age, the user experience has become one of the key factors in evaluating the success of online content platforms. Especially in applications with highly concentrated content consumption, such as news reading or social media platforms, the page loading speed is crucial for maintaining user engagement and satisfaction. Research shows that even a delay of a few hundred milliseconds can lead to significant user churn. Therefore, optimizing the response speed and rendering performance of web applications is an important area of technology development.

[0003] Currently, many web-based applications tend to use WebView as a way to display web page content, which provides a convenient method for integrating and presenting network resources. However, the limitations of WebView in terms of rendering efficiency, memory management, and data processing often result in unsatisfactory loading speeds and user experiences. Summary of the Invention

[0004] Embodiments of this application provide a page loading method, apparatus, storage medium, and electronic device, which can improve the page loading speed.

[0005] In a first aspect, embodiments of this application provide a page loading method, including:

[0006] Generating a page template, where the page template includes the CSS style of the page, the HTML structure of the page, and the JS file;

[0007] Embedding the page template into the application;

[0008] When the application is started, preloading a target page template according to user behavior;

[0009] Sending a front-end request to the backend, so that the backend processes and caches the front-end request data using the Node.js and Koa2 frameworks in combination with Redis, and sends the data processing result to the front-end;

[0010] Rendering the target page template by the front-end according to the data processing result to generate a target page;

[0011] Displaying the target page.

[0012] In the page loading method provided by the embodiments of this application, after generating the page template and before embedding the page template into the application, it further includes:

[0013] Optimize the page template.

[0014] In the page loading method provided by the embodiments of the present application, the optimization of the page template includes:

[0015] Remove unnecessary tags and decorations in the HTML structure;

[0016] Inline the key CSS styles in the CSS styles into the HTML structure;

[0017] Optimize the JS file;

[0018] Asynchronously load the key CSS styles and the optimized JS file.

[0019] In the page loading method provided by the embodiments of the present application, the optimization of the JS file includes:

[0020] Split the code of the JS file;

[0021] Optimize the DOM operations.

[0022] In the page loading method provided by the embodiments of the present application, the splitting of the code of the JS file includes:

[0023] Divide the functional modules in the JS file, and each module contains a group of related functional codes;

[0024] Determine the loading order according to the dependency relationship of the functional modules, and give priority to loading the key modules;

[0025] Each functional module is separately packaged into an independent JS file to achieve on-demand loading.

[0026] In the page loading method provided by the embodiments of the present application, the optimization of the DOM operations includes:

[0027] Reduce the number of DOM operations by batch processing DOM elements;

[0028] Use document fragments for DOM operations, first construct the DOM structure in memory, and then insert it into the page at one time;

[0029] Utilize virtual DOM technology, and only update the changed parts by comparing the differences between the previous and the current virtual DOMs.

[0030] In the page loading method provided by the embodiments of the present application, when the backend receives a frontend request, the backend uses Node.js and the Koa2 framework in combination with Redis to process and cache the frontend request data, and sends the data processing result to the frontend, including:

[0031] Preliminarily process the frontend request data through the asynchronous non-blocking feature of Node.js;

[0032] Utilize the middleware mechanism of the Koa2 framework to sequentially pass the preliminarily processed frontend request data to each middleware for further processing;

[0033] Query from Redis whether there is corresponding cached data;

[0034] If it exists, directly return the cached data to the frontend;

[0035] If it does not exist, enable the backend to obtain the required data through the database query interface and store the query result in the Redis.

[0036] In a second aspect, the embodiments of the present application provide a page loading device, including:

[0037] A template generation unit, configured to generate a page template, where the page template includes the CSS style of the page, the HTML structure of the page, and a JS file;

[0038] A template embedding unit, configured to embed the page template into the application;

[0039] A template loading unit, configured to preload a target page template according to user behavior when the application starts;

[0040] A data processing unit, configured to, when sending a frontend request to the backend, enable the backend to use Node.js and the Koa2 framework in combination with Redis to process and cache the frontend request data, and send the data processing result to the frontend;

[0041] A page rendering unit, configured to enable the frontend to render the target page template according to the data processing result to generate a target page;

[0042] A page display unit, configured to display the target page.

[0043] In a third aspect, the present application provides a storage medium, where the storage medium stores multiple instructions, and the instructions are suitable for being loaded by a processor to execute the method described in any one of the above.

[0044] Fourthly, the present application provides an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the computer program, the method described in any one of the above is implemented.

[0045] In summary, the page loading method provided by the embodiments of the present application includes: generating a page template, where the page template includes the CSS style of the page, the HTML structure of the page, and the JS file; embedding the page template into the application program; when the application program is started, preloading the target page template according to user behavior; sending a front-end request to the back-end so that the back-end uses the Node.js and Koa2 frameworks in combination with Redis to process and cache the front-end request data, and sends the data processing result to the front-end; the front-end renders the target page template according to the data processing result to generate a target page; and displaying the target page. The present application can almost immediately present the page through the built-in page template and preloading mechanism, greatly improving the page loading speed. Description of the Drawings

[0046] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the following will briefly introduce the drawings required for the description of the embodiments. Obviously, the following drawings are only some embodiments of the present application. For those skilled in the art, without creative efforts, other drawings can be obtained according to these drawings.

[0047] Figure 1 It is a schematic structural diagram of the page loading system provided by the embodiments of the present application.

[0048] Figure 2 It is a schematic flowchart of the page loading method provided by the embodiments of the present application.

[0049] Figure 3 It is a schematic structural diagram of the page loading device provided by the embodiments of the present application.

[0050] Figure 4 It is a schematic structural diagram of the electronic device provided by the embodiments of the present application. Detailed Embodiments

[0051] Here, the exemplary embodiments will be described in detail, and the examples are shown in the drawings. When the following description involves the drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present application. On the contrary, they are only examples of the devices and methods consistent with some aspects of the present application as detailed in the appended claims.

[0052] It should be noted that in this document, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, such that a process, method, article or device comprising a series of elements not only includes those elements but also includes other elements not expressly listed, or further includes elements inherent to such process, method, article or device. Without further limitation, an element defined by the statement "comprising a..." does not exclude the existence of additional identical elements in the process, method, article or device comprising such element. In addition, components, features, and elements with the same name in different embodiments of this application may have the same meaning or different meanings, and their specific meanings need to be determined based on their explanations in the specific embodiments or further in combination with the context of the specific embodiments.

[0053] It should be understood that the specific embodiments described herein are merely for explaining this application and are not used to limit this application.

[0054] In subsequent descriptions, the use of suffixes such as "module", "component" or "unit" to represent elements is only for the convenience of explaining this application, and they have no specific meaning in themselves. Therefore, "module", "component" or "unit" can be used interchangeably.

[0055] In the description of this application, it should be noted that the orientation or positional relationship indicated by terms such as "upper", "lower", "left", "right", "inner", "outer", etc. is based on the orientation or positional relationship shown in the drawings, and is only for the convenience of describing this application and simplifying the description, rather than indicating or implying that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and therefore should not be construed as a limitation of this application. In addition, terms such as "first", "second", etc. are only used for descriptive purposes and cannot be construed as indicating or implying relative importance.

[0056] Currently, many Web-based applications tend to use WebView as a way to display web page content, which provides a convenient method to integrate and display network resources. However, the limitations of WebView in rendering efficiency, memory management, and data processing often result in unsatisfactory loading speeds and user experiences.

[0057] Based on this, the embodiments of the present application provide a page loading method, apparatus, storage medium, and electronic device. Specifically, the page loading apparatus can be integrated in the electronic device, which can be a server or a terminal device, etc.; among them, the terminal can include a mobile phone, a wearable intelligent device, a tablet computer, a laptop computer, and a personal computer (PC), etc.; the server can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms.

[0058] Please refer to Figure 1 , Figure 1 which is a schematic structural diagram of the page loading system provided by the embodiments of the present application. The system can include at least one electronic device 1000 and at least one server or personal computer 2000. The electronic device 1000 held by the user can be connected to different servers or personal computers through the network. The electronic device 1000 can be an electronic device with computing hardware that can support and execute software products corresponding to multimedia. In addition, the electronic device 1000 can also have one or more multi-touch sensitive screens for sensing and obtaining the input of touch or swipe operations performed by the user at multiple points on one or more touch display screens. In addition, the electronic device 1000 can be interconnected with the server or personal computer 2000 through the network. The network can be a wireless network or a wired network. For example, the wireless network is a wireless local area network (WLAN), a local area network (LAN), a cellular network, a 2G network, a 3G network, a 4G network, a 5G network, etc. In addition, different electronic devices 1000 can also use their own Bluetooth network or hotspot network to connect to other embedded platforms or connect to servers and personal computers, etc.

[0059] Among them, the electronic device includes a touch display screen and a processor. The touch display screen is used to present a graphical user interface and receive operation instructions generated by a user acting on the graphical user interface. When the user operates the graphical user interface through the touch display screen, the graphical user interface can control the content on the local side of the electronic device by responding to the received operation instructions, or can control the content on the server side by responding to the received operation instructions. For example, the operation instructions generated by the user acting on the graphical user interface include instructions for processing an initial audio signal, and the processor is configured to start a corresponding application program after receiving the instructions provided by the user. In addition, the processor is configured to render and draw a graphical user interface associated with the application program on the touch display screen. The touch display screen is a multi-touch sensitive screen capable of sensing touch or swipe operations performed simultaneously at multiple points on the screen. When the user uses a finger to perform a touch operation on the graphical user interface, when the graphical user interface detects the touch operation, it controls the corresponding operation to be displayed in the graphical user interface of the application.

[0060] The technical solutions shown in the present application will be described in detail below through specific embodiments. It should be noted that the description order of the following embodiments does not limit the priority order of the embodiments.

[0061] Please refer to Figure 2 , Figure 2 which is a schematic flowchart of a page loading method provided by an embodiment of the present application. The specific process of the page loading method can be as follows:

[0062] 101. Generate a page template, where the page template includes the CSS style of the page, the HTML structure of the page, and a JS file.

[0063] It can be understood that the CSS style defines the visual effect of the page, including fonts, colors, layouts, and other visual elements. Through these CSS styles, developers can ensure that the page has a consistent appearance and user experience on different devices and browsers.

[0064] The HTML structure is the basic skeleton of the page, which defines the arrangement order of each part and element of the page. Through reasonable HTML structure design, it can be ensured that the content of the page is clear, orderly, and conducive to search engine optimization (SEO).

[0065] The JS file, that is, the JavaScript file. JavaScript is a powerful programming language used to implement the dynamic effects and interactive functions of the page. By embedding the JS file in the page template, developers can provide users with a rich interactive experience, such as form validation, animation effects, asynchronous data loading, etc. It should be noted that the JS file in the page template is the primary JavaScript logic.

[0066] In some embodiments, after generating the page template, the page template can also be optimized.

[0067] Specifically, unnecessary tags and decorations in the HTML structure can be removed to ensure the simplicity of the HTML structure and reduce the parsing time. The key CSS styles in the CSS styles can be inlined in the HTML structure to reduce external resource requests. The JS file can be optimized; the key CSS styles and the optimized JS file can be asynchronously loaded to not block the page rendering process.

[0068] In addition, the lazy loading technology for images can be inserted into the page template. By adopting the lazy loading technology for image resources, images will only start to be loaded when the user scrolls to the visible range of the images, which greatly reduces the data transfer volume during the initial loading.

[0069] Among them, optimizing the JS file includes: splitting the code of the JS file; optimizing the DOM operations.

[0070] Specifically, splitting the code of the JS file can include: dividing the functional modules in the JS file, with each module containing a group of related functional codes; determining the loading order according to the dependency relationship of the functional modules, and preferentially loading the key modules; packaging each functional module into an independent JS file to achieve on-demand loading and avoid the problem of long loading and parsing time for a single large file.

[0071] Optimizing the DOM operations can include: reducing the number of DOM operations by batch processing DOM elements, reducing the frequency of browser repainting and reflow, thereby improving the page performance and user experience; using document fragments for DOM operations, first constructing the DOM structure in memory and then inserting it into the page at once; leveraging virtual DOM technology, by comparing the differences between the previous and current virtual DOMs, only updating the changed parts, thereby improving the page rendering efficiency.

[0072] It can be understood that the page template can be reused in multiple pages, especially in pages with similar content or layout structures. In this way, duplicate resource loading and rendering processes can be avoided, thereby further optimizing the performance.

[0073] In some embodiments, the CSS styles and HTML structure can be further optimized. For example, compress the CSS styles, remove unnecessary spaces, line breaks, and comments to reduce the file size; merge multiple CSS files into one file to reduce the number of HTTP requests; use CSS selector optimization techniques to avoid using overly complex CSS selectors and improve the CSS parsing speed. Use an HTML compression tool to remove unnecessary spaces, line breaks, and comments to reduce the file size; optimize the HTML structure to ensure that tags are correctly closed and avoid using overly deep nested structures; utilize asynchronous loading technology to load non-critical HTML content through asynchronous requests to speed up the initial page rendering speed.

[0074] 102. Embed the page template into the application.

[0075] It can be understood that since the page template is embedded in the application, it has been loaded into the device during the App installation, enabling the page template to be used immediately without a network connection.

[0076] In addition, in the embodiments of the present application, each page template has a corresponding version number. The App will regularly check the page template version. If there is an update on the server side, it will automatically download the latest page template to replace the old one. To optimize data transmission, only the changed parts are transmitted instead of the entire page template file during the update, reducing data usage and speeding up the page template update speed.

[0077] 103. When the application starts, preload the target page template according to the user's behavior.

[0078] When the user starts the application for the first / second time or when the application is in a low-load state, the system will intelligently predict and preload the target page template that the user may be interested in or about to access based on the user's historical behavior patterns and current operation habits. This intelligent preloading mechanism aims to reduce the user's waiting time, make the application respond more quickly and smoothly, and thus enhance the overall user experience and satisfaction. By accurately predicting and meeting the user's needs, the application is committed to providing more convenient and efficient services for users.

[0079] 104. Send a front-end request to the back-end, so that the back-end uses the Node.js and Koa2 frameworks in combination with Redis to process and cache the front-end request data, and send the data processing result to the front-end.

[0080] It is understandable that the Koa2 framework is mainly used as a backend service framework due to its lightweight and high efficiency. Koa2 is a more modern alternative to Express, which provides stronger asynchronous features and better error handling mechanisms, and is very suitable for handling high-concurrency Web application requests.

[0081] In the embodiments of this application, the RESTful design principle can also be adopted to build APIs, which can improve the maintainability and scalability of the APIs. Each API endpoint clearly defines the method of operating on resources. For example, GET is used to retrieve resources, POST is used to create new resources, etc. Then, middleware automatically records the detailed information of each request, including the request time, IP address, request path, response time, etc., which is very helpful for monitoring the application performance and subsequent problem troubleshooting. The middleware of Koa2 can also capture unhandled exceptions in the application, automatically return friendly error messages to the client, and ensure that the server side will not crash due to exceptions.

[0082] Moreover, Koa2 supports async / await, making asynchronous IO operations such as database queries and file reading and writing simple and intuitive. This not only improves the readability of the code but also ensures the efficiency and stability when handling high-concurrency requests.

[0083] Regarding the caching part of content data, for frequently accessed data such as article content and user information, Redis can be used for caching. Redis is a high-performance key-value database that stores data in memory, thus providing extremely fast read and write speeds, which is very suitable for Web applications that require quick responses. The effective time of the cache is set according to the frequency of content updates. For static content such as published articles, the cache time can be set longer; while for dynamically changing content, a shorter cache time or an active update strategy is set to maintain the real-time nature of the data.

[0084] Cache hit optimization: After the application starts, the system predicts hot content based on historical access data and actively loads this content into the Redis cache, which can greatly improve the response speed during the first access. By listening to content update events, when the content changes, the relevant cache data is automatically refreshed to ensure that users always obtain the latest data.

[0085] That is, step 104 may include: preliminarily processing the front-end request data through the asynchronous non-blocking feature of Node.js; using the middleware mechanism of the Koa2 framework to sequentially pass the front-end data to each middleware for further processing; querying Redis to check if there is corresponding cached data; if so, directly returning the cached data to the front-end; if not, enabling the back-end to obtain the required data through the database query interface and storing the query result in Redis.

[0086] In some embodiments, Prometheus can also be integrated to collect various performance metrics of the back-end service, such as request frequency, response time, system load, etc. Grafana is used for visualizing the data to help the development team promptly discover and solve performance problems. Regularly conduct stress tests on the application to simulate different user access scenarios, thereby identifying performance bottlenecks. Adjust the system configuration or optimize the code according to the test results to ensure that the application can withstand high-traffic access pressure.

[0087] 105. The front-end renders the target page template based on the data processing result to generate the target page.

[0088] Specifically, the front-end will parse the data processing result returned by the back-end, extract the necessary information, and fill the extracted information into the corresponding positions of the target page template. In this way, the front-end can generate a complete and dynamically generated target page. This process involves replacing and updating various parts of the template to ensure that the page content is consistent with the data processing result.

[0089] 106. Display the target page.

[0090] Specifically, the front-end will send the rendered target page to the user's device, whether it is a computer, tablet, or mobile phone. The page is loaded and displayed through a browser or other application, and the user can see the processed and rendered page content. This display process is real-time, ensuring that the user can promptly obtain the latest information and data. In this way, the user can intuitively see the specific manifestation of the data processing result and thus perform further operations and interactions.

[0091] In summary, the page loading method provided by the embodiments of the present application has the following advantages:

[0092] Firstly, it speeds up page loading. Through template preheating and reuse, the page loading time is significantly reduced. The built-in templates and preloading mechanism enable the page to be presented almost instantaneously, greatly enhancing the response speed of the application. Using intelligent data preloading strategies reduces the time users wait for data to load. Especially in an environment with poor network conditions, users can still quickly obtain content. The lazy loading and preloading strategies for images and resources effectively reduce unnecessary network requests and improve resource loading efficiency. The optimized loading of CSS and JavaScript reduces the resources blocking rendering and speeds up page rendering.

[0093] Secondly, it enhances the user experience. Due to the fast page loading, the user interaction response time is significantly improved, and there is no need to wait for a long time for the page to respond. The optimization of animations and page transitions ensures a smooth user interface experience and reduces the lag caused by loading. The preloading and intelligent caching strategies ensure that users can quickly access content even when the network is unstable, improving the usability of the application. Users feel more fluent and efficient when using the application, thus enhancing the overall satisfaction and user retention rate.

[0094] Furthermore, it reduces operating costs. By caching resources and intelligent preloading on the client side, the request frequency to the server side is reduced, and the server-side load is lowered. The use of a content delivery network (CDN) alleviates the data transmission pressure on the central server, disperses the data service points, and optimizes bandwidth usage. Data compression and optimized API response mechanisms reduce the amount of data during transmission, improve transmission efficiency, and at the same time reduce the costs incurred by data transmission.

[0095] Finally, it enhances the market competitiveness of the application. A fast and responsive application experience can enhance users' favor and trust in the brand, helping to shape the brand image. An efficient user experience makes the application more attractive and enables it to stand out in a highly competitive market. The improved application performance and user experience attract more users to download and use it, helping to expand the user base and market share. For content consumption applications, fast content loading and optimized reading experiences can attract more readers and content creators.

[0096] In summary, the page loading method provided by the embodiments of the present application includes: generating a page template, where the page template includes the CSS style of the page, the HTML structure of the page, and the JS file; embedding the page template into the application; when the application starts, preloading the target page template according to user behavior; sending a front-end request to the back-end so that the back-end uses the Node.js and Koa2 frameworks in combination with Redis to process and cache the front-end request data, and sending the data processing result to the front-end; rendering the target page template by the front-end according to the data processing result to generate the target page; and displaying the target page. The embodiments of the present application can almost immediately present the page through the built-in template and preloading mechanism, greatly improving the page loading speed.

[0097] Please refer to Figure 3 , Figure 3 which is a schematic structural diagram of the page loading device provided by the embodiments of the present application. The page loading device may include a template generation unit 201, a template embedding unit 202, a template loading unit 203, a data processing unit 204, a page rendering unit 205, and a page display unit 206. Among them,

[0098] The template generation unit 201 is used to generate a page template, where the page template includes the CSS style of the page, the HTML structure of the page, and the JS file;

[0099] The template embedding unit 202 is used to embed the page template into the application;

[0100] The template loading unit 203 is used to preload the target page template according to user behavior when the application starts;

[0101] The data processing unit 204 is used to send a front-end request to the back-end so that the back-end uses the Node.js and Koa2 frameworks in combination with Redis to process and cache the front-end request data, and send the data processing result to the front-end;

[0102] The page rendering unit 205 is used to enable the front-end to render the target page template according to the data processing result to generate the target page;

[0103] The page display unit 206 is used to display the target page.

[0104] For the specific implementation manners of the above units, reference may be made to the embodiments of the above page loading method, which will not be elaborated herein one by one.

[0105] In summary, the page loading device provided by the embodiments of the present application generates a page template through the template generation unit 201. The page template includes the CSS style of the page, the HTML structure of the page, and the JS file. The template built-in unit 202 builds the page template into the application. When the application starts, the template loading unit 203 preloads the target page template according to user behavior. The data processing unit 204 sends a front-end request to the back-end, so that the back-end uses the Node.js and Koa2 frameworks in combination with Redis to process and cache the front-end request data, and sends the data processing result to the front-end. The page rendering unit 205 enables the front-end to render the target page template according to the data processing result to generate the target page. The page display unit 206 displays the target page. The embodiments of the present application can almost immediately present the page through the built-in template and preloading mechanism, greatly improving the page loading speed.

[0106] The embodiments of the present application also provide an electronic device, which may integrate the page loading device of the embodiments of the present application. As Figure 4 shown, it shows a schematic structural diagram of the electronic device involved in the embodiments of the present application. The electronic device includes a memory 301, a processor 302, and a computer program stored on the memory 301 and executable on the processor 302. Among them, when the processor 302 executes the computer program, it implements the above-mentioned page loading method in the embodiments of the present application.

[0107] In the above embodiments, the descriptions of the various embodiments have their own emphases. For the parts not detailed in a certain embodiment, reference may be made to the detailed description of the page loading method above, which will not be elaborated here.

[0108] It should be noted that for the page loading method in the embodiments of the present application, those skilled in the art can understand that all or part of the processes for implementing the page loading method in the embodiments of the present application can be controlled by a computer program for related hardware. The computer program can be stored in a computer-readable storage medium, such as stored in the memory of the terminal and executed by at least one processor in the terminal. During the execution process, it may include the processes of the embodiments of the page loading method.

[0109] For the page loading device in the embodiments of the present application, its various functional modules can be integrated in a processing chip, or each module can exist physically alone, or two or more modules can be integrated in one module. The above integrated modules can be implemented in the form of hardware or in the form of software functional modules. When the integrated module is implemented in the form of a software functional module and sold or used as an independent product, it can also be stored in a computer-readable storage medium.

[0110] To this end, an embodiment of the present application provides a storage medium storing multiple instructions that can be loaded by a processor to execute the steps in any of the page loading methods provided by the embodiments of the present application. The storage medium may be a magnetic disk, an optical disk, a read only memory (ROM), a random access memory (RAM), etc.

[0111] The page loading method, device, storage medium, and electronic device provided by the present application have been introduced in detail above. Specific examples are used in this article to elaborate on the principle and implementation manner of the present application. The description of the above embodiments is only used to help understand the core idea of the present application. At the same time, for those skilled in the art, according to the idea of the present application, there will be changes in the specific implementation manner and application scope. In summary, the content of this specification should not be construed as a limitation to the present application.

Claims

1. A page loading method, characterized in that: include: Generate a page template, which includes the CSS style of the page, the HTML structure of the page and the JS file; embedding the page template into the application; When the application is started, a target page template is preloaded according to user behavior; Send the front-end request to the back-end, so that the back-end uses Node.js and Koa2 framework in combination with Redis to process and cache the front-end request data, and sends the data processing result to the front-end; The front end renders the target page template according to the data processing result to generate a target page; The target page is displayed.

2. The page loading method according to claim 1, characterized in that: After generating the page template and before embedding the page template into the application, the method further includes: The page template is optimized.

3. The page loading method according to claim 2, characterized in that: The optimizing process of the page template includes: Remove unnecessary tags and decorations from the HTML structure; Inline the key CSS styles in the CSS styles into the HTML structure; Optimizing the JS file; The key CSS style and the optimized JS file are loaded asynchronously.

4. The page loading method according to claim 3, characterized in that: The optimizing process of the JS file includes: Split the code of the JS file; Optimize DOM operations.

5. The page loading method according to claim 4, characterized in that: The code of the JS file is split, including: Divide the functional modules in the JS file, each module containing a group of related functional codes; Determine the loading order according to the dependency relationship of the functional modules, and prioritize the loading of key modules; Package each functional module into an independent JS file to achieve on-demand loading.

6. The page loading method according to claim 4, characterized in that: The optimization of DOM operation includes: Reduce the number of DOM operations by batch processing DOM elements; Use document fragments to perform DOM operations, first build the DOM structure in memory, and then insert it into the page at once; Using virtual DOM technology, by comparing the differences between the two virtual DOMs, only the changed parts are updated.

7. The page loading method according to claim 1, characterized in that: The sending of the front-end request to the back-end, so that the back-end uses Node.js and Koa2 framework in combination with Redis to process and cache the front-end request data, and sends the data processing result to the front-end, includes: Preliminary processing of front-end request data is performed through the asynchronous non-blocking characteristics of Node.js; Using the middleware mechanism of the Koa2 framework, the front-end request data after preliminary processing is passed to each middleware in turn for further processing; Check whether there is corresponding cache data from Redis; If it exists, the cached data is directly returned to the front end; If it does not exist, the backend is enabled to obtain the required data through the database query interface and store the query results in the Redis.

8. A page loading device, characterized in that: include: A template generation unit, used to generate a page template, wherein the page template includes a CSS style of the page, an HTML structure of the page, and a JS file; A template embedding unit, used to embed the page template into an application; A template loading unit, used to preload a target page template according to user behavior when the application is started; A data processing unit is used to send a front-end request to a back-end, so that the back-end uses Node.js and Koa2 framework in combination with Redis to process and cache the front-end request data, and sends the data processing result to the front-end; A page rendering unit, configured to enable the front end to render the target page template according to the data processing result to generate a target page; The page display unit is used to display the target page.

9. A storage medium, characterized in that: The storage medium stores a plurality of instructions, and the instructions are suitable for being loaded by a processor to execute the method according to any one of claims 1 to 7.

10. An electronic device, characterized in that: The method comprises a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the method according to any one of claims 1 to 7 is implemented.

Images