Method and system for automatically analyzing single-page application static resources and preloading

Abstract

The application relates to a method and system for automatically analyzing and preloading static resources of a single-page application, comprising the following steps: step S110, obtaining an HTML file corresponding to a single-page application from a server; step S130, parsing external dependencies of the HTML file corresponding to the single-page application and obtaining the content; step S140, analyzing static resources required for rendering a current interface of the single-page application and downloading the required static resources into a static resource pool; step S150, rendering the current interface of the single-page application through a client browser; and step S160, displaying the current interface of the single-page application. Through the above method and system, static resources such as CSS, JavaScript, pictures, videos and audio used by the single-page application are analyzed by using a parsing script, and the static resources are preloaded according to customized rules, so that the user does not need to wait for resource loading when switching pages and other interactions, thereby improving the smooth experience of the user when browsing the page.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of Internet, in particular to a method, system, computer device and computer program product for automatically analyzing static resources of single-page WEB application and providing preloading to improve user experience. BACKGROUND

[0002] Single-page WEB application (SPA) is a special WEB application which loads a single HTML page and dynamically updates the page when the user interacts with the application. Since all activities are confined to one WEB page, only the corresponding HTML, JavaScript and CSS are loaded when the WEB page is initialized, and after the page is loaded, the page will not be reloaded or jumped according to user operation, but the HTML is dynamically transformed by JavaScript, for example, using div to switch display and hide, to realize UI display and transformation of user interaction.

[0003] Since the single-page WEB application dynamically replaces all contents in one page, all necessary codes (HTML, JavaScript and CSS) are usually loaded at the beginning. Specifically, most single-page WEB applications use MVVM, virtual DOM and other technical solutions, and all contents of the page are presented after the JavaScript file is parsed. Therefore, a lot of time is consumed when the WEB application content is initially loaded or when the route is switched, and a long white screen is generated during this period.

[0004] In order to solve the problem of long time consumption of initial loading of single-page WEB application, the existing technology also considers on-demand loading, that is, JavaScript and CSS are loaded uniformly when the page is initially loaded, different files are loaded according to different pages presented, and some pages can be loaded when needed, instead of loading all files at the beginning, and the JavaScript and CSS codes are combined and compressed to avoid slow first screen loading.

[0005] However, with the development of network technology, in order to improve the display effect, the single-page WEB application now contains more and more information such as images, animations, layouts and navigation, which leads to more and more data to be loaded in the display process of the single-page WEB application, and the loading time is longer, and the user waiting time is longer. Even if certain optimization means have been adopted, white screen flicker may still occur in the application during initial loading or route switching, resulting in poor user experience. SUMMARY

[0006] To solve the above technical problems, the application provides a technology for automatically analyzing single-page WEB application static resources and providing preloading and resource loading monitoring, which comprises the following steps:

[0007] In step S110, a server end is requested to obtain an HTML file corresponding to a single-page application.

[0008] In step S130, external dependencies of the HTML file corresponding to the single-page application are parsed, and the contents thereof are obtained.

[0009] In step S140, static resources required for rendering a current interface of the single-page application are analyzed, and the static resources are downloaded into a static resource pool.

[0010] In step S150, the current interface of the single-page application is rendered through a client browser.

[0011] In step S160, the current interface of the single-page application is displayed.

[0012] The step S140 specifically comprises the following steps.

[0013] In step S1410, a parsing script for analyzing a display interface required for rendering the single-page application is started.

[0014] In step S1420, the parsing script analyzes all URL paths included in the HTML file corresponding to the single-page application and external dependency contents thereof.

[0015] In step S1430, it is determined whether the resource type corresponding to the URL path obtained in step S1420 is a static resource.

[0016] In step S1440, the URL path corresponding to each static resource and the type thereof are pushed into a static resource pool.

[0017] In step S1450, the static resource pool downloads the static resource corresponding to the URL path pushed into the static resource pool through a download thread and downloads the static resource into the static resource pool.

[0018] In the above technical solution, the step S130 further comprises a step S120 of starting a display loading animation on a client display interface. Correspondingly, the step S160 further comprises removing the loading animation displayed in step S120 to display the current interface of the single-page application.

[0019] In the above technical solution, the single-page application further comprises a step S170 of performing the same method as the above steps S140 and S150 to render a display interface required for the single-page application and display the display interface required for the single-page application after rendering is completed when switching the interface display during the interaction with the user.

[0020] The application also provides a system for automatically analyzing and preloading static resources of a single-page application, comprising:

[0021] an HTML file obtaining module for obtaining an HTML file corresponding to the single-page application from a server end;

[0022] an external dependency obtaining module for parsing external dependencies of the HTML file corresponding to the single-page application and obtaining contents thereof;

[0023] a static resource obtaining module for analyzing static resources required for rendering a current interface of the single-page application and downloading the required static resources into a static resource pool;

[0024] an interface rendering module for rendering the current interface of the single-page application through a client browser;

[0025] an interface display module for displaying the current interface of the single-page application;

[0026] The static resource obtaining module specifically comprises:

[0027] a starting analysis script module for starting an analysis script for analyzing a display interface required for the single-page application;

[0028] a URL path analyzing module for analyzing all URL paths included in the HTML file corresponding to the single-page application and contents of external dependencies thereof by the analysis script;

[0029] a resource type analyzing module for judging whether a resource type corresponding to the URL paths obtained by the URL path analyzing module is static resources;

[0030] a static resource pool module for pushing the URL paths and types of each static resource into a static resource pool;

[0031] a static resource downloading module for downloading the static resources corresponding to the URL paths pushed into the static resource pool into the static resource pool through a downloading thread.

[0032] In the above technical solution, a loading animation drawing module is further included for starting to display a loading animation on a client display interface; correspondingly, in the interface display module, the loading animation displayed by the loading animation drawing module is removed.

[0033] In the above technical solution, an interface switching display module is further included, which, in the process of interacting with a user, performs the same functions as the static resource obtaining module and the interface rendering module to render a display interface required for the single-page application and display the display interface after the rendering is completed when switching the interface.

[0034] In the above technical solution, the static resources include one or more of the style files, script files, image files, audio files, and video files required for rendering and displaying the web page interface.

[0035] The present invention achieves the following technical effects:

[0036] By adding a loading animation to the homepage HTML file and analyzing the static resource links of the current single-page web application project, and then dynamically requesting the resource after obtaining the static resource link, the single-page web application can be made smoother and the user experience can be improved by reducing the time spent on route switching, asynchronous loading scripts, lazy loading white screen or waiting time. Attached Figure Description

[0037] Figure 1 This is a system framework diagram of the present invention.

[0038] Figure 2 The present invention provides a method and steps for automatically analyzing static resources of single-page web applications and providing pre-loading.

[0039] Figure 3 This diagram illustrates the steps of a method for rendering static resources required for downloading a page in this invention. Detailed Implementation

[0040] To facilitate understanding and implementation of the present invention by those skilled in the art, the present invention will be further described in detail below with reference to the accompanying drawings and specific embodiments.

[0041] like Figure 1 As shown, this invention provides a method for automatically analyzing and preloading static resources in a single-page web application, comprising the following steps:

[0042] Step S110: Request the HTML file corresponding to the single-page application from the server.

[0043] Step S120: Start displaying the loading animation (i.e., the Loading screen) on the client display interface.

[0044] The loading animation includes, but is not limited to, text, images, animations, videos displayed on the client's interface, and one or more of the music, sound effects, and voice output through the client's audio device. One or more of the resources required to display the loading animation, such as images, text, animations, videos, music, sound effects, and voice, can be pre-stored locally on the client, or obtained from the server after requesting the HTML file corresponding to the single-page application in step S1000.

[0045] The skilled in the art knows that if all the resources required for displaying the loading animation are stored in the local client, the loading animation can be displayed on the client interface before the HTML file corresponding to the single-page application is requested from the server.

[0046] In step S130, the external dependencies of the HTML file corresponding to the single-page application are parsed and the contents thereof are obtained.

[0047] The external dependencies of the HTML file refer to the contents of the external HTML files / pages introduced in the HTML file / page corresponding to the single-page application.

[0048] In step S140, the static resources required for rendering the current interface of the single-page application are analyzed, and the static resources are downloaded into the static resource pool.

[0049] In step S150, the current interface of the single-page application is rendered by the client browser.

[0050] The client browser includes the browser engine of the client and can be any existing browser or browser engine. Alternatively, the resources downloaded in step S140 are sent to the cache of the client browser or browser engine, and the single-page application is rendered by the client browser or browser engine so as to display the current interface of the single-page application on the client. When the current interface of the single-page application is rendered, the required static resources are called from the static resource pool to the browser cache.

[0051] In step S160, the loading animation displayed in step S120 is removed to display the current interface of the single-page application.

[0052] Alternatively, the above method can not include step S120, and correspondingly, the loading animation is not removed in step S160, and after the rendering in step S150 is completed, the current interface of the single-page application is displayed by step S160.

[0053] Alternatively, the method further includes step S170, in which the single-page application displays the interface during the interaction with the user, executes the same method as steps S140 and S150 to render the display interface required by the single-page application, and displays the display interface required by the single-page application after the rendering is completed.

[0054] Alternatively, step S170 further includes displaying a transition animation before executing the same method as steps S140 and S150, and displaying the display interface required by the single-page application after the rendering is completed and the displayed transition animation is removed.

[0055] The step S140 analyzes the static resources required for rendering the single-page application current interface and downloads the required static resources into the static resource pool, specifically including:

[0056] Step S1410, start analyzing the parsing script required for displaying the interface of the single-page application.

[0057] The parsing script can be any one or several of the script languages that can run on the client or in the client browser, such as JavaScript, VBScript, WML Script, etc.

[0058] Step S1420, the parsing script analyzes all URL paths included in the HTML file corresponding to the single-page application and its external dependent content.

[0059] Alternatively, by parsing the tags in the HTML, according to the type, name, content of each tag, and whether it includes a URL address to parse all the URL paths included, and the tag type and name corresponding to the URL path and other information.

[0060] Step S1430, determine the resource type corresponding to the URL path obtained in step S1420, if the resource type is static resource, then enter step S1440. The static resource includes but is not limited to one or more of the style file (CSS), script file (JS, JavaScript), picture file, audio file, and video file required for rendering and displaying the web interface.

[0061] Alternatively, the resource type corresponding to the URL path is determined by the tag type and name corresponding to the URL path and other information, and / or the resource type corresponding to the URL path is determined by the path information in the URL path, and / or the resource type corresponding to the URL path is determined by the file name information in the URL path.

[0062] Step S1440, push the URL path and its type corresponding to each static resource into the static resource pool.

[0063] Optionally, in step S1440, when pushing the URL path corresponding to the static resource and the type of the static resource into the static resource pool, the priority of each static resource is further determined according to the importance in interface rendering, and the static resource is pushed into the static resource pool. The importance or priority can be directly recorded in the tag of the HTML file setting the URL address; or embodied in the URL address; or determined by the parsing script, for example, when the static resource is required for rendering the current interface, the priority is high, and vice versa. For example, the priority of style files (CSS) and script files is higher than that of picture files, and the priority of picture files is higher than that of audio files and video files.

[0064] Optionally, in step S1440, when pushing the URL path corresponding to the static resource and the type of the static resource into the static resource pool, the aging time of each static resource is further determined according to the type of each static resource, and the static resource is pushed into the static resource pool. The aging time can be directly recorded in the tag of the HTML file setting the URL address; or embodied in the URL address; or determined by the parsing script.

[0065] In step S1450, the static resource pool downloads the static resource corresponding to the URL path pushed into the static resource pool to the static resource pool through the download thread.

[0066] Optionally, in step S1450, the download thread downloads the static resource corresponding to the URL path pushed into the static resource pool to the static resource pool according to the time sequence of the URL path.

[0067] Optionally, in step S1450, the download thread determines the sequence and / or bandwidth of downloading each static resource according to the priority of each static resource.

[0068] Optionally, in step S1450, the download thread determines whether to re-download each static resource according to the aging time of each static resource.

[0069] Optionally, in step S1450, the download thread repeatedly attempts to download a certain static resource after failing to obtain the static resource.

[0070] Correspondingly, the application provides a system for automatically analyzing static resources of a single-page WEB application and providing preloading, which comprises:

[0071] An HTML file acquisition module requests an HTML file corresponding to a single-page application from a server end.

[0072] A loading animation drawing module starts to display a loading animation (i.e. a Loading interface) on a client display interface.

[0073] The loading animation includes, but is not limited to, one or more of text, pictures, animations, videos presented on the client display interface, and music, sound effects, speech output through the client audio device. One or more of the resources required to display the loading animation, such as pictures, text, animations, videos, music, sound effects, and speech, can be pre-stored locally on the client, or requested from the server after the HTML file corresponding to the single-page application is requested from the server.

[0074] As known to those skilled in the art, if all the resources required to display the loading animation are pre-stored locally on the client, the loading animation can be started on the client display interface before the HTML file corresponding to the single-page application is requested from the server.

[0075] The external dependency obtaining module parses the external dependency of the HTML file corresponding to the single-page application and obtains the content thereof.

[0076] The external dependency of the HTML file refers to the content of the external HTML file / page introduced in the HTML file / page corresponding to the single-page application.

[0077] The static resource obtaining module analyzes the static resources required to render the current interface of the single-page application and downloads the required static resources into the static resource pool.

[0078] The interface rendering module renders the current interface of the single-page application through the client browser.

[0079] The client browser includes the browser engine of the client and can be any existing browser or browser engine. Optionally, the resources downloaded by the static resource obtaining module are sent to the cache of the client browser or browser engine, and the single-page application is rendered through the client browser or browser engine to display the current interface of the single-page application on the client. When rendering the current interface of the single-page application, the required static resources are called from the static resource pool to the browser cache.

[0080] The interface display module removes the loading animation displayed by the loading animation drawing module and displays the current interface of the single-page application.

[0081] Optionally, the loading animation drawing module can not be included in the above method, and correspondingly, the loading animation is not removed in the interface display module. After the rendering of the interface rendering module is completed, the current interface of the single-page application is displayed by the interface display module.

[0082] Optionally, further comprising an interface switching display module, in the process of interacting with the user, when switching the interface display, performing the same function as the static resource acquisition module and the interface rendering module to render the required display interface of the single-page application, and displaying the required display interface of the single-page application after rendering is completed.

[0083] Optionally, the interface switching display module further comprises displaying a transition animation before performing the same function as the static resource acquisition module and the interface rendering module, and displaying the required display interface of the single-page application after removing the displayed transition animation after rendering is completed.

[0084] The static resource acquisition module specifically comprises:

[0085] The starting analysis script module starts the analysis script for rendering the required display interface of the single-page application.

[0086] The analysis script can be any one or several of the script languages that can run on the client or in the client browser, such as JavaScript, VBScript, WML Script, etc.

[0087] The URL path analysis module analyzes all URL paths included in the HTML file corresponding to the single-page application and its external dependent content.

[0088] Optionally, all URL paths and the corresponding tag type and name information of the URL path are parsed by parsing the tags in the HTML according to the type, name, content of each tag, and whether the URL address is included.

[0089] The resource type analysis module determines the resource type corresponding to the URL path obtained in the URL path analysis module, i.e., whether the resource type is a static resource. The static resource includes but is not limited to one or more of the style file (CSS), script file (JS, JavaScript), picture file, audio file, and video file required for rendering and displaying the web interface.

[0090] Optionally, the resource type corresponding to the URL path is determined by the tag type and name information corresponding to the URL path, and / or the resource type corresponding to the URL path is determined by the path information in the URL path, and / or the resource type corresponding to the URL path is determined by the file name information in the URL path.

[0091] The static resource pool module pushes the URL path and its type corresponding to each static resource into the static resource pool.

[0092] Optionally, in step S1440, when the URL path corresponding to the static resource and the type thereof are pushed into the static resource pool, the priority of each static resource is further determined according to the importance in interface rendering, and the static resource is pushed into the static resource pool, the importance or priority can be directly recorded in the tag of the HTML file setting the URL address; or embodied in the URL address; or determined by the parsing script, for example, when the static resource is required for rendering the current interface, the priority is high, and vice versa, for example, the priority of the style file (CSS) and the script file is higher than that of the picture file, and the priority of the picture file is higher than that of the audio file and the video file.

[0093] Optionally, the static resource pool module, when the URL path corresponding to the static resource and the type thereof are pushed into the static resource pool, the aging time of each static resource is further determined according to the type of each static resource, and the static resource is pushed into the static resource pool, the aging time can be directly recorded in the tag of the HTML file setting the URL address; or embodied in the URL address; or determined by the parsing script.

[0094] The static resource downloading module downloads the static resource corresponding to the URL path pushed into the static resource pool to the static resource pool through the downloading thread.

[0095] Optionally, the static resource downloading module, the downloading thread downloads the static resource corresponding to the URL path pushed into the static resource pool to the static resource pool according to the time sequence of the URL path.

[0096] Optionally, the static resource downloading module, the downloading thread determines the downloading sequence and / or bandwidth of each static resource according to the priority of each static resource.

[0097] Optionally, the static resource downloading module, the downloading thread determines whether to re-download the static resource according to the aging time of each static resource.

[0098] Optionally, the static resource downloading module, the downloading thread attempts to re-download the static resource for multiple times after failing to obtain the static resource.

[0099] The application uses the parsing script to analyze the static resources such as CSS, JavaScript, pictures, videos and audio used by the single-page application, and preloads the static resources according to the customized rules to improve the smooth experience of the user when browsing the page without waiting for the resources to be loaded when switching the page and other interactions. The types of various static resources, and the corresponding downloading mode, priority, aging time, bandwidth proportion and the like can be configured and specified in the customized rules.

[0100] In order to achieve the above object, according to another aspect of the present application, there is further provided a computer device comprising a memory, a processor and a computer program stored in the memory and executable on the processor, wherein the processor implements the method steps of automatically analyzing single-page WEB application static resources and providing preloading when executing the computer program.

[0101] The processor can be a central processing unit (CPU). The processor can also be other general-purpose processors, a digital signal processor (DSP), an application specific integrated circuit (ASIC), a field-programmable gate array (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, or a combination thereof.

[0102] The memory is a non-transitory computer readable storage medium, which can be used to store non-transitory software programs, non-transitory computer executable programs and units, such as the corresponding program units in the above method embodiments of the present application. The processor executes various functions and work data processing of the processor by running the non-transitory software programs, instructions and modules stored in the memory, i.e. implements the method in the above method embodiments.

[0103] The memory can include a program storage area and a data storage area, wherein the program storage area can store an operating system and at least one application program required by a function; the data storage area can store data created by the processor and the like. In addition, the memory can include a high-speed random access memory, and can also include a non-transitory memory, such as at least one magnetic disk storage device, a flash memory device, or other non-transitory solid-state memory device. In some embodiments, the memory can optionally include a memory remotely arranged with respect to the processor, and these remote memories can be connected to the processor through a network. Examples of the above network include but are not limited to the Internet, an intranet, a local area network, a mobile communication network and a combination thereof.

[0104] The one or more units are stored in the memory and executed by the processor to implement the method in the above embodiments.

[0105] The above computer device specific details can be understood by referring to the corresponding related descriptions and effects in the above embodiments, which will not be described here.

[0106] To achieve the above object, according to another aspect of the present application, there is further provided a computer readable storage medium storing a computer program which, when executed in a computer processor, implements the steps in the above decentralized storage of personal health information. Those skilled in the art can understand that implementing all or part of the processes in the above embodiment methods can be accomplished by a computer program instructing relevant hardware, and the program can be stored in a computer readable storage medium, and when executed, can include the processes of the above embodiment methods. The storage medium can be a magnetic disk, an optical disk, a read-only memory (ROM), a random access memory (RAM), a flash memory, a hard disk drive (HDD) or a solid-state drive (SSD), etc., and can also include a combination of the above types of memories.

[0107] Obviously, those skilled in the art should understand that the above modules or steps of the present application can be implemented by general computing devices, which can be concentrated on a single computing device or distributed on a network composed of multiple computing devices, and optionally, they can be implemented by program codes executable by computing devices, so that they can be stored in storage devices and executed by computing devices, or they can be respectively manufactured into individual integrated circuit modules, or multiple modules or steps among them can be manufactured into a single integrated circuit module. Thus, the present application is not limited to any specific combination of hardware and software.

[0108] The above only describes the preferred embodiments of the present application and is not intended to limit the present application. Those skilled in the art can make various modifications and changes to the present application. Any modification, equivalent replacement, improvement, etc. within the concept and principles of the present application shall be included in the protection scope of the present application.

Claims

1. A method for automatically analyzing and preloading static resources of a single-page application, characterized in that The method comprises the steps of: In step S110, a server end is requested to obtain an HTML file corresponding to the single-page application; In step S130, external dependencies of the HTML file corresponding to the single-page application are parsed, and contents thereof are obtained, the external dependencies of the HTML file referring to contents of external HTML files introduced in the HTML file corresponding to the single-page application; In step S140, static resources required for rendering a current interface of the single-page application are analyzed, and the static resources are downloaded into a static resource pool; In step S150, the current interface of the single-page application is rendered through a client browser; In step S160, the current interface of the single-page application is displayed; The step S140 specifically comprises: In step S1410, a parsing script for analyzing a display interface required for rendering the single-page application is started; In step S1420, the parsing script analyzes all URL paths included in the HTML file corresponding to the single-page application and contents of external dependencies thereof; In step S1430, it is judged whether a resource type corresponding to the URL path obtained in step S1420 is a static resource; In step S1440, URL paths corresponding to respective static resources and types thereof are pushed into the static resource pool; In step S1450, the static resource pool downloads the static resources corresponding to the URL paths pushed into the static resource pool into the static resource pool through a download thread.

2. The method for automatically analyzing and preloading static resources of a single-page application of claim 1, wherein: The step S130 further comprises a step S120 of starting a display loading animation on a client display interface; correspondingly, the step S160 further comprises removing the loading animation displayed in step S120 to display the current interface of the single-page application.

3. The method for automatically analyzing and preloading static resources of a single-page application of any one of claims 1-2, wherein: The method further comprises a step S170, in which, in a process of interacting with a user, when an interface is switched to be displayed, the same method as that in steps S140 and S150 is executed to render a display interface required for the single-page application, and the display interface is displayed after rendering is completed.

4. The method for automatically analyzing and preloading static resources of a single-page application of any one of claims 1-2, wherein: The static resources comprise one or more of style files, script files, picture files, audio files and video files required for rendering and displaying a web interface.

5. A system for automatically analyzing and preloading static resources of a single-page application, characterized in that The method comprises the steps of: An HTML file obtaining module requests a server end to obtain an HTML file corresponding to the single-page application; An external dependency obtaining module parses external dependencies of the HTML file corresponding to the single-page application, and obtains contents thereof, the external dependencies of the HTML file referring to contents of external HTML files introduced in the HTML file corresponding to the single-page application; A static resource obtaining module analyzes static resources required for rendering a current interface of the single-page application, and downloads the static resources into a static resource pool; An interface rendering module renders the current interface of the single-page application through a client browser; An interface display module displays the current interface of the single-page application; The static resource obtaining module specifically comprises: A starting parsing script module starts a parsing script for analyzing a display interface required for rendering the single-page application; A URL path parsing module, the parsing script analyzes all URL paths included in the HTML file corresponding to the single-page application and contents of external dependencies thereof; The analysis resource type module judges whether the resource type corresponding to the URL path obtained in the URL path analysis module is a static resource; The static resource pool module pushes the URL path corresponding to each static resource and the type thereof into a static resource pool; The static resource download module downloads the static resource corresponding to the URL path pushed into the static resource pool to the static resource pool through a download thread.

6. The system for automatically analyzing and preloading static resources of a single-page application of claim 5, wherein: The loading animation drawing module is further included to start displaying a loading animation on the client display interface; correspondingly, the interface display module removes the loading animation displayed by the loading animation drawing module.

7. The system for automatically analyzing and preloading static resources of a single-page application of any one of claims 5-6, wherein: The interface switching display module is further included, which, in the process of interacting with the user, performs the same functions as the static resource acquisition module and the interface rendering module to render the display interface required by the single-page application and display the display interface required by the single-page application after the rendering is completed.

8. The system for automatically analyzing and preloading static resources of a single-page application of any one of claims 5-6, wherein: The static resource includes one or more of a style file, a script file, a picture file, an audio file and a video file required for rendering and displaying a webpage interface. 9.A computer device, comprising a memory and a processor, the memory is configured to store computer instructions, the computer instructions are configured to be called and executed by the processor; characterized in that, The processor executes the method of any one of claims 1-4 when calling the computer instructions stored in the memory.

10. A computer program readable storage medium having stored thereon computer instructions, wherein, The computer executes the method of any one of claims 1-4 when calling the stored computer instructions.

Images