Method and equipment for caching HTML (Hypertext Markup Language) resources at mobile terminal and storage medium

Abstract

The invention relates to the technical field of internet, in particular to a method and device for caching HTML (Hypertext Markup Language) resources at a mobile terminal and a storage medium, the loading speed of an H5 page passing through a resource caching strategy is remarkably improved, the average opening time of the page is reduced to 150-200 ms from 1000 ms, the user experience is greatly improved, and the user experience is greatly improved. Meanwhile, the page is not difficult to open in a weak network environment, various resource files in the page are locally stored in a mixed mode, the display effect does not strictly depend on the network environment any more, and user experience is effectively guaranteed.

Description

Technical Field

[0001] The present invention relates to the field of Internet technology, and in particular to a method, device and storage medium for performing HTML resource caching on a mobile terminal. Background Art

[0002] In the mobile internet era, loading HTML5 pages within various mobile apps has become a common UI presentation method. Due to its strong cross-device compatibility, ease of publishing, and low development and learning costs, H5 pages are a very popular front-end technology.

[0003] However, the page resources loaded by H5 pages are stored on the server side, and downloading resource files takes extra time. This makes the opening speed of H5 pages slower than that of pure native pages. Especially in weak network environments, users need to wait for a long time before they can see the page they opened. This has gradually become an obstacle to the wider use of H5 pages in apps.

[0004] Therefore, it is necessary to design a method, device and storage medium for HTML resource caching on mobile terminals. Through the resource caching strategy, the loading speed of H5 pages has been significantly improved, and the page opening can also be guaranteed in a weak network environment, which promotes the application of H5 pages. Summary of the Invention

[0005] The purpose of the present invention is to overcome the shortcomings of the existing technology and provide a method, device and storage medium for HTML resource caching on a mobile terminal. The resource caching strategy significantly improves the loading speed of H5 pages, ensures that pages can be opened even in a weak network environment, and promotes the application of H5 pages.

[0006] In order to achieve the above object, the present invention provides a method for caching HTML resources on a mobile terminal, comprising the following steps: S1: When a page request is made, the local interceptor pre-judges the accessed resources one by one. If the domain name to which the resource belongs is in the whitelist, the access to the resource is blocked. S2, after intercepting access to resources, maps the resource's file path to a local path, and searches the local sandbox and pre-installed package in turn based on the path; S3, if S2 hits, directly reads the file and puts it back to the browser, achieving an immediate loading effect; S4, if S2 does not hit, then use the original remote path to access the server resource to ensure that the user can access the page normally; S5: To facilitate the update of local offline resources, the version of the local offline package is checked after each cold start of the App. If a new version of the offline package is released, it is silently updated in the background to ensure the real-time performance of local resources during use.

[0007] The whitelist is the domain names that the App accesses and needs to be cached.

[0008] An electronic device includes a processor and a memory storing a program. The program includes instructions. When the instructions are executed by the processor, the processor executes a method for caching HTML resources on a mobile terminal.

[0009] A non-transitory computer-readable storage medium storing computer instructions, wherein the computer instructions are used to enable a computer to execute a method for caching HTML resources on a mobile terminal.

[0010] Compared with the prior art, the present invention has the following beneficial effects: The present invention significantly improves the loading speed of H5 pages after implementing the resource caching strategy. The average page opening time is reduced from 1000ms to 150-200ms, and the user experience is greatly improved, as shown in the following table:

[0011] Taking the page https: / / material-h5.meethome.com / owner as an example, on a normal 4G network, the first-time loading time data is as follows, and the average loading time is shortened by about 80%:

[0012] The present invention does not have difficulty opening pages in a weak network environment. Various resource files in the page have been cached locally, and the display effect is no longer strictly dependent on the network environment, and the user experience is effectively guaranteed. BRIEF DESCRIPTION OF THE DRAWINGS

[0013] Figure 1 It is a schematic diagram of the overall process of the present invention.

[0014] Figure 2 Schematic diagram of the offline package flow of the present invention. DETAILED DESCRIPTION

[0015] The present invention will now be further described with reference to the accompanying drawings.

[0016] See also Figures 1-2 The present invention provides a method for caching HTML resources on a mobile terminal, comprising the following steps: S1: When a page request is made, the local interceptor pre-judges the accessed resources one by one. If the domain name to which the resource belongs is in the whitelist, the access to the resource is blocked. S2, after intercepting access to resources, maps the resource's file path to a local path, and searches the local sandbox and pre-installed package in turn based on the path; S3, if S2 hits, directly reads the file and puts it back to the browser, achieving an immediate loading effect; S4, if S2 does not hit, then use the original remote path to access the server resource to ensure that the user can access the page normally; Hit and miss in S3 and S4 can be understood as "found" and "not found". A remote file is mapped to a local path. The file in this local path may or may not exist. If it exists, it is a "hit", and if it does not exist, it is a "miss".

