CN114282144A - Method for quickly loading first screen page based on mobile terminal network state - Google Patents
Method for quickly loading first screen page based on mobile terminal network state Download PDFInfo
- Publication number
- CN114282144A CN114282144A CN202111579551.4A CN202111579551A CN114282144A CN 114282144 A CN114282144 A CN 114282144A CN 202111579551 A CN202111579551 A CN 202111579551A CN 114282144 A CN114282144 A CN 114282144A
- Authority
- CN
- China
- Prior art keywords
- page
- network
- resources
- loading
- screen
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
The application discloses a method for quickly loading a first screen page based on a mobile terminal network state, which is characterized by comprising the following specific steps: monitoring the current network state, and dividing the real-time network state into three types: the method has the advantages that no network connection exists, the network speed is low, the network speed is good, different loading schemes are configured aiming at different states, and the first screen is loaded quickly; secondly, page loading is combined with a lazy loading technology, a page of a first screen is preferentially loaded and displayed, and other page resources are subsequently loaded; the loading strategy is as follows: no network connection is available: reading cache resources, displaying a first screen page, and displaying a default prompt of the browser if no resources are cached; the network is slow: loading necessary resources required by the configuration of the first screen page, and obtaining the resources through a network request; the network is good: and configuring a first screen page to load required resources, displaying the optimal page effect, and obtaining the optimal page effect through a network request. By applying the method provided by the application, the opening speed of the first screen page can be increased, and the user experience is improved.
Description
Technical Field
The application relates to a method for quickly loading a first screen page based on a mobile terminal network state, and relates to the technical field of mobile internet interaction.
Background
In the field of mobile internet, a front-end page is directly contacted by a user, and in the front-end page, the strongest perception of the user is the first-time loading speed, namely the first-time loading speed of the front-end page seriously influences the retention of the user, so that the page opening display speed must be improved through technical means, and the content is ensured to be displayed at the first time. The browser or the application built-in webview used by the mobile internet at present adopts a cache form to accelerate the reading of pages and improve the response speed, but the network state of a mobile terminal cannot be sensed by adopting the cache form alone, and no corresponding loading scheme is provided for different network states.
Disclosure of Invention
The application aims to improve the display speed of a front-end page and improve user experience.
In order to achieve the above object, the technical solution of the present application provides a method for quickly loading a home screen page based on a mobile terminal network state, which is characterized by comprising the following specific steps:
monitoring the current network state, and dividing the real-time network state into three types: the method has the advantages that no network connection exists, the network speed is low, the network speed is good, different loading schemes are configured aiming at different states, and the first screen is loaded quickly;
secondly, page loading is combined with a lazy loading technology, a page of a first screen is preferentially loaded and displayed, and other page resources are subsequently loaded; the specific implementation process is that priority loading resources are configured according to the network state in the first step, and a corresponding loading strategy is formulated:
no network connection is available: reading cache resources, displaying a first screen page, and displaying a default prompt of the browser if no resources are cached;
the network is slow: loading necessary resources required by the configuration of the first screen page, and obtaining the resources through a network request;
the network is good: and configuring a first screen page to load required resources, displaying the optimal page effect, and obtaining the optimal page effect through a network request.
In the first step, the network speed indicates that the time obtained by dividing the content data volume of the first screen page by the current network speed exceeds one second; the network speed is good, and the time obtained by dividing the content data volume of the first screen page by the current network speed is not more than one second.
In the second step, the first screen page loads necessary resources to represent resources except photos, audios and videos in the first screen page; the resource required by the loading of the first screen page represents the display resource in the visible area of the first screen page.
In the second step, the browser and the application built-in webview acquire resources through a network request or a read cache, render, load and display the page, and simultaneously store the latest resources locally by using the cache for subsequent use.
According to the method and the device, the current network state is monitored by combining the technology based on browser caching and real-time network state, the opening speed of the first screen page is increased by the technical means, and the user experience is improved.
Drawings
FIG. 1 is a flowchart of a method for fast loading a home screen page provided in an embodiment;
FIG. 2 is a schematic view of a resource displayed on a home screen page.
Detailed Description
In order to make the present application more comprehensible, preferred embodiments are described in detail below with reference to the accompanying drawings.
Examples
The embodiment provides a method for rapidly loading a first screen page by monitoring the current network state based on browser caching, built-in webview caching and network requests.
The browser cache is used for saving network resources and accelerating browsing, the browser stores a recently requested page at a user terminal, and when a visitor requests the page again, the browser can read the page from the cache, so that the browsing of the page is accelerated, and the response speed is improved; the resources of the network are saved in a cache mode, and the efficiency of the network is improved. The webview is used as a webpage view and can be embedded in a mobile terminal, hybrid development of a front end is achieved, a built-in webview cache is matched with a browser cache, cache effects can be provided in both modes, and network resources are saved.
The method is shown in figure 1 and comprises the following specific steps:
monitoring the current network state, and dividing the network state into three types: 1. the method comprises the following steps of (1) no network connection, 2, low network speed (the time obtained by dividing the content data volume of a first screen page by the current network speed is over one second), 3, good network speed and real-time network state (the time obtained by dividing the content data volume of the first screen page by the current network speed is not over one second), configuring different loading schemes aiming at different states and realizing the quick loading of the first screen;
secondly, page loading is combined with a lazy loading technology, a page of a first screen is preferentially loaded and displayed, and other page resources are subsequently loaded; the specific implementation process is that priority loading resources are configured according to the network state in the first step, and a corresponding loading strategy is formulated:
no network connection is available: reading cache resources, displaying a first screen page, and displaying a default prompt of the browser if no resources are cached;
the network is slow: loading necessary resources required by the configuration of the first screen page, and obtaining the resources through a network request; (the necessary resources required here are resources other than photos, audio, and video in the first screen page)
The network is good: and configuring the first screen page to load the required resources, displaying the optimal page effect (the required resources refer to display resources in a visible area of the first screen page, as shown in fig. 2), and requesting to acquire the required resources through a network.
In the second step, the browser and the application built-in webview acquire resources through network requests or reading caches, render, load and display pages, and simultaneously store the latest resources locally by using the caches for subsequent use.
The method can be realized based on the original JavaScript language, judges the current network state and is used for making different resource loading strategies under different network states.
At present, most web pages are loaded by using a default loading strategy of a browser, all page resources are directly given to the browser to request for loading the page by a network, and the resources which are not required to be loaded on the first screen are simultaneously requested when the page is loaded for the first time, so that the page display speed is influenced. According to the method, the resources required by the first screen can be loaded for the first time and displayed preferentially through a self-configuration strategy, and other resources are loaded subsequently, so that the page opening speed is increased. Compared with the prior art, the main advantages are that:
the method for quickly loading the first screen page based on the network state of the mobile terminal mainly comprises the steps of judging the network state through the original JavaScript, configuring a resource loading strategy, controlling the resource loading strategy to be delivered to a browser, applying the quantity and the size of the request of a built-in webview network, and improving the loading speed of the first screen; through a self-configuration strategy, the resources required by the first screen are loaded for the first time and preferentially displayed, and other resources are loaded subsequently, so that the page opening speed is increased. The method can be applied to any webpage display; the method can be applied to any browser and built-in webview. By using the method, the loading speed of the first screen of the page can be increased; user experience is improved, and user retention rate is improved.
Claims (6)
1. A method for quickly loading a first screen page based on a mobile terminal network state is characterized by comprising the following specific steps:
monitoring the current network state, and dividing the real-time network state into three types: the method has the advantages that no network connection exists, the network speed is low, the network speed is good, different loading schemes are configured aiming at different states, and the first screen is loaded quickly;
secondly, page loading is combined with a lazy loading technology, a page of a first screen is preferentially loaded and displayed, and other page resources are subsequently loaded; the specific implementation process is that priority loading resources are configured according to the network state in the first step, and a corresponding loading strategy is formulated:
no network connection is available: reading cache resources, displaying a first screen page, and displaying a default prompt of the browser if no resources are cached;
the network is slow: loading necessary resources required by the configuration of the first screen page, and obtaining the resources through a network request;
the network is good: and configuring a first screen page to load required resources, displaying the optimal page effect, and obtaining the optimal page effect through a network request.
2. The method according to claim 1, wherein in the first step, the slow speed indicates that the time obtained by dividing the data amount of the content of the first screen by the current speed exceeds one second.
3. The method according to claim 1, wherein in the first step, the net speed indicates that the time obtained by dividing the data amount of the content of the first screen by the current net speed does not exceed one second.
4. The method according to claim 1, wherein in step two, the necessary resources for loading the first screen page represent resources other than photos, audio, and video in the first screen page.
5. The method according to claim 1, wherein in step two, the first screen page loading the required resource represents a display resource in a visible area of the first screen page.
6. The method for fast loading the first screen page based on the network status of the mobile terminal according to claim 1, wherein in the second step, the browser and the application built-in webview acquire the resources by requesting or reading the cache through the network and render, load and display the page, and meanwhile, the cache is utilized to store the latest resources locally for subsequent use.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111579551.4A CN114282144A (en) | 2021-12-22 | 2021-12-22 | Method for quickly loading first screen page based on mobile terminal network state |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111579551.4A CN114282144A (en) | 2021-12-22 | 2021-12-22 | Method for quickly loading first screen page based on mobile terminal network state |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114282144A true CN114282144A (en) | 2022-04-05 |
Family
ID=80873695
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111579551.4A Pending CN114282144A (en) | 2021-12-22 | 2021-12-22 | Method for quickly loading first screen page based on mobile terminal network state |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114282144A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114840162A (en) * | 2022-05-10 | 2022-08-02 | 北京字跳网络技术有限公司 | Method and device for presenting first screen page, electronic equipment and storage medium |
| CN116466953A (en) * | 2023-03-03 | 2023-07-21 | 港珠澳大桥管理局 | Modularized front-end development method, device, computer equipment and storage medium |
-
2021
- 2021-12-22 CN CN202111579551.4A patent/CN114282144A/en active Pending
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114840162A (en) * | 2022-05-10 | 2022-08-02 | 北京字跳网络技术有限公司 | Method and device for presenting first screen page, electronic equipment and storage medium |
| CN116466953A (en) * | 2023-03-03 | 2023-07-21 | 港珠澳大桥管理局 | Modularized front-end development method, device, computer equipment and storage medium |
| CN116466953B (en) * | 2023-03-03 | 2024-01-02 | 港珠澳大桥管理局 | Modularized front-end development method, device, computer equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102438045B (en) | Method and system for pre-fetching web page, and method for accessing web page | |
| CN114282144A (en) | Method for quickly loading first screen page based on mobile terminal network state | |
| US10698559B2 (en) | Method and apparatus for displaying content on same screen, and terminal device | |
| KR102151457B1 (en) | Method and apparatus for reducing page load time in a communication system | |
| US9262328B2 (en) | Using cache hit information to manage prefetches | |
| US20160371229A1 (en) | Method and system for previewing a web page | |
| US20140136973A1 (en) | Segmented delivery of preview content | |
| JP2007083873A (en) | On-vehicle display device and on-vehicle proxy server used for the same | |
| WO2008071097A1 (en) | Web page displaying method and system | |
| CN102520918A (en) | Method and device for increasing list refreshing frequency | |
| CN101895635A (en) | Mobile terminal-based image converting method and device | |
| CN101021847A (en) | Method for optimizing embedded browser page display effect | |
| US9594846B2 (en) | Client side caching | |
| CN110730196A (en) | Network resource access method, computer equipment and storage medium | |
| CN103618799A (en) | Browser caching processing method and system and proxy server | |
| US20120284346A1 (en) | Requesting Computer Data Assets | |
| KR20120114270A (en) | Rendering a web page comprising plug-in content | |
| CN111581553A (en) | Network image display method, system, electronic equipment and storage medium | |
| CN112559172A (en) | Method, system, equipment and storage medium for optimizing memory of web browser | |
| CN106909627A (en) | A kind of content loading method, device and mobile device | |
| US11288336B2 (en) | Systems and methods for providing content items in situations involving suboptimal network conditions | |
| CN114519155A (en) | Data processing method, device, client and storage medium | |
| US20150248347A1 (en) | Content providing apparatus and method, and computer program product | |
| JPH10260890A (en) | Hypertext data browsing system | |
| KR100459425B1 (en) | Wireless internet speed progress method for mobile communication device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |