A page loading method, device and system

Abstract

This application relates to the field of Internet technologies, and in particular, to a page loading method, apparatus, and system. The method includes: performing a preloading stage, including: creating a web view control 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; performing a jump stage, including: calling the web view control according to the page identifier sent again by the front-end page, generating an executable script file 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 web view control to execute the executable script file and render a target single page based on the page resources. Thus, this application can effectively solve the problems of long white screen time and flickering when loading a single page in the prior art, etc.

Description

Technical Field

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

[0002] In a hybrid app (hybrid application), it is often necessary to load an h5 page online. During this loading process, a series of initialization processes and actions such as webview (web page view) initialization, resource loading, resource parsing, and resource rendering will be experienced, resulting in a long white screen on the page. Among them, webview is a web page view control. As Figure 1 shown, the specific process of loading an h5 page includes webview initialization, establishing a connection, receiving the page, receiving the style, rendering the loading interface, script downloading and parsing / execution, backend processing for receiving data, rendering the h5 page, and presenting the page. Among them, the webview initialization stage is in a state without feedback, and the stages from establishing a connection to script downloading and parsing / execution are in a white screen state.

[0003] In the prior art, in order to reduce the time consumed in the white screen state and the state without feedback, the following solutions are usually used:

[0004] Create a new auxiliary webview in advance in the hybrid app background and load a preset auxiliary h5 page (this auxiliary h5 page occupies 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.

[0005] However, this solution has the following disadvantages in the front-end H5 single-page application SPA:

[0006] 1) When reloading the main page according to the main webview, the script parsing still needs to be re-parsed again, resulting in an extended white screen time;

[0007] 2) When there are other displayed elements on the entry page (for example, the home page, login page, registration page), there will be a flickering situation when opening the page.

[0008] Among them, SPA (Single Page Application, single-page application) is a Web application architecture mode, and its core concept is that when a user interacts with an application, only the content on one page is dynamically updated, rather than loading a new page. Summary of the Invention

[0009] In view of this, embodiments of this 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, etc.

[0010] In a first aspect, an embodiment of the present application provides a page loading method, including:

[0011] Execute a preloading stage, including: creating a web view control 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;

[0012] Execute a jump stage, including: calling the web view control according to the page identifier sent again by the front-end page, generating an executable script file 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 web view control to execute the executable script file and render a target single page based on the page resources.

[0013] In some embodiments, the prefabricated script is a prefabricated script template file; the step of calling the web view control according to the page identifier sent again by the front-end page and generating an executable script file based on a second path sent by the front-end page and a prefabricated script built in a local offline package includes:

[0014] Call a preset jump method according to the front-end page, and pass the page identifier and the second path through the jump method; wherein, the jump method is a method provided by the native application through a Jsbridge component;

[0015] Match the web view control according to the page identifier;

[0016] Replace a preset placeholder in the prefabricated script template file with the second path to obtain an executable script file.

[0017] In some embodiments, the executable script file is specifically used for:

[0018] Determine whether a global routing method is registered;

[0019] If it is determined that the global routing method has been registered, load the page resources corresponding to the target single page based on the second path through a first routing method preset in the global routing method;

[0020] If it is determined that the global routing method has not been registered, load the page resources corresponding to the target single page based on the second path through a second routing method.

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

[0022] In some embodiments, the method further includes at least one of the following two items:

[0023] First item: Read the configuration file in the offline package when the single-page application starts;

[0024] Call the preloading function according to the first path configured in the configuration file to enter and execute the preloading stage; the preloading function is a function method provided by the native application through Jsbridge;

[0025] Second item: During the running of the single-page application, in response to the completion of the rendering of the current page, call the preloading function to enter and execute the preloading stage.

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

[0027] In some embodiments, creating a web view control using the 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 includes:

[0028] Receive the page identifier and the first path transmitted by the front-end page through a preset preloading function;

[0029] Create a corresponding web view control using the native application according to the page identifier;

[0030] Preload the network resources corresponding to the web view control according to the first path;

[0031] Parse 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;

[0032] Register the global routing method as needed, and the global routing method is used to determine the routing method for loading the page resources.

[0033] In some embodiments, the method further includes:

[0034] Execute the detection stage, including: starting timing according to the preset resource loading duration when preloading the page resources; if the pre-download completion information of the page resources is not received before the end of the timing, jump to the preset loading timeout page to prompt for reloading.

[0035] In a second aspect, an embodiment of the present application provides a page loading device, including:

[0036] A preloading module, configured to create a web view control using the native application according to the page identifier sent by the front-end page, and load page resources according to the first path sent by the front-end page;

[0037] A jump module, configured to call the web view control according to the page identifier re - sent by the front - end page, generate an executable script file based on the second path sent by the front - end page and the pre - configured scripts built in the local offline package; and inject the executable script file into the web view control to execute the executable script file and render a target single - page based on the page resources.

[0038] 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 of each page; the single - page application is used to execute a page loading method provided in the first aspect of the present application.

[0039] The embodiments of the present application have the following beneficial effects:

[0040] In the present application, the pre - loading stage 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; the jump stage includes: calling the web view control according to the page identifier re - sent by the front - end page, generating an executable script file based on the second path sent by the front - end page and the pre - configured scripts built in the local offline package; and injecting the executable script file into the web view control to execute the executable script file and render a target single - page based on the page resources. In the pre - loading stage of the present application, the initialization of the web view control (webview) and receiving page resources have been completed. In the jump stage, only the second path is needed to generate an executable script file from the pre - configured script template file, and then the target single - page can be rendered according to the page resources, reducing the no - feedback state and white - screen time. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] To more clearly illustrate the technical solutions of the embodiments of the present application, the following will briefly introduce the drawings required for the embodiments. It should be understood that the following drawings only show some embodiments of the present application, and thus should not be regarded as limiting the scope. For those of ordinary skill in the art, other related drawings can be obtained based on these drawings without creative efforts.

[0042] Figure 1 Shows a schematic diagram of a page loading process related to an embodiment of the present application;

[0043] Figure 2 Shows a structural block diagram of an application system according to an embodiment of the present application;

[0044] Figure 3Shows a flowchart of a page loading method according to an embodiment of the present application;

[0045] Figure 4 Shows a flowchart of the steps executed in the preloading stage of the page loading method according to an embodiment of the present application;

[0046] Figure 5 Shows a flowchart of the steps executed in the jump stage of the page loading method according to an embodiment of the present application.

[0047] Description of main component symbols:

[0048] 100 - Server; 200 - Client. Detailed implementation manners

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

[0050] Generally, the components of the embodiments of the present application described and shown in the accompanying drawings here can be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of the present application provided in the accompanying drawings is not intended to limit the scope of the present application claimed, but only represents the selected embodiments of the present application. All other embodiments obtained by those skilled in the art based on the embodiments of the present application without creative efforts belong to the scope of protection of the present application.

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

[0052] Unless otherwise defined, all terms (including technical terms and scientific terms) used here have the same meaning as commonly understood by those of ordinary skill in the art to which the various embodiments of the present application belong. The terms (such as those defined in a general use dictionary) will be interpreted as having the same meaning as the contextual meaning in the relevant technical field and will not be interpreted as having an idealized meaning or an overly formal meaning unless clearly defined in the various embodiments of the present application.

[0053] The following will describe in detail some embodiments of the present application with reference to the accompanying drawings. Without conflict, the following embodiments and the features in the embodiments may be combined with each other.

[0054] The present application provides an application system. Exemplarily, as Figure 2 shown, the application system includes a server 100 and a client 200. A single-page application is installed on the client 200.

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

[0056] Native refers to the part of the native application, 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:

[0057] 1. UI control and management: Build the basic interface of the application and handle user interactions. For example, WebView initialization: Create a WebView instance and initialize it.

[0058] 2. Network management: Handle network requests and data transmission, including cache management and data synchronization. For example, preloading and preprocessing, manage the loading of resources, including obtaining data from local or remote servers. Such as using the preloadUrl method to create a WebView in advance and load the specified page.

[0059] In the Hybrid App (single-page application) of the client, communication can be carried out between the native application Native and the front-end page (H5 page) through JSBridge (JavaScript bridge). JSBridge allows the H5 page to call the functional functions provided by Native, such as opening the camera, accessing the file system, etc. Similarly, the Native side can also call the interfaces provided by the H5 page through JSBridge. For example, when loading a page, the Native side can pass data or trigger certain events to the H5 page through JSBridge.

[0060] The following will describe the page loading method in combination with some specific embodiments.

[0061] Figure 3A 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 includes: a pre-loading phase and a jump phase.

[0062] 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.

[0063] In one embodiment, Figure 4 As shown, creating a web 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 include:

[0064] S110, receiving a page identifier and a 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).

[0065] The preload function (preloadUrl) is provided by native applications through jsbridge. Jsbridge, short for JavascriptBridge, is a bridge built using JavaScript that enables two-way communication between native applications and HTML5 (H5) pages. Jsbridge primarily enables H5 to call native applications from different apps.

[0066] 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:

[0067] preloadUrl({

[0068] name: "marketing",

[0069] url: "https: / / cdnsme.kcbebank.com / marketing / debt.html",

[0070] })

[0071] S120: Create a corresponding web view control using a native application according to the page identifier, wherein the page identifier is a page name. Create a web view control (webview) named as a variable named name using the native application.

[0072] S130, preload the network resources corresponding to the web view control according to the first path.

[0073] During the preloading process of the H5 page, various network resources (such as HTML, CSS, JavaScript files, etc.) need to be loaded. 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.

[0074] 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 immediately display the page but does the preloading work.

[0075] H5 page operation: The H5 page can preload the required resources. For example, it can declare the JavaScript files 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. That is <link rel="preload" href="xxx.js"> , make a preload declaration to load the javascript script that needs to be loaded later. The JavaScript script file is mainly used to handle the interaction and interaction logic of the target single page.

[0076] Preload, as a new Web standard, aims to improve performance and provide web developers with more fine-grained loading control. Preload enables developers to customize the loading logic of resources without suffering from the performance loss brought by script-based resource loaders. Use preload to preload the resources needed next.

[0077] S140, parse the network resources to obtain the page resources; wherein, the network resources include html files, CSS files, javascript files, pictures, etc. Parsing the network resources mainly includes:

[0078] Html file parsing: The webview parses the html file code to obtain the content of the target single page. 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.

[0079] CSS file parsing: The webview parses the CSS file and performs layout according to the CSS styles obtained from the parsing to determine the position and size of each element. The result of the CSS layout is to generate a render tree that contains all the visible elements in the target single-page and arranges them according to their hierarchical structure in the DOM tree. In this application, since the network resources are downloaded and script-parsed in advance, the opening speed of the target single-page is thus accelerated.

[0080] S150, register the global routing method as needed. The global routing method is used to determine the routing method for loading the page resources. Register the global routing method h5Router as needed, which will be called in the subsequent prefabricated script template file (replace.js) to adapt to its own routing method.

[0081] Among them, the H5 routing method is mainly used to manage page navigation and status in a single-page application (SPA, Single Page Application). The routing system allows different views (views) or components (components) of the application to be managed through the URL without reloading the entire page. This is particularly important in single-page applications (Single Page Applications, SPAs) because the goal of SPAs is to update the content without refreshing the entire page.

[0082] The main H5 routing methods are as follows:

[0083] 1) Hash mode. The Hash mode uses the hash part of the URL (that is, the `#` and the following part in the URL) to simulate a complete URL. The advantage of this method is excellent compatibility, and almost all browsers and legacy clients support it. The disadvantage is that the change of the hash value will not cause the browser to send a request to the server, so it cannot be used in scenarios that require server response.

[0084] 2) History mode. Use the pushState() and replaceState() methods provided by the HTML5 History API to operate on the browser's history stack to achieve URL changes.

[0085] S200, execute the jump phase, including: calling the web view control according to the page identifier re-sent 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 in 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 second path is the routing path.

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

[0087] In one embodiment, the prefabricated script is a prefabricated script template file. As Figure 5 shown, calling the web view control according to the page identifier resubmitted 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 in the local offline package, includes:

[0088] S210, 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. 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 (pre-load pages on demand). The preset jump method is, for example:

[0089] forward({

[0090] type: "preload",

[0091] name: "marketing",

[0092] url: "https: / / cdnsme.kcbebank.com / marketing / debt.html# / list",

[0093] )

[0094] S220, matching the web view control according to the page identifier.

[0095] S230, replacing the preset placeholder in the prefabricated script template file with the second path to obtain an executable script file.

[0096] Furthermore, since in the prior art, the loading speed of the h5 single-page application routing hash or history mode cannot be improved on demand. Thus, the executable script file specifically includes the following content:

[0097] Determine whether to register the global routing method;

[0098] If it is determined that the global routing method has been registered, load the page resources corresponding to the target single page through the first routing method preset in the global routing method based on the second path; the first routing method is the history routing method.

[0099] If it is determined that the global routing method has not been registered, load the page resources corresponding to the target single page through the second routing method based on the second path. The second routing method is the hash routing method. For example, use the window.location.replace method to load the target single page.

[0100] Understandably, the prefabricated script template file (replace.js) includes determining whether the global routing method is registered 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 on demand. Specifically, the main content of replace.js has two points:

[0101] 1) Determine whether the h5Router method is registered. If it is registered, the method will be called and the complete URL with routing will be passed in to adapt the routing loading when loading the target page;

[0102] 2) Check whether the pre-loaded page is available. If not, the h5Router method will be registered, indicating that the page has not been loaded completely, and the page loading 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, use browserRouterRaw.replace(path) to replace the routing path, where path is the second path.

[0103] Exemplarily, if the page identifier is the page name, then the webview control created during the preloading stage is associated according to the page name. 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.

[0104] In summary, during the jump phase, the Native side operation: when the H5 page calls the forward method, the Native side will find the webview created during the previous preloading stage and inject the pre-prepared prefabricated script template file replace.js through JSBridge. The prefabricated script template file replace.js is responsible for handling the routing logic and determining how to load the content of the target single page.

[0105] 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 so, it will call the global routing method h5Router for routing processing; if not, the `window.location.replace` method is used to load the target single page. In this way, the Native side and the H5 page cooperate closely, giving full play to their respective advantages, thereby providing a better user experience and higher performance.

[0106] During the rendering process, the WebView executes the pre-downloaded JavaScript script. The execution of JavaScript can perform interactive operations on the page to achieve dynamic effects and functions.

[0107] In one implementation, the method further includes at least one of the following two items:

[0108] The first item: Read the configuration file in the offline package when the single-page application starts.

[0109] Call the preloading function according to the first path configured in the configuration file to enter the preloading stage and execute. That is, when the single-page application APP starts, the page resources of the target single page to be preloaded will be loaded according to the first path pre-configured in the configuration file. The preloading function is a function method provided by the native application through the Jsbridge component.

[0110] Second item: During the operation of the single-page application, in response to the completion of the rendering of the current page, the preloading function is called to enter the preloading stage and execute. That is, 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 (the currently displayed page) of the target single-page. For example, there is a banner marketing position on the home page (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 on the banner, the h5 uses the forward method to jump, and at this time, the native can find the webview loaded by the corresponding preloadUrl method and display it to the user.

[0111] In one implementation, although the online h5 page preloads page resources in the background of the single-page application. However, when the user's network is very poor or unstable, there will still be a situation where the corresponding page resources have not been preloaded when entering the jump stage, resulting in a significant increase in the white screen time. Therefore, in order to reduce the white screen time, this application adds timeout detection. That is, the method further includes: performing a detection stage.

[0112] S300, perform the detection stage, including: starting to time according to a preset resource loading duration when preloading the page resources. For example, the resource loading duration can be 10 seconds.

[0113] If the pre-download completion information of the page resources is not received before the end of the timing, jump to a preset loading timeout page to prompt for reloading. If the pre-download completion information of the page resources is received before the end of the timing, jump to the target single-page. For example, the single-page application will start a timer (such as 10 seconds) to detect whether the h5 has called the pageComplete method. If the pageComplete method has not been called by the time, the native application will display a fallback loading timeout page, and the timeout page will carry a reload button. The pageComplete method will output a page loading completion notification. If this notification is not received, it means that the page loading has not been completed.

[0114] In web development, the page loading process usually includes the following stages:

[0115] PreInit: The preparation stage before page initialization. [[ID=I7]]

[0116] Init: The page initialization stage, performing various initialization operations.

[0117] InitComplete: Initialization Completion Phase.

[0118] PreLoad: Page Content Pre-Loading Phase.

[0119] Load: Page Content Loading Phase.

[0120] LoadComplete: Page Content Loading Completion Phase.

[0121] PreRender: Page Pre-Rendering Phase.

[0122] PreRenderComplete: Pre-Rendering Completion Phase.

[0123] Render: Page Rendering Phase, to display the content on the user interface.

[0124] PageComplete: Page Loading Completion Event, indicating that the page content is fully loaded and displayed on the user interface. In this application, through the forward jump phase, JS scripts are injected for execution, making full use of the characteristics of browser single-page routing, and having the following advantages:

[0125] 1) Conduct network interaction and script parsing for the target single page in advance, and the opening speed of the target single page is significantly improved;

[0126] 2) Improve the user experience, and the target single page will not flicker; provide the h5Router method to adapt the pre-loaded target page, and it will not directly display the entire page like the traditional method;

[0127] 3) This application is relatively flexible and supports on-demand invocation of different routing modes for h5 pages;

[0128] 4) Have a sound network timeout detection and reload mechanism.

[0129] In an example, preloadUrl is to call the native native ability to create a webview and load the entry html web page. For example, in the app, there is a marketing page (h5 page marketing.html), and there is a button on the marketing page that can jump to the credit borrowing page (entry.html / # / loan). The specific process of opening the credit borrowing page includes:

[0130] 1) Enter the marketing page from the App home page. After the marketing page is loaded, the preloadUrl method will be called and the entry.html parameter will be passed in;

[0131] 2) The native side receives the passed-in parameter entry.html, creates a WebView, and loads the page resources of entry.html;

[0132] 3) After the WebView parses the rel=preload in the link tag, it calls the standard browser capabilities to load the declared resources (xxx.js);

[0133] 4) After the user clicks the button, the H5 calls the forward method, passes in the complete path with routing entry.html / # / loan, gives it to the native side, and after obtaining the complete path entry.html / # / loan and the associated loaded WebView, performs script injection to display the WebView.

[0134] The following describes the page loading method of the present application in combination with a specific example. The previous page of the target single-page becomes the current page. The specific steps of the page loading method include:

[0135] S410, load the home page (index.html) of the single-page application App. Among them, there is a banner marketing position on this home page (index.html). The jump address of the banner marketing position is debt.html.

[0136] In advance, in the html file (front-end page) of the home page, call the preloadUrl method at the preset position. The page name marketing and the entry path debt.html of the target single-page are preset in the preloadUrl. 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.

[0137] S420, after the home page is displayed, that is, when the banner marketing position is displayed, call the preloadUrl method. The native application creates a WebView named marketing according to the page name passed in by the preloadUrl method, loads the 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 the network resources and perform parsing and processing 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.

[0138] S430. When the user clicks on the banner marketing position, the h5 page calls the forward method to perform a jump. At this time, the native side can find the webview created by the preloadUrl method based on the page name, and display the target single-page to the user according to the DOM tree and rendering tree corresponding to the webview.

[0139] In the prior art, if the resource does not configure http strong caching, it is still necessary to establish a connection with the server, which will increase the white screen time.

[0140] The present application also provides a page loading device. Exemplarily, the page loading device includes:

[0141] A preloading module, configured to create a web view control using a native application according to a page identifier sent by a front-end page, and load page resources according to a first path sent by the front-end page;

[0142] A jump module, configured to call the web view control according to the page identifier sent again by the front-end page, generate an executable script file based on a second path sent by the front-end page and a prefabricated script built in a local offline package; and inject the executable script file into the web view control to execute the executable script file and render a target single-page based on the page resources.

[0143] It can be understood that the device in this embodiment corresponds to the page loading method in the above embodiment. The optional items in the above embodiment also apply to this embodiment, so they will not be repeated here.

[0144] The present application also provides a terminal device. Exemplarily, the terminal device includes a processor and a memory. Among them, the memory stores a computer program, and the processor runs the computer program, so that the terminal device executes the above page loading method or the functions of each module in the above page loading device.

[0145] Among them, the processor can be an integrated circuit chip with signal processing capabilities. The processor can be a general-purpose processor, including at least one of 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 other programmable logic devices, discrete gate 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., and can implement or execute the various methods, steps, and logic block diagrams disclosed in the embodiments of the present application.

[0146] The memory can 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 electrically erasable programmable read-only memory (EEPROM), etc. Among them, the memory is used to store a computer program, and after receiving an execution instruction, the processor can execute the computer program accordingly.

[0147] 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 can include, but is not limited to: various media such as a USB flash drive, a mobile hard disk, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), a magnetic disk, or an optical disc that can store program codes.

