Page loading method, device and system

Abstract

The invention relates to the technical field of internet, in particular to a page loading method, device and system, the method comprises the following steps: executing a pre-loading stage: creating a webpage view control by using a native application according to a page identifier sent by a front-end page, and loading page resources according to a first path sent by the front-end page; the execution jump stage comprises the steps that the webpage view control is called according to the page identification sent again by the front-end page, and an executable script file is generated based on a second path sent by the front-end page and a prefabricated script built in a local offline package; and injecting the executable script file into the webpage view control to execute the executable script file, and rendering based on the page resource to obtain a target single page. Therefore, the problems of long white screen time, flicker and the like when a single page is loaded in the prior art can be effectively solved.

Description

Technical Field

[0001] The present application relates to the field of Internet technology, and in particular to a page loading method, device and system. Background Art

[0002] In hybrid apps, it is often necessary to load h5 pages online. During the loading process, a series of initialization processes and actions such as webview initialization, resource loading, resource parsing, and resource rendering will occur, resulting in a long period of white screen on the page. Among them, webview is a web view control. Figure 1 As shown in the figure, the specific process of loading the h5 page includes webview initialization, establishing connection, receiving page, receiving style, rendering loading interface, script download parsing / execution, backend processing received data, rendering h5 page and displaying page. Among them, the webview initialization stage is in a non-feedback state, and the connection establishment stage to the script download parsing / execution stage is in a white screen state.

[0003] In the prior art, in order to reduce the time spent in the white screen state and the no feedback state, the following solutions are usually used: Create a new auxiliary webview in the hybrid app background in advance and load the preset auxiliary h5 page (the auxiliary h5 page takes up very little resources and loads quickly). When the real main page jumps, reload the main page according to the main webview to display the main h5 page.

[0004] However, this solution has the following disadvantages on the front-end H5 single-page application SPA: 1) When reloading the main page according to the main webview, the script parsing still needs to be re-parsed, resulting in a longer white screen time; 2) When the entry page (for example, home page, login page, registration page) has other displayed elements, flickering may occur when the page is opened.

[0005] Among them, SPA (Single Page Application) is a web application architecture model. Its core concept is to dynamically update content on only one page when a user interacts with the application, instead of loading a new page. Summary of the invention

[0006] In view of this, the embodiments of the present application provide a page loading method, device and system, which can effectively solve the problems of long white screen time and flickering when loading a single page in the prior art.

[0007] In a first aspect, an embodiment of the present application provides a page loading method, comprising: Executing the pre-loading phase includes: creating a web page view control using a native application according to a page identifier sent by the front-end page, and loading a page resource according to a first path sent by the front-end page; The execution jump phase includes: calling the web page view control according to the page identifier sent again by the front-end page, generating an executable script file based on the second path sent by the front-end page and the prefabricated script built into the local offline package; and injecting the executable script file into the web page view control to execute the executable script file and render the target single page based on the page resources.

[0008] In some embodiments, the prefabricated script is a prefabricated script template file; calling the webpage view control according to the page identifier sent again by the front-end page, and generating an executable script file based on the second path sent by the front-end page and the prefabricated script built into the local offline package, includes: Calling a preset jump method according to the front-end page, and passing the page identifier and the second path through the jump method; wherein the jump method is a method provided by the native application through the Jsbridge component; Obtaining the webpage view control according to the page identifier matching; The second path is used to replace the preset placeholder in the prefabricated script template file to obtain an executable script file.

[0009] In some embodiments, the executable script file is specifically used to: Determine whether to register the global routing method; If it is determined that the global routing method has been registered, then based on the second path, the page resource corresponding to the target single page is loaded through the first routing method preset in the global routing method; If it is determined that the global routing method is not registered, the page resource corresponding to the target single page is loaded through a second routing method based on the second path.

[0010] In some embodiments, the first routing method is a history routing method; and the second routing method is a hash routing method.

[0011] In some embodiments, the method further comprises at least one of the following: Item 1: reading the configuration file in the offline package when the single-page application is started; Calling a preload function according to the first path configured in the configuration file to enter the preload phase and execute; the preload function is a function method provided by the native application through Jsbridge; Item 2: During the operation of the single-page application, the preloading function is called in response to the completion of rendering of the current page to enter the preloading phase and execute.

[0012] In some embodiments, the method further includes: entering the jump phase in response to receiving a preset operation on the current page.

[0013] In some embodiments, creating a web page view control using a native application according to a page identifier sent by a front-end page, and loading a page resource according to a first path sent by the front-end page, include: Receiving a page identifier and a first path transmitted by the front-end page through a preset preloading function; Creating a corresponding web page view control using a native application according to the page identifier; preloading the network resource corresponding to the webpage view control according to the first path; Parsing the network resources to obtain the page resources; wherein the network resources include one or more combinations of HTML files, CSS files and JavaScript script files; A global routing method is registered as needed, and the global routing method is used to determine the routing mode for loading the page resource.

[0014] In some embodiments, the method further comprises: The execution detection phase includes: starting timing according to a preset resource loading duration when preloading the page resource; if the pre-download completion information of the page resource is not received before the timing ends, jumping to a preset loading timeout page to prompt reloading.

[0015] In a second aspect, an embodiment of the present application provides a page loading device, including: A preloading module, used to create a web page view control using a native application according to a page identifier sent by a front-end page, and to load page resources according to a first path sent by the front-end page; A jump module is used to call the web page view control according to the page identifier sent again by the front-end page, generate an executable script file based on the second path sent by the front-end page and the prefabricated script built into the local offline package; and inject the executable script file into the web page view control to execute the executable script file and render the target single page based on the page resources.

[0016] In a third aspect, an embodiment of the present application provides an application system, which includes a server and a client; a single-page application is installed on the client; the server is used to store network resources for each page; and the single-page application is used to execute a page loading method provided in the first aspect of the present application.

[0017] The embodiments of the present application have the following beneficial effects: The pre-loading stage executed in the present application includes: creating a web view control using a native application according to the page identifier sent by the front-end page, and loading page resources according to the first path sent by the front-end page; executing the jump stage includes: calling the web view control according to the page identifier sent again by the front-end page, generating an executable script file based on the second path sent by the front-end page and the prefabricated script built into the local offline package; and injecting the executable script file into the web view control to execute the executable script file and render the target single page based on the page resources. The initialization of the web view control webview, receiving page resources, etc. have been completed in the pre-loading stage of the present application. In the jump stage, only the second path needs to be used to generate an executable script file from the prefabricated script template file, and the target single page can be rendered according to the page resources, reducing the no feedback state and the white screen time. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the embodiments will be briefly introduced below. It should be understood that the following drawings only show certain embodiments of the present application and therefore should not be regarded as limiting the scope. For ordinary technicians in this field, other related drawings can be obtained based on these drawings without paying creative work.

[0019] Figure 1 A schematic diagram of a page loading process involved in an embodiment of the present application is shown; Figure 2 A structural block diagram of the application system of the embodiment of the present application is shown; Figure 3 A flow chart showing a page loading method according to an embodiment of the present application is shown; Figure 4 A flow chart showing the execution steps in the pre-loading phase of the page loading method in an embodiment of the present application is shown; Figure 5 A flow chart showing the execution steps of the jump phase in the page loading method of an embodiment of the present application is shown.

[0020] Description of main component symbols: 100-server; 200-client. DETAILED DESCRIPTION

[0021] The technical solutions in the embodiments of the present application will be described clearly and completely below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, rather than all of the embodiments.

[0022] The components of the embodiments of the present application generally described and shown in the drawings herein may be arranged and designed in various configurations. Therefore, the following detailed description of the embodiments of the present application provided in the drawings is not intended to limit the scope of the application claimed for protection, but merely represents the selected embodiments of the present application. Based on the embodiments of the present application, all other embodiments obtained by those skilled in the art without making creative work belong to the scope of protection of the present application.

