Method and device for increasing loading speed of single-page application, electronic equipment and readable storage medium

Abstract

The invention relates to a method and device for increasing the loading speed of a single-page application, electronic equipment and a readable storage medium. The method comprises the steps that a preload component cache queue is created to store preload component instances; initializing a preloaded component instance, creating a webview control, and loading a front-end single page application URL (Uniform Resource Locator); loading a common static resource through the control, loading the common static resource into a memory, preloading a front-end empty routing page, and adding an initialized preloading component into a cache queue; obtaining an initialized preload component from the cache queue, loading a front-end function page routing static resource, and calculating and executing a function page static resource; and obtaining the preload component from the cache queue, judging whether the queue has residual preload component instances or not, if not, starting a background thread, creating the preload component, and inserting the preload component into the cache queue. According to the method, script execution calculation time and page second-out are saved, time-consuming operation of component recreation can be avoided, page loading speed is increased, meanwhile, the method is suitable for various hybrid application architectures APPs, and universality is high.

Description

Technical Field

[0001] The present application relates to the field of software development technology, and in particular to the field of mobile terminal and front-end software development, and more particularly to a method, device, electronic device and readable storage medium for improving the loading speed of a single-page application. Background Art

[0002] In apps with hybrid application architectures, WebView components are usually used to load front-end single-page applications. The initialization of WebView components is time-consuming. When opening a single-page application through WebView, it is necessary to wait for resources such as JavaScript and CSS to be loaded before rendering the output page. Since loading resources will take time for network downloads, file reading, and script calculation execution, a white screen waiting time will occur when the home page is loaded, affecting the user experience.

[0003] At present, the common single-page application loading optimization methods mainly include code segmentation, resource lazy loading, caching strategy, skeleton screen, etc. However, the skeleton screen technology mainly improves the user's visual experience, and does not really improve the page loading speed, and the user cannot interact with the interface during the skeleton screen display; secondly, code segmentation and resource lazy loading technology only reduce the resource content loaded on the homepage, but for large enterprise-level applications, after code segmentation, the public resources loaded on the first screen are usually still very large, and the calculation and execution of these script resources will also take time. This technology only reduces the white screen waiting time and cannot completely solve the time-consuming problem; in addition, the resource caching strategy can reduce the network download time of front-end resources, but for hybrid architecture applications, it cannot solve the time-consuming initialization of native WebView components. Summary of the invention

[0004] The purpose of this application is to solve at least one of the above technical defects. The technical solution adopted by this application is as follows:

[0005] In a first aspect, an embodiment of the present application provides a method for improving the loading speed of a single-page application, the method comprising:

[0006] Step S1: creating a preload component cache queue, wherein the preload component cache queue is used to store preload component instances;

[0007] Step S2: Initialize any preloaded component instance, create a webview control, and load the front-end single-page application URL;

[0008] Step S3: load and execute public static resources through the webview control of the preload component, load the public static resources into the memory in advance, preload a front-end empty routing page, and add the initialized preload component to the cache queue for standby;

[0009] Step S4: obtaining an initialized preload component from the cache queue, loading the front-end function page routing-related static resources through the preload component, calculating and executing the function page static resources and rendering the page;

[0010] Step S5: Obtain the preloaded component from the cache queue, and determine whether there are any remaining preloaded component instances in the queue; if there are no remaining, start the background thread and repeat steps S2 and S3.

[0011] Optionally, in step S4, when the function page is closed, the function routing page in the preload component is synchronously closed, the relevant state of the front-end single-page application is reset, and initialized to an empty routing page;

[0012] Re-add the reset preloaded components to the cache queue.

[0013] Optionally, the step S3 further includes the following steps:

[0014] Step S301: Network request for single page application home page html file;

[0015] Step S302: Render the home page and display the skeleton screen, and parse the public static resources such as JavaScript and CSS that need to be loaded;

[0016] Step S303: The public static resources required by the network request are loaded through the cache if the cache strategy is hit;

[0017] Step S304: Render and execute the CSS file, and calculate and execute the JavaScript script.

[0018] Optionally, the step S4 also includes parsing the function page static resources to be loaded and the function static resources required by the network request according to the function routing.

[0019] In a second aspect, an embodiment of the present application provides a device for improving the loading speed of a single-page application, the device comprising: an initialization module, a loading module, an execution module and a judgment module, wherein:

[0020] Initialization module: used to create a preload component cache queue, which is used to store preload component instances; initialize any preload component instance, create a webview control, and load the front-end single-page application URL;

[0021] Loading module: used to load and execute public static resources through the webview control of the preload component, load the public static resources into the memory in advance, preload a front-end empty routing page, and add the initialized preload component to the cache queue for standby;

[0022] Execution module: used to obtain an initialized preload component from the cache queue, load the front-end function page routing related static resources through the preload component, calculate the execution function page static resources and render the page;

[0023] Judgment module: obtains the preloaded component from the cache queue, and determines whether there are any remaining preloaded component instances in the queue; if there are no remaining, starts the background thread, returns to the initialization module and the loading module and repeats the execution.

[0024] Optionally, in the execution module, when the function page is closed, the function routing page in the preload component is synchronously closed, the relevant state of the front-end single-page application is reset, and initialized to an empty routing page;

[0025] Re-add the reset preloaded components to the cache queue.

[0026] Optionally, the loading module is further used to:

[0027] The network requests the HTML file of the home page of the single-page application; renders the home page and displays the skeleton screen, and parses the public static resources such as JavaScript and CSS that need to be loaded; if the public static resources required by the network request hit the cache strategy, they are loaded through the cache, the CSS file is rendered and executed, and the JavaScript script is calculated and executed.

[0028] Optionally, the execution module is further used to parse out the function page static resources to be loaded and the function static resources required by the network request according to the function routing.

[0029] In a third aspect, an embodiment of the present invention provides an electronic device, including a processor and a memory;

[0030] The memory is used to store operation instructions;

[0031] The processor is used to execute the above method for improving the loading speed of a single-page application by calling the operation instruction.

[0032] In a fourth aspect, a computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method for improving the loading speed of a single-page application is implemented.

[0033] The solution for improving the loading speed of single-page applications disclosed in this application has the following beneficial effects:

[0034] (1) By preloading front-end resources, script resources are loaded into memory in advance, saving script execution calculation time and achieving page rendering in seconds.

[0035] (2) By cyclically reusing the created component resources and cached front-end resources, the time-consuming operation of re-creating components is avoided, thereby improving the page loading speed.

[0036] (3) It has stronger versatility and is suitable for all types of hybrid application architecture apps. Android, iOS, HarmonyOS, and Electron desktop applications can all use this solution to improve loading performance. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the following briefly introduces the drawings required for use in describing the embodiments of the present application.

[0038] Figure 1 A flow chart of a method for improving the loading speed of a single-page application provided in an embodiment of the present application;

[0039] Figure 2 A schematic diagram of the structure of a device for improving the loading speed of a single-page application provided in an embodiment of the present application;

[0040] Figure 3 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0041] The embodiments of the present application are described in detail below, and examples of the embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals throughout represent the same or similar elements or elements having the same or similar functions. The embodiments described below with reference to the accompanying drawings are exemplary and are only used to explain the present application, and cannot be interpreted as limiting the present application.

[0042] It will be understood by those skilled in the art that, unless otherwise stated, the singular forms "a", "an" and "the" used herein may also include plural forms. It should be further understood that the term "comprising" used in the specification of the present application refers to the presence of features, integers, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, integers, steps, operations, elements, components and / or groups thereof. The term "and / or" used herein includes all or any unit and all combinations of one or more associated listed items.

[0043] In order to make the objectives, technical solutions and advantages of the present application more clear, the specific implementation methods of the present application will be further described in detail below with reference to the accompanying drawings.

[0044] The core of the present invention is to provide a method for improving the loading speed of a single-page application. Figure 1 The figure is a flow chart of the method for improving the loading speed of a single-page application provided in this embodiment. In order to better understand the method, Figure 1 The technical solution of this embodiment is described in detail:

[0045] S1. Create a preload component cache queue, where the preload component cache queue is used to store preload component instances;

[0046] S2. Initialize any preloaded component instance, create a webview control, and load the front-end single-page application URL;

[0047] S3, through the webview control of the preload component, load and execute public static resources, load the public static resources into the memory in advance, preload a front-end empty routing page, and add the initialized preload component to the cache queue for standby;

[0048] S4, obtaining an initialized preload component from the cache queue, loading the front-end function page routing-related static resources through the preload component, calculating and executing the function page static resources and rendering the page;

[0049] S5. Obtain the preloaded component from the cache queue, and determine whether there are any remaining preloaded component instances in the queue; if there are no remaining, start the background thread and repeat S2 and S3.

[0050] In the embodiment S3 of the present application, the following sub-steps are also included:

[0051] S301: Network request for single page application home page html file;

[0052] S302: Render the home page and display the skeleton screen, and parse the public static resources such as JavaScript and CSS that need to be loaded;

[0053] S303: If the public static resources required by the network request match the cache policy, they are loaded through the cache;

[0054] S304: Render and execute the CSS file, and calculate and execute the JavaScript script.

[0055] In embodiment S4 of the present application, when the function page is closed, the function routing page in the preload component is closed synchronously, the relevant state of the front-end single-page application is reset, and initialized to an empty routing page, and the reset preload component is re-added to the cache queue.

[0056] Embodiment S4 of the present application also includes: parsing the function page static resources to be loaded and the function static resources required by the network request according to the function routing.

[0057] The method for improving the loading speed of a single-page application provided by the embodiment of the present application is to create a preload component cache queue to store preload component instances; initialize any preload component instance, create a webview control, and load the front-end single-page application URL; load and execute public static resources through the webview control, load the public static resources into the memory in advance, and preload a front-end empty routing page, and add the initialized preload component to the cache queue for standby; obtain an initialized preload component from the cache queue, load the front-end function page routing-related static resources, calculate and execute the function page static resources and render the page; obtain the preload component from the cache queue, and at the same time determine whether there are any remaining preload component instances in the queue. If not, start the background thread, create a preload component and insert it into the cache queue. It saves script execution calculation time, realizes page output in seconds, and can avoid time-consuming operations of component re-creation, improves page loading speed, and is suitable for various types of hybrid application architecture APPs, with strong versatility.

[0058] based on Figure 1 The embodiment shown provides a method for improving the loading speed of a single-page application. Figure 2 A device for improving the loading speed of a single-page application provided by an embodiment of the present application is shown. Figure 2 As shown, the device can mainly include: 201 initialization module, 202 loading module, 203 execution module and 204 judgment module, wherein:

[0059] Initialization module 201: used to create a preload component cache queue, the preload component cache queue is used to store preload component instances; initialize any preload component instance, create a webview control, and load the front-end single-page application URL;

[0060] Loading module 202: used to load and execute public static resources through the webview control of the preload component, load the public static resources into the memory in advance, preload a front-end empty routing page, and add the initialized preload component to the cache queue for standby;

[0061] Execution module 203: used to obtain an initialized preload component from the cache queue, load the front-end function page routing related static resources through the preload component, calculate the execution function page static resources and render the page;

[0062] Determination module 204: obtains the preloaded component from the cache queue, and determines whether there are any remaining preloaded component instances in the queue; if there are no remaining, starts the background thread, returns to the initialization module and the loading module and repeats the execution.