[0148] In several embodiments provided in this 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 illustrative. For example, the flowcharts and structural diagrams in the accompanying drawings show the possible architectures, functions, and operations of devices, methods, and computer program products according to multiple embodiments of this application. In this regard, each block in the flowchart or block diagram can represent a module, a program segment, or a part of code, and the module, program segment, or part of 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 blocks can occur in a different order than that marked in the accompanying drawings. For example, two consecutive blocks can actually be executed substantially in parallel, and they can sometimes be executed in the reverse order, depending on the functions involved. It should also be noted that each block in the structural diagram and / or flowchart, as well as the combination of blocks in the structural diagram and / or flowchart, can be implemented by a dedicated hardware-based system that performs the specified functions or actions, or can be implemented by a combination of dedicated hardware and computer instructions.

[0149] In addition, in each embodiment of this application, each functional module or unit can be integrated together to form an independent part, or each module can exist alone, or two or more modules can be integrated to form an independent part.

[0150] If the above functions are implemented in the form of software functional modules and sold or used as an independent product, they can be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a part of this technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to enable 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 each embodiment of this application.

[0151] The above is only the specific implementation manner of this application, but the protection scope of this application is not limited thereto. Any person skilled in the art within the technical scope disclosed in this application can easily think of changes or substitutions, which should all be covered within the protection scope of this application.

Claims

1. A page loading method, characterized in that, Including: Read the configuration file in the offline package when the single-page application starts; Call the preloading function according to the first path configured in the configuration file to enter the preloading stage and execute; And, during the running of the single-page application, in response to the completion of the rendering of the current page, call the preloading function to enter the preloading stage and execute; Executing the preloading stage includes: creating a web view control using the 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; specifically, executing the preloading stage includes: receiving the page identifier and the first path transmitted by the front-end page through a preset preloading function; creating a corresponding web view control using the native application according to the page identifier; preloading the network resources corresponding to the web 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; registering a global routing method as needed, and the global routing method is used to determine the routing method for loading the page resources; 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 in 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; Wherein, the executable script file is specifically used for: Judging whether to register a global routing method; If it is determined that the global routing method has been registered, load the page resources corresponding to the target single-page through the first routing method preset in the global routing method based on the second path; If it is determined that the global routing method has not been registered, load the page resources corresponding to the target single-page through the second routing method based on the second path; The method further includes: Executing the detection stage includes: starting timing according to the preset resource loading duration when preloading the page resources; if the pre-download completion information of the page resources is not received before the end of the timing, jump to the preset loading timeout page to prompt for reloading.

2. The page loading method according to claim 1, wherein The prefabricated script is a prefabricated script template file; the calling the web 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 in the local offline package includes: Call a preset jump method according to the front-end page, and pass 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; Match the web view control according to the page identifier; Replace the preset placeholder in the prefabricated script template file with the second path to obtain an executable script file.

3. The page loading method according to claim 1, wherein The first routing method is the history routing method; the second routing method is the hash routing method.

4. The page loading method according to claim 1, wherein The preloading function is a function method provided by the native application through the Jsbridge component.

5. A page loading device, characterized in that, It includes: A preloading function call module, configured to read a configuration file in an offline package when a single-page application starts; Call the preloading function according to a first path configured in the configuration file to enter the preloading module and execute; And, during the running of the single-page application, in response to the rendering completion of the current page, call the preloading function to enter the preloading module and execute; A preloading module, configured to create a web view control using the native application according to a page identifier sent by a front-end page, and load page resources according to a first path sent by the front-end page; Specifically, the preloading module is configured to: receive the page identifier and the first path transmitted by the front-end page through a preset preloading function; create a corresponding web view control using the native application according to the page identifier; preload network resources corresponding to the web view control according to the first path; Parse the network resources to obtain the page resources; wherein, the network resources include one or a combination of html files, CSS files, and JavaScript script files; register a global routing method as needed, and the global routing method is used to determine a routing method for loading the page resources; A jump module, configured to call the web view control according to the page identifier sent again by the front-end page, generate an executable script file based on a second path sent by the front-end page and a prefabricated script built in a local offline package; and inject the executable script file into the web view control to execute the executable script file and render a target single-page based on the page resources; wherein, the executable script file is specifically configured to: Determine whether a global routing method is registered; If it is determined that the global routing method has been registered, load page resources corresponding to the target single-page through a first routing method preset in the global routing method based on the second path; If it is determined that the global routing method has not been registered, load page resources corresponding to the target single-page through a second routing method based on the second path; An execution detection module, configured to start timing according to a preset resource loading duration when preloading the page resources; if the pre-download completion information of the page resources is not received before the timing ends, jump to a preset loading timeout page to prompt for reloading.

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

Images