Page loading method and device, electronic equipment and storage medium

Abstract

Embodiments of the present application provide a page loading method and device, electronic equipment and storage medium, the method comprises: based on the received page loading request, determine the target address hash value corresponding to the page loading request; based on the pre-determined mapping relationship, determine the address data associated with the target address hash value, and based on the address data to obtain the target image element and storage; based on the storage address of the target image element and the rendering text corresponding to the page loading request corresponding to the page loading request, determine the target page corresponding to the page loading request. The technical scheme provided by the embodiments of the present application realizes the pre-established corresponding relationship between each image element and address data, so that after determining the target address hash value corresponding to the page loading request, the corresponding address data can be determined based on the corresponding relationship, and then the corresponding image element is called and stored, and then the technical effect of rendering the image element in the page is realized.

Description

Technical Field

[0001] The present invention relates to the field of page rendering technology, and in particular to a page loading method, apparatus, electronic device and storage medium. Background Technology

[0002] To enhance the visual appeal of web pages, a large number of images are often included. Developers typically download dynamically displayed images, such as carousels, from the native application before the webpage is requested. Once the page has loaded, appropriate tools are used to transfer the image data to the webpage for display.

[0003] When implementing this technical solution based on the above method, the inventors discovered the following problems:

[0004] The images on the page are pre-downloaded. However, when the application version is updated, that is, when the images on the webpage change, the stored images cannot be updated in time, resulting in content errors during page rendering. Furthermore, it requires the developers of the native application to handle this, leading to high labor costs and poor universality. Summary of the Invention

[0005] This invention provides a page loading method, apparatus, electronic device, and storage medium.

[0006] In a first aspect, embodiments of the present invention provide a page loading method, the method comprising:

[0007] Based on the received page loading request, determine the target address hash value corresponding to the page loading request;

[0008] Based on a predetermined mapping relationship, the address data associated with the target address hash value is determined, and the target image elements are obtained and stored based on the address data;

[0009] Based on the storage address of the target image element and the rendered text corresponding to the page loading request, the target page corresponding to the page loading request is determined.

[0010] Furthermore, determining the target address hash value corresponding to the page loading request includes:

[0011] Determine the target page address corresponding to the page loading request;

[0012] A hash operation is performed on the target page address to obtain the target address hash value corresponding to the page loading request.

[0013] Furthermore, determining the address data associated with the target address hash value based on a pre-determined mapping relationship includes:

[0014] Determine at least one candidate address associated with the target address hash value from a pre-established mapping table, and obtain the image address, image identifier, and background image address associated with each candidate address;

[0015] The mapping table is determined by parsing at least one image element in the page to be displayed.

[0016] Furthermore, the step of obtaining and storing the target image elements based on the address data includes:

[0017] Call at least one thread to obtain the image element corresponding to the image address and image identifier, and the background element corresponding to the background image address;

[0018] The image element and the background element are used as the target image element and stored locally.

[0019] Furthermore, determining the target page corresponding to the page loading request based on the storage address of the target image element and the rendered text corresponding to the page loading request includes:

[0020] When the rendering of the text is detected to be complete, the target script is invoked to fill the storage address back into the rendering page, so as to render the target page based on the target image element corresponding to the storage address.

[0021] Furthermore, determining the target page corresponding to the page loading request based on the storage address of the target image element and the rendered text corresponding to the page loading request includes:

[0022] During the process of rendering a page based on rendered text, it is determined whether the storage space corresponding to the storage address contains the target image element;

[0023] If so, the storage address is backfilled into the rendering page to render the target page based on the target image element corresponding to the storage address.

[0024] Furthermore, the method also includes:

[0025] Determine at least one page to be displayed corresponding to the target application and its page address hash value;

[0026] For each page to be displayed, determine the image address and image identifier of the image component in the current page to be displayed, as well as the background image address of the block layout element;

[0027] Based on the page address hash value, the corresponding image address, the image identifier, and the background image address, a mapping relationship is determined, and the target image is rendered based on the mapping relationship.

[0028] Secondly, embodiments of the present invention also provide a page loading device, the device comprising:

[0029] The hash value determination module is used to determine the target address hash value corresponding to the received page loading request.

[0030] The image element storage module is used to determine the address data associated with the target address hash value based on a predetermined mapping relationship, and to obtain and store the target image element based on the address data;

[0031] The target page rendering module is used to determine the target page corresponding to the page loading request based on the storage address of the target image element and the rendering text corresponding to the page loading request.

[0032] Thirdly, embodiments of the present invention also provide an electronic device, the electronic device comprising:

[0033] One or more processors;

[0034] Storage device for storing one or more programs.

[0035] When the one or more programs are executed by the one or more processors, the one or more processors implement the page loading method as described in any of the embodiments of the present invention.

[0036] Fourthly, embodiments of the present invention also provide a storage medium containing computer-executable instructions, which, when executed by a computer processor, are used to perform a page loading method as described in any of the embodiments of the present invention.

[0037] The technical solution of this invention, upon receiving a page loading request, determines the target address hash value corresponding to the request, determines the address data corresponding to the target address hash value based on a mapping relationship, and retrieves and stores image elements locally based on the address data. Based on the locally stored image elements and the rendered text corresponding to the page loading request, the target page is determined. This achieves the pre-establishment of a correspondence between each image element and the address data. After determining the target address hash value corresponding to the page loading request, the corresponding address data can be determined based on the correspondence, and then the corresponding image elements can be retrieved and stored. This achieves the technical effect of rendering the image elements on the page, solving the problem in the prior art where images are pre-stored, leading to errors in page rendering due to the application version not being updated in a timely manner. Attached Figure Description

[0038] To more clearly illustrate the technical solutions of exemplary embodiments of the present invention, the accompanying drawings used in describing the embodiments are briefly introduced below. Obviously, the accompanying drawings described are only a portion of the drawings of the embodiments to be described in this invention, and not all of the drawings. For those skilled in the art, other drawings can be obtained from these drawings without any creative effort.

[0039] Figure 1 This is a schematic diagram of a page loading method provided in an embodiment of the present invention;

[0040] Figure 2 This is a schematic diagram of a mapping relationship provided in an embodiment of the present invention;

[0041] Figure 3 This is a schematic diagram of a page loading method provided in an embodiment of the present invention;

[0042] Figure 4 This is a schematic diagram of a page loading device structure provided in an embodiment of the present invention;

[0043] Figure 5 This is a schematic diagram of an electronic device structure provided in an embodiment of the present invention. Detailed Implementation

[0044] The present invention will now be described in further detail with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and not intended to limit it. Furthermore, it should be noted that, for ease of description, the accompanying drawings show only the parts relevant to the present invention, and not all of the structures.

[0045] Before introducing the technical solutions provided by the embodiments of the present invention, an exemplary application scenario can be given first. To further improve the rendering efficiency of images on a webpage, webpage images involved in the current application version can be pre-stored. Upon receiving a page rendering request, page rendering can be performed based on the stored images. However, this requires pre-storing many image elements, and after application version upgrades, the image elements associated with each page need to be updated promptly. Failure to update promptly may result in page rendering errors. To address these issues, after application development is complete, the pages used by the application can be packaged and uploaded to the corresponding platform for parsing. This determines the image addresses of each image element on the page and establishes corresponding relationships. This allows modification of the corresponding image elements in the image addresses after application version updates, thereby improving page rendering performance.

[0046] It should be noted that the technical solutions provided in this disclosure can be deployed in any application that can use H5 pages. When a user triggers the application to obtain the corresponding webpage, the images in the webpage can be loaded based on the solutions provided in this disclosure, thereby improving image loading efficiency.

[0047] Figure 1 This is a schematic diagram of a page loading method provided in an embodiment of the present invention. This embodiment can be applied to situations where image elements in a page are preloaded, thereby rendering the target page. The method can be executed by a page loading device, which can be implemented in the form of software and / or hardware. The hardware can be an electronic device, such as a mobile terminal or a PC.

[0048] like Figure 1 As shown, the method includes:

[0049] S110. Based on the received page load request, determine the target address hash value corresponding to the page load request.

