Page component loading method, system and equipment based on pre-request and storage medium

Abstract

The invention provides a pre-request-based page component loading method, system and device and a storage medium, and the method comprises the steps: based on an access page request HTML document, extracting a dynamic component request logic in the HTML document from a dynamic component, and packaging the dynamic component request logic into pre-request independent scripts which can be downloaded, read and written; downloading an HTML document in a browser, and downloading a pre-request independent script; when the browser executes the loading process, sending a data request to a back-end server according to the dynamic component request logic to obtain back-end data; when the components of the access page are rendered, at least loading the back-end data into the corresponding dynamic components respectively; and completing page overall component and layout rendering based on the loaded dynamic component. According to the method, the limitation of traditional serial loading can be broken through, the page loading logic is optimized, and the loading duration and the interaction response speed of the core function module are effectively improved, so that the user experience is remarkably improved.

Description

Background Art

[0002] During the development of the international hotel shelf details page, the page consists of multiple functional modules. Front-end engineers usually use front-end components to implement the corresponding functional modules and then assemble all the components to form the page layout. The components are divided into static and dynamic. Static components are only responsible for displaying fixed styles and do not depend on backend data; the display content of dynamic components includes backend data, so they need to wait for the client to request and receive the return data from the server before they can be rendered.

[0003] Figure 1 It is a schematic diagram of the implementation process of the page component loading method in the prior art. As Figure 1 shown, during the loading process of the international hotel shelf details page, the HTML document and page resources r1,…,r n are all essential resources for page loading. The rendering of static components sc1,…,sc n and dynamic components dc1,…,dc n both depend on the completion of the loading and parsing of the overall HTML document and page resources r1,…,r n , so a preposed serial link is necessary. After analyzing the problem, the main cause of the initial page loading process blockage is the time-consuming data acquisition and loading of dynamic components. The initial loading process reference Figure 1 : For Figure 1 's initial loading process, after the page resources r1,…,r n and static components sc1,…,sc n are all loaded, it will still be blocked by the loading process of dynamic components dc1,…,dc n . The logic for dynamic components to request backend data is wrapped inside the components and needs to wait for the preposed link to complete. Only after starting to render the page and components can it start to request backend data.

[0004] Compared with the traditional mode, the loading order of the international hotel shelf details page usually needs to go through the browser downloading the HTML document, parsing the HTML document, downloading page resources, starting to render page elements and layout, requesting server data, and rendering completion. The above page loading order is usually executed serially in sequence, with a long loading time and a relatively slow response speed.

[0005] Therefore, the present invention provides a page component loading method, system, device, and storage medium based on pre-request. Summary of the Invention

[0006] Aiming at the problems in the prior art, the purpose of the present invention is to provide a page component loading method, system, device and storage medium based on pre-requests, which overcomes the difficulties of the prior art, can break through the limitations of traditional serial loading, optimize the page loading logic, effectively improve the loading duration of core functional modules and the interactive response speed, thereby significantly improving the user experience.

[0007] An embodiment of the present invention provides a page component loading method based on pre-requests, including the following steps:

[0008] S110. Based on the access page request for the HTML document, extract the dynamic component request logic from the dynamic components in the HTML document, and encapsulate them into pre-request independent scripts that can be downloaded, read and written respectively;

[0009] S120. In the browser, download the HTML document and download the pre-request independent scripts;

[0010] S130. While the browser is executing the loading process, send a data request to the backend server according to the dynamic component request logic to obtain backend data;

[0011] S140. When rendering the components of the access page, at least load the backend data into the corresponding dynamic components respectively; and

[0012] S150. Based on the loaded dynamic components, complete the rendering of the overall page components and layout.

[0013] Preferably, in step S110, it includes:

[0014] S111. Based on the access page request for the HTML document, extract the dynamic component request logic from the dynamic components in the HTML document; and

[0015] S112. Encapsulate the dynamic component request logic into pre-request independent scripts that can be downloaded, read and written respectively, and establish a mapping relationship between the pre-request independent scripts and the dynamic components.

[0016] Preferably, in step S120, while the browser is downloading the HTML document, synchronously download the pre-request independent scripts.

[0017] Preferably, in step S130, it includes:

[0018] S131. While the browser is executing the loading process, execute the dynamic component request logic in the pre-request independent script;

[0019] S132. Based on the dynamic component request logic, send a data request to the backend server; and

[0020] S133. Obtain the backend data fed back by the backend server, and establish a mapping relationship between the backend data and the dynamic components.

[0021] Preferably, in step S133, it further includes: when the request for the backend data fails, pause the page rendering.

[0022] Preferably, in step S140, when rendering the components of the access page, load the page resources, and at the same time load the backend data into the corresponding dynamic components respectively.

[0023] Preferably, in step S150, it includes:

[0024] S151. Render the static components, and at the same time, render the loaded dynamic components; and

[0025] S152. After the static components and dynamic components are rendered, combine them on the access page.

[0026] An embodiment of the present invention further provides a page component loading system based on pre-requests, which is used to implement the above-mentioned page component loading method based on pre-requests. The page component loading system based on pre-requests includes:

[0027] A logic extraction module, which requests an HTML document based on an access page request, extracts the dynamic component request logic from the HTML document from the dynamic components, and encapsulates them into pre-request independent scripts that can be downloaded and read / written respectively;

[0028] A script download module, which downloads the HTML document in the browser and downloads the pre-request independent scripts;

[0029] A data request module, which, while the browser executes the loading process, sends a data request to the backend server according to the dynamic component request logic to obtain the backend data;

[0030] A data loading module, which, when rendering the components of the access page, loads at least the backend data into the corresponding dynamic components respectively; and

[0031] A page rendering module, which completes the rendering of the overall page components and layout based on the loaded dynamic components.

[0032] An embodiment of the present invention further provides a page component loading device based on pre-requests, including:

[0033] A processor;

[0034] A memory, in which executable instructions of the processor are stored;

[0035] Among them, the processor is configured to execute the steps of the above-mentioned pre-request-based page component loading method by executing the executable instructions.

[0036] An embodiment of the present invention further provides a computer-readable storage medium for storing a program, and when the program is executed, the steps of the above-mentioned pre-request-based page component loading method are implemented.

[0037] The purpose of the present invention is to provide a pre-request-based page component loading method, system, device and storage medium, which can break through the limitations of traditional serial loading, optimize the page loading logic, effectively improve the loading duration of core function modules and the interaction response speed, thereby significantly improving the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] By reading the detailed description of the non-limiting embodiments with reference to the following drawings, other features, purposes and advantages of the present invention will become more obvious.

[0039] Figure 1 It is a schematic diagram of the implementation process of the page component loading method in the prior art.

[0040] Figure 2 It is a flowchart of the pre-request-based page component loading method of the present invention.

[0041] Figure 3 It is a schematic diagram of the implementation process of the pre-request-based page component loading method of the present invention.

[0042] Figure 4 It is a schematic diagram of the structure of the pre-request-based page component loading system of the present invention.

[0043] Figure 5 It is a schematic diagram of the structure of the pre-request-based page component loading device of the present invention.

[0044] Figure 6 It is a schematic diagram of the structure of the computer-readable storage medium according to an embodiment of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0045] The following specifically illustrates the embodiments of the present application through specific examples. Those skilled in the art can easily understand other advantages and effects of the present application from the content disclosed in the present application. The present application can also be implemented or applied through other different specific embodiments, and various details in the present application can also be modified or changed according to different viewpoints and application systems without departing from the spirit of the present application. It should be noted that, without conflict, the embodiments in the present application and the features in the embodiments can be combined with each other.

[0046] The following will refer to the accompanying drawings to provide a detailed description of the embodiments of the present application, so that those skilled in the art to which the present application pertains can easily implement it. The present application can be embodied in various different forms and is not limited to the embodiments described herein.

[0047] In the description of the present application, the references to terms such as "one embodiment", "some embodiments", "example", "specific example", or "some examples" etc. mean that the specific features, structures, materials, or characteristics represented in connection with the embodiment or example are included in at least one embodiment or example of the present application. Moreover, the specific features, structures, materials, or characteristics represented can be combined in a suitable manner in any one or more embodiments or examples. In addition, without contradiction, those skilled in the art can combine and combine the different embodiments or examples represented in the present application and the features of different embodiments or examples.

[0048] Furthermore, the terms "first" and "second" are used only for the purpose of indication and cannot be construed as indicating or implying relative importance or implicitly specifying the quantity of the indicated technical features. Thus, the features defined with "first" and "second" can explicitly or implicitly include at least one of such features. In the description of the present application, the meaning of "a plurality of" is two or more unless otherwise specifically defined.

[0049] To clearly illustrate the present application, devices irrelevant to the description are omitted, and the same or similar components throughout the specification are given the same reference numerals.

[0050] Throughout the specification, when it is said that a device is "connected" to another device, this includes not only the case of "direct connection" but also the case of "indirect connection" with other elements interposed therebetween. In addition, when it is said that a certain device "includes" a certain component, unless there is a particularly contrary record, it does not exclude other components but means that other components can also be included.

[0051] When it is said that a device is "above" another device, this can be directly above the other device, but there can also be other devices in between. When it is said that a device is "directly" "above" another device, there are no other devices in between.

[0052] Although in some instances the terms first, second, etc. are used herein to denote various elements, these elements should not be limited by these terms. These terms are only used to distinguish one element from another. For example, a first interface and a second interface, etc. are indicated. Furthermore, as used herein, the singular forms "a", "an", and "the" are also intended to include the plural forms unless the context clearly dictates otherwise. It should be further understood that the terms "comprising", "including" indicate the presence of the features, steps, operations, elements, components, items, kinds, and / or groups, but do not preclude the presence, occurrence, or addition of one or more other features, steps, operations, elements, components, items, kinds, and / or groups. The terms "or" and "and / or" used herein are to be construed as inclusive, or meaning any one or any combination. Thus, "A, B, or C" or "A, B, and / or C" means "any of the following: A; B; C; A and B; A and C; B and C; A, B, and C". An exception to this definition only occurs when the combination of elements, functions, steps, or operations are mutually exclusive in some manner.

[0053] The technical terms used herein are only for referring to specific embodiments and are not intended to limit the present application. The singular forms used herein also include the plural forms as long as the statement does not clearly indicate the contrary meaning. The meaning of "including" used in the specification is to embody specific characteristics, regions, integers, steps, operations, elements, and / or components, and does not exclude the existence or addition of other characteristics, regions, integers, steps, operations, elements, and / or components.

[0054] Although not defined differently, including the technical terms and scientific terms used herein, all terms have the same meaning as generally understood by those skilled in the technical field to which the present application pertains. Terms defined in commonly used dictionaries are additionally interpreted to have a meaning consistent with the relevant technical literature and the content currently presented. As long as they are not defined, they should not be over-interpreted as ideal or overly formulaic meanings.

[0055] Before the present invention was proposed, the execution logic of the international hotel shelf detail page during page loading adopted a traditional serial loading process, lacking high efficiency and rationality, and was prone to causing excessive loading time, affecting the user access experience. Figure 2 is a flowchart of the page component loading method based on pre-request of the present invention. As Figure 2 shown, the page component loading method based on pre-request of the present invention includes:

[0056] S110. Based on the access page request for the HTML document, extract the dynamic component request logic from the dynamic components in the HTML document and encapsulate them into pre-request independent scripts that can be downloaded and read / written respectively.

[0057] S120. Download the HTML document in the browser and download the pre-request independent script.

[0058] S130. While the browser is executing the loading process, send a data request to the backend server according to the dynamic component request logic to obtain backend data.

[0059] S140. When rendering the components of the access page, at least load the backend data into the corresponding dynamic components respectively. And

[0060] S150. Complete the rendering of the overall page components and layout based on the loaded dynamic components.

[0061] The problem to be solved by the present invention is to effectively provide a solution for efficient loading of page components for the international hotel shelf details page through a technical system, thereby improving the page component loading speed and enhancing the user access experience. The present invention proposes a method for improving the traditional page component loading logic. This method allows the page core components and the HTML document to be downloaded and parsed synchronously and in parallel, solving the problem that the page loading process in the original solution is serially blocked, resulting in slow user access to the page. Among them, HTML stands for HyperText Markup Language, which is a markup language. It includes a series of tags. Through these tags, the document formats on the network can be unified, making the scattered Internet resources connected into a logical whole. HTML text is descriptive text composed of HTML commands. HTML commands can describe text, graphics, animations, sounds, tables, links, etc. Hypertext is a way of organizing information. It associates the text, charts, and other information media in the text through hyperlink methods. These interrelated information media may be in the same text, or in other files, or files on a computer located far away geographically. This way of organizing information connects the information resources located in different positions in a random manner, providing convenience for people to search and retrieve information. HTML is a basic technology and is often used together with CSS and JavaScript by many websites to design the user interfaces of web pages, web applications, and mobile applications. A web browser can read an HTML file and render it into a visual web page. HTML describes the structural semantics of a website as it is presented, making it a markup language rather than a programming language. HTML elements are the cornerstones of building a website. HTML allows the embedding of images and objects and can be used to create interactive forms. It is used to structure information - such as headings, paragraphs, and lists, etc., and can also be used to describe the appearance and semantics of a document to a certain extent. The language form of HTML is HTML elements enclosed in angle brackets (such as ). The browser uses HTML tags and scripts to interpret the web page content but does not display them on the page.

[0062] In a preferred embodiment, in step S110, it includes:

[0063] S111. Based on the access page request for the HTML document, extract the dynamic component request logic from the dynamic components in the HTML document. And

[0064] S112. Encapsulate the dynamic component request logic into pre-request independent scripts that can be downloaded, read, and written respectively, and establish a mapping relationship between the pre-request independent scripts and the dynamic components, but not limited thereto.

[0065] In a preferred embodiment, in step S120, while the browser downloads the HTML document, synchronously download the pre-request independent scripts, but not limited thereto.

[0066] In a preferred embodiment, in step S130, it includes:

[0067] S131. While the browser executes the loading process, execute the dynamic component request logic in the pre-request independent scripts.

[0068] S132. Send a data request to the backend server based on the dynamic component request logic. And

[0069] S133. Obtain the backend data fed back by the backend server, and establish a mapping relationship between the backend data and the dynamic components, but not limited thereto.

[0070] In a preferred embodiment, in step S133, it further includes: when the request for the backend data fails, pause the page rendering, but not limited thereto.

[0071] In a preferred embodiment, in step S140, when rendering the components of the access page, load the page resources, and at the same time load the backend data into the corresponding dynamic components respectively, but not limited thereto.

[0072] In a preferred embodiment, in step S150, it includes:

[0073] S151. Render the static components, and at the same time, render the loaded dynamic components.

[0074] And

[0075] S152. After the static components and the dynamic components are rendered, combine them on the access page, but not limited thereto.

[0076] The page component loading method based on pre-request of the present invention can break through the limitations of traditional serial loading, optimize the page loading logic, effectively improve the loading duration of the core function modules and the interaction response speed, thereby significantly improving the user experience.

[0077] The specific embodiments of the present invention include:

[0078] First, based on the access page request, the HTML document is retrieved, and the dynamic component request logic in the HTML document is extracted from the dynamic components. The dynamic component request logic is respectively encapsulated into pre-request independent scripts that can be downloaded, read, and written, and a mapping relationship between the pre-request independent scripts and the dynamic components is established. Next, while the browser downloads the HTML document, the pre-request independent scripts are synchronously downloaded. Then, while the browser executes the loading process, the dynamic component request logic in the pre-request independent scripts is executed. A data request is sent to the backend server based on the dynamic component request logic. The backend data fed back by the backend server is obtained, and a mapping relationship between the backend data and the dynamic components is established. Moreover, when the request for the backend data fails, the page rendering is paused. When rendering the components of the access page, the page resources are loaded, and at the same time, the backend data is respectively loaded into the corresponding dynamic components. Finally, the static components are rendered, and at the same time, the loaded dynamic components are rendered. After the static components and the dynamic components are rendered, they are combined on the access page, but not limited to this.

[0079] Figure 3 It is a schematic diagram of the implementation process of the page component loading method based on pre-request of the present invention. Refer to Figure 3 As shown, the present invention is applied to the international hotel shelf details page structure and loading process. For the international hotel shelf details page structure and loading process, there are the following rules:

[0080] (1) The core functional modules in the page are all dynamic components that rely on backend data;

[0081] (2) The acquisition of the dynamic component data d1,…,d n does not strongly depend on the loading of the prefrontal page resources.

[0082] Referring to the above rules, the present invention decouples the logic of requesting the backend data d1,…,d n in the dynamic components dc1,…,dc n from the internal logic of the components and splits it into smaller independent request scripts dr1,…,dr n , and the specific processing steps are as follows:

[0083] (1) The dynamic component request logic dr1,…,dr n is extracted from the dynamic components dc1,…,dc n and encapsulated into scripts that can be downloaded, read, and written;

[0084] (2) While the browser downloads the HTML, these independent request scripts dr1,…,dr n are synchronously downloaded;

[0085] (3) While the browser executes the original loading process, the scripts dr1,…,dr nRequest logic to send a back-end data request;

[0086] (4) After starting to render the components, load the back-end data d1, …, d n previously requested and obtained into the corresponding dynamic components dc1, …, dc n ;

[0087] (5) After the overall page components and layout are rendered. After processing, the overall page loading process is more efficient and reasonable.

[0088] The present invention realizes a multi-task high-efficiency parallel page resource loading link even in the case of complex page function modules, significantly improving the page component loading speed and user access experience.

[0089] Figure 4 is a schematic structural diagram of the page component loading system based on pre-request of the present invention. As Figure 4 shown, an embodiment of the present invention further provides a page component loading system based on pre-request for implementing the above-mentioned page component loading method based on pre-request. The page component loading system 5 based on pre-request includes:

[0090] A logic extraction module 51, based on an access page request for an HTML document, extracts the dynamic component request logic from the dynamic components in the HTML document and encapsulates them into pre-request independent scripts that can be downloaded, read, and written respectively.

[0091] A script download module 52, which downloads the HTML document in the browser and downloads the pre-request independent scripts.

[0092] A data request module 53, while the browser is executing the loading process, sends a data request to the back-end server according to the dynamic component request logic to obtain back-end data.

[0093] A data loading module 54, when rendering the components of the access page, at least loads the back-end data into the corresponding dynamic components respectively. And

[0094] A page rendering module 55, which completes the rendering of the overall page components and layout based on the loaded dynamic components.

[0095] In a preferred embodiment, the logic extraction module 51 is configured to extract the dynamic component request logic from the dynamic components in the HTML document based on an access page request for the HTML document. The dynamic component request logic is respectively encapsulated into pre-request independent scripts that can be downloaded, read, and written, and a mapping relationship between the pre-request independent scripts and the dynamic components is established, but not limited thereto.

[0096] In a preferred embodiment, the script download module 52 is configured to synchronously download pre-request independent scripts while the browser downloads the HTML document, but not limited thereto.

[0097] In a preferred embodiment, the data request module 53 is configured to execute the dynamic component request logic in the pre-request independent script while the browser executes the loading process. Send a data request to the backend server based on the dynamic component request logic. Obtain the backend data fed back by the backend server and establish a mapping relationship between the backend data and the dynamic components, but not limited thereto.

[0098] In a preferred embodiment, the data request module 53 is further configured to pause page rendering when the request for backend data fails, but not limited thereto.

[0099] In a preferred embodiment, the data loading module 54 is configured to load page resources when rendering the components of the access page, and at the same time load the backend data into the corresponding dynamic components respectively, but not limited thereto.

[0100] In a preferred embodiment, the page rendering module 55 is configured to render the static components and, at the same time, render the loaded dynamic components. After the static components and the dynamic components are rendered, they are combined into the access page, but not limited thereto.

[0101] The page component loading system based on pre-request of the present invention can break through the limitations of traditional serial loading, optimize the page loading logic, effectively improve the loading duration of the core function module and the interaction response speed, thereby significantly improving the user experience.

[0102] An embodiment of the present invention further provides a page component loading device based on pre-request, including a processor. A memory that stores executable instructions of the processor. Wherein, the processor is configured to execute the steps of the page component loading method based on pre-request via executing the executable instructions.

[0103] As shown above, the page component loading device based on pre-request of the present invention in this embodiment can break through the limitations of traditional serial loading, optimize the page loading logic, effectively improve the loading duration of the core function module and the interaction response speed, thereby significantly improving the user experience.

[0104] Those skilled in the art of the present technical field can understand that various aspects of the present invention can be implemented as a system, a method, or a program product. Therefore, various aspects of the present invention can be specifically implemented in the following forms, namely: a complete hardware implementation, a complete software implementation (including firmware, microcode, etc.), or an implementation combining hardware and software aspects, which can be collectively referred to as "circuit", "module" or "platform" here.

[0105] Figure 5It is a schematic structural diagram of the page component loading device based on pre-request of the present invention. The following will refer to Figure 5 to describe the electronic device 600 according to this embodiment of the present invention. Figure 5 The shown electronic device 600 is only an example, and should not bring any limitation to the functions and usage scope of the embodiments of the present invention.

[0106] As Figure 5 shown, the electronic device 600 is presented in the form of a general computing device. The components of the electronic device 600 may include but are not limited to: at least one processing unit 610, at least one storage unit 620, a bus 630 connecting different platform components (including the storage unit 620 and the processing unit 610), a display unit 640, etc.

[0107] Among them, the storage unit stores program codes, and the program codes can be executed by the processing unit 610, so that the processing unit 610 executes the steps according to various exemplary embodiments of the present invention described in the above method part of this specification. For example, the processing unit 610 can execute the steps as Figure 1 shown in.

[0108] The storage unit 620 may include a readable medium in the form of a volatile storage unit, such as a random access storage unit (RAM) 6201 and / or a cache storage unit 6202, and may further include a read-only storage unit (ROM) 6203.

[0109] The storage unit 620 may also include a program / utility 6204 having a set (at least one) of program modules 6205. Such program modules 6205 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.

[0110] The bus 630 may represent one or more of several types of bus structures, including a storage unit bus or a storage unit controller, a peripheral bus, a graphics acceleration port, a processing unit, or a local bus using any of the multiple bus structures.

[0111] The electronic device 600 can also communicate with one or more external devices 700 (such as a keyboard, a pointing device, a Bluetooth device, etc.), and can also communicate with one or more devices that enable a user to interact with the electronic device 600, and / or communicate with any device that enables the electronic device 600 to communicate with one or more other computing devices (such as a router, a modem, etc.). Such communication can be carried out through the input / output (I / O) interface 650. Moreover, the electronic device 600 can 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 the network adapter 660. The network adapter 660 can communicate with other modules of the electronic device 600 through the bus 630. It should be understood that although not shown in the figure, other hardware and / or software modules can be used in combination with the electronic device 600, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage platforms, etc.

[0112] An embodiment of the present invention also provides a computer-readable storage medium for storing a program, and the steps of a page component loading method based on pre-requests are implemented when the program is executed. In some possible implementation manners, various aspects of the present invention can 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 enable the terminal device to execute the steps according to various exemplary embodiments of the present invention described in the above method part of this specification.

[0113] As shown above, the page component loading system based on pre-requests of the embodiment of the present invention can break through the limitations of traditional serial loading, optimize the page loading logic, effectively improve the loading duration of the core function module and the interaction response speed, thereby significantly improving the user experience.

[0114] Figure 6 is a schematic structural diagram of the computer-readable storage medium of the present invention. Refer to Figure 6 As shown, a program product 800 for implementing the above method according to an embodiment of the present invention is described. It can adopt a portable compact disc read-only memory (CD-ROM) and include program code, and can run on a terminal device, such as a personal computer. However, the program product of the present invention is not limited to this. In this document, the readable storage medium can be any tangible medium that contains or stores a program, and this program can be used by or in combination with an instruction execution system, apparatus, or device.

[0115] The program product may adopt any combination of one or more readable media. The readable media may be a readable signal medium or a readable storage medium. The readable storage medium may be, for example but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the above. More specific examples (a non-exhaustive list) of the readable storage medium include: an electrical connection having one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

[0116] The computer-readable storage medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries the readable program code. Such a propagated data signal may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. The readable storage medium may also be any readable medium other than the readable storage medium, which can send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device. The program code contained on the readable storage medium may be transmitted using any appropriate medium, including but not limited to wireless, wired, optical fiber cable, RF, etc., or any suitable combination of the above.

[0117] The program code for performing the operations of the present invention may be written in any combination of one or more programming languages, including object-oriented programming languages such as Java, C++, etc., and also including conventional procedural programming languages such as the "C" language or similar programming languages. The program code may be executed entirely on the user's computing device, partially on the user's device, executed as a stand-alone software package, partially on the user's computing device and partially on a remote computing device, or entirely on a remote computing device or server. In the case of a remote computing device, the remote computing device may be connected to the user's computing device through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computing device (e.g., by using an Internet service provider to connect through the Internet).

[0118] In summary, the object of the present invention is to provide a method, system, device, and storage medium for loading page components based on pre-requests, which can break through the limitations of traditional serial loading, optimize the page loading logic, effectively improve the loading duration of the core function module and the interaction response speed, and thus significantly improve the user experience.

[0119] The above content is a further detailed description of the present invention in combination with specific preferred embodiments. It cannot be determined that the specific implementation of the present invention is only limited to these descriptions. For those of ordinary skill in the technical field to which the present invention pertains, without departing from the concept of the present invention, several simple deductions or substitutions can still be made, and all should be regarded as falling within the protection scope of the present invention.

Claims

1. A page component loading method based on pre-request, characterized in that: The following steps are involved: S110, based on the access page request HTML document, extract the dynamic component request logic in the HTML document from the dynamic component, and encapsulate them into downloadable, readable and writable pre-request independent scripts; S120, downloading the HTML document in the browser, and downloading the pre-request independent script; S130, while the browser executes the loading process, sending a data request to the backend server according to the dynamic component request logic to obtain backend data; S140, when rendering the components of the access page, at least load the backend data into the corresponding dynamic components respectively; and S150, completing the overall component and layout rendering of the page based on the loaded dynamic components.

2. The page component loading method based on pre-request according to claim 1, characterized in that: The step S110 includes: S111, based on the access page request HTML document, extract the dynamic component request logic in the HTML document from the dynamic component; and S112: Encapsulate the dynamic component request logics into downloadable, readable and writable pre-request independent scripts, and establish a mapping relationship between the pre-request independent scripts and the dynamic components.

3. The page component loading method based on pre-request according to claim 1, characterized in that: In the step S120, while the browser is downloading the HTML document, the pre-request independent script is also downloaded synchronously.

4. The page component loading method based on pre-request according to claim 1, characterized in that: The step S130 includes: S131, while the browser executes the loading process, executing the dynamic component request logic in the pre-request independent script; S132, sending a data request to a backend server based on the dynamic component request logic; and S133. Obtain the backend data fed back by the backend server, and establish a mapping relationship between the backend data and the dynamic component.

5. The page component loading method based on pre-request according to claim 4, characterized in that: The step S133 further includes: when the request for the backend data fails, pausing the page rendering.

6. The page component loading method based on pre-request according to claim 4, characterized in that: In the step S140, when rendering the components of the access page, the page resources are loaded, and the backend data are loaded into the corresponding dynamic components respectively.

7. The page component loading method based on pre-request according to claim 1, characterized in that: The step S150 includes: S151, rendering the static component, and at the same time, rendering the loaded dynamic component; and S152: After the static components and dynamic components are rendered, they are combined into an access page.

8. A page component loading system based on pre-request, used to implement the page component loading method based on pre-request according to claim 1, characterized in that: include: A logic extraction module, based on an access page request HTML document, extracts the dynamic component request logic in the HTML document from the dynamic component, and respectively encapsulates them into pre-request independent scripts that can be downloaded, read, and written; A script download module downloads the HTML document in the browser and downloads the pre-request independent script; The data request module sends a data request to the backend server to obtain backend data according to the dynamic component request logic while the browser executes the loading process; A data loading module, when rendering components of the access page, at least loads the backend data into corresponding dynamic components respectively; as well as The page rendering module completes the overall component and layout rendering of the page based on the loaded dynamic components.

9. A page component loading device based on pre-request, characterized in that: include: processor; a memory storing executable instructions of the processor; Wherein, the processor is configured to execute the steps of the pre-request based page component loading method according to any one of claims 1 to 7 by executing the executable instructions.

10. A computer-readable storage medium for storing a program, characterized in that: When the program is executed by a processor, the steps of the pre-request-based page component loading method described in any one of claims 1 to 7 are implemented.

Images