Application program optimization method and system of mobile terminal, electronic equipment and storage medium

Abstract

The invention discloses an application program optimization method and system of a mobile terminal, electronic equipment and a storage medium, and the method comprises the following steps: after an application program is initialized, pre-loading a webpage view component of the application program; sending a data request to a server through the webpage view component; and loading response data sent by the server based on the data request to render a page. According to the application program optimization method of the mobile terminal, the webpage view component is pre-loaded after the application program is initialized, and the webpage view component does not need to be initialized after entering the webpage view, so that the time for opening the page for the first time is shortened.

Description

Technical Field

[0001] The present invention relates to the technical field of software development, and particularly to an optimization method, system, electronic device and storage medium for an application program on a mobile terminal. Background Art

[0002] At present, the development methods of application programs (APPs) on mobile terminals can be divided into native development, H5 development, and hybrid development. Native development (Native APP development) is to develop APPs on mobile platforms such as Android (a mobile operating system) and IOS (a mobile operating system) using the official development languages, development libraries, and development tools provided. H5 development, that is, HTML5 (a language description method for constructing web page content) application development, is to develop APPs using Web (World Wide Web) technology. Hybrid development (Hybrid APP development) is to develop APPs by mixing native development technology and H5 development technology.

[0003] In order to improve development efficiency, more and more application programs adopt the hybrid development mode. However, with the rapid iteration of business and the online launch of a large number of new functions, the problem is that the data of the first screen time-consuming is increasing day by day, resulting in poor user experience of the application programs in the hybrid development mode. Summary of the Invention

[0004] The technical problem to be solved by the present invention is to overcome the defect that the first screen of a hybrid APP takes a long time in the prior art, and to provide an optimization method, system, electronic device and storage medium for an application program on a mobile terminal.

[0005] The present invention solves the above technical problem through the following technical solutions:

[0006] The present invention discloses an optimization method for an application program on a mobile terminal, and the method includes:

[0007] After the application program is initialized, pre-load the web view component of the application program;

[0008] Send a data request to the server through the web view component;

[0009] Load the response data sent by the server based on the data request to render the page.

[0010] In the optimization method for the application program on a mobile terminal of this solution, by pre-loading the web view component after the application program is initialized, it is no longer necessary to initialize the web view component after entering the web view, thereby shortening the time for the page to be opened for the first time.

[0011] Preferably, the method further includes:

[0012] Before the application is initialized, initialize the display loading component to reserve page rendering time;

[0013] After the page rendering is completed, hide the display loading component.

[0014] This solution initializes the display loading component before the APP is initialized, giving time to render the page and avoiding a blank screen that leads to a poor user experience.

[0015] Preferably, the application includes a hybrid application; the native side and the front end of the hybrid application interact through a bridge object;

[0016] The step of sending a data request to the server through the web view component includes:

[0017] Send a bridge object call request through the rendering module of the web view component to send the data request from the front end to the native side;

[0018] Send a data request to the server through the native side.

[0019] The native side and the front end of the hybrid application in this solution interact through a bridge object, optimizing the interaction speed.

[0020] Preferably, the rendered page includes an H5 page;

[0021] The step of loading the response data sent by the server based on the data request to render the page includes:

[0022] Receive and cache the response data;

[0023] Render the H5 page based on the response data.

[0024] In this solution, when transferring response data between the H5 server and the native side, caching the transferred response data can reduce the data transfer and acquisition time. The H5 server caches the response data set before sending the response data, and the native side receives it centrally when receiving the response data and then renders the page, thereby shortening the page rendering time and reducing the data transfer and acquisition time.

[0025] Preferably, the native side and the front end of the hybrid application interact through a bridge object, specifically including:

[0026] In the front end, configure the request interface path of the data request as the first interface path;

[0027] In the bridge object, configure a request proxy component based on the multi-channel concurrent transmission protocol;

[0028] Intercept the data request whose request interface path is the first interface path through the request proxy component;