[0050] It's important to note that users can trigger any control within the application, which can then be used to retrieve the corresponding webpage. The request generated after triggering the page and retrieving the control serves as the page load request. Based on this page load request, the address of the retrieved webpage can be determined. A hash algorithm can be used to encrypt the page address, yielding a hash value for the target address. In other words, the page load request determines the corresponding page address, and after encrypting the page address, a hash value for the target address corresponding to the page load request can be obtained.

[0051] Optionally, determining the target address hash value corresponding to the page loading request includes: determining the target page address corresponding to the page loading request; performing a hash operation on the target page address to obtain the target address hash value corresponding to the page loading request.

[0052] The target page address is the webpage address corresponding to the page loading request. The target hash value is the value obtained by hashing the target page address.

[0053] In this embodiment, at least one page to be displayed corresponding to the target application and its page address hash value are determined; for each page to be displayed, the image address and image identifier of the image component in the current page to be displayed, as well as the background image address of the block layout element, are determined; based on the page address hash value, the corresponding image address, image identifier, and background image address, a mapping relationship is determined, and the target image is rendered based on the mapping relationship.

[0054] For front-end developers, after application development is complete, the webpages can be packaged into a single file and uploaded to the intelligent deployment platform. The webpages can be pages used within the application. After receiving the uploaded deployment package, the intelligent deployment platform can use any parsing tool to parse the HTML / HTM files within the package to obtain at least one image component and its corresponding background image address. The image component can be any control on the webpage that carries an image. The image component includes an image address (src) and an image element identifier (id). Simultaneously, a hash algorithm can be used to process the webpage address to obtain a webpage address hash value (webHash). The webpage address hash value can be used as the key (i.e., the root node of the tree diagram), and the image components and background image addresses can be used as leaf nodes associated with the webpage address hash value to obtain... Figure 2 The correspondence shown.

[0055] This can be understood as treating each page in the application as a page to be displayed. Each page has a corresponding page address. A hash operation can be performed on this page address to obtain a hash value corresponding to the page to be displayed, and this hash value is used as the page address hash value. Furthermore, each page to be displayed can include multiple hierarchical structures, and each hierarchical structure can include at least one image element. Based on this, the image address, image identifier, and background image address of each image element can be determined. By performing an MD5 operation on these addresses, the corresponding MD5 value is obtained, and the image address can be replaced with the corresponding MD5 value. A mapping relationship can be established between the page address hash value, image address, image identifier, and background image address. Optionally, the mapping relationship can be a table, a tree diagram, etc.

[0056] In this embodiment of the invention, the advantage of establishing a correspondence is that, regardless of whether the program version is updated, as long as the address in the corresponding mapping relationship is updated, the corresponding image element can be obtained and rendered to the display page for display. This avoids the problem that page rendering requires the participation of developers, which leads to high costs.

[0057] S120. Based on a predetermined mapping relationship, determine the address data associated with the target address hash value, and obtain and store the target image elements based on the address data.

[0058] The mapping relationship primarily involves the correspondence between page address hash values ​​and at least one image component and background image element within the page. For example, if page address 1 includes ten images, each located at a different level within the page frame (i.e., different images correspond to different address data), a correspondence can be established between the page address and at least one address data, such as... Figure 2 As shown. Image elements that match the address data are used as target image elements. In other words, the corresponding image element can be retrieved based on the target address and rendered onto the display interface. Image elements corresponding to the address data associated with the target address hash value are used as target image elements.

[0059] Specifically, after determining the target hash address, at least one address data associated with the target hash address can be determined based on the mapping relationship. The corresponding target image element can then be obtained and stored locally based on the address data.

[0060] In this embodiment, the advantage of storing locally is that the corresponding image elements can be obtained directly during the page rendering process, avoiding the problem of long waiting time when obtaining the corresponding image elements from the server.

[0061] It should also be noted that the mapping table is determined by parsing at least one image element in the page to be displayed.

[0062] The page to be displayed can be a page that may be displayed after the application is triggered. Each page to be displayed may or may not contain an image. If an image is included, a correspondence can be established between the page address hash value and the image address data.

[0063] Based on the above technical solution, obtaining and storing target image elements based on the address data includes: calling at least one thread to obtain image elements corresponding to the image address and image identifier, and background elements corresponding to the background image address; using the image elements and the background elements as the target image elements and storing them locally.

[0064] The number of threads can be one or more. Threads are primarily used to execute tasks corresponding to page load requests. To improve the efficiency of retrieving image elements, the number of threads corresponding to a page load request can be determined. Optionally, the page load request corresponds to page n, and the corresponding number of threads is determined based on the number of image elements in page n. Alternatively, at least one thread can be pre-set to be used. Upon receiving a page load request, the remaining threads can be used to execute the task of loading image elements to retrieve the target image element. Storage can be local, such as in the cache space corresponding to the current terminal device, or in a pre-set storage space corresponding to a specified path. For example, if it is pre-set that once an image element is loaded, it can be stored in a specific folder on a certain disk, then after loading the target image element, it can be stored according to the specified path.

[0065] This can be understood as follows: after determining the address data corresponding to each image element that needs to be rendered to the target page, at least one thread can be called to obtain the image element and background element corresponding to each address data, and the image element and background element are used as target image elements. The target image elements are stored locally so that the page is rendered based on the target image elements stored locally during the rendering process of obtaining the target page, thereby obtaining the target page including the image elements.

[0066] S130. Based on the storage address of the target image element and the rendered text corresponding to the page loading request, determine the target page corresponding to the page loading request.

[0067] The storage address refers to the address where the target image element is stored locally. Rendering text can be understood as a page containing not only images but also corresponding text. Since image rendering is slower than text rendering, the text can be rendered first to obtain the page framework corresponding to the target page, allowing the user to determine the page content. Further, based on the target image element stored in the storage address, images within the page can be rendered to obtain the final target page. At this point, the target page includes not only images but also text.

[0068] Specifically, during the text rendering process, it can be determined whether the downloaded target image element is stored based on the storage address. If it exists, the target page can be determined based on the target image element and the corresponding rendered text.

[0069] In this embodiment, determining the target page corresponding to the page loading request based on the storage address of the target image element and the rendered text corresponding to the page loading request includes: when the rendering of the rendered text is detected to be completed, calling the target script to fill the storage address back into the rendered page, so as to render the target page based on the target image element corresponding to the storage address.

[0070] The target script can be the script processing method `executeJavascript()`, which fills the storage address back into the rendered page. If the storage space corresponding to the storage address contains the corresponding target image element, the target image element can be displayed in the target page to obtain the target page containing the target image element. The rendered page corresponds to the target page; as the name suggests, the rendered page is the page before the target page has been fully rendered.

[0071] This can be understood as follows: after the text on the target page has finished rendering, a script processing method can be used to fill the storage address back into the rendered page, so that the target page can be rendered based on the target image element stored in the storage space corresponding to the storage address. Of course, if the text on the target page has not yet finished rendering, the target image element can be stored first, so that the target image element can be retrieved for page rendering after the text rendering is completed.

[0072] Based on the above technical solutions, it should also be noted that, in order to further improve the rendering efficiency of images, during the web page rendering process, the webview of the H5 container can perform a judgment on the completion of web page recording. It can determine whether the target image element is stored in the storage address. If so, the storage address is filled back into the rendering page based on the target script, so as to render the target page based on the target image element.

[0073] The above steps can be understood as follows: determining the target page corresponding to the page loading request based on the storage address of the target image element and the rendering text corresponding to the page loading request includes: during the rendering of the page based on the rendering text, obtaining whether the storage space corresponding to the storage address contains the target image element; if so, then filling the storage address back into the rendering page, so as to render the target page based on the target image element corresponding to the storage address.

[0074] In other words, during the page rendering process, it can be determined whether the storage space corresponding to the storage address contains the target image element. If it does, the storage address can be backfilled to the rendering page, thereby rendering the target page that includes the target image element.

[0075] The technical solution of this invention, upon receiving a page loading request, determines the target address hash value corresponding to the request, determines the address data corresponding to the target address hash value based on a mapping relationship, and retrieves and stores image elements locally based on the address data. Based on the locally stored image elements and the rendered text corresponding to the page loading request, the target page is determined. This achieves the pre-establishment of a correspondence between each image element and the address data. After determining the target address hash value corresponding to the page loading request, the corresponding address data can be determined based on the correspondence, and then the corresponding image elements can be retrieved and stored. This achieves the technical effect of rendering the image elements on the page, solving the problem in the prior art where images are pre-stored, leading to errors in page rendering due to the application version not being updated in a timely manner.

[0076] As an optional embodiment of the above embodiments, Figure 3 This is a schematic flowchart of a page loading method provided by an embodiment of the invention. Based on the above embodiment, the method can be divided into three processes: the first process is the webpage packaging and uploading process, the second process is the decomposition and publishing process, and the third process is the acquisition and display process. The following can be combined with... Figure 3 We will now understand the three processes, that is, explain the technical solutions provided by the embodiments of the present invention in turn based on the three processes.

[0077] The first webpage packaging and uploading process can be as follows: For front-end developers, the webpage development and packaging methods are the same as the existing methods. That is, after the application development is completed, the webpages associated with the application can be packaged and uploaded to the intelligent deployment platform.

[0078] It should be noted that "intelligent deployment platform" is merely an explanation of the name. Its main function is to parse packaged files to obtain the correspondence between page addresses and image elements in the page. In other words, any platform that can perform this function is acceptable.

[0079] The second decomposition and release process can be specifically described as follows: See also Figure 3 The webpage file (html / htm) in the deployment package can be parsed using any parsing tool such as Jsoup, extracting the image address and image identifier of each image element (image component), as well as the address of each background image (bgImg). The page address of the page to be displayed is then hashed to obtain the page address hash value (webHash), and this hash value is used as the key to store the extracted data, resulting in the following... Figure 2 The correspondence shown.

[0080] It's important to note that for image elements, the image address is directly set within the element. Therefore, it's necessary to record the `id` to identify which image element the image address corresponds to for backfilling. Background image addresses, on the other hand, are set using classes. Multiple `div` elements can use the same class, and backfilling simply involves replacing the background image address within that class. Furthermore, after decomposition, the image addresses in the webpage can be replaced with their corresponding MD5 values. This is used for backfilling and to avoid the webpage requesting and downloading images. Simultaneously, the processed webpage is saved for use by the H5 container.

[0081] The third process is the display acquisition process, which can be specifically described as follows: (See also...) Figure 3 When a user triggers a control on the client to retrieve a webpage, a page loading request is generated. This request can be a page address, and a hash operation is used to obtain a target address hash value (webHash) corresponding to the request. At this point, the H5 container requests the address-related data required by the webpage through a general request interface (Function) with the webHash as input. This address-related data includes image addresses and background image addresses. Then, based on the image address, multiple threads are used to download the image data simultaneously, and the downloaded image data (image elements) is saved locally (in the local cache space). Simultaneously, the local image address, i.e., the local storage address, is obtained. The system checks whether the page rendering is complete. If it is, the `executeJavascript()` method is used to populate the stored address back into the webpage; otherwise, the image elements continue to be cached.

[0082] Another implementation method is that after the page rendering is complete, the WebView of the H5 container will execute the onPageFinished method (page loading complete); in onPageFinished, it is determined whether there is a cached target image element. If so, the script processing method executeJavascript() is used to fill the address back into the webpage to render the target page including the target image element.

[0083] The time spent filling in data via JavaScript is negligible. Therefore, by pre-downloading image elements through multi-threading, the image display time can be shortened, thus improving the user experience. In other words, what is downloaded at this time is a webpage with a replacement stream image address, which can be displayed directly after downloading, improving image display efficiency. The technical solution of this embodiment of the invention, upon receiving a page loading request, determines the target address hash value corresponding to the request, determines the address data corresponding to the target address hash value based on a mapping relationship, and retrieves and stores the image elements locally based on the address data. Based on the locally stored image elements and the rendered text corresponding to the page loading request, the target page is determined. This achieves the pre-establishment of the correspondence between each image element and the address data. After determining the target address hash value corresponding to the page loading request, the corresponding address data can be determined based on the correspondence, and then the corresponding image elements can be retrieved and stored, thereby achieving the technical effect of rendering the image elements on the page. This solves the problem in the prior art where images are pre-stored, leading to errors in page rendering due to the application version not being updated in time when the images change.