[0063] In the execution module 203, when the function page is closed, the function routing page in the preload component is closed synchronously, the relevant state of the front-end single-page application is reset, and initialized to an empty routing page; and the reset preload component is re-added to the cache queue.

[0064] In an embodiment of the present application, the loading module is also used to request the home page html file of a single-page application from the network; render the home page and display the skeleton screen, and parse public static resources such as JavaScript and CSS that need to be loaded; if the public static resources required by the network request hit the cache strategy, load them through the cache, render and execute the CSS file, and calculate and execute the JavaScript script.

[0065] In an embodiment of the present application, the execution module is also used to parse out the function page static resources to be loaded and the function static resources required by the network request according to the function routing.

[0066] It can be understood that the above modules of the device for improving the loading speed of a single-page application in this embodiment have the function of realizing Figure 1 The functions of the corresponding steps of the method in the embodiment shown in . The function can be implemented by hardware, or by hardware executing the corresponding software. The hardware or software includes one or more modules corresponding to the above functions. The above modules can be software and / or hardware, and the above modules can be implemented separately or integrated with multiple modules. For the functional description of the above modules, please refer to Figure 1 The corresponding description of the method in the embodiment shown in will not be repeated here.

[0067] The device for improving the loading speed of a single-page application provided by the embodiment of the present application creates a preload component cache queue to store preload component instances; initializes any preload component instance, creates a webview control, and loads the front-end single-page application URL; loads and executes public static resources through the webview control, loads the public static resources into the memory in advance, and preloads a front-end empty routing page, and adds the initialized preload component to the cache queue for standby; obtains an initialized preload component from the cache queue, loads the front-end function page routing-related static resources, calculates and executes the function page static resources and renders the page; obtains the preload component from the cache queue, and at the same time determines whether there are any remaining preload component instances in the queue, and if not, starts the background thread, creates a preload component and inserts it into the cache queue. It saves script execution calculation time, realizes page output in seconds, and can avoid time-consuming operations of component re-creation, improves page loading speed, and is suitable for various types of hybrid application architecture APPs, with strong versatility.

[0068] An embodiment of the present application provides an electronic device, including a processor and a memory;

[0069] A memory, used for storing operation instructions;

[0070] The processor is used to execute the method for improving the loading speed of a single-page application provided in any embodiment of the present application by calling an operation instruction.

[0071] As an example, Figure 3 A schematic diagram of the structure of an electronic device applicable to the embodiment of the present application is shown. Figure 3 As shown, the electronic device 2000 includes: a processor 2001 and a memory 2003. The processor 2001 and the memory 2003 are connected, such as through a bus 2002. Optionally, the electronic device 2000 may also include a transceiver 2004. It should be noted that in actual applications, the transceiver 2004 is not limited to one, and the structure of the electronic device 2000 does not constitute a limitation on the embodiments of the present application.

[0072] The processor 2001 is applied in the embodiment of the present application to implement the method shown in the above method embodiment. The transceiver 2004 may include a receiver and a transmitter. The transceiver 2004 is applied in the embodiment of the present application to implement the function of the electronic device of the embodiment of the present application communicating with other devices when executed.

[0073] Processor 2001 may be a CPU (Central Processing Unit), a general purpose processor, a DSP (Digital Signal Processor), an ASIC (Application Specific Integrated Circuit), an FPGA (Field Programmable Gate Array) or other programmable logic devices, transistor logic devices, hardware components or any combination thereof. It may implement or execute various exemplary logic blocks, modules and circuits described in conjunction with the disclosure of this application. Processor 2001 may also be a combination that implements computing functions, such as a combination of one or more microprocessors, a combination of a DSP and a microprocessor, etc.

[0074] The bus 2002 may include a path to transmit information between the above components. The bus 2002 may be a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus. The bus 2002 may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 3Only one thick line is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0075] The memory 2003 can be a ROM (Read Only Memory) or other types of static storage devices that can store static information and instructions, a RAM (Random Access Memory) or other types of dynamic storage devices that can store information and instructions, or an EEPROM (Electrically Erasable Programmable Read Only Memory), a CD-ROM (Compact Disc Read Only Memory) or other optical disk storage, optical disk storage (including compressed optical disk, laser disk, optical disk, digital versatile disk, Blu-ray disk, etc.), a magnetic disk storage medium or other magnetic storage device, or any other medium that can be used to carry or store the desired program code in the form of instructions or data structures and can be accessed by a computer, but is not limited to these.

[0076] Optionally, the memory 2003 is used to store application code for executing the solution of the present application, and the execution is controlled by the processor 2001. The processor 2001 is used to execute the application code stored in the memory 2003 to implement the method for improving the loading speed of a single-page application provided in any embodiment of the present application.

[0077] The electronic device provided in the embodiment of the present application is applicable to any embodiment of the above method and will not be described in detail here.

[0078] An embodiment of the present application provides a computer-readable storage medium having a computer program stored thereon. When the program is executed by a processor, the method for improving the loading speed of a single-page application shown in the above method embodiment is implemented.

[0079] The computer-readable storage medium provided in the embodiments of the present application is applicable to any embodiment of the above method and will not be described in detail here.

[0080] The electronic device for improving the loading speed of single-page applications provided by the embodiment of the present application creates a preload component cache queue to store preload component instances; initializes any preload component instance, creates a webview control, and loads the front-end single-page application URL; loads and executes public static resources through the webview control, loads the public static resources into the memory in advance, and preloads a front-end empty routing page, and adds the initialized preload component to the cache queue for standby; obtains an initialized preload component from the cache queue, loads the front-end function page routing-related static resources, calculates and executes the function page static resources and renders the page; obtains the preload component from the cache queue, and at the same time determines whether there are any remaining preload component instances in the queue, and if not, starts the background thread, creates a preload component and inserts it into the cache queue. It saves script execution calculation time, realizes page output in seconds, and can avoid time-consuming operations of component re-creation, improves page loading speed, and is suitable for various types of hybrid application architecture APPs, with strong versatility.

[0081] Through the description of the above implementation methods, technical personnel in the relevant field can understand that for the convenience and simplicity of description, only the division of the above-mentioned functional modules is used as an example. In actual applications, the above-mentioned functions can be assigned to different functional modules as needed, that is, the internal structure of the specific device can be divided into different functional modules to complete all or part of the functions described above.

[0082] Those of ordinary skill in the art will appreciate that the modules and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in terms of function in the above description. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0083] In several embodiments covered by the present application, it should be understood that the disclosed devices, equipment and methods can be implemented in other ways. For example, the division of modules is only a logical function division, and there may be other division methods in actual implementation, such as multiple modules or components can be combined or integrated into another device, or some features can be ignored or not executed. In addition, the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or modules, or it can be an electrical, mechanical or other form of connection.

[0084] The modules described as separate components may or may not be physically separated, and the components displayed as modules may or may not be physical modules, that is, they may be located in one place or distributed on multiple network modules. Some or all of the modules may be selected according to actual needs to achieve the purpose of the embodiments of the present application.

[0085] In addition, each functional module in each embodiment of the present application can be implemented in the form of hardware or in the form of software functional modules. If these functional modules are implemented in the form of software functional modules and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of the present application is essentially or part of the prior art that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a computer program product, which includes one or more computer instructions. When loading and executing computer program instructions on a computer, the process or function according to the embodiment of the present application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer program product is stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium, for example, a computer instruction can be transmitted from a website site, a computer, a server or a data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) mode to another website site, computer, server or data center. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or a data center that includes one or more available media integrations. The available media may be magnetic media (eg, floppy disks, hard disks, magnetic tapes), optical media (eg, DVDs), or semiconductor media (eg, solid state disks (SSDs)).

[0086] The above contents are merely examples and explanations of the structure of the present invention. The technicians in this technical field may make various modifications or additions to the specific embodiments described or replace them in a similar manner. As long as they do not deviate from the structure of the invention or exceed the scope defined by the claims, they should all fall within the protection scope of the present invention.

Claims

1. A method for improving the loading speed of a single-page application, characterized in that: The method comprises: Step S1: creating a preload component cache queue, wherein the preload component cache queue is used to store preload component instances; Step S2: Initialize any preloaded component instance, create a webview control, and load the front-end single-page application URL; Step S3: load and execute public static resources through the webview control of the preload component, load the public static resources into the memory in advance, preload a front-end empty routing page, and add the initialized preload component to the cache queue for standby; Step S4: obtaining an initialized preload component from the cache queue, loading the front-end function page routing-related static resources through the preload component, calculating and executing the function page static resources and rendering the page; Step S5: Obtain the preloaded component from the cache queue, and determine whether there are any remaining preloaded component instances in the queue; if there are no remaining, start the background thread and repeat steps S2 and S3.

2. The method for improving the loading speed of a single-page application according to claim 1, characterized in that: In step S4, when the function page is closed, the function routing page in the preload component is synchronously closed, the relevant state of the front-end single-page application is reset, and initialized to an empty routing page; Re-add the reset preloaded components to the cache queue.

3. The method for improving the loading speed of a single-page application according to claim 1, characterized in that: The step S3 also includes: Step S301: Network request for single page application home page html file; Step S302: Render the home page and display the skeleton screen, and parse the public static resources such as JavaScript and CSS that need to be loaded; Step S303: The public static resources required by the network request are loaded through the cache if the cache strategy is hit; Step S304: Render and execute the CSS file, and calculate and execute the JavaScript script.

4. The method for improving the loading speed of a single-page application according to claim 1, characterized in that: The step S4 also includes parsing the function page static resources to be loaded and the function static resources required by the network request according to the function routing.

5. A device for improving the loading speed of a single-page application, characterized in that: The device comprises: an initialization module, a loading module, an execution module and a judgment module, wherein: Initialization module: used to create a preload component cache queue, which is used to store preload component instances; initialize any preload component instance, create a webview control, and load the front-end single-page application URL; Loading module: used to load and execute public static resources through the webview control of the preload component, load the public static resources into the memory in advance, preload a front-end empty routing page, and add the initialized preload component to the cache queue for standby; Execution module: used to obtain an initialized preload component from the cache queue, load the front-end function page routing related static resources through the preload component, calculate the execution function page static resources and render the page; Judgment module: obtains the preloaded component from the cache queue, and determines whether there are any remaining preloaded component instances in the queue; if there are no remaining, starts the background thread, returns to the initialization module and the loading module and repeats the execution.

6. The device for improving the loading speed of a single-page application according to claim 5, characterized in that: In the execution module, when the function page is closed, the function routing page in the preload component is synchronously closed, the relevant state of the front-end single-page application is reset, and initialized to an empty routing page; Re-add the reset preloaded components to the cache queue.

7. The device for improving the loading speed of a single-page application according to claim 5, characterized in that: The loading module is also used to: The network requests the HTML file of the home page of the single-page application; renders the home page and displays the skeleton screen, and parses the public static resources such as JavaScript and CSS that need to be loaded; if the public static resources required by the network request hit the cache strategy, they are loaded through the cache, the CSS file is rendered and executed, and the JavaScript script is calculated and executed.

8. The device for improving the loading speed of a single-page application according to claim 5, characterized in that: The execution module is also used to parse out the function page static resources to be loaded and the function static resources required by the network request according to the function routing.

9. An electronic device, characterized in that: including a processor and a memory; The memory is used to store operation instructions; The processor is used to execute the method according to any one of claims 1 to 4 by calling the operation instruction.

10. A computer-readable storage medium, characterized in that: The storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 4 is implemented.

Images