[0029] Rewrite the request interface path of the intercepted data request as a second interface path through the request proxy component, and the second interface path is the path of the server.

[0030] The proxy front-end API request of this solution uses a multi-channel concurrent transmission protocol, which can reduce ambiguous transmission and enhance the efficiency and reliability of data transmission.

[0031] The present invention also provides an optimization system for a mobile application, and the system includes:

[0032] A web view component preloading module, configured to preload the web view component of the application after the application is initialized;

[0033] A data request sending module, configured to send a data request to a server through the web view component;

[0034] A page rendering module, configured to load response data sent by the server based on the data request to render a page.

[0035] In the optimization system for a mobile application of this solution, by preloading the web view component after the application is initialized, there is no need to initialize the web view component after entering the web view, thereby shortening the time for the page to be opened for the first time.

[0036] Preferably, the application optimization system further includes:

[0037] A display loading component control module, configured to initialize and display a loading component before the application is initialized to reserve page rendering time;

[0038] The display loading component control module is further configured to hide the display loading component after the page rendering is completed.

[0039] This solution initializes the display loading component before the APP is initialized, gives time to render the page, and avoids a blank screen resulting in a poor user experience.

[0040] Preferably, the application includes a hybrid application; the native side and the front end of the hybrid application interact through a bridge object;

[0041] The data request sending module is specifically configured to send a bridge object call request through the rendering module of the web view component to send the data request of the front end to the native side;

[0042] The data sending module is specifically configured to send a data request to the server through the native side; and / or,

[0043] The rendered page includes an H5 page;

[0044] The page rendering module is specifically configured to receive and cache the response data;

[0045] The page rendering module is specifically configured to render the H5 page based on the response data.

[0046] In the hybrid application of this solution, the native side and the front end interact through a bridge object, optimizing the interaction speed; and by caching communication data on the H5 side, the data transfer and acquisition time are reduced.

[0047] The present invention also provides an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the computer program, the application optimization method for the mobile terminal as described above is implemented.

[0048] The present invention also provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the application optimization method for the mobile terminal as described above is implemented.

[0049] The positive and progressive effects of the present invention are as follows:

[0050] In the application optimization method for the mobile terminal of the present invention, after the application is initialized, the web view component is pre-loaded, so that there is no need to initialize the web view component again after entering the web view, thereby shortening the time for the page to be opened for the first time. BRIEF DESCRIPTION OF THE DRAWINGS

[0051] In order to more clearly illustrate the technical solutions of the embodiments of this specification, the drawings required for the description of the embodiments will be briefly introduced below. Obviously, the drawings in the following description are only some examples or embodiments of this specification. For those of ordinary skill in the art, without creative efforts, this specification can also be applied to other similar scenarios based on these drawings. Unless obvious from the language context or otherwise stated, the same reference numerals in the drawings represent the same structure or operation.

[0052] Figure 1 It is the first flowchart of the application optimization method for the mobile terminal in Embodiment 1 of the present invention.

[0053] Figure 2 It is the second flowchart of the application optimization method for the mobile terminal in Embodiment 1 of the present invention.

[0054] Figure 3Schematic diagram of the application program optimization system for the mobile terminal in Embodiment 2 of the present invention.

[0055] Figure 4 Schematic diagram of the electronic device in Embodiment 3 of the present invention. Detailed implementation manners

[0056] The present invention will be further illustrated by way of examples below, but the present invention is not limited to the scope of the described examples.

[0057] Referring to "embodiment" herein means that a specific feature, structure, or characteristic described in connection with the embodiment may be included in at least one embodiment of the present application. The phrase appears at various positions in the text does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. Those skilled in the art explicitly and implicitly understand that the embodiments described herein can be combined with other embodiments.

[0058] As shown herein, unless the context clearly indicates an exception, words such as "a", "an", "one", and / or "the" are not specifically singular and may also include plural. Generally speaking, the terms "comprising" and "including" only indicate the inclusion of the steps and elements that have been clearly identified, and these steps and elements do not constitute an exclusive list. The method or device may also include other steps or elements.