[0017] for example: 1. Try to access a js file www.meethome.com / js / a.js 2. The local path mapped to www_meethome_com / js / a.js can be used directly if the file corresponding to this path exists (i.e., hit). If it does not exist (i.e., miss), you need to access it remotely.

[0018] The analogy can be understood as: We have a supermarket with shelves and a warehouse. When a customer comes to shop, if the product they want is on the shelf (a hit), they can just take it to the customer. If it is not on the shelf (a miss), they need to go to the warehouse to get it.

[0019] S5: To facilitate the update of local offline resources, the version of the local offline package is checked after each cold start of the App. If a new version of the offline package is released, it is silently updated in the background to ensure the real-time performance of local resources during use.

[0020] The whitelist contains domains that the app accesses and requires caching. For example, the Xiangyu app's internal webpages include pages developed by Xiangyu itself (meethome.com) and also display content from other three-bedroom websites (such as baidu.com). If the overall caching strategy only applies to the meethome.com domain and excludes content from baidu.com, simply add meethome.com to the whitelist.

[0021] An electronic device includes a processor and a memory storing a program. The program includes instructions. When the instructions are executed by the processor, the processor executes a method for caching HTML resources on a mobile terminal.

[0022] A non-transitory computer-readable storage medium storing computer instructions, wherein the computer instructions are used to enable a computer to execute a method for caching HTML resources on a mobile terminal.

[0023] The following are specific application examples of this embodiment: 1. The user attempts to access the [Owner Authorization] page in the Xiangyu App.

[0024] 2. The app will open the page at: https: / / material-h5.meethome.com / owner.

[0025] 3. When the browser in the App loads the above URL, it will request several resource files in sequence.

[0026] for example: The address of [image resources] is: https: / / cdn.meethome.com / upload-platform / 75551f841b9a32d06e28c95c15859e60.png.

[0027] The address of [css resource] is: cdn_meethome_com / xiangyu-material-h5 / static / css / main.104acafc.css.

[0028] 4. Intercept the two requests from the browser and map the two file addresses to the local directory address: The address of [local address of image resource] is: cdn_meethome_com / upload-platform / 75551f841b9a32d06e28c95c15859e60.png.

[0029] The address of [local address of CSS resources] is: cdn_meethome_com / xiangyu-material-h5 / static / css / main.104acafc.css.

[0030] 5. Search the device locally based on the two addresses generated in step 4: 5.1. If the file exists locally, the content of the local file is directly returned to the browser for use, which saves the time of making remote requests and improves the user experience.

[0031] 5.2. If the file does not exist locally, request it remotely.

[0032] The above are merely preferred embodiments of the present invention and are intended to help understand the method and core concept of this application. The scope of protection of the present invention is not limited to the above embodiments. All technical solutions based on the concept of the present invention fall within the scope of protection of the present invention. It should be noted that for those skilled in the art, various improvements and modifications that do not depart from the principles of the present invention should also be considered within the scope of protection of the present invention.

[0033] In the description of the present invention, it should be noted that the terms "upper", "lower", "inside", "outside", etc. indicate orientations or positional relationships based on the orientations or positional relationships shown in the accompanying drawings. They are only for the convenience of describing the present invention and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation. Therefore, they cannot be understood as limiting the present invention.

[0034] The present invention solves the shortcomings of the prior art in that the resources loaded by the H5 page are stored on the server side, the resource file download takes extra time, and the opening is slow in a weak network environment, thus affecting the application of the H5 page in the APP. By caching the resources, the loading speed of the H5 page is significantly improved, the user experience is greatly improved, and at the same time, it is no longer difficult to open the page in a weak network environment. Various resource files in the page are mixed and stored locally, the display effect is no longer strictly dependent on the network environment, and the user experience is effectively guaranteed.

Claims

1. A method for caching HTML resources on a mobile terminal, characterized in that: The following steps are involved: S1: When a page request is made, the local interceptor pre-judges the accessed resources one by one. If the domain name to which the resource belongs is in the whitelist, the access to the resource is blocked. S2, after intercepting access to resources, maps the resource's file path to a local path, and searches the local sandbox and pre-installed package in turn based on the path; S3, if S2 hits, directly read the file and put the file back to the browser to achieve the effect of instant loading; S4: If S2 does not hit, then use the original remote path to access the server resource to ensure that the user can access the page normally; S5: To facilitate the update of local offline resources, the version of the local offline package is checked after each cold start of the App. If a new version of the offline package is released, it is silently updated in the background to ensure the real-time performance of local resources during use.

2. The method for caching HTML resources on a mobile terminal according to claim 1, wherein: The whitelist is the domain names that the App accesses and needs to be cached.

3. An electronic device, characterized in that: The method comprises a processor and a memory storing a program, the program comprising instructions which, when executed by the processor, cause the processor to perform the method according to claim 1 .

4. A non-transitory computer-readable storage medium storing computer instructions, wherein the computer instructions are used to cause a computer to execute the method described in claim 1.

Images