[0023] Hereinafter, the terms "including", "having" and their cognates that can be used in various embodiments of the present application are intended only to indicate specific features, numbers, steps, operations, elements, components or a combination of the foregoing items, and should not be understood as first excluding the existence of one or more other features, numbers, steps, operations, elements, components or a combination of the foregoing items or increasing the possibility of one or more features, numbers, steps, operations, elements, components or a combination of the foregoing items. In addition, the terms "first", "second", "third" and the like are only used to distinguish descriptions and cannot be understood as indicating or implying relative importance.

[0024] Unless otherwise defined, all terms (including technical terms and scientific terms) used herein have the same meanings as those generally understood by those skilled in the art to which the various embodiments of the present application belong. The terms (such as those defined in generally used dictionaries) will be interpreted as having the same meanings as the contextual meanings in the relevant technical field and will not be interpreted as having idealized meanings or overly formal meanings unless clearly defined in the various embodiments of the present application.

[0025] In conjunction with the accompanying drawings, some embodiments of the present application are described in detail below. In the absence of conflict, the following embodiments and features in the embodiments can be combined with each other.

[0026] The present application provides an application system, which is exemplary as follows: Figure 2 As shown, the application system includes a server 100 and a client 200. The client 200 is installed with a single-page application program.

[0027] The server 100 is used to store network resources for each page. The network resources include html files, CSS files, javascript files, and pictures. The single-page application is used to execute the page loading method provided by this application. This application implements the page loading method of the embodiment of this application based on the native application Native.

[0028] Native refers to the native application part, which is written in native languages ​​(such as Java / Kotlin for Android, Swift / Objective-C for iOS) and is responsible for handling the core functions and underlying logic of the application. The main responsibilities of Native include but are not limited to: 1. UI control and management: build the basic interface of the application and handle user interaction. For example, WebView initialization: create a WebView instance and initialize it.

[0029] 2. Network management: handle network requests and data transmission, including cache management and data synchronization. For example, preloading and preprocessing, managing resource loading, including obtaining data from local or remote servers. For example, using the preloadUrl method, creating a WebView in advance and loading the specified page.

[0030] In the client's Hybrid App (single-page application), the native application Native and the front-end page (H5 page) can communicate through JSBridge (JavaScript bridge). JSBridge allows the H5 page to call the functions provided by Native, such as opening the camera, accessing the file system, etc. Similarly, the Native side can also call the interface provided by the H5 page through JSBridge. For example, when loading a page, the Native side can pass data to the H5 page or trigger certain events through JSBridge.

[0031] The page loading method is described below in conjunction with some specific embodiments.

[0032] Figure 3 A flow chart of a page loading method according to an embodiment of the present application is shown. Exemplarily, the page loading method is applicable to a single-page application program, and the page loading method includes: a pre-loading phase and a jump phase.

[0033] S100, executing a pre-loading phase, including: creating a web page view control using a native application according to a page identifier sent by a front-end page, and loading a page resource according to a first path sent by the front-end page.

[0034] In one embodiment, Figure 4As shown, creating a web page view control using a native application according to a page identifier sent by a front-end page, and loading a page resource according to a first path sent by the front-end page include: S110, receiving the page identifier and the first path transmitted by the front-end page through a preset pre-loading function. The front-end page is an H5 page file (ie, an html file of the previous page (currently displayed page) corresponding to the target single page).

[0035] The preload function (preloadUrl) is a function provided by the native application (native) through jsbridge. Jsbridge is the abbreviation of JavascriptBridge; it is a bridge built with Javascript language to achieve two-way communication between the native application native and the H5 (Html5, referred to as H5) page. Jsbridge mainly provides the ability for H5 to call native in different APPs.

[0036] The page identifier includes but is not limited to the page name. The first path is the entry path url of the target single page. For example, the entry path of an event marketing page, the pre-load function is as follows: preloadUrl({ name: "marketing", url: "https: / / cdnsme.kcbebank.com / marketing / debt.html", }) S120, creating a corresponding web page view control using a native application according to the page identifier, wherein the page identifier is a page name name, and creating a web page view control (webview) named as a name variable through a native application (native).

[0037] S130: preload network resources corresponding to the webpage view control according to the first path.

[0038] H5 pages need to load various network resources (such as HTML, CSS, JavaScript files, etc.) during the pre-loading process. These network resources can be stored locally or downloaded from a remote server. The Native side is responsible for managing the loading process of these network resources, including network requests and cache management.

[0039] Native side operation: When the H5 page calls the preloadUrl method, the Native side will create a new webview instance and preload the network resources corresponding to the specified first path URL. This process does not display the page immediately, but does preloading.

[0040] H5 page operation: H5 pages can preload required resources, such as declaring JavaScript files that need to be loaded later through tags. In the h5 page file of the current page, declare the pre-downloaded JavaScript script through the link tag. <link rel="preload" href="xxx.js"> , make a preload declaration to load the javascript scripts that need to be loaded later. Javascript script files are mainly used to process the target single page interaction and interaction logic.

[0041] As a new web standard, preload aims to improve performance and provide web developers with more fine-grained loading control. Preload enables developers to customize resource loading logic without having to endure the performance loss of script-based resource loaders. Use preload to preload the resources needed for the next step.

[0042] S140, parsing the network resources to obtain the page resources; wherein the network resources include html files, CSS files, javascript files, and pictures, etc. Parsing the network resources mainly includes: HTML file parsing: WebView obtains the target single page content by parsing the HTML file code. The parsing process mainly involves the parsing of HTML tags, CSS styles, and JavaScript scripts. The parsed HTML content will be converted into a DOM tree (Document Object Model), which is a tree structure composed of HTML tags and is used to represent the structure of the page.

[0043] CSS file parsing: webview parses the CSS file, performs layout according to the parsed CSS style, and determines the position and size of each element. The result of CSS layout is to generate a render tree, which contains all visible elements of the target single page and arranges them according to their hierarchical structure in the DOM tree. This application speeds up the opening of the target single page by downloading network resources and parsing scripts in advance.

[0044] S150, registering a global routing method as needed, the global routing method is used to determine the routing method for loading the page resource. Registering a global routing method h5Router as needed, which will be called in the subsequent prefabricated script template file (replace.js) to adapt its own routing method.

[0045] Among them, H5 routing is mainly used to manage page navigation and state in single page applications (SPA). The routing system allows different views or components of the application to be managed by URL without reloading the entire page. This is especially important in single page applications (SPAs), because the goal of SPAs is to update content without refreshing the entire page.

[0046] The main H5 routing methods are as follows: 1) Hash mode. Hash mode uses the hash part of the URL (i.e., the part after `#` in the URL) to simulate a complete URL. The advantage of this method is that it has excellent compatibility and is supported by almost all browsers and older clients. The disadvantage is that changes in the hash value will not cause the browser to send a request to the server, so it cannot be used in scenarios that require a server response.

[0047] 2) History mode: Use the pushState() and replaceState() methods provided by the HTML5 History API to operate the browser's history stack to change the URL.

[0048] S200, execution jump phase, including: calling the web page view control according to the page identifier sent again by the front-end page, generating an executable script file based on the second path sent by the front-end page and the prefabricated script built into the local offline package; and injecting the executable script file into the web page view control to execute the executable script file and render the target single page based on the page resources. The second path is the routing path.

[0049] It can be understood that the jump phase is entered in response to receiving a preset operation on the current page. That is, when the user performs a preset operation on the currently displayed page (current page), such as clicking a button or a link, the jump phase is entered.

