Page loading optimization method and device, equipment and storage medium thereof

Abstract

The invention belongs to the technical field of research and development design, and relates to a page loading optimization method and device, equipment and a storage medium thereof. Generating a preloading file, and caching the preloading file by adopting a Native caching mechanism; calling the latest preloading file from the target cache; if the page static resources are updated, screening out the page static resources used for updating from the newest preloading file, and downloading the page static resources to a quick loading area; and calling a preset page loading function, and carrying out page loading optimization. The method is applied to an online service APP or a page applet issued by a financial service or a medical service through the H5 page technology, real-time online rendering is not needed, rendering can be conducted in a local offline rendering mode, and page rendering lagging caused by the multi-terminal network interaction problem is avoided; meanwhile, the Native cache mechanism can be combined, only updated page static resources are rendered in a targeted mode, and the H5 page loading efficiency is improved.

Description

Technical Field

[0001] This application relates to the field of research and development design technology, and is applied to online service apps or mini-programs developed using H5 page technology in financial or medical businesses. It relates to a page loading optimization method, device, equipment and its storage medium. Background Technology

[0002] In current front-end development, especially when building multi-module Vue projects, low compilation efficiency is a common problem. Traditional solutions typically achieve on-demand building by manually specifying which modules need to be compiled.

[0003] With the development of network technology, in order to improve the display effect, H5 pages contain more and more information such as images, animations, layouts, and navigation. As a result, the amount of data that H5 pages need to load during the display process is also increasing, and the loading time is also longer, which means that users have to wait longer. Even though certain optimization methods have been adopted, the main optimization points are focused on reducing HTTP requests, resource merging and compression, lazy loading, and using browser caching.

[0004] While it improves the efficiency of H5 page loading to some extent, it still has many shortcomings. For example, traditional H5 page resource loading relies on real-time network requests. When the network is unstable or the bandwidth is insufficient, the page loading speed is severely limited, resulting in some loading lag. During update loading or route switching, blank pages may appear in the application due to update delays. Summary of the Invention

[0005] The purpose of this application is to provide a page loading optimization method, apparatus, device and storage medium to improve H5 page loading efficiency and avoid blank pages appearing in the application during loading.

[0006] Firstly, embodiments of this application provide a page loading optimization method, which adopts the following technical solution:

[0007] A page loading optimization method includes the following steps:

[0008] The target page is scanned and files are loaded using a preset script;

[0009] Based on the scan results, identify all static resources of the target page from the loaded file and extract the loading paths of all static resources of the target page;

[0010] According to a preset matching and sorting strategy, all page static resources are categorized and cached to generate a preloaded file in the target format. The preloaded file is then cached using a native caching mechanism. The step of categorizing and caching all page static resources according to the preset matching and sorting strategy includes: performing regular expression matching on the loading path, and caching all page static resources under the same project into the same file according to the regular expression matching result and the static resource category.

[0011] The target comparison file is retrieved from the target cache using a preset Native cache call interface. The target comparison file includes: the latest preloaded file of the target page and the preloaded file used when the target page was loaded last time.

[0012] The latest preloaded file is compared with the preloaded file used in the previous load of the target page, and the comparison results are used to determine whether there is an update of the page's static resources.

[0013] If there is an update to the page static resources, the page static resources to be updated are selected from the latest preloaded files and downloaded to the preset fast loading area.

[0014] A preset page loading function is invoked to perform page loading optimization by retrieving the static page resources for updating from the fast loading area.

[0015] Secondly, embodiments of this application also provide a page loading optimization device, which adopts the following technical solution:

[0016] A page loading optimization device, comprising:

[0017] The file scanning module is used to scan target pages for loaded files using preset scripts.

[0018] The identification and extraction module is used to identify all static resources of the target page from the loaded file and extract the loading paths of all static resources of the page based on the scanning results.

[0019] The Native caching module is used to categorize and cache all page static resources according to a preset matching and sorting strategy, generate a preloaded file in the target format, and cache the preloaded file using a Native caching mechanism. The step of categorizing and caching all page static resources according to the preset matching and sorting strategy includes: performing regular expression matching processing on the loading path, and caching all page static resources under the same project into the same file according to the regular expression matching result and the static resource category.

[0020] The comparison file retrieval module is used to retrieve the target comparison file from the target cache using a preset Native cache retrieval interface. The target comparison file includes: the latest preloaded file of the target page and the preloaded file used when the target page was loaded last time.

[0021] The update judgment module is used to compare the latest preloaded file with the preloaded file used in the previous load of the target page, and to determine whether there is a static resource update of the page based on the comparison result;

[0022] The filtering and downloading module is used to filter out the page static resources to be updated from the latest preloaded file if there is an update to the page static resources, and download the page static resources to be updated to a preset fast loading area.

[0023] The page loading execution module is used to call a preset page loading function to perform page loading optimization by obtaining the static page resources for updating from the fast loading area.

[0024] Thirdly, embodiments of this application also provide a computer device that adopts the technical solution described below:

[0025] A computer device includes a memory and a processor, wherein the memory stores computer-readable instructions, and the processor executes the computer-readable instructions to implement the steps of the page loading optimization method described above.

[0026] Fourthly, embodiments of this application also provide a computer-readable storage medium, which adopts the technical solutions described below:

[0027] A computer-readable storage medium storing computer-readable instructions, which, when executed by a processor, implement the steps of the page loading optimization method described above.

[0028] Compared with the prior art, the embodiments of this application have the following main advantages:

[0029] The page loading optimization method described in this application involves scanning the target page loading files; identifying all page static resources and extracting their loading paths; generating a preload file in the target format and caching it using a native caching mechanism; retrieving the latest preload file from the target cache; determining if there are any updates to the page static resources; if so, selecting the updated static resources from the latest preload file and downloading them to a preset fast loading area; and calling a preset page loading function to optimize page loading by retrieving the updated static resources from the fast loading area. When developing pages for online service apps or mini-programs, this native caching mechanism for page static resources ensures that each subsequent update promptly filters and downloads the updated static resources and quickly renders them onto the corresponding service page. The page loading optimization method described above can be applied to online service apps or mini-programs developed using H5 page technology in financial or medical businesses. Instead of real-time online rendering, it can be rendered locally offline, avoiding page rendering lag caused by multi-terminal network interaction issues. Furthermore, by combining with a native caching mechanism, it can selectively render only updated static page resources, improving H5 page loading efficiency. Attached Figure Description

[0030] To more clearly illustrate the solutions in this application, the accompanying drawings used in the description of the embodiments of this application will be briefly introduced below. Obviously, the accompanying drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0031] Figure 1 This is an exemplary system architecture diagram to which this application can be applied;

[0032] Figure 2 This is a flowchart of an embodiment of a page loading optimization method according to this application;

[0033] Figure 3 yes Figure 2 A flowchart of a specific embodiment of step 201 shown;

[0034] Figure 4 yes Figure 2 A flowchart of a specific embodiment of step 202 shown;

[0035] Figure 5 yes Figure 2A flowchart of a specific embodiment of step 205 shown;

[0036] Figure 6 yes Figure 2 A flowchart of a specific embodiment of step 206 shown;

[0037] Figure 7 This is a schematic diagram of one embodiment of a page loading optimization device according to this application;

[0038] Figure 8 This is a schematic diagram of the structure of one embodiment of the computer device according to this application. Detailed Implementation

[0039] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application pertains; the terminology used herein in the specification of the application is for the purpose of describing particular embodiments only and is not intended to be limiting of the application; the terms "comprising" and "having," and any variations thereof, in the specification, claims, and foregoing drawings of this application, are intended to cover non-exclusive inclusion. The terms "first," "second," etc., in the specification, claims, or foregoing drawings of this application are used to distinguish different objects, not to describe a particular order.

[0040] In this document, the term "embodiment" means that a particular feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of this application. The appearance of this phrase in various places throughout the specification does not necessarily refer to the same embodiment, nor is it a separate or alternative embodiment mutually exclusive with other embodiments. It will be explicitly and implicitly understood by those skilled in the art that the embodiments described herein can be combined with other embodiments.

[0041] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings.

[0042] like Figure 1 As shown, system architecture 100 may include terminal device 101, network 102, and server 103. Terminal device 101 may be a laptop 1011, tablet 1012, or mobile phone 1013. Network 102 is used as a medium to provide a communication link between terminal device 101 and server 103. Network 102 may include various connection types, such as wired, wireless communication links, or fiber optic cables.

[0043] Users can use terminal device 101 to interact with server 103 via network 102 to receive or send messages, etc. Various communication client applications can be installed on terminal device 101, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social media platform software, etc.

[0044] Terminal device 101 can be various electronic devices with a display screen and support web browsing. In addition to laptops 1011, tablets 1012, or mobile phones 1013, terminal device 101 can also be an e-book reader, an MP3 player (Moving Picture Experts Group Audio Layer III), an MP4 player (Moving Picture Experts Group Audio Layer IV), a laptop computer, and a desktop computer, etc.

[0045] Server 103 can be a server that provides various services, such as a backend server that provides support for the pages displayed on terminal device 101.

[0046] It should be noted that the page loading optimization method provided in this application embodiment is generally executed by a server, and correspondingly, a page loading optimization device is generally set in the server.

[0047] It should be understood that Figure 1 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.

[0048] Continue to refer Figure 2 The diagram illustrates a flowchart of an embodiment of a page loading optimization method according to this application. The page loading optimization method includes the following steps:

[0049] Step 201: Scan the target page and load files using a preset script.

[0050] In this embodiment, the preset script includes the initPreloadUrl.js script. The initPreloadUrl.js script can be used to preload web page resources to improve website performance and user experience. Preloaded resources may include images, scripts, style sheets, etc. By downloading these resources in advance before the web page is loaded, user waiting time can be reduced and page loading speed can be improved.

[0051] Specifically, during the front-end page building phase, the initPreloadUrl.js script is used to scan the target page loading files to identify all static page resources in the target page loading files.

[0052] Step 202: Based on the scan results, identify all static resources of the target page from the loaded file and extract the loading paths of all static resources of the page.

[0053] By identifying all static resources of the target page from the loaded file and extracting the loading paths of all static resources, the corresponding static resources can be obtained and rendered according to the loading paths.

[0054] Step 203: According to the preset matching and sorting strategy, all page static resources are categorized and cached to generate a preloaded file in the target format, and the preloaded file is cached using a native caching mechanism.

[0055] The step of categorizing and caching all page static resources according to a preset matching and sorting strategy includes: performing regular expression matching on the loading path, and caching all page static resources under the same project into the same file according to the regular expression matching result and the static resource category.

[0056] Specifically, all static resources of pages under the same project are categorized and cached in the same file. For example, if there are different front-end page loading projects, a preload.json file is generated for each project. The static resources of the page used in the corresponding project are cached in the preload.json file. Here, the preload.json files corresponding to different projects can be named differently according to the project name.

[0057] By categorizing and caching all the static resources of the pages, a preloaded file in the target format is generated, and the preloaded file is cached using a native caching mechanism so that page loading can be optimized in conjunction with the native caching mechanism when the page is actually loaded later.

[0058] Native caching refers to caching preloaded files in pre-defined native memory. Native memory is memory directly allocated by low-level languages ​​such as C / C++. It is typically used for performance-sensitive operations or scenarios that require interaction with the underlying system. It is not managed by the JVM, and developers need to manually control, allocate, or release native memory. In a Java development environment, if data in native memory needs to be used, it can be called through JNI (Java Native Interface).

[0059] The use of native caching mechanisms provides direct access to underlying hardware and operating system resources. Developers can interact directly with the operating system's memory management through system calls to allocate and release memory, facilitating page loading maintenance and management.

[0060] Step 204: Using a preset Native cache call interface, retrieve the target comparison file from the target cache. The target comparison file includes: the latest preloaded file of the target page and the preloaded file used when the target page was loaded last time.

[0061] Specifically, it can be called using JNI (Java Native Interface).

[0062] Step 205: Compare the latest preloaded file with the preloaded file used during the previous load of the target page, and determine whether there is a static resource update for the page based on the comparison result.

[0063] Step 206: If there is an update to the page static resources, then select the page static resources to be updated from the latest preloaded files and download the page static resources to the preset fast loading area.

[0064] Specifically, the preset fast loading area includes a local content cache area, such as the local decompression cache address corresponding to the decompressed front-end rendering project package. The preloaded files are cached on the server using a native caching mechanism. By downloading the static page resources used for updates from the server to the local content cache area, subsequent local fast rendering and offline rendering are facilitated, eliminating the need for real-time online rendering and avoiding page rendering stuttering caused by multi-device network interaction issues.

[0065] Step 207: Invoke the preset page loading function to perform page loading optimization by obtaining the static page resources for updating from the fast loading area.

[0066] In this embodiment, the page loading optimization method is applied to online service apps or mini-programs developed using H5 page technology for financial or medical businesses. When developing pages for these online service apps or mini-programs, a native caching mechanism for static page resources is introduced. This allows for timely filtering and downloading of updated static page resources each time they are updated, and then quickly rendering these updated static page resources onto the corresponding service page. Real-time online rendering is not required; local offline rendering can be used, avoiding page rendering lag caused by multi-device network interaction issues. Furthermore, by combining the native caching mechanism, only updated static page resources are rendered, improving H5 page loading efficiency.

[0067] In this embodiment, the process involves scanning the target page loading files; identifying all page static resources and extracting their loading paths; generating a preload file in the target format and caching it using a native caching mechanism; retrieving the latest preload file from the target cache; determining if there are any updates to the page static resources; if so, selecting the updated static resources from the latest preload file and downloading them to a preset fast loading area; and calling a preset page loading function to optimize page loading by retrieving the updated static resources from the fast loading area. When developing pages for the aforementioned online service apps or mini-programs, this native caching mechanism for page static resources ensures that each subsequent update promptly filters and downloads the updated static resources and quickly renders them onto the corresponding service page. The page loading optimization method described above can be applied to online service apps or mini-programs developed using H5 page technology in financial or medical businesses. Instead of real-time online rendering, it can be rendered locally offline, avoiding page rendering lag caused by multi-terminal network interaction issues. Furthermore, by combining with a native caching mechanism, it can selectively render only updated static page resources, improving H5 page loading efficiency.

[0068] Continue to refer Figure 3 , Figure 3 yes Figure 2 A flowchart of a specific embodiment of step 201 shown includes the following steps:

[0069] Step 301: Receive target scanning instruction, wherein the target scanning instruction is a scanning instruction for the target page loading file;

[0070] Step 302: In response to the target scanning instruction, start the preset script, wherein the preset script includes a pre-built traversal scanning function;

[0071] Step 303: According to the preset script, scan all HTML files in the dist directory of the target page loading project in a traversal manner. Specifically, according to the traversal scanning function, scan all HTML files in the dist directory of the target page loading project in a traversal manner.

[0072] The traversal scanning function scans all HTML files in the dist directory of the target page loading project in a traversal manner, so as to more fully identify all static page resources used in the target page loading project.

[0073] Continue to refer Figure 4 , Figure 4 yes Figure 2 A flowchart of a specific embodiment of step 202 shown includes the following steps:

[0074] Step 401: From the HTML files in all dist directories of the project loaded from the target page, identify all static image resources, JS files and CSS files;

[0075] Step 402: Use all the static image resources, JS files, and CSS files as the identified static resources for all pages;

[0076] Step 403: Based on the preset cache paths of all static image resources, JS files, and CSS files, generate the loading paths of all page static resources, wherein the loading paths include the loading paths of all static image resources, all JS files, and all CSS files.

[0077] Specifically, the scanning results generate the loading paths for all static resources on the pages, so that the corresponding static resources can be loaded and used subsequently.

[0078] In this embodiment, the step of performing regular expression matching on the loading path and caching all page static resources under the same project into the same file according to the regular expression matching result and the static resource category specifically includes: performing regular expression matching on the loading paths of all static image resources, all JS files, and all CSS files respectively using preset regular expressions to obtain regular expression matching results; identifying the nearest root directory shared by all page static resources according to the regular expression matching results; pre-creating a target file in the nearest root directory; pre-dividing the target file into writing areas corresponding to different static resource categories according to the different static resource categories, wherein the static resource categories include image categories, CSS file categories, and JS file categories; writing the loading paths of all page static resources in JSON data format into the target file using the static resource category name as the key and the loading path of all static resources under the corresponding category as the value of the JSON data.

[0079] Specifically, the nearest root directory, for example: in the target Linux system, the loading path for image A is " / home / user / images / picture_a.jpg" and the loading path for image B is " / home / user / images / picture_b.jpg", then the nearest root directory for both is the images directory; furthermore, in the target Linux system, the loading path for image C is " / home / users / images / picture_c.jpg" and the loading path for image D is " / home / user / images / picture_d.jpg", then the nearest root directory for both is the home directory, and this will not be explained further here.

[0080] In this embodiment, the step of caching the preloaded file using a native caching mechanism specifically includes: executing a preset allocation instruction or allocation function in a low-level programming language (C / C++) environment; allocating memory space for the preloaded file in the target operating system according to the execution of the preset allocation instruction or allocation function, wherein the target operating system includes the development system used for updating static page resources, generally referring to the development operating system used by the server for project updates; and caching the preloaded file in the memory space.

[0081] In this embodiment, before performing the step of comparing the latest preloaded file with the preloaded file used when the target page was loaded once, and determining whether there is an update to the page static resources based on the comparison result, the method further includes: initially naming the initially generated preloaded file according to the version naming method; and updating the file name of the latest preloaded file according to the version update method after each update to the page static resources.

[0082] Specifically, the initial naming of the preloaded file according to the version naming method can be supplementary. For example, since different names have been distinguished for different front-end page projects, only the initial and updated version numbers can be named here based on the aforementioned distinguished naming.

[0083] The preloaded files are initially named according to the version naming convention; and each time the page's static resources are updated, the latest preloaded files are renamed using the version update method. This allows for direct comparison of the version numbers of identical files to identify whether a specific preloaded file has been updated with page static resources, enabling a more scientific and rapid identification process. This assists in the rapid optimization of H5 pages and improves page optimization efficiency.

[0084] Continue to refer Figure 5 , Figure 5 yes Figure 2 A flowchart of a specific embodiment of step 205 shown includes the following steps:

[0085] Step 501: Determine whether the version names of the latest preloaded file and the preloaded file used in the previous loading of the target page are consistent;

[0086] Step 502: If the latest preloaded file has the same version name as the preloaded file used in the previous load of the target page, then there is no update of the page static resources;

[0087] Step 503: If the latest preloaded file and the version name of the preloaded file used in the previous load of the target page are inconsistent, then there is a static resource update of the page.

[0088] Specifically, by directly comparing the version numbers of identical files, it is possible to identify whether a specific preloaded file has been updated with static resources for the page. This more scientific and faster identification process can assist in the rapid optimization of H5 pages and improve page optimization efficiency.

[0089] In this embodiment, before performing the step of selecting page static resources for updating from the latest preloaded files and downloading the page static resources for updating to a preset fast loading area, the method further includes: identifying the local decompression cache address of the page static resource file corresponding to the target front-end page rendering; and setting the local decompression cache address as the fast loading area.

[0090] Continue to refer Figure 6 , Figure 6 yes Figure 2 A flowchart of a specific embodiment of step 206 shown includes the following steps:

[0091] Step 601: Extract the JSON format data from the preloaded file used during the first load of the target page, and use it as the first JSON format data;

[0092] Step 602: Extract the JSON format data from the latest preloaded file and use it as the second JSON format data;

[0093] Step 603: By comparing the second JSON format data and the first JSON format data, the static page resources used for updating are determined;

[0094] Step 604: Download the static page resources used for updating to the local decompressed cache address.

[0095] Specifically, the preloaded files are cached on the server using a native caching mechanism. By downloading the static page resources used for updates from the server to the local content cache area, subsequent local and offline rendering is facilitated, eliminating the need for real-time online rendering and avoiding page rendering stuttering caused by multi-device network interaction issues.

[0096] In this embodiment, the process involves scanning the target page loading files; identifying all page static resources and extracting their loading paths; generating a preload file in the target format and caching it using a native caching mechanism; retrieving the latest preload file from the target cache; determining if there are any updates to the page static resources; if so, selecting the updated static resources from the latest preload file and downloading them to a preset fast loading area; and calling a preset page loading function to optimize page loading by retrieving the updated static resources from the fast loading area. When developing pages for the aforementioned online service apps or mini-programs, this native caching mechanism for page static resources ensures that each subsequent update promptly filters and downloads the updated static resources and quickly renders them onto the corresponding service page. The page loading optimization method described above can be applied to online service apps or mini-programs developed using H5 page technology in financial or medical businesses. Instead of real-time online rendering, it can be rendered locally offline, avoiding page rendering lag caused by multi-terminal network interaction issues. Furthermore, by combining with a native caching mechanism, it can selectively render only updated static page resources, improving H5 page loading efficiency.

[0097] The embodiments of this application can acquire and process relevant data based on artificial intelligence technology. Artificial intelligence (AI) is the theory, method, technology, and application system that uses digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use that knowledge to obtain optimal results.

[0098] Foundational technologies in artificial intelligence generally include sensors, dedicated AI chips, cloud computing, distributed storage, big data processing, operating / interactive systems, and mechatronics. AI software technologies mainly encompass computer vision, robotics, biometrics, speech processing, natural language processing, and machine learning / deep learning.

[0099] In this embodiment, the process involves scanning the target page loading files; identifying all page static resources and extracting their loading paths; generating a preload file in the target format and caching it using a native caching mechanism; retrieving the latest preload file from the target cache; determining if there are any updates to the page static resources; if so, selecting the updated static resources from the latest preload file and downloading them to a preset fast loading area; and calling a preset page loading function to optimize page loading by retrieving the updated static resources from the fast loading area. When developing pages for the aforementioned online service apps or mini-programs, this native caching mechanism for page static resources ensures that each subsequent update promptly filters and downloads the updated static resources and quickly renders them onto the corresponding service page. The page loading optimization method described above can be applied to online service apps or mini-programs developed using H5 page technology in financial or medical businesses. Instead of real-time online rendering, it can be rendered locally offline, avoiding page rendering lag caused by multi-terminal network interaction issues. Furthermore, by combining with a native caching mechanism, it can selectively render only updated static page resources, improving H5 page loading efficiency.

[0100] Further reference Figure 7 As a response to the above Figure 2 To implement the method shown, this application provides an embodiment of a page loading optimization device, which is similar to... Figure 2 Corresponding to the method embodiments shown, this device can be specifically applied to various electronic devices.

[0101] like Figure 7 As shown, the page loading optimization device 700 described in this embodiment includes: a file scanning module 701, an identification and extraction module 702, a native caching module 703, a file comparison and retrieval module 704, an update judgment module 705, a filtering and downloading module 706, and a page loading execution module 707. Wherein:

[0102] The file scanning module 701 is used to scan the target page to load files using a preset script.

[0103] The identification and extraction module 702 is used to identify all static resources of the target page from the loading file and extract the loading path of all static resources of the page based on the scanning results.

[0104] Native caching module 703 is used to categorize and cache all page static resources according to a preset matching and sorting strategy, generate a preloaded file in the target format, and cache the preloaded file using a native caching mechanism. The step of categorizing and caching all page static resources according to the preset matching and sorting strategy includes: performing regular expression matching processing on the loading path, and caching all page static resources under the same project into the same file according to the regular expression matching result and the static resource category.

[0105] The comparison file calling module 704 is used to call the target comparison file from the target cache using a preset Native cache calling interface, wherein the target comparison file includes: the latest preloaded file of the target page and the preloaded file used when the target page was loaded last time;

[0106] The update judgment module 705 is used to compare the latest preloaded file with the preloaded file used in the previous load of the target page, and to determine whether there is a static resource update of the page based on the comparison result;

[0107] The filtering and downloading module 706 is used to filter out the page static resources to be updated from the latest preloaded file if there is an update to the page static resources, and download the page static resources to be updated to a preset fast loading area.

[0108] The page loading execution module 707 is used to call a preset page loading function to perform page loading optimization by obtaining the static page resources for updating from the fast loading area.

[0109] This application achieves page loading optimization by scanning target page loading files; identifying all page static resources and extracting their loading paths; generating a preload file in the target format and caching it using a native caching mechanism; retrieving the latest preload file from the target cache; determining if page static resources have been updated; if so, selecting the updated static resources from the latest preload file and downloading them to a preset fast loading area; and calling a preset page loading function to optimize page loading by retrieving the updated static resources from the fast loading area. When developing pages for online service apps or mini-programs, this native caching mechanism for page static resources ensures that each time page static resources are updated, the updated static resources are promptly filtered and downloaded, and quickly rendered onto the corresponding service page. The page loading optimization method described above can be applied to online service apps or mini-programs developed using H5 page technology in financial or medical businesses. Instead of real-time online rendering, it can be rendered locally offline, avoiding page rendering lag caused by multi-terminal network interaction issues. Furthermore, by combining with a native caching mechanism, it can selectively render only updated static page resources, improving H5 page loading efficiency.

[0110] In this embodiment, the file scanning module 701 includes a scan instruction receiving unit, a scan script starting unit, and a traversal scan execution unit. Wherein:

[0111] The scanning instruction receiving unit is used to receive target scanning instructions;

[0112] A scan script startup unit is used to start the preset script in response to the target scan command;

[0113] The traversal scanning execution unit is used to scan all HTML files in the dist directory of the target page loading project in a traversal manner according to the preset script.

[0114] In this embodiment, the Native caching module 703 includes a regularization matching processing unit, a nearest root directory identification unit, a target file creation unit, a write region partitioning unit, and a structured write unit. Wherein:

[0115] The regularization matching processing unit is used to combine preset regular expressions to perform regular expression matching processing on the loading paths of all static image resources, all JS files, and all CSS files respectively, and obtain regular expression matching results.

[0116] The nearest root directory identification unit is used to identify the nearest root directory shared by all static resources of all pages based on the regular expression matching results.

[0117] The target file creation unit is used to pre-create target files in the nearest root directory;

[0118] The write area division unit is used to pre-divide the write areas corresponding to different static resource categories in the target file according to the different static resource categories, wherein the static resource categories include image categories, CSS file categories and JS file categories;

[0119] The structured writing unit is used to write the loading paths of all page static resources into the target file in JSON data format, with the static resource category name as the key and the loading path of all static resources under the corresponding category as the value.

[0120] In this embodiment, the page loading optimization device 700 further includes a version update module, which is used to initially name the initially generated preloaded file according to the version naming method; and is also used to update the file name of the latest preloaded file using the version update method each time the page static resources are updated.

[0121] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by instructing related hardware through computer-readable instructions. These computer-readable instructions can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above methods. The aforementioned storage medium can be a non-volatile storage medium such as a magnetic disk, optical disk, or read-only memory (ROM), or random access memory (RAM).

[0122] It should be understood that although the steps in the flowcharts of the accompanying drawings are shown in sequence as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some of the steps in the flowcharts of the accompanying drawings may include multiple sub-steps or multiple stages, and these sub-steps or stages are not necessarily executed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be executed in turn or alternately with other steps or at least a portion of the sub-steps or stages of other steps.

[0123] To address the aforementioned technical problems, embodiments of this application also provide a computer device. Please refer to [link / reference needed]. Figure 8 , Figure 8 This is a basic structural block diagram of the computer device in this embodiment.

[0124] The computer device 8 includes a memory 8a, a processor 8b, and a network interface 8c that are interconnected via a system bus. It should be noted that... Figure 8 Only a computer device 8 with component memory 8a, processor 8b, and network interface 8c is shown. However, it should be understood that it is not required to implement all the components shown, and more or fewer components can be implemented instead. Those skilled in the art will understand that the computer device described herein is a device capable of automatically performing numerical calculations and / or information processing according to pre-set or stored instructions. Its hardware includes, but is not limited to, microprocessors, application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), digital signal processors (DSPs), embedded devices, etc.

[0125] The computer device can be a desktop computer, laptop, handheld computer, or cloud server, etc. The computer device can interact with the user via a keyboard, mouse, remote control, touchpad, or voice control.

[0126] The memory 8a includes at least one type of readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 8a may be an internal storage unit of the computer device 8, such as the hard disk or memory of the computer device 8. In other embodiments, the memory 8a may also be an external storage device of the computer device 8, such as a plug-in hard disk, smart media card (SMC), secure digital card (SD), flash card, etc., equipped on the computer device 8. Of course, the memory 8a may also include both the internal storage unit and its external storage device of the computer device 8. In this embodiment, the memory 8a is typically used to store the operating system and various application software installed on the computer device 8, such as computer-readable instructions for a page loading optimization method. In addition, the memory 8a can also be used to temporarily store various types of data that have been output or will be output.

[0127] In some embodiments, the processor 8b may be a central processing unit (CPU), controller, microcontroller, microprocessor, or other data processing chip. The processor 8b is typically used to control the overall operation of the computer device 8. In this embodiment, the processor 8b is used to execute computer-readable instructions stored in the memory 8a or to process data, for example, to execute computer-readable instructions of the page load optimization method described above.

[0128] The network interface 8c may include a wireless network interface or a wired network interface, which is typically used to establish communication connections between the computer device 8 and other electronic devices.

[0129] The computer device proposed in this embodiment belongs to the field of research and development design technology and is applied to online service apps or mini-programs developed using H5 page technology for financial or medical businesses. This application scans the target page loading file; identifies all page static resources and extracts the loading paths of all page static resources; generates a preloaded file in the target format and caches the preloaded file using a native caching mechanism; calls the latest preloaded file from the target cache; determines whether there is an update to the page static resources; if there is an update, it selects the page static resources for updating from the latest preloaded file and downloads the updated page static resources to a preset fast loading area; and calls a preset page loading function to optimize page loading by retrieving the updated page static resources from the fast loading area. When developing pages for the aforementioned online service apps or mini-programs, the introduction of a native caching mechanism for page static resources ensures that each time page static resources are updated, the updated page static resources are promptly selected and downloaded according to the native caching mechanism, and the updated page static resources are quickly rendered onto the corresponding service page. The page loading optimization method described above can be applied to online service apps or mini-programs developed using H5 page technology in financial or medical businesses. Instead of real-time online rendering, it can be rendered locally offline, avoiding page rendering lag caused by multi-terminal network interaction issues. Furthermore, by combining with a native caching mechanism, it can selectively render only updated static page resources, improving H5 page loading efficiency.

[0130] This application also provides another embodiment, namely, a computer-readable storage medium storing computer-readable instructions that can be executed by a processor to cause the processor to perform the steps of the page loading optimization method described above.

[0131] The computer-readable storage medium proposed in this embodiment belongs to the field of research and development design technology and is applied to online service apps or mini-programs developed using H5 page technology for financial or medical businesses. This application involves scanning the target page loading file; identifying all page static resources and extracting the loading paths of all page static resources; generating a preloaded file in the target format and caching the preloaded file using a native caching mechanism; calling the latest preloaded file from the target cache; determining whether there is an update to the page static resources; if there is an update, selecting the page static resources for updating from the latest preloaded file and downloading the updated page static resources to a preset fast loading area; and calling a preset page loading function to optimize page loading by retrieving the updated page static resources from the fast loading area. When developing pages for the aforementioned online service apps or mini-programs, the introduction of a native caching mechanism for page static resources ensures that each time page static resources are updated, the updated page static resources are promptly selected and downloaded according to the native caching mechanism, and the updated page static resources are quickly rendered onto the corresponding service page. The page loading optimization method described above can be applied to online service apps or mini-programs developed using H5 page technology in financial or medical businesses. Instead of real-time online rendering, it can be rendered locally offline, avoiding page rendering lag caused by multi-terminal network interaction issues. Furthermore, by combining with a native caching mechanism, it can selectively render only updated static page resources, improving H5 page loading efficiency.

[0132] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0133] Obviously, the embodiments described above are only some embodiments of this application, not all embodiments. The accompanying drawings show preferred embodiments of this application, but do not limit the patent scope of this application. This application can be implemented in many different forms; rather, the purpose of providing these embodiments is to make the disclosure of this application more thorough and comprehensive. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art can still modify the technical solutions described in the foregoing specific embodiments, or make equivalent substitutions for some of the technical features. Any equivalent structures made using the content of this application's specification and drawings, directly or indirectly applied to other related technical fields, are similarly within the scope of patent protection of this application. Software tools or components not belonging to this company that appear in the embodiments of this application are merely illustrative examples and do not represent actual use.

Claims

1. A page loading optimization method, characterized in that, Includes the following steps: The target page is scanned and files are loaded using a preset script; Based on the scan results, identify all static resources of the target page from the loaded file and extract the loading paths of all static resources of the target page; According to a preset matching and sorting strategy, all page static resources are categorized and cached to generate a preloaded file in the target format. The preloaded file is then cached using a native caching mechanism. The step of categorizing and caching all page static resources according to the preset matching and sorting strategy includes: performing regular expression matching on the loading path, and caching all page static resources under the same project into the same file according to the regular expression matching result and the static resource category. Using a preset native cache call interface, a target comparison file is retrieved from the target cache. The target comparison file includes: the latest preloaded file of the target page and the preloaded file used when the target page was loaded last time. The latest preloaded file is compared with the preloaded file used in the previous load of the target page, and the comparison results are used to determine whether there is an update of the page's static resources. If there is an update to the page static resources, the page static resources to be updated are selected from the latest preloaded files and downloaded to the preset fast loading area. A preset page loading function is invoked to perform page loading optimization by retrieving the static page resources for updating from the fast loading area.

2. The page loading optimization method according to claim 1, characterized in that, The step of scanning the target page and loading files using a preset script specifically includes: Receive target scanning instructions; In response to the target scanning command, the preset script is started; The preset script is used to scan all HTML files in the destination directory of the target page project in a traversal manner.

3. The page loading optimization method according to claim 2, characterized in that, The steps of identifying all static resources of the target page from the target page loading file based on the scanning results and extracting the loading paths of all static resources specifically include: From the HTML files in all dist directories of the project loaded from the target page, all static image resources, JS files, and CSS files were identified; All the static image resources, JS files, and CSS files mentioned above are considered as all the identified page static resources; Based on the preset cache paths of all static image resources, JS files, and CSS files, load paths for all page static resources are generated, wherein the load paths include the load paths for all static image resources, all JS files, and all CSS files.

4. The page loading optimization method according to claim 3, characterized in that, The step of performing regular expression matching on the loading path and caching all page static resources under the same project into the same file according to the regular expression matching result and static resource category specifically includes: By combining preset regular expressions, regular expression matching is performed on the loading paths of all static image resources, all JS files, and all CSS files respectively to obtain regular expression matching results. Based on the regular expression matching results, identify the nearest root directory shared by all static resources on all pages; The target file is pre-created in the nearest root directory; Based on the different static resource categories, different writing areas corresponding to different static resource categories are pre-divided in the target file. The static resource categories include image categories, CSS file categories, and JS file categories. Using the static resource category name as the key and the loading path of all static resources under the corresponding category as the value in the JSON data, write the loading paths of all page static resources in JSON data format into the target file.

5. The page loading optimization method according to claim 1, characterized in that, The step of caching the preloaded file using the Natural caching mechanism specifically includes: In a low-level programming language environment, execute preset allocation instructions or allocation functions; Based on the execution of the preset allocation instructions or allocation functions, memory space is allocated for the preloaded file in the target operating system; The preloaded file is cached in the memory space.

6. The page loading optimization method according to claim 1, characterized in that, Before performing the step of comparing the latest preloaded file with the preloaded file used during the previous load of the target page, and determining whether there is an update to the page's static resources based on the comparison result, the method further includes: The initially generated preload file should be given a name according to the version naming convention; and, Each time the static resources of the page are updated, the file name of the latest preloaded file is updated using a version update method; The step of comparing the latest preloaded file with the preloaded file used during the previous load of the target page, and determining whether there is an update to the page's static resources based on the comparison result, specifically includes: Determine whether the version names of the latest preloaded file and the preloaded file used in the previous load of the target page are consistent; If the latest preloaded file has the same version name as the preloaded file used in the previous load of the target page, then there is no update of the page's static resources; If the latest preloaded file and the version name of the preloaded file used in the previous load of the target page are different, then there is a static resource update of the page.

7. The page loading optimization method according to claim 1, characterized in that, Before performing the steps of filtering out the static page resources for updating from the latest preloaded files and downloading the static page resources for updating to a preset fast loading area, the method further includes: Identify the local decompression cache address of the static resource files corresponding to the target front-end page during rendering; Set the local decompression cache address to the fast loading region; The step of selecting static page resources for updating from the latest preloaded files and downloading the static page resources for updating to the preset fast loading area specifically includes: Extract the JSON data from the preloaded file used during the first load of the target page, and use it as the first JSON data; Extract the JSON format data from the latest preloaded file and use it as the second JSON format data; By comparing the second JSON format data and the first JSON format data, the static page resources used for updating are determined; Download the static page resources used for updating to the local unzipped cache address.

8. A page loading optimization device, characterized in that, The page loading optimization device is used to implement the steps of the page loading optimization method as described in any one of claims 1 to 7, and the page loading optimization device includes: The file scanning module is used to scan target pages for loaded files using preset scripts. The identification and extraction module is used to identify all static resources of the target page from the loaded file and extract the loading paths of all static resources of the page based on the scanning results. The Natural caching module is used to categorize and cache all page static resources according to a preset matching and sorting strategy, generate a preloaded file in the target format, and cache the preloaded file using the Natural caching mechanism. The step of categorizing and caching all page static resources according to the preset matching and sorting strategy includes: performing regular expression matching processing on the loading path, and caching all page static resources under the same project into the same file according to the regular expression matching result and the static resource category. The comparison file retrieval module is used to retrieve the target comparison file from the target cache using a preset Nativ cache retrieval interface. The target comparison file includes: the latest preloaded file of the target page and the preloaded file used when the target page was loaded last time. The update judgment module is used to compare the latest preloaded file with the preloaded file used in the previous load of the target page, and to determine whether there is a static resource update of the page based on the comparison result; The filtering and downloading module is used to filter out the page static resources to be updated from the latest preloaded file if there is an update to the page static resources, and download the page static resources to be updated to a preset fast loading area. The page loading execution module is used to call a preset page loading function to perform page loading optimization by obtaining the static page resources for updating from the fast loading area.

9. A computer device, characterized in that, The method includes a memory and a processor, wherein the memory stores computer-readable instructions, and the processor executes the computer-readable instructions to implement the steps of the page loading optimization method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-readable instructions, which, when executed by a processor, implement the steps of the page loading optimization method as described in any one of claims 1 to 7.

Images