A front-end webpage JS file loading method, system and storage medium
By splitting JS files into sub-files and loading them in parallel based on priority, the problem of excessive JS file loading latency is solved, resulting in faster loading speeds and improved business logic integrity.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- TEER ZHUOXIN TECH (BEIJING) CO LTD
- Filing Date
- 2023-08-04
- Publication Date
- 2026-05-29
Smart Images
Figure CN116992177B_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of data processing, specifically to a method, system, and storage medium for loading JS files for front-end web pages. Background Technology
[0002] When a user accesses a webpage, the browser needs to load the HTML, CSS, and JS files that make up the webpage before displaying the complete page. JS files are typically retrieved by sending data requests from the local machine to the server, a process that takes time. When the JS file includes network requests that interact with the server, the user needs to spend additional time retrieving the required content. However, in some special scenarios, the system needs to retrieve the data from the network requests in the JS file from the server within a very short time. If the traditional loading method is used, such as loading the corresponding JS file first and then triggering the network requests within the JS file to retrieve the data returned by the server, this will significantly increase the user's waiting time, especially when the network requests are time-consuming. Therefore, how to shorten the loading latency of JS files, especially when network requests are time-consuming, is a technical problem that urgently needs to be solved by those skilled in the art. Summary of the Invention
[0003] To address the aforementioned technical problems, the technical solution adopted in this application is: a method for loading JS files for front-end web pages, comprising the following steps:
[0004] S100: In response to receiving a front-end webpage access request sent by a user and needing to load at least one JS file, if the file loading delay corresponding to a JS file is greater than the first preset delay threshold, then S200 is executed.
[0005] S200, according to preset rules, split each JS file whose file loading delay is greater than the first preset delay threshold into M sub-JS files, where M≥1, and the value of M is related to the preset rules and the size of the split JS file;
[0006] S300, retrieves the loading priority value for each sub-JS file;
[0007] S400 loads all child JS files in parallel according to their loading priority values from highest to lowest.
[0008] A JS file loading system for a front-end webpage includes a processor and a non-transitory computer-readable storage medium for storing at least one instruction or at least one program segment, wherein the processor loads and executes the at least one instruction or at least one program segment to implement the aforementioned JS file loading method for a front-end webpage.
[0009] A computer-readable storage medium storing a program or instructions that causes a computer to execute a JS file loading method for a front-end webpage as described above.
[0010] As described above, this application first splits time-consuming JS files into multiple sub-JS files according to preset rules, and obtains a loading priority value for each sub-JS file. Each sub-JS file has a size less than or equal to a preset data volume, and each sub-JS file's corresponding sub-functional module has complete business logic. Then, the sub-JS files are grouped according to their loading priority values, and further grouped based on the number of available threads in the local browser to execute each sub-JS file in parallel. This application, through splitting and parallel execution of JS files, can significantly reduce the loading latency of JS files. Furthermore, splitting the modules corresponding to JS files according to a preset data volume avoids damaging the integrity of business functions due to excessive splitting. Attached Figure Description
[0011] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0012] Figure 1 A flowchart illustrating the method for loading JS files for a front-end webpage provided in this application embodiment. Detailed Implementation
[0013] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.
[0014] This application provides a method for loading JS files for a front-end webpage, such as... Figure 1 As shown, it includes the following steps:
[0015] S100: In response to receiving a front-end webpage access request sent by a user and needing to load at least one JS file, if the file loading delay corresponding to a JS file is greater than the first preset delay threshold, then S200 is executed.
[0016] Those skilled in the art will recognize that there are various ways for a user to send a front-end webpage access request, such as entering a target URL in a browser or clicking an access link. This application does not specifically limit the method by which a user sends a front-end webpage access request; any method in the prior art is included in this application. The JS file mentioned can be the entire JS file of the target webpage corresponding to the target URL entered by the user, or it can be the JS file corresponding to a network link in the webpage.
[0017] In one embodiment, a file loading delay lookup table is used to determine whether the file loading delay of the corresponding JS file is greater than a first preset delay threshold. The file loading delay lookup table stores each JS file and its corresponding file loading delay.
[0018] In a preferred embodiment, when the JS file includes network requests, the preset file loading latency lookup table also stores each network request corresponding to the JS file and its latency. Preferably, the network requests are at least divided into a first type of network request and a second type of network request, wherein the first type of network request is a network request that needs to be executed immediately and consumes a lot of time, and the second type of network request is a network request that does not need to be executed immediately or consumes less time.
[0019] S200: According to preset rules, each JS file whose file loading delay is greater than the first preset delay threshold is split into M sub-JS files, where M≥1, and the value of M is related to the preset rules and the size of the split JS file.
[0020] Specifically, in this application, for a JS file whose file loading latency is greater than a first preset latency threshold, if the JS file includes a network request, the total functional module corresponding to the JS file is split into M sub-modules and a sub-JS file corresponding to each sub-module. Each sub-module includes at least one network request and has complete business logic functions, and the size of each sub-JS file is ≤ a preset sub-file size threshold.
[0021] For a JS file whose file loading latency is greater than the first preset latency threshold, if the JS file does not include network requests, the total functional module corresponding to the JS file is split into M sub-modules and sub-JS files corresponding to each sub-module. Each sub-module has complete business logic functions, and the size of each sub-JS file is less than or equal to the preset sub-file size threshold.
[0022] Furthermore, the preset sub-file size threshold is defined as (T0*NT0*B0*P0) / (1+F0), where T0 represents the maximum tolerable file loading latency for the user, NT0 is the average network bandwidth required for JS file loading, B0 represents the browser category of the mobile terminal displaying the front-end webpage (e.g., browser performance), P0 represents the time period during JS file loading (e.g., peak network usage, off-peak network usage), and F0 represents the network connection stability during JS file loading. The value range of B0 is (0,1), with a larger B0 value for better browser performance. The value range of P0 is (0,1), with a larger P0 value for off-peak network usage and a smaller P0 value for peak network usage. The value range of F0 is (0,1), with a smaller F0 value for more stable network connections and a larger F0 value for less stable network connections. In one embodiment, the preset sub-file size threshold ranges from [100KB, 500KB], preferably from [100KB, 200KB]. Experimental calculations show that when the preset sub-file size threshold ranges from [100KB, 500KB], the integrity of the split business logic can be ensured, and the display speed of the front-end webpage can be significantly improved. The time consumed is shortest when the threshold is within the range of [100KB, 200KB].
[0023] In this step, the splitting is limited by two aspects: the preset sub-file size threshold and the integrity of business logic functions. This can prevent the implementation of business logic from being damaged by excessive splitting.
[0024] S300, obtain the loading priority value corresponding to each sub-JS file. Specifically, in this application, the loading priority value corresponding to each sub-JS file can be obtained through a preset sub-JS file priority value mapping table. In a preferred embodiment of this application, when the JS file contains network requests, the loading priority value corresponding to each sub-JS file can be obtained in the following way:
[0025] S301, each sub-JS file is used as the target input data of the priority value acquisition function to obtain the loading priority value corresponding to each sub-JS file;
[0026] The priority value acquisition function includes the following steps:
[0027] S001, Obtain the network request vector P = (P1, P2, ..., P...) for the target input data. i ,...,P N Network request data vector D = (D1, D2, ..., D) i ,...,D N) The network request time-consuming vector ST = (ST1, ST2,..., ST i ,..., ST N ) and the target input data size parameter SZ. Among them, the i-th network request P included in the target input data i = 1, 1 ≤ i ≤ N, where N is the total number of network requests included in the target input data, and D i is the size of the data obtained by the i-th network request P i from the server. For example, when a picture needs to be obtained from the server, the data volume corresponding to the picture is D i , and when the character "yes" needs to be obtained from the server, the data volume corresponding to the character "yes" is D i ; ST i is the time consumed by the i-th network request P i to obtain data from the server. For example, the absolute value of the time difference between the trigger time of a network request and the time of receiving the data returned by the server. SZ is the standard data used to represent the size of the target input data. In order to compare data fully and accurately, the data representation method is unified in units, which can eliminate the calculation error caused by different measurement units.
[0028] S002. Based on the network request vector P, the network request data vector D, and the network request time-consuming vector ST, obtain the network request parameter PA, the network request data parameter DA, and the network request time-consuming STA of the target input data. Among them, PA = (P1 + P2 +... + P i +... + P N ) / N, DA = (D1 + D2 +... + D i +... + D N ) / N, STA = (ST1 + ST2 +... + ST i +... + ST N ) / N.
[0029] S003. Obtain the loading priority value of the target input data = α1 * PA + α2 * DA + α3 * STA + α4 * SZ, where α1, α2, α3, and α4 are preset weight values. Specifically, the values of α1, α2, α3, and α4 can be obtained based on historical data and can be adjusted by combining multiple historical data on the basis of preset data. In a preferred embodiment, α1 + α2 + α3 + α4 = 1.
[0030] S400. Parallelly load all sub-JS files in descending order of the loading priority value. Specifically, in an embodiment of the present application, parallelly loading all sub-JS files in descending order of the loading priority value includes:
[0031] S401, Sort all sub-JS files in descending order of loading priority to obtain a sorted list of sub-JS files W = (W1, W2, ..., W...). j ,...,W Q ), where W j Let W be the j-th sub-JS file, and Q be the number of all sub-JS files, where 1 ≤ j ≤ Q. That is, when k < j, W... k ≥W j , 1≤k≤Q.
[0032] S402, based on the number of available threads C of the mobile terminal browser used to render the front-end webpage, W is grouped from front to back according to C data items as a group;
[0033] S403, according to the order in which the groups are obtained, use the available threads in the mobile terminal browser to execute the sub-JS files corresponding to the loading priority values in each group in parallel. Among them, one thread is used to execute one sub-JS file corresponding to the loading priority value in a group.
[0034] In another embodiment of this application, all sub-JS files are loaded in parallel according to their loading priority values from largest to smallest, including:
[0035] S404, obtain all sub-JS files corresponding to each JS file whose file loading delay is greater than the first preset delay threshold; wherein, the correspondence between the JS file and its corresponding sub-JS file can be saved when splitting the JS file.
[0036] S405. Based on the load priority value of the sub-JS files, sort the sub-JS files belonging to the same JS file in descending order of load priority value. For example, if there are two JS files that need to be split, and each JS file has three sub-JS files, then sort the three sub-JS files belonging to the first JS file according to their load priority value, and sort the three sub-JS files belonging to the second JS file according to their load priority value.
[0037] S406, utilizing the C available threads of the mobile terminal browser displaying the front-end webpage, the sub-JS files corresponding to different JS files are loaded sequentially and in parallel. Continuing the previous example, when C=2, the two threads respectively load the first sub-JS file corresponding to the first JS file, the first sub-JS file corresponding to the second JS file, and so on. When C>2, the sub-JS files corresponding to different JS files can be loaded sequentially and in parallel according to a preset loading order.
[0038] In summary, this application first splits time-consuming JS files into multiple sub-JS files according to preset rules, and obtains a loading priority value for each sub-JS file. Each sub-JS file has a size less than or equal to a preset data volume, and each sub-JS file's corresponding sub-functional module has complete business logic. Then, the sub-JS files are grouped according to their loading priority values, and further grouped based on the number of available threads in the local browser to execute each sub-JS file in parallel. This application significantly reduces the loading latency of JS files through splitting and parallel execution. Furthermore, splitting the modules corresponding to JS files according to a preset data volume avoids damaging the integrity of business functions due to excessive splitting.
[0039] This application also provides a JS file loading system for a front-end webpage. The system includes a processor and a non-transitory computer-readable storage medium for storing at least one instruction or at least one program. The processor loads and executes the at least one instruction or at least one program in accordance with the JS file loading method for a front-end webpage disclosed in any of the foregoing embodiments.
[0040] Another embodiment of this application discloses a computer-readable storage medium that stores a program or instructions that cause a computer to perform the methods provided in the above embodiments.
[0041] Embodiments of this application also provide an electronic device, including a processor and the aforementioned non-transitory computer-readable storage medium.
[0042] Embodiments of this application also provide a computer program product including program code, which, when the program product is run on an electronic device, causes the electronic device to perform the steps of the methods described above according to various exemplary embodiments of this application.
[0043] While specific embodiments of this application have been described in detail by way of examples, those skilled in the art should understand that the examples are for illustrative purposes only and not intended to limit the scope of this application. Those skilled in the art should also understand that various modifications can be made to the embodiments without departing from the scope and spirit of this application. The scope of this application is defined by the appended claims.
Claims
1. A method for loading JS files in a front-end webpage, characterized in that, Includes the following steps: S100: In response to receiving a front-end webpage access request sent by a user and needing to load at least one JS file, if the file loading delay corresponding to a JS file is greater than the first preset delay threshold, then S200 is executed. S200, according to preset rules, each JS file whose file loading latency is greater than a first preset latency threshold is split into M sub-JS files, where M≥1, and the value of M is related to the preset rules and the size of the split JS files; the preset sub-file size threshold = (T0*NT0*B0*P0) / (1+F0), where T0 represents the maximum file loading latency that the user can tolerate, NT0 is the average network bandwidth required to load the JS file, B0 represents the browser category factor of the mobile terminal that presents the front-end webpage, the category is divided according to browser performance, P0 represents the time period factor when the JS file is loaded, the time period is either peak network usage period or low network usage period, F0 is the network connection stability factor when the JS file is loaded, the value range of B0 is (0,1), the value range of P0 is (0,1), and the value range of F0 is (0,1). S300 retrieves the loading priority value for each sub-JS file; S300 specifically includes: S301, each sub-JS file is used as the target input data of the priority value acquisition function to obtain the loading priority value corresponding to each sub-JS file; The priority value acquisition function includes the following steps: S001, Obtain the network request vector P = (P1, P2, ..., P...) for the target input data. i ,...,P N Network request data vector D = (D1, D2, ..., D...) i ,...,D N Network request time vector ST = (ST1, ST2, ..., ST) i ,...,ST N The target input data size parameter SZ; where the target input data includes the i-th network request P. i =1, 1≤i≤N, where N is the total number of network requests included in the target input data, D i For the i-th network request P i The amount of data retrieved from the server, ST i For the i-th network request P i The time consumed to retrieve data from the server; SZ is a standard data used to represent the size of the target input data; unifying the units of data representation can eliminate calculation errors caused by different units of measurement; S002, based on the network request vector P, network request data vector D, and network request time vector ST, obtain the network request parameters PA, network request data parameters DA, and network request time STA of the target input data, where PA = (P1 + P2 + ... + P i +...+P N ) / N, DA=(D1+D2+...+D i +...+D N ) / N, STA=(ST1+ST2+...+ST i +...+ST N ) / N; S003, Obtain the loading priority value of the target input data = α1*PA+α2*DA+α3*STA+α4*SZ, where α1, α2, α3, and α4 are preset weight values; S400 loads all child JS files in parallel according to their loading priority values from highest to lowest.
2. The method for loading JS files for a front-end webpage according to claim 1, characterized in that, In S100, based on a preset file loading delay lookup table, it is determined whether the file loading delay corresponding to the JS file is greater than a first preset delay threshold. The file loading delay lookup table stores each JS file and its corresponding file loading delay.
3. The method for loading JS files for a front-end webpage according to claim 1, characterized in that, S200 specifically includes: For a JS file whose file loading latency is greater than the first preset latency threshold, if the JS file contains network requests, the total functional module corresponding to the JS file is split into M sub-modules and sub-JS files corresponding to each sub-module. Each sub-module contains at least one network request and has complete business logic functions. The size of each sub-JS file is ≤ the preset sub-file size threshold.
4. The method for loading JS files for a front-end webpage according to claim 3, characterized in that, The S200 also includes: For a JS file whose file loading latency is greater than the first preset latency threshold, if the JS file does not include network requests, the total functional module corresponding to the JS file is split into M sub-modules and sub-JS files corresponding to each sub-module. Each sub-module has complete business logic functions, and the size of each sub-JS file is ≤ the preset sub-file size threshold.
5. The method for loading JS files for a front-end webpage according to claim 3 or 4, characterized in that, The preset subfile size threshold ranges from [100KB, 500KB].
6. The method for loading JS files for a front-end webpage according to claim 1, characterized in that, All child JS files are loaded in parallel according to their loading priority values from highest to lowest, including: S401, Sort all sub-JS files in descending order of loading priority to obtain a sorted list of sub-JS files W = (W1, W2, ..., W...). j ,...,W Q ), where W j Let J be the j-th sub-JS file, and Q be the number of all sub-JS files, where 1 ≤ j ≤ Q; S402, based on the number of available threads C of the mobile terminal browser used to render the front-end webpage, W is grouped from front to back according to C data items as a group; S403, according to the order in which the groups are obtained, use the available threads in the mobile terminal browser to execute the sub-JS files corresponding to the loading priority values in each group in parallel. Among them, one thread is used to execute one sub-JS file corresponding to the loading priority value in a group.
7. A JS file loading system for a front-end webpage, the system comprising a processor and a non-transitory computer-readable storage medium for storing at least one instruction or at least one program segment, characterized in that, The processor loads and executes the at least one instruction or at least one program segment to implement the JS file loading method for the front-end webpage as described in any one of claims 1-6.
8. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a program or instructions that cause a computer to execute the JS file loading method for a front-end webpage as described in any one of claims 1 to 6.