[0050] In one embodiment, the prefabricated script is a prefabricated script template file. Figure 5As shown, calling the webpage view control according to the page identifier sent again by the front-end page, and generating an executable script file based on the second path sent by the front-end page and the prefabricated script built into the local offline package include: S210, calling the preset jump method according to the front-end page, and passing the page identifier and the second path through the jump method; wherein the jump method is the method provided by the native application through the Jsbridge component. The jump method forward also passes in the loading type data type. The loading type data type is used to confirm the function used for loading. Because native provides multiple ways of jump functions, for example, appPage (jump to native page), Online (jump to online webview), offline (jump to hybrid app offline page) and Preload (preload page on demand). The preset jump method is, for example: forward({ type: "preload", name: "marketing", url: "https: / / cdnsme.kcbebank.com / marketing / debt.html# / list", }) S220: Obtain the web page view control according to the page identifier matching.

[0051] S230: Use the second path to replace the preset placeholder in the prefabricated script template file to obtain an executable script file.

[0052] Furthermore, since the prior art cannot improve the loading speed of the H5 single-page application routing hash or history mode as needed, the executable script file specifically includes executing the following contents: Determine whether to register the global routing method; If it is determined that the global routing method has been registered, the page resource corresponding to the target single page is loaded based on the second path through the first routing method preset in the global routing method; the first routing method is the history routing method.

[0053] If it is determined that the global routing method is not registered, the page resource corresponding to the target single page is loaded through the second routing method based on the second path. The second routing method is a hash routing method. For example, the window.location.replace method is used to load the target single page.

[0054] Understandably, the prefabricated script template file (replace.js) includes the method for determining whether to register a global routing method and the corresponding routing selection strategy. The main content of replace.js is to determine the routing method and improve the loading speed of the H5 single-page application routing hash or history mode as needed. Specifically, the main contents of replace.js are 2: 1) Determine whether the h5Router method is registered. If it is registered, the method will be called and the complete URL with route will be passed in, so that the route loading can be adapted when loading the target page; 2) Check if the preloaded page is available. If not, the h5Router method will be registered, indicating that the page has not been loaded and the page will be retried. Replace the placeholder (__INJECT_RES__) in replace.js with the second path, and use the second path to load the target single page according to the determined routing method. Among them, the global routing method is used to replace the current routing path with the second path passed in by replace.js to switch to the target single page. For example, browserRouterRaw.replace(path) is used to replace the routing path, and path is the second path.

[0055] Exemplarily, the page identifier is the page name, and the web view control webview created in the pre-loading phase is obtained according to the page name association. At the same time, the prefabricated script template file (replace.js) in the offline package is read, and an executable script file (complete js script) is generated through the placeholder "__INJECT_RES__", and the complete js script is injected into the webview for execution. replace.js will determine whether the global routing method h5Router is registered in the current js scope. If so, the global routing method h5Router is called; if not, the fallback window.location.replace method is used to load the target single page.

[0056] In short, in the jump phase, the Native side operates as follows: When the H5 page calls the forward method, the Native side will find the webview created in the previous pre-loading phase and inject the pre-prepared prefabricated script template file replace.js through JSBridge. The prefabricated script template file replace.js is responsible for processing the routing logic and determining how to load the content of the target single page.

[0057] H5 page operation: The prefabricated script template file replace.js will check whether the global routing method h5Router is registered in the current environment. If yes, it will call the global routing method h5Router for routing processing; if not, it will use the `window.location.replace` method to load the target single page. In this way, the Native side and the H5 page work closely together to give full play to their respective advantages, thereby providing a better user experience and higher performance.

[0058] During the rendering process, WebView executes the pre-downloaded JavaScript script. The execution of JavaScript can interact with the page to achieve dynamic effects and functions.

[0059] In one embodiment, the method further comprises at least one of the following: The first item: reading the configuration file in the offline package when the single page application is started.

[0060] The preload function is called according to the first path configured in the configuration file to enter the preload phase and execute. That is, when the single-page application APP is started, the page resources of the target single page will be pre-added according to the first path pre-configured in the configuration file. The preload function is a function method provided by the native application through the Jsbridge component.

[0061] Item 2: During the operation of the single-page application, the preload function is called in response to the completion of the rendering of the current page to enter the preload phase and execute. That is to say, after the previous page of the target single page is displayed, the page resources of the target single page can also be preloaded according to the first path given by the previous page of the target single page (the currently displayed page). For example, there is a banner marketing location on the homepage (index.html) of the single-page application App, and the jump address is debt.html. When the banner is displayed, the preloadURL method can be used to preload debt.html. When the user actually clicks the banner, h5 uses the forward method to jump. At this time, native can find the webview loaded by the corresponding preloadUrl method and display it to the user.

[0062] In one implementation, although the online h5 page preloads page resources in the background of the single-page application, when the user's network is poor or unstable, there may still be a situation where the corresponding page resources have not been preloaded when entering the jump phase, resulting in a greatly prolonged white screen time. Therefore, in order to reduce the white screen time, this application adds a timeout detection. That is, the method also includes: executing a detection phase.

[0063] S300, executing the detection phase, including: starting to count according to a preset resource loading time when the page resource is preloaded. For example, the resource loading time may be 10 seconds.

[0064] If the pre-download completion information of the page resource is not received before the timer expires, jump to the preset loading timeout page to prompt reloading. If the pre-download completion information of the page resource is received before the timer expires, jump to the target single page. For example, a single-page application will start a timer (for example, 10 seconds) to detect whether h5 has called the pageComplete method. If the pageComplete method is still not called when the time comes, the native application native will display the bottom-up loading timeout page, which will have a reload button. The pageComplete method will output a page loading completion notification. If the notification is not received, it means that the page loading is not completed.

[0065] In web development, the page loading process usually includes the following stages: PreInit: The preparation phase before page initialization.

[0066] Init: Page initialization phase, various initialization operations are performed.

[0067] InitComplete: Initialization completion phase.

[0068] PreLoad: The page content preloading stage.

[0069] Load: Page content loading phase.

[0070] LoadComplete: The stage when page content loading is completed.

[0071] PreRender: Page pre-rendering stage.

[0072] PreRenderComplete: Pre-rendering completion stage.

[0073] Render: The page rendering phase displays the content on the user interface.

[0074] PageComplete: The page loading completion event indicates that the page content is fully loaded and displayed on the user interface. In this application, the JS script is injected and executed through the forward jump phase, which fully utilizes the browser's single-page routing characteristics and has the following advantages: 1) Perform network interaction and script parsing on the target single page in advance, and the opening speed of the target single page is significantly improved; 2) Improve user experience, the target single page will not flicker; provide h5Router method to adapt the preloaded target page, instead of directly displaying the entire page like the traditional method; 3) This application is relatively flexible and supports on-demand calls of different routing modes of h5 pages; 4) There is a sound network timeout detection and reload mechanism.