[0059] The definitions of "first" and "second" in this article, the descriptions of "first", "second", etc. that appear in this article are only for schematic and distinguishing the described objects, without an order, nor do they represent a special limitation on the number of devices in this article, and cannot constitute any limitation to this article. For example, the first element may be referred to as the second element without departing from the scope of the present disclosure. Similarly, the second element may be referred to as the first element.

[0060] Flowcharts are used herein to illustrate the operations performed by the systems according to the embodiments of the present invention. It should be understood that the operations before or after do not necessarily need to be executed precisely in order. On the contrary, the steps can be processed in reverse order or simultaneously. At the same time, other operations can also be added to these processes, or one or more steps can be removed from these processes.

[0061] Embodiment 1

[0062] Please refer to Figure 1 , which is a flowchart of the application program optimization method for the mobile terminal in this embodiment.

[0063] Specifically, as Figure 1 shown, the method includes:

[0064] S101. After the application program is initialized, preload the web view component of the application program;

[0065] S102. Send a data request to the server through a web view component;

[0066] S103. Load the response data sent by the server based on the data request to render the page.

[0067] In this embodiment, the web view component is a control for displaying web pages. In the Android system, the web view component can be a WebView component. In the iOS system, the web view component can be a UIWebView component. Specifically, the hybrid development mode usually consists of an HTML5 server and a mobile application. The native code part uses a WebView plugin to provide a container for H5, and the main business implementation and interface display of the program are implemented using Web technologies related to H5. By preloading the web view component, there is no need to initialize the web view component again after entering the web view, thus shortening the time for the page to be opened for the first time.

[0068] Please refer to Figure 2 , which is the second flowchart of the mobile application optimization method in this embodiment. Specifically, as Figure 2 shown, in an alternative embodiment, the method further includes:

[0069] S201. Before the application is initialized, initialize the display loading component to reserve page rendering time;

[0070] S202. Hide the display loading component after the page rendering is completed.

[0071] Specifically, the initialization process of the application includes using the display loading component to render page animations or page effects. As the functions of the application increase, the page rendering time and the initialization time of the display loading component will become longer, and the blank screen time of the application during initialization can be several seconds, resulting in a poor user experience. By initializing the display loading component in advance before the application is initialized, for example, by monitoring the historical usage time of the application to summarize the usage rules of the application, the waiting time for initializing the display loading component can be reduced, and page rendering can be performed when the application starts to initialize, avoiding the appearance of a blank screen; after the page rendering is completed, the display loading component can be hidden to release computing resources and save energy consumption.

[0072] In this embodiment, the application includes a hybrid application; the native side and the front end of the hybrid application interact through a bridge object; step S102 includes:

[0073] S1021. Send a bridge object call request through the rendering module of the web view component to send the data request of the front end to the native side;

[0074] S1022. Send a data request to the server through the native side.

[0075] Specifically, in the Hybrid mode, there is a two-way call between the native side and the H5 side. For example, the H5 side often needs to use functions such as opening the QR code scanning, calling the native page, and obtaining user information of the native side. At the same time, the native side also needs to send push messages and update status to the Web side. For JavaScript, JavaScript runs in a separate JS Context, which is isolated from the native side in terms of the running environment and needs to communicate with the native side through bridging. The bridge object of JavaScript can be JSBridge; JSBridge uses the JavaScript engine or the Webview container as a medium and communicates through an agreement protocol, which is a mechanism for realizing two-way communication between the native side and the Web side. Through JSBridge, the Web side can call the Java interface of the native side, and similarly, the native side can also call the JavaScript interface of the Web side through JSBridge to achieve two-way calls between each other. In this embodiment, page rendering can be achieved by calling the render function. The render function can compile the HTML syntax template into a JavaScript function, enabling the application to develop more functions. This embodiment does not limit the selection of the rendering function, and those skilled in the art can select a rendering function suitable for the R & D platform or the development function of the application based on this embodiment.

[0076] In an alternative embodiment, the rendered page includes an H5 page; step S103 includes:

[0077] S1031. Receive and cache the response data;

[0078] S1032. Render the H5 page based on the response data.

[0079] Specifically, hybrid development (Hybrid App development) is to mix and use native development technologies and HTML5 development technologies for App development. An H5 page refers to a web page developed based on HTML5 technology. H5 pages usually have better accessibility, interactivity, responsiveness, and mobile support. When rendering an H5 page, data transmission is required between the H5 server and the native side. Limited by the network status and data transmission speed, it will cause the page rendering time to increase. By caching the transmitted response data when the H5 server and the native side perform response data transmission, the data transfer and acquisition time can be reduced. The H5 server caches the response data and sends it in a concentrated manner before sending the response data, and the native side receives it in a concentrated manner when receiving the response data and then renders the page, thereby shortening the page rendering time.

[0080] In another alternative embodiment, the native side and the front end of the hybrid application interact through a bridge object, specifically including:

[0081] In the front end, configure the request interface path of the data request as the first interface path;

[0082] In the bridge object, configure a request proxy component based on the multiplexed concurrent transmission protocol;

[0083] Through the request proxy component, intercept the data request whose request interface path is the first interface path;

[0084] Through the request proxy component, rewrite the request interface path of the intercepted data request as the second interface path, and the second interface path is the path of the server.

[0085] The multiplexed concurrent transmission protocol in this embodiment may be the QUIC protocol. Specifically, the data request sent by the front end is sent to the local server, and there will be no cross-domain problem. However, when the data request is sent to the back-end server, there is a cross-domain situation. Therefore, it is necessary to map the request sent to the local server to the back-end address through a proxy. The choice of the multiplexed concurrent transmission protocol in this embodiment is not limited, and those skilled in the art can select a multiplexed concurrent transmission protocol suitable for the transmission function of the R & D platform or application program based on this embodiment. The multiplexed concurrent transmission protocol can reduce ambiguous transmission and enhance the efficiency and reliability of data transmission. Further illustrate by example:

[0086] 1. Change the back-end interface configured by baseURL to " / api". URL (Uniform Resource Locator) is a representation method used on network service programs to specify the location of information. The data request in the front end will have a request interface path, but the request interface path of the data request in this embodiment will be reconfigured. Therefore, configure the request interface path of the front-end data request as the first interface path for easy identification and modification.

[0087] 2. Configure the proxy. At this time, the proxy will listen and intercept all interfaces with " / api" in the request interface, and then rewrite the interface path, writing " / api" in the interface as the target port and mapping the request sent to the local server to the back-end interface address set in the target. Configure the request proxy component proxy based on the multiplexed concurrent transmission protocol. The proxy component proxy listens and intercepts the data request of the first interface path, rewrites the request interface path of the intercepted data request as the second interface path, and the second interface path is the path of the server, and sends it to the native side, and then the native side requests the H5 server.

[0088] The method embodiments described above are merely illustrative. The preceding or subsequent steps do not necessarily need to be precisely executed in sequence. Instead, they can be executed in reverse order or processed simultaneously. At the same time, other operations can also be added to these processes, or one or several steps can be removed from these processes. Those of ordinary skill in the art can understand and implement them without creative efforts.

[0089] The method for optimizing the application on the mobile terminal of this solution preloads the web view component after the application is initialized, thereby shortening the time for the page to be opened for the first time. And by initializing and displaying the loading before the APP is initialized, time is given for rendering the page, avoiding the appearance of a white screen and resulting in a poor user experience. And on the H5 side, the communication data is cached to reduce the time for data transfer and acquisition.

[0090] Embodiment 2

[0091] Please refer to Figure 3 , which is the structural schematic diagram of the application optimization system on the mobile terminal in this embodiment. Specifically, as Figure 3 shown, the system includes:

[0092] The web view component preloading module 1 is used to preload the web view component of the application after the application is initialized;

[0093] The data sending module 2 is used to send a data request to the server through the web view component;