[0084] Figure 4 This is a schematic diagram of a page loading device structure provided in an embodiment of the present invention, as shown below. Figure 4 The device includes: a hash value determination module 310, an image element storage module 320, and a target page rendering module 330.

[0085] The hash value determination module 310 is used to determine the target address hash value corresponding to the received page loading request based on the received page loading request; the image element storage module 320 is used to determine the address data associated with the target address hash value based on a predetermined mapping relationship, and obtain and store the target image element based on the address data; the target page rendering module 330 is used to determine the target page corresponding to the page loading request based on the storage address of the stored target image element and the rendering text corresponding to the page loading request.

[0086] Based on the above technical solution, the hash value determination module includes:

[0087] The address acquisition unit is used to determine the target page address corresponding to the page loading request;

[0088] The hash value determination unit is used to perform a hash operation on the target page address to obtain the target address hash value corresponding to the page loading request.

[0089] Based on the above technical solution, the image element storage module is further configured to: determine at least one candidate address associated with the target address hash value from a pre-established mapping relationship table, and obtain the image address, image identifier, and background image address associated with each candidate address; wherein the mapping relationship table is determined by parsing the image elements in at least one page to be displayed.

[0090] Based on the above technical solution, the image element storage module includes: an element retrieval unit, used to retrieve at least one thread to obtain image elements corresponding to the image address and image identifier, and background elements corresponding to the background image address;

[0091] A storage unit is used to store the image elements and the background elements as the target image elements locally.

[0092] Based on the above technical solution, the target page rendering module is further configured to: when the rendering of the rendered text is detected to be complete, call the target script to fill the storage address back into the rendering page, so as to render the target page based on the target image element corresponding to the storage address.

[0093] Based on the above technical solution, the target page rendering module is further configured to: during the process of rendering the page based on the rendering text, obtain whether the storage space corresponding to the storage address includes the target image element;

[0094] If so, the storage address is backfilled into the rendering page to render the target page based on the target image element corresponding to the storage address.

[0095] Based on the above technical solution, the device further includes: a page parsing module, used to determine at least one page to be displayed corresponding to the target application and its page address hash value;

[0096] The address resolution module is used to determine the image address and image identifier of the image component in the current page to be displayed, as well as the background image address of the block layout element for each page to be displayed.

[0097] The mapping relationship determination module is used to determine the mapping relationship based on the page address hash value, the corresponding image address, the image identifier, and the background image address, so as to render the target image based on the mapping relationship.

[0098] The technical solution of this invention, upon receiving a page loading request, determines the target address hash value corresponding to the request, determines the address data corresponding to the target address hash value based on a mapping relationship, and retrieves and stores image elements locally based on the address data. Based on the locally stored image elements and the rendered text corresponding to the page loading request, the target page is determined. This achieves the pre-establishment of a correspondence between each image element and the address data. After determining the target address hash value corresponding to the page loading request, the corresponding address data can be determined based on the correspondence, and then the corresponding image elements can be retrieved and stored. This achieves the technical effect of rendering the image elements on the page, solving the problem in the prior art where images are pre-stored, leading to errors in page rendering due to the application version not being updated in a timely manner.

[0099] The page loading device provided in the embodiments of the present invention can execute the page loading method provided in any embodiment of the present invention, and has the corresponding functional modules and beneficial effects of executing the method.

[0100] It is worth noting that the various units and modules included in the above-mentioned device are only divided according to functional logic, but are not limited to the above division, as long as the corresponding functions can be realized; in addition, the specific names of each functional unit are only for easy differentiation and are not used to limit the protection scope of the embodiments of the present invention.

[0101] Figure 5 This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present invention. Figure 5 A block diagram is shown of an exemplary electronic device 50 suitable for implementing embodiments of the present invention. Figure 5 The electronic device 50 shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of the present invention.

[0102] like Figure 5 As shown, the electronic device 50 is represented in the form of a general-purpose computing device. The components of the electronic device 50 may include, but are not limited to: one or more processors or processing units 501, system memory 502, and bus 503 connecting different system components (including system memory 502 and processing unit 501).

[0103] Bus 503 represents one or more of several bus architectures, including a memory bus or memory controller, a peripheral bus, a graphics acceleration port, a processor, or a local bus using any of the various bus architectures. Examples of these architectures include, but are not limited to, the Industry Standard Architecture (ISA) bus, the Micro Channel Architecture (MAC) bus, the Enhanced ISA bus, the Video Electronics Standards Association (VESA) local bus, and the Peripheral Component Interconnect (PCI) bus.

[0104] Electronic device 50 typically includes a variety of computer system readable media. These media can be any available media that can be accessed by electronic device 50, including volatile and non-volatile media, removable and non-removable media.

[0105] System memory 502 may include computer system readable media in the form of volatile memory, such as random access memory (RAM) 504 and / or cache memory 505. Electronic device 50 may further include other removable / non-removable, volatile / non-volatile computer system storage media. By way of example only, storage system 506 may be used to read and write non-removable, non-volatile magnetic media (… Figure 5 Not shown; usually referred to as a "hard drive"). Although Figure 5 Not shown, a disk drive for reading and writing to a removable non-volatile disk (e.g., a "floppy disk") and an optical disk drive for reading and writing to a removable non-volatile optical disk (e.g., a CD-ROM, DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to bus 503 via one or more data media interfaces. Memory 502 may include at least one program product having a set (e.g., at least one) of program modules configured to perform the functions of the embodiments of the present invention.

[0106] A program / utility 508 having a set (at least one) of program modules 507 may be stored, for example, in memory 502. Such program modules 507 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 an implementation of a network environment. Program modules 507 typically perform the functions and / or methods described in the embodiments of the present invention.

[0107] Electronic device 50 can also communicate with one or more external devices 509 (e.g., keyboard, pointing device, display 510, etc.), and with one or more devices that enable a user to interact with the electronic device 50, and / or with any device that enables the electronic device 50 to communicate with one or more other computing devices (e.g., network card, modem, etc.). This communication can be performed via input / output (I / O) interface 511. Furthermore, electronic device 50 can also communicate with one or more networks (e.g., local area network (LAN), wide area network (WAN), and / or public networks, such as the Internet) via network adapter 512. As shown, network adapter 512 communicates with other modules of electronic device 50 via bus 503. It should be understood that, although... Figure 5As not shown, other hardware and / or software modules may be used in conjunction with electronic device 50, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0108] The processing unit 501 executes various functional applications and data processing by running programs stored in the system memory 502, such as implementing the page loading method provided in the embodiments of the present invention.

[0109] This invention also provides a storage medium containing computer-executable instructions, which, when executed by a computer processor, are used to perform a page loading method.

[0110] The method includes:

[0111] Based on the received page loading request, determine the target address hash value corresponding to the page loading request;

[0112] Based on a predetermined mapping relationship, the address data associated with the target address hash value is determined, and the target image elements are obtained and stored based on the address data;

[0113] Based on the storage address of the target image element and the rendered text corresponding to the page loading request, the target page corresponding to the page loading request is determined.

[0114] The computer storage medium of this invention can be any combination of one or more computer-readable media. A computer-readable medium can be a computer-readable signal medium or a computer-readable storage medium. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples (a non-exhaustive list) of computer-readable storage media include: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this document, a computer-readable storage medium can be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device.

[0115] Computer-readable signal media may include data signals propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, capable of sending, propagating, or transmitting programs for use by or in connection with an instruction execution system, apparatus, or device.

[0116] Program code contained on a computer-readable medium may be transmitted using any suitable medium, including—but not limited to—wireless, wire, optical fiber, RF, etc., or any suitable combination thereof.

[0117] Computer program code for performing the operations of embodiments of the present invention can be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, and C++, and conventional procedural programming languages ​​such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0118] Note that the above description is merely a preferred embodiment of the present invention and the technical principles employed. Those skilled in the art will understand that the present invention is not limited to the specific embodiments described herein, and various obvious changes, readjustments, and substitutions can be made without departing from the scope of protection of the present invention. Therefore, although the present invention has been described in detail through the above embodiments, the present invention is not limited to the above embodiments, and may include many other equivalent embodiments without departing from the concept of the present invention, the scope of which is determined by the scope of the appended claims.

Claims

1. A page loading method, characterized by, include: Based on the received page loading request, determine the target address hash value corresponding to the page loading request; Based on a predetermined mapping relationship, address data associated with the target address hash value is determined, and target image elements are obtained and stored locally based on the address data; wherein, the target image elements are image elements and background elements corresponding to the address data, the mapping relationship is determined by parsing at least one image element in the page to be displayed, and the mapping relationship is used to store the correspondence between the page address hash value and at least one image component and background image element in the page; Based on the storage address of the target image element and the rendered text corresponding to the page loading request, the target page corresponding to the page loading request is determined, including: When the rendering of the rendered text is detected to be complete, the target script is invoked to fill the storage address back into the rendering page, so as to render the target page based on the target image element corresponding to the storage address; The step of calling the target script to fill the storage address back into the rendered page when the rendering of the rendered text is detected to be complete includes: triggering the onPageFinished function through the WebView of the H5 container, and calling the executeJavascript script in the onPageFinished function to fill the storage address back into the rendered page.

2. The method of claim 1, wherein, Determining the target address hash value corresponding to the page loading request includes: Determine the target page address corresponding to the page loading request; A hash operation is performed on the target page address to obtain the target address hash value corresponding to the page loading request.

3. The method of claim 1, wherein, The step of determining the address data associated with the target address hash value based on a pre-determined mapping relationship includes: Determine at least one candidate address associated with the target address hash value from a pre-established mapping table, and obtain the image address, image identifier, and background image address associated with each candidate address; The mapping table is determined by parsing at least one image element in the page to be displayed.

4. The method of claim 3, wherein, The step of obtaining and storing target image elements based on the address data includes: Call at least one thread to obtain the image element corresponding to the image address and image identifier, and the background element corresponding to the background image address; The image element and the background element are used as the target image element and stored locally.

5. The method of claim 1, wherein, The step of determining the target page corresponding to the page loading request based on the storage address of the target image element and the rendered text corresponding to the page loading request includes: During the process of rendering a page based on rendered text, it is determined whether the storage space corresponding to the storage address contains the target image element; If so, the storage address is backfilled into the rendering page to render the target page based on the target image element corresponding to the storage address.

6. The method of claim 2, wherein, Also includes: Determine at least one page to be displayed corresponding to the target application and its page address hash value; For each page to be displayed, determine the image address and image identifier of the image component in the current page to be displayed, as well as the background image address of the block layout element; Based on the page address hash value, the corresponding image address, the image identifier, and the background image address, a mapping relationship is determined, and the target image is rendered based on the mapping relationship.

7. A page loading apparatus characterized by comprising: include: The hash value determination module is used to determine the target address hash value corresponding to the received page loading request. An image element storage module is used to determine address data associated with the target address hash value based on a predetermined mapping relationship, and to obtain and store target image elements locally based on the address data; wherein, the target image element is an image element and a background element corresponding to the address data, the mapping relationship is determined by parsing at least one image element in a page to be displayed, and the mapping relationship is used to store the correspondence between the page address hash value and at least one image component and background image element in the page; The target page rendering module is used to determine the target page corresponding to the page loading request based on the storage address of the target image element and the rendered text corresponding to the page loading request; The target page rendering module is further configured to: when the rendering of the rendered text is detected to be complete, call the target script to fill the storage address back into the rendering page, so as to render the target page based on the target image element corresponding to the storage address; The step of calling the target script to fill the storage address back into the rendered page when the rendering of the rendered text is detected to be complete includes: triggering the onPageFinished function through the WebView of the H5 container, and calling the executeJavascript script in the onPageFinished function to fill the storage address back into the rendered page.

8. An electronic device, comprising: The electronic device includes: One or more processors; Storage device for storing one or more programs. When the one or more programs are executed by the one or more processors, the one or more processors implement the page loading method as described in any one of claims 1-6.

9. A storage medium comprising computer-executable instructions, which, when executed by a computer processor, are used to perform the page loading method as described in any one of claims 1-6.

Images