[0075] In one example, preloadUrl is a call to the native capability to create a webview and load the entry HTML page. For example, there is a marketing page (h5 page marketing.html) in the app. There is a button on the marketing page that can jump to the loan page (entry.html / # / loan). The specific process of opening the loan page includes: 1) Enter the marketing page on the App homepage. When the marketing page is loaded, the preloadUrl method is called and the entry.html parameter is passed in; 2) Native gets the passed entry.html parameter, creates a webview and loads the entry.html page resources; 3) After the webview parses the rel=preload of the link tag, it calls the standard browser capabilities to load the declared resources (xxx.js); 4) After the user clicks the button, h5 calls the forward method and passes in the full path entry.html / # / loan with routing to native. After getting the full path entry.html / # / loan and the associated loaded webview, the script is injected to display the webview.

[0076] The page loading method of the present application is described below with reference to a specific example, wherein the previous page of the target single page becomes the current page, and the specific steps of the page loading method include: S410, loading the homepage (index.html) of the single-page application App. There is a banner marketing location on the homepage (index.html). The jump address of the banner marketing location is debt.html.

[0077] In the HTML file (front-end page) of the home page, call the preloadUrl method at the preset position. The preloadUrl presets the page name marketing and the entry path debt.html of the target single page. Call the forward method in the click event corresponding to the banner marketing position. The forward method passes in the page name, loading type, and routing path.

[0078] S420, after the home page is displayed, that is, when the banner marketing position is displayed, the preloadUrl method is called. The native application creates a webview named marketing according to the page name passed in by the preloadUrl method, loads network resources from the server according to the entry path passed in by the preloadUrl method, and parses to obtain the page resources corresponding to the webview. The webview will receive network resources and parse and process them as needed. The specific parsing content includes parsing the HTML file to obtain the DOM tree. Parsing the CSS file to obtain the rendering tree.

[0079] S430, when the user clicks on the banner marketing location, the h5 page calls the forward method to jump. At this time, native can find the webview created by the preloadUrl method according to the page name, and display the target single page to the user according to the DOM tree and rendering tree corresponding to the webview.

[0080] In the prior art, if the resource is not configured with HTTP strong cache, it is still necessary to establish a connection with the server, which will prolong the white screen time.

[0081] The present application also provides a page loading device. Exemplarily, the page loading device includes: A preloading module, used to create a web page view control using a native application according to a page identifier sent by a front-end page, and to load page resources according to a first path sent by the front-end page; A jump module is used to call the web page view control according to the page identifier sent again by the front-end page, generate an executable script file based on the second path sent by the front-end page and the prefabricated script built into the local offline package; and inject the executable script file into the web page view control to execute the executable script file and render the target single page based on the page resources.

[0082] It can be understood that the device of this embodiment corresponds to the page loading method of the above embodiment, and the options in the above embodiment are also applicable to this embodiment, so they will not be described repeatedly here.

[0083] The present application also provides a terminal device. Exemplarily, the terminal device includes a processor and a memory, wherein the memory stores a computer program, and the processor runs the computer program to enable the terminal device to execute the functions of the various modules in the above-mentioned page loading method or the above-mentioned page loading device.

[0084] Among them, the processor can be an integrated circuit chip with signal processing capabilities. The processor can be a general-purpose processor, including a central processing unit (CPU), a graphics processing unit (GPU), a network processor (NP), a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field programmable gate array (FPGA) or at least one of other programmable logic devices, discrete gates or transistor logic devices, and discrete hardware components. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor, etc., which can implement or execute the methods, steps and logic block diagrams disclosed in the embodiments of the present application.

[0085] The memory may be, but is not limited to, a random access memory (RAM), a read only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electric erasable programmable read-only memory (EEPROM), etc. The memory is used to store a computer program, and the processor may execute the computer program accordingly after receiving an execution instruction.

[0086] The present application also provides a computer-readable storage medium for storing the computer program used in the above terminal device. For example, the computer-readable storage medium may include but is not limited to: a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and other media that can store program codes.

[0087] In several embodiments provided in the present application, it should be understood that the disclosed devices and methods can also be implemented in other ways. The device embodiments described above are merely schematic. For example, the flowcharts and structure diagrams in the accompanying drawings show the possible architecture, functions and operations of the devices, methods and computer program products according to multiple embodiments of the present application. In this regard, each box in the flowchart or block diagram can represent a module, a program segment or a part of a code, and the module, a program segment or a part of a code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in an alternative implementation, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two consecutive boxes can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the structure diagram and / or the flow diagram, and the combination of boxes in the structure diagram and / or the flow diagram, can be implemented with a dedicated hardware-based system that performs a specified function or action, or can be implemented with a combination of dedicated hardware and computer instructions.

[0088] In addition, the functional modules or units in the various embodiments of the present application may be integrated together to form an independent part, or each module may exist separately, or two or more modules may be integrated to form an independent part.

[0089] If the functions are implemented in the form of software function modules and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for enabling a computer device (which can be a smart phone, a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present application.

[0090] The above description is only a specific implementation manner of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application.

Claims

1. A page loading method, characterized in that: include: Executing the pre-loading phase includes: creating a web page view control using a native application according to a page identifier sent by the front-end page, and loading a page resource according to a first path sent by the front-end page; The execution jump phase includes: calling the web page view control according to the page identifier sent again by the front-end page, generating an executable script file based on the second path sent by the front-end page and the prefabricated script built into the local offline package; and injecting the executable script file into the web page view control to execute the executable script file and render the target single page based on the page resources.

2. The page loading method according to claim 1, characterized in that: The prefabricated script is a prefabricated script template file; the calling of the webpage view control according to the page identifier sent again by the front-end page, and the generation of an executable script file based on the second path sent by the front-end page and the prefabricated script built into the local offline package include: Calling a preset jump method according to the front-end page, and passing the page identifier and the second path through the jump method; wherein the jump method is a method provided by the native application through the Jsbridge component; Obtaining the webpage view control according to the page identifier matching; The second path is used to replace the preset placeholder in the prefabricated script template file to obtain an executable script file.

3. The page loading method according to claim 1, characterized in that: The executable script file is specifically used for: Determine whether to register the global routing method; If it is determined that the global routing method has been registered, then based on the second path, the page resource corresponding to the target single page is loaded through the first routing method preset in the global routing method; If it is determined that the global routing method is not registered, the page resource corresponding to the target single page is loaded through a second routing method based on the second path.

4. The page loading method according to claim 3, characterized in that: The first routing method is history routing; the second routing method is hash routing.

5. The page loading method according to claim 1, characterized in that: The method further comprises at least one of the following: Item 1: reading the configuration file in the offline package when the single-page application is started; Calling a preload function according to the first path configured in the configuration file to enter the preload phase and execute; the preload function is a function method provided by the native application through the Jsbridge component; Item 2: During the operation of the single-page application, the preloading function is called in response to the completion of rendering of the current page to enter the preloading phase and execute.

6. The page loading method according to claim 1, characterized in that: The method further includes: entering the jump phase in response to receiving a preset operation on the current page.

7. The page loading method according to claim 1, characterized in that: The creating a webpage view control using a native application according to the page identifier sent by the front-end page, and loading a page resource according to the first path sent by the front-end page, comprises: Receiving a page identifier and a first path transmitted by the front-end page through a preset preloading function; Creating a corresponding web page view control using a native application according to the page identifier; preloading the network resource corresponding to the webpage view control according to the first path; Parsing the network resources to obtain the page resources; wherein the network resources include one or more combinations of HTML files, CSS files and JavaScript script files; A global routing method is registered as needed, and the global routing method is used to determine the routing mode for loading the page resource.

8. The page loading method according to any one of claims 1 to 7, characterized in that: The method further comprises: The execution detection phase includes: starting timing according to a preset resource loading duration when preloading the page resource; if the pre-download completion information of the page resource is not received before the timing ends, jumping to a preset loading timeout page to prompt reloading.

9. A page loading device, characterized in that: include: A preloading module, used to create a web page view control using a native application according to a page identifier sent by a front-end page, and to load page resources according to a first path sent by the front-end page; A jump module, used to call the web page view control according to the page identifier sent again by the front-end page, and generate an executable script file based on the second path sent by the front-end page and the prefabricated script built into the local offline package; And, injecting the executable script file into the web page view control to execute the executable script file and render a target single page based on the page resources.

10. An application system, characterized in that: The application system includes a server and a client; a single-page application is installed on the client; the server is used to store network resources of each page; and the single-page application is used to execute the page loading method as described in any one of claims 1-8.

Images