[0094] The page rendering module 3 is used to load the response data sent by the server based on the data request to render the page.

[0095] Preferably, the application optimization system further includes:

[0096] The display loading component control module is used to initialize and display the loading component before the application is initialized to reserve time for page rendering;

[0097] The display loading component control module is further used to hide the display loading component after the page rendering is completed.

[0098] Preferably, the application includes a hybrid application; the native side and the front end of the hybrid application interact through a bridge object;

[0099] The data sending module is specifically used to send a bridge object call request through the rendering module of the web view component to send the data request of the front end to the native side;

[0100] The data sending module is specifically used to send a data request to the server through the native side;

[0101] The rendered page includes an H5 page;

[0102] The page rendering module is specifically configured to receive and cache the response data;

[0103] The page rendering module is specifically configured to render an H5 page based on the response data.

[0104] Preferably, the native side and the front end of the hybrid application interact through a bridge object, specifically including:

[0105] In the front end, configure the request interface path of the data request as a first interface path;

[0106] In the bridge object, configure a request proxy component based on a multi-channel concurrent transmission protocol;

[0107] Through the request proxy component, intercept the data request whose request interface path is the first interface path;

[0108] Through the request proxy component, rewrite the request interface path of the intercepted data request as a second interface path, and the second interface path is the path of the server.

[0109] For the system embodiment, since it basically corresponds to the method embodiment, the relevant parts can be referred to the partial description of the method embodiment. The system embodiment described above is only illustrative. The modules described as separate components may or may not be physically separated, and the modules shown as units may or may not be physical units, that is, they may be located in one place or distributed to multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the present disclosure solution. Those of ordinary skill in the art can understand and implement it without creative efforts.

[0110] Embodiment 3

[0111] Figure 4 FIG. is a schematic structural diagram of an electronic device provided in Embodiment 3 of the present disclosure. The electronic device includes a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the program, it implements the application program optimization method for the mobile terminal in Embodiment 1. Figure 4 The electronic device 30 shown is only an example and should not bring any limitation to the functions and usage scope of the embodiments of the present disclosure.

[0112] Such as Figure 4As shown, the electronic device 30 may be embodied in the form of a general-purpose computing device. For example, it may be a server device. The components of the electronic device 30 may include, but are not limited to: at least one of the above-mentioned processors 31, at least one of the above-mentioned memories 32, and a bus 33 that connects different system components (including the memory 32 and the processor 31).

[0113] The bus 33 includes a data bus, an address bus, and a control bus.

[0114] The memory 32 may include volatile memory, such as random access memory (RAM) 321 and / or cache memory 322, and may further include read-only memory (ROM) 323.

[0115] The memory 32 may further include a program / utility 325 having a set (at least one) of program modules 324. Such program modules 324 include, but are not limited to: an operating system, one or more application programs, other program modules, and program data. Each or some combination of these examples may include the implementation of a network environment.

[0116] The processor 31 executes various functional applications and data processing by running computer programs stored in the memory 32, such as the application program optimization method for the mobile terminal in Embodiment 1 of the present invention.

[0117] The electronic device 30 may also communicate with one or more external devices 34 (such as a keyboard, a pointing device, etc.). Such communication may be performed through an input / output (I / O) interface 35. Moreover, the device 30 for model generation may also communicate with one or more networks (such as a local area network (LAN), a wide area network (WAN), and / or a public network, such as the Internet) through a network adapter 36. As shown in the figure, the network adapter 36 communicates with other modules of the device 30 for model generation through the bus 33. It should be understood that although not shown in the figure, other hardware and / or software modules may be used in combination with the device 30 for model generation, including but not limited to: microcode, device drivers, redundant processors, external disk drive arrays, RAID (disk array) systems, tape drives, and data backup storage systems, etc.

[0118] It should be noted that although several units / modules or sub-units / modules of the electronic device are mentioned in the above detailed description, this division is merely exemplary and not mandatory. In fact, according to the embodiments of the present disclosure, the features and functions of two or more of the above-mentioned units / modules may be embodied in one unit / module. Conversely, the features and functions of one unit / module described above may be further divided and embodied by multiple units / modules.

[0119] Embodiment 4

[0120] This embodiment provides a computer-readable storage medium, on which a computer program is stored. When the program is executed by a processor, it implements the method for optimizing the application program on the mobile terminal in Embodiment 1.

[0121] Among them, more specifically, the readable storage medium may include but is not limited to: portable disks, hard disks, random access memories, read-only memories, erasable programmable read-only memories, optical storage devices, magnetic storage devices, or any suitable combination of the above.

[0122] In a possible implementation manner, the present disclosure may also be implemented in the form of a program product, which includes program code. When the program product runs on a terminal device, the program code is used to cause the terminal device to execute the method for optimizing the application program on the mobile terminal in Embodiment 1.

[0123] Among them, the program code for executing the present disclosure can be written in any combination of one or more programming languages. The program code can be completely executed on the user device, partially executed on the user device, executed as an independent software package, partially executed on the user device and partially executed on a remote device, or completely executed on a remote device.

[0124] Although the specific implementation manners of the present invention have been described above, those skilled in the art should understand that this is only an example. The protection scope of the present invention is defined by the appended claims. Without departing from the principle and essence of the present invention, those skilled in the art can make various changes or modifications to these implementation manners, but these changes and modifications all fall within the protection scope of the present invention.

Claims

1. A method for optimizing an application program on a mobile device, characterized in that, The method includes: After the application is initialized, pre-load the web view component of the application; Send a data request to the server through the web view component; Load the response data sent by the server based on the data request to render the page.

2. The application program optimization method according to claim 1, wherein The method further includes: Before the application is initialized, initialize the display loading component to reserve page rendering time; After the page rendering is completed, hide the display loading component.

3. The application program optimization method according to claim 1, wherein, The application includes a hybrid application; the native side and the front end of the hybrid application interact through a bridge object; The step of sending a data request to the server through the web view component includes: Send a bridge object call request through the rendering module of the web view component to send the data request of the front end to the native side; Send a data request to the server through the native side.

4. The application program optimization method according to claim 3, wherein, The rendered page includes an H5 page; The step of loading the response data sent by the server based on the data request to render the page includes: Receive and cache the response data; Render the H5 page based on the response data.

5. The application program optimization method according to claim 3, wherein The native side and the front end of the hybrid application interact through a bridge object, specifically including: In the front end, configure the request interface path of the data request as the first interface path; In the bridge object, configure a request proxy component based on the multi-channel concurrent transmission protocol; Through the request proxy component, intercept the data request whose request interface path is the first interface path; Through the request proxy component, rewrite the request interface path of the intercepted data request as the second interface path, and the second interface path is the path of the server.

6. An application optimization system for a mobile device, characterized in that, The system includes: A web view component pre-loading module, which is used to pre-load the web view component of the application after the application is initialized; A data request sending module, which is used to send a data request to the server through the web view component; A page rendering module, which is used to load the response data sent by the server based on the data request to render the page.

7. The application program optimization system according to claim 6, wherein The application optimization system further includes: A display loading component control module, which is used to initialize the display loading component to reserve page rendering time before the application is initialized; The display loading component control module is further used to hide the display loading component after the page rendering is completed.

8. The application program optimization system according to claim 6, characterized in that The application includes a hybrid application; the native side and the front end of the hybrid application interact through a bridge object; The data request sending module is specifically used to send a bridge object call request through the rendering module of the web view component to send the data request of the front end to the native side; The data request sending module is specifically used to send a data request to the server through the native side; and / or, The rendered page includes an H5 page; The page rendering module is specifically used to receive and cache the response data; The page rendering module is specifically used to render the H5 page based on the response data.

9. An electronic device, comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the application optimization method for the mobile terminal according to any one of claims 1 to 5.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the application program optimization method for a mobile terminal according to any one of claims 1 to 5.

Images