Method for increasing front-end first screen loading speed

Abstract

The invention discloses a method for increasing the loading speed of a front-end first screen, and relates to the technical field of front-end development. Comprising the steps of 1, defining a home page set: defining a set of page set serving as a home page according to user access behavior analysis or business requirements, 2, analyzing resource dependence: performing resource dependence analysis on each page in the home page set, determining resources required by each page, and storing the resources required by each page in the home page set; step 3, carrying out resource packaging and optimization according to required resources: processing resource files by utilizing a packaging tool, step 4, dynamically loading the resources: when a user accesses a system, judging whether an accessed page is matched with a home page set or not according to a routing address, if so, matching a public resource file and a page special resource file required by a dynamic request, and if not, carrying out resource optimization according to the public resource file and the page special resource file; and 5, preloading a screen, namely preloading subsequent resources through a request IdleCallback API (Application Program Interface) method in the idle time of the process, wherein the subsequent resources are preloaded in the idle time of the process, and a non-homepage request is prevented from triggering a lazy loading logic.

Description

Technical Field

[0001] The invention discloses a method for improving the loading speed of a front-end first screen, and relates to the technical field of front-end development. Background Art

[0002] With the rapid development of Internet technology, the complexity and functional requirements of front-end pages are constantly increasing, and page loading speed has become one of the key factors affecting user experience. Existing front-end loading methods usually package resource files shared by all pages, such as CSS, JavaScript, images, etc., into one or more large files. Regardless of which page the user visits for the first time, a large number of resource files need to be loaded, which leads to a long first screen loading time, especially in poor network environments or low device performance. The user experience is significantly reduced. In the existing technology, although there are some optimization methods such as code splitting and lazy loading solutions, these methods often lack specificity and cannot dynamically adjust the resource loading strategy according to the specific page the user visits. Summary of the Invention

[0003] This invention addresses the challenges of existing technologies and provides a method for improving the loading speed of the front-end first screen. This method defines a set of frequently accessed homepage pages, analyzes their resource dependencies, and packages resource files as needed into public and page-specific files. During a user's first visit, only the resources required for the current page are loaded, reducing the first screen load time. This method also utilizes idle time to preload other resources. Combined with HTTP / 2 multiplexing and Service Worker caching technologies, this method significantly improves the user experience.

[0004] The specific scheme proposed by the present invention is:

[0005] The present invention provides a method for improving the loading speed of the front-end first screen, comprising:

[0006] Step 1: Define the home page set: Based on user access behavior analysis or business needs, define a set of pages as the home page.

[0007] Step 2: Analyze resource dependencies: Perform resource dependency analysis on each page in the home page set to determine the resources required for each page.

[0008] Step 3: Pack and optimize resources according to the required resources: Use packaging tools to process resource files.

[0009] Step 4: Dynamically load resources: When a user accesses the system, the routing address is used to determine whether the accessed page matches the homepage set. If so, the public resource files and page-specific resource files required for dynamic requests are matched to avoid loading unnecessary files and non-homepage requests triggering lazy loading logic.

[0010] Step 5: Preload screen: Preload subsequent resources through the requestIdleCallback API method during process idle time.

[0011] Furthermore, in step 1 of the method for improving the front-end first screen loading speed, when defining a set of page sets as the home page, the page set includes pages that users visit more frequently, including the home page, navigation page, and login page.

[0012] Furthermore, when analyzing resource dependencies in step 2 of the method for improving the front-end first screen loading speed, the dependency packages, CSS files, JavaScript files, and image resources required for each page are determined.

[0013] Furthermore, in step 3 of the method for improving the front-end first screen loading speed, the resource files are processed using a packaging tool, including:

[0014] Package the resource files shared by the home page set into public resource files, compress and optimize the configuration to reduce the file size.

[0015] Package the resource files required for each home page to form a page-specific resource file.

[0016] Use Tree Shaking and image compression methods to reduce the size of image resources.

[0017] The present invention also provides a device for improving the loading speed of the front-end first screen, including a page management module, an analysis module, a packaging and optimization module, a resource loading module and a preloading module.

[0018] The page management module defines the home page set: based on user access behavior analysis or business needs, define a set of pages as the home page.

[0019] The analysis module analyzes resource dependencies: performs resource dependency analysis on each page in the home page set to determine the resources required for each page.

[0020] The packaging and optimization module packages and optimizes resources according to the required resources: uses packaging tools to process resource files,

[0021] The resource loading module dynamically loads resources: When a user accesses the system, it determines whether the accessed page matches the homepage set based on the routing address. If so, it matches the public resource files and page-specific resource files required for dynamic requests, avoiding loading unnecessary files and non-homepage requests triggering lazy loading logic.

[0022] Preload module preload screen: preload subsequent resources through the requestIdleCallback API method during process idle time.

[0023] Furthermore, when the page management module of the device for improving the front-end first screen loading speed defines a set of pages as the home page, the page set includes pages that users visit more frequently, including the home page, navigation page, and login page.

[0024] Furthermore, when analyzing resource dependencies, the analysis module of the device for improving the front-end first screen loading speed determines the dependency packages, CSS files, JavaScript files, and image resources required for each page.

[0025] Furthermore, the packaging and optimization module of the device for improving the front-end first screen loading speed processes the resource files using a packaging tool, including:

[0026] Package the resource files shared by the home page set into public resource files, compress and optimize the configuration to reduce the file size.

[0027] Package the resource files required for each home page to form a page-specific resource file.

[0028] Use Tree Shaking and image compression methods to reduce the size of image resources.

[0029] The benefits of the present invention are:

[0030] By defining a set of pages that could potentially be homepages and packaging and loading the resources for these pages separately, we achieved faster loading of the first screen on the front end. At the same time, we leveraged idle time to load other resources, enabling progressive loading of resources and further improving the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0032] Figure 1 It is a schematic flow chart of the method of the present invention. DETAILED DESCRIPTION

[0033] The present invention will be further described below with reference to the accompanying drawings and specific embodiments so that those skilled in the art can better understand the present invention and implement it. However, the embodiments are not intended to limit the present invention.

[0034] Example 1

[0035] The present invention provides a method for improving the loading speed of the front-end first screen, comprising:

[0036] Step 1: Define a homepage page set: Based on user access behavior analysis or business needs, define a set of pages that will serve as the homepage.

[0037] When defining a set of pages as the home page in step 1, the page set includes pages that are frequently visited by users, including the home page, navigation page, and login page.

[0038] Step 2: Analyze resource dependencies: Perform resource dependency analysis on each page in the home page set to determine the resources required for each page.

[0039] When analyzing resource dependencies, determine the dependency packages, CSS files, JavaScript files, and image resources required for each page.

[0040] Step 3: Pack and optimize resources according to the required resources: Use packaging tools to process resource files, including:

[0041] Package the resource files shared by the home page set into public resource files, compress and optimize the configuration to reduce the file size.

[0042] Package the resource files required for each home page to form a page-specific resource file.

[0043] Use Tree Shaking and image compression methods to reduce the size of image resources.

[0044] Step 4: Dynamically load resources: When a user accesses the system, the routing address is used to determine whether the accessed page matches the homepage set. If so, the public resource files and page-specific resource files required for dynamic requests are matched to avoid loading unnecessary files and non-homepage requests triggering lazy loading logic.

[0045] Step 5: Preload screen: Preload subsequent resources through the requestIdleCallback API method during process idle time.

[0046] Example 2

[0047] The present invention also provides a device for improving the loading speed of the front-end first screen, including a page management module, an analysis module, a packaging and optimization module, a resource loading module and a preloading module.

[0048] The page management module defines the home page set: based on user access behavior analysis or business needs, define a set of pages as the home page.

[0049] The analysis module analyzes resource dependencies: performs resource dependency analysis on each page in the home page set to determine the resources required for each page.

[0050] The packaging and optimization module packages and optimizes resources according to the required resources: uses packaging tools to process resource files,

[0051] The resource loading module dynamically loads resources: When a user accesses the system, it determines whether the accessed page matches the homepage set based on the routing address. If so, it matches the public resource files and page-specific resource files required for dynamic requests, avoiding loading unnecessary files and non-homepage requests triggering lazy loading logic.

[0052] Preload module preload screen: preload subsequent resources through the requestIdleCallback API method during process idle time.

[0053] Since the information interaction, execution process and other contents between the modules in the above-mentioned device are based on the same concept as the embodiment of the method of the present invention, the specific contents can be found in the description of the embodiment of the method of the present invention and will not be repeated here.

[0054] Similarly, the device of the present invention can improve the loading speed of the front-end first screen by defining a set of pages that may be the homepage and separately packaging and loading the resources of these pages. At the same time, it uses the idle time of the process to load other resources, realizing progressive loading of resources, further improving the user experience.

[0055] It should be noted that not all steps and modules in the above-mentioned processes and device structures are required, and certain steps or modules can be omitted according to actual needs. The execution order of each step is not fixed and can be adjusted as needed. The system structure described in the above-mentioned embodiments can be a physical structure or a logical structure, that is, some modules may be implemented by the same physical entity, or some modules may be implemented by multiple physical entities, or may be implemented by certain components in multiple independent devices.

[0056] The above embodiments are merely preferred embodiments for the purpose of fully illustrating the present invention, and the scope of protection of the present invention is not limited thereto. Equivalent substitutions or modifications made by those skilled in the art based on the present invention are within the scope of protection of the present invention. The scope of protection of the present invention shall be subject to the claims.

Claims

1. A method for improving the loading speed of the front-end first screen, characterized by include: Step 1: Define the home page set: Based on user access behavior analysis or business needs, define a set of pages as the home page. Step 2: Analyze resource dependencies: Perform resource dependency analysis on each page in the home page set to determine the resources required for each page. Step 3: Pack and optimize resources according to the required resources: Use packaging tools to process resource files. Step 4: Dynamically load resources: When a user accesses the system, the routing address is used to determine whether the accessed page matches the homepage set. If so, the public resource files and page-specific resource files required for dynamic requests are matched to avoid loading unnecessary files and non-homepage requests triggering lazy loading logic. Step 5: Preload screen: Preload subsequent resources through the requestIdleCallback API method during process idle time.

2. A method for improving the loading speed of the front-end first screen according to claim 1, characterized in that When defining a set of pages as the home page in step 1, the page set includes pages that users visit more frequently, including the home page, navigation page, and login page.

3. A method for improving the loading speed of the front-end first screen according to claim 1, characterized in that When analyzing resource dependencies in step 2, determine the dependency packages, CSS files, JavaScript files, and image resources required for each page.

4. A method for improving the loading speed of the front-end first screen according to claim 1, characterized in that In step 3, the resource files are processed using a packaging tool, including: Package the resource files shared by the home page set into public resource files, compress and optimize the configuration to reduce the file size. Package the resource files required for each home page to form a page-specific resource file. Use Tree Shaking and image compression methods to reduce the size of image resources.

5. A device for improving the loading speed of the front-end first screen, characterized by Including page management module, analysis module, packaging and optimization module, resource loading module and preloading module, The page management module defines the home page set: based on user access behavior analysis or business needs, define a set of pages as the home page. The analysis module analyzes resource dependencies: performs resource dependency analysis on each page in the home page set to determine the resources required for each page. The packaging and optimization module packages and optimizes resources according to the required resources: uses packaging tools to process resource files, The resource loading module dynamically loads resources: When a user accesses the system, it determines whether the accessed page matches the homepage set based on the routing address. If so, it matches the public resource files and page-specific resource files required for dynamic requests, avoiding loading unnecessary files and non-homepage requests triggering lazy loading logic. Preload module preload screen: preload subsequent resources through the requestIdleCallback API method during process idle time.

6. The device for improving the loading speed of the front-end first screen according to claim 5 is characterized in that When the page management module defines a set of pages as the home page, the page set includes pages that users visit more frequently, including the home page, navigation page, and login page.

7. The device for improving the loading speed of the front-end first screen according to claim 5 is characterized in that When analyzing resource dependencies, the analysis module determines the dependency packages, CSS files, JavaScript files, and image resources required for each page.

8. The device for improving the loading speed of the front-end first screen according to claim 5 is characterized in that The packaging and optimization module uses packaging tools to process resource files, including: Package the resource files shared by the home page set into public resource files, compress and optimize the configuration to reduce the file size. Package the resource files required for each home page to form a page-specific resource file. Use Tree Shaking and image compression methods to reduce the size of image resources.

Images