A page display method, device, electronic device, and storage medium

Abstract

The present invention discloses a page display method, device, electronic device, and storage medium. The method includes: obtaining a to-be-rendered code segment corresponding to a received page display request; obtaining a target page framework displayed on a display interface according to the hierarchical information of each component corresponding to the to-be-rendered code segment; rendering sub-code segments in the corresponding to-be-rendered code segment according to the hierarchical information, and updating the rendering result to the target page framework until all sub-code segments are rendered, so as to obtain a target display page. The technical solution of the embodiments of the present invention realizes that during the loading process, the page framework of the target page is preferentially displayed for the user, and detailed content is gradually supplemented into the page framework, avoiding the target page being in a white screen state for a long time and improving the user experience.

Description

Technical Field

[0001] Embodiments of the present invention relate to computer technology, and in particular, to a page display method, apparatus, electronic device, and storage medium. Background Art

[0002] With the rapid development of Internet technology and intelligent mobile terminal technology, Internet technology has been widely applied in various fields, and users can browse the required information in the pages of web pages or APPs through intelligent terminals such as computers or mobile phones.

[0003] However, in the prior art, the development of pages is usually completed by using a front-end framework driven by JS. Since JS needs to download all resources to the browser side and parse them before presenting the page to the user, the page will be in a blank state for a long time before the parsing is completed. Summary of the Invention

[0004] The present invention provides a page display method, apparatus, electronic device, and storage medium to achieve the technical effect of quickly displaying the corresponding content of the page when entering the display page.

[0005] In a first aspect, an embodiment of the present invention provides a page display method, including:

[0006] Obtaining a code snippet to be rendered corresponding to the received page display request;

[0007] According to the hierarchical information of each component corresponding to the code snippet to be rendered, obtaining a target page framework displayed on the display interface;

[0008] Rendering the sub-code snippets in the corresponding code snippet to be rendered according to the hierarchical information, and updating the rendering result to the target page framework until all sub-code snippets are rendered to obtain a target display page.

[0009] In a second aspect, an embodiment of the present invention further provides a page display apparatus, which includes:

[0010] A code snippet to be rendered obtaining module, configured to obtain a code snippet to be rendered corresponding to the received page display request;

[0011] A target page framework determining module, configured to obtain a target page framework displayed on the display interface according to the hierarchical information of each component corresponding to the code snippet to be rendered;

[0012] A sub-code rendering module, configured to render the sub-code snippets in the corresponding code snippet to be rendered according to the hierarchical information, and update the rendering result to the target page framework until all sub-code snippets are rendered to obtain a target display page.

[0013] In a third aspect, an embodiment of the present invention further provides an electronic device, which includes:

[0014] One or more processors;

[0015] A storage device for storing one or more programs,

[0016] When the one or more programs are executed by the one or more processors, the one or more processors implement the page display method according to any one of the embodiments of the present invention.

[0017] In a fourth aspect, an embodiment of the present invention further provides a storage medium containing computer-executable instructions, and the computer-executable instructions are used to execute the page display method according to any one of the embodiments of the present invention when executed by a computer processor.

[0018] The present invention obtains a to-be-rendered code segment corresponding to a received page display request; obtains a target page frame displayed on a display interface according to the hierarchical information of each component corresponding to the to-be-rendered code segment; renders sub-code segments in the corresponding to-be-rendered code segment according to the hierarchical information, and updates the rendering result to the target page frame until all sub-code segments are rendered to obtain a target display page. Through the above technical solution, the present invention completes the segmentation of page rendering code, and sequentially renders sub-code segments in the rendering code according to the hierarchical information of each component corresponding to the rendering code, thereby obtaining a target display page, facilitating the user to quickly obtain feedback during page loading, reducing the time when the page is in a blank screen state, achieving the effect of quickly displaying the corresponding content of the page, and improving the user's operation experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the technical solutions of the exemplary embodiments of the present invention, the following briefly introduces the drawings required for describing the embodiments. Obviously, the introduced drawings are only the drawings of a part of the embodiments to be described by the present invention, rather than all the drawings. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0020] Figure 1 is a flowchart of a page display method provided in Embodiment 1 of the present invention;

[0021] Figure 2 is a structural schematic diagram of a current page component provided in Embodiment 1 of the present invention;

[0022] Figure 3 is a flowchart of code segmentation and rendering provided in Embodiment 2 of the present invention;

[0023] Figure 4 It is a schematic structural diagram of the page framework provided in the second embodiment of the present invention;

[0024] Figure 5 It is a flowchart of the operation mechanism of code segmentation provided in the second embodiment of the present invention;

[0025] Figure 6 It is a schematic structural diagram of a page display device provided in the third embodiment of the present invention;

[0026] Figure 7 It is a schematic structural diagram of an electronic device provided in the fourth embodiment of the present invention. Detailed implementation manners

[0027] The present invention will be further described in detail below with reference to the accompanying drawings and embodiments. It can be understood that the specific embodiments described herein are only used to explain the present invention, rather than limiting the present invention. Additionally, it should be noted that for the sake of description, only parts related to the present invention are shown in the drawings rather than all the structures.

[0028] Embodiment 1

[0029] Figure 1 It is a schematic flowchart of a page display method provided in Embodiment 1 of the present invention. This embodiment is applicable to the situation of displaying a target interface according to a page display request. This method can be executed by a page display device, which can be composed of hardware and / or software and is generally integrated in electronic devices such as mobile phones, tablets, and computers.

[0030] As Figure 1 shown, a page display method provided in Embodiment 1 of the present disclosure includes the following steps:

[0031] S110. Obtain a code snippet to be rendered corresponding to the received page display request;

[0032] Among them, the page display request may be a request to display a target page, and the code snippet to be rendered may be a code snippet corresponding to the target page. Different target pages may correspond to different code snippets to be rendered. Specifically, the page display request may be sent by the terminal device according to the interaction button triggered by the user after the user triggers the interaction button on the display interface, or when the user starts the application, the application itself sends the corresponding page display request. For example, when the user triggers an interaction button on the page, the interaction button may be, but is not limited to, "refresh", "forward", and "return" on the page. When the user wants to return to the previous interface, the user sends the corresponding page display request by triggering the "return" button on the page, or when the user opens the application, the application autonomously sends the page display request.

[0033] Specifically, after receiving the page request, the corresponding code snippet to be rendered can be obtained according to the received page display request. Among them, the page display request may carry relevant information of the target page, and the code snippet to be rendered corresponding to the page request can be determined according to the information carried in the page request. This embodiment does not limit the information carried in the page display request and the method for determining the target page according to the information. Those skilled in the art can independently determine the information carried in the page display request and the method for determining the target page according to this information. For example, the display request of the target page carries the domain name information of the target page, and the browser parses the domain name information and searches for the corresponding rules in the local storage space, and determines the target page according to the corresponding rules.

[0034] S120. Obtain a target page framework displayed on the display interface according to the hierarchical information of each component corresponding to the code snippet to be rendered;

[0035] Among them, the component may be a page element on the target page, the hierarchical information may be the nested hierarchical information of the target page components, the hierarchical information may also be the information used to indicate whether there is an attachment relationship between the components, the display interface may be an interface used to display the target page, and the target page framework may be a page placeholder displayed for the user before the page data is loaded.

[0036] Specifically, after obtaining the rendering code snippet corresponding to the page display request, the target page framework displayed on the display interface can be obtained according to the hierarchical information of each component corresponding to the code snippet to be rendered. When loading the target page, the corresponding first-level element information can be extracted according to the hierarchical information of each component. For example, the first-level element information corresponding to the target page can be extracted according to the component corresponding to the first-level information. The first-level element information can be the position, shape, size, etc. of the target page element. Furthermore, the target page framework can be formed according to the first-level element information. It can be understood that the elements of the target page include, but are not limited to, text, pictures, audio, animations, videos, etc. on the page.

[0037] Based on the above technical solution, after obtaining the target page framework displayed on the display interface, the sub-code snippet of the first level can be rendered according to the hierarchical information of the code snippet to be rendered, and the target page framework corresponding to the target display page can be obtained.

[0038] It can be understood that after obtaining the target page framework displayed on the display interface in this application, the sub-code snippet of the first level is directly rendered according to the hierarchical information of the code snippet to be rendered, and then the target page framework corresponding to the target display interface is obtained. The above solution realizes displaying a page framework for the user in a short time according to the hierarchical information during the page display process, enabling the user to obtain interface feedback as soon as possible and reducing the time the user stays on the blank screen page.

[0039] S130. Render the sub-code snippets in the corresponding code snippets to be rendered according to the hierarchical information, and update the rendering results to the target page framework until all sub-code snippets are rendered to obtain the target display page.

[0040] Among them, the sub-code snippet can be a code snippet obtained by splitting the code snippet to be rendered by a preset method. The target display page can be a complete page displayed for the user after the rendering of the code snippet to be rendered is completed.

[0041] Specifically, after obtaining the target page framework displayed on the display interface based on the hierarchical information of each component corresponding to the code snippet to be rendered, the sub-code snippets in the code to be rendered are rendered according to the hierarchical information. It can be understood that rendering the sub-code snippets in the code to be rendered according to the hierarchical information can be to first render the sub-code snippets in the code to be rendered corresponding to the components at the top layer according to the hierarchical information of each component, and update the rendering result to the target page framework until all sub-code snippets are rendered to obtain the target display page. Specifically, after completing the rendering of the sub-code snippets, the rendering results are gradually filled into the target page framework that has already been rendered. After all sub-code snippets are rendered, the complete target display page can be obtained.

[0042] Based on the above technical solution, the method of rendering the sub-code snippets in the corresponding code snippet to be rendered according to the hierarchical information and updating the rendering result to the target page framework until all sub-code snippets are rendered to obtain the target display page further includes:

[0043] If it is determined according to the hierarchical information that the corresponding component is an independent component or an independent sub-component, the corresponding sub-code snippet is rendered to obtain the framework information corresponding to the independent component or sub-component;

[0044] If it is determined according to the hierarchical information that the corresponding component is a non-independent component or a non-independent sub-component, the corresponding sub-code snippet is rendered to obtain the detailed information corresponding to the corresponding component;

[0045] The framework information and the detailed information are updated to the target page framework until all sub-code snippets are rendered to obtain the target display page.

[0046] Among them, an independent component can be a component that has no attachment relationship with other components on the page, and an independent sub-component can be a sub-component that has no attachment relationship with other sub-components. Correspondingly, a non-independent component can be understood as a component that has an attachment relationship with other components, and a non-independent sub-component can be understood as a sub-component that has an attachment relationship with other sub-components. The framework information corresponding to an independent component or sub-component can be the information constituting the component framework, such as the position, shape, size, etc. of the target page element, and the detailed information can be the information obtained after rendering the sub-code snippet of the non-independent component or non-independent sub-component.

[0047] It can be understood that in the method of the above embodiments, after obtaining the rendering code corresponding to the page display request, the framework of the target page is determined according to the hierarchical information of each component corresponding to the rendering code. The system first loads the code segment corresponding to the target page framework, and then forms the framework of the page. Since the amount of code corresponding to the target page framework is limited, the loading speed of the code will be very fast. Therefore, when a user accesses the system, feedback can be given to the user in a very short time, and a skeleton page can be rendered for the user to pre-understand the page layout structure of the system, reduce the waiting time of the user, and eliminate the bad experience of the white screen on the home page for the user.

[0048] Further, after the rendering of the target page framework is completed, the sub-component information in the target page can be gradually loaded and rendered. Specifically, it is judged whether the corresponding component is an independent component or an independent sub-component according to the hierarchical information. When the corresponding component is an independent component or an independent sub-component, the framework information corresponding to the independent component or the independent sub-component is preferentially obtained. If the corresponding component is a non-independent component or a non-independent sub-component, the corresponding sub-code segment is directly rendered to obtain the detailed information corresponding to the corresponding component, and the obtained framework information and detailed information are updated to the framework of the target page until all sub-code segments are rendered to obtain the target display page. Furthermore, the rendering of the page can be completed step by step during the process of displaying the page, reducing the time required for page loading.

[0049] Specifically, Figure 2 a structural schematic diagram of the components of the current page is provided, as Figure 2 shown. When it is necessary to render component A on the page, it is first judged whether there are sub-components in component A. At this time, there are no sub-components in component A. Therefore, the code of independent component A is not split and the code of independent component A can be directly rendered; when it is necessary to render component B on the page, it is also judged whether there are sub-components in component B. At this time, there is a sub-component b in component B. Therefore, the compiled code segment of component B is split into the code segment of component B and the code segment of sub-component b. At this time, the code segment of component B is preferentially rendered to obtain the framework of component B. After obtaining the framework of component B, the code of sub-component b is rendered, and the rendering result is filled into the framework of component B. Furthermore, after the rendering of all component codes in the target page is completed, a complete target page can be obtained.

[0050] The technical solution provided in the first embodiment of the present invention obtains a to-be-rendered code segment corresponding to the received page display request; obtains a target page framework displayed on the display interface according to the hierarchical information of each component corresponding to the to-be-rendered code segment; renders the sub-code segments in the corresponding to-be-rendered code segment according to the hierarchical information, and updates the rendering result to the target page framework until all sub-code segments are rendered to obtain a target display page. By using the above method, the framework of the page can be preferentially displayed for the user during the process of displaying the page, and the frameworks and detailed contents of other components can be gradually filled into the framework, so that a page can be rendered for the user in a short time, and then the page details can be gradually refined, thereby reducing the waiting time of the user, avoiding the page being in a white screen state for a long time, and optimizing the user's operation experience.

[0051] Embodiment 2

[0052] Figure 3 It is a flowchart of code segmentation and rendering provided in the second embodiment of the present invention. On the basis of the above embodiment, the above page display method is further optimized. Correspondingly, as Figure 3 shown, the method of this embodiment specifically includes:

[0053] Determine the to-be-rendered code segments corresponding to each to-be-displayed page, and determine the to-be-used hierarchical information of each component in the to-be-rendered code segments, so as to perform rendering processing on the to-be-rendered code segments based on the corresponding to-be-used hierarchical information when receiving a page display request, and obtain a target display page corresponding to the page display request.

[0054] Among them, the to-be-displayed page can be a loading page determined according to the user's selection, or a page that needs to be displayed for the user preset. It can be understood that for different to-be-displayed pages, the corresponding to-be-rendered code segments are also different. Therefore, it is necessary to obtain the corresponding to-be-rendered code segments according to different to-be-displayed pages, and determine the to-be-used hierarchical information of each component in the to-be-rendered code segments, so that after receiving a page display request, the to-be-rendered code segments can be rendered based on the corresponding to-be-used hierarchical system information to obtain a target display page corresponding to the page display request.

[0055] On the basis of the above technical solution, the determining the to-be-rendered code segments corresponding to each to-be-displayed page, and determining the to-be-used hierarchical information of each component in the to-be-rendered code segments includes:

[0056] According to the preset page division rule, divide each independent component belonging to the same level into different sub-code segments to obtain a plurality of sub-code segments, and based on each sub-code segment, determine the to-be-rendered code segments and the to-be-used hierarchical information corresponding to each independent component.

[0057] Among them, the page division rule may be to divide the code to be rendered of the page to be displayed according to the hierarchical information of the page components. It can be understood that there may be multiple independent components at the same level in the page to be displayed. For different independent components, each independent component is separately divided into different sub-code segments, and then multiple sub-code segments can be obtained. Based on the obtained multiple sub-code segments, the code segment to be rendered and the hierarchical information to be used corresponding to each independent sub-component are determined.

[0058] On the basis of the above technical solution, the step of separately dividing each independent component belonging to the same level into different sub-code segments, obtaining multiple sub-code segments, and determining the code segment to be rendered and the hierarchical information to be used corresponding to each independent component includes:

[0059] For each independent component, if the current independent component includes at least one independent sub-component, the at least one independent sub-component is divided into different sub-code segments of the next level associated with the current independent component until the independent sub-component does not include independent sub-units, so as to obtain the code segment to be rendered corresponding to each independent component and the hierarchical information to be used corresponding to each independent component; or,

[0060] For each independent component, if the current independent component includes at least one independent sub-component and the level corresponding to the independent sub-component is the target level, each independent sub-component associated with the target level is divided into sub-code segments of the next level associated with the current independent sub-component;

[0061] According to each sub-code segment, the code segment to be rendered is determined, and the hierarchical information to be used for each independent component is recorded.

[0062] Among them, the target level may be the hierarchical information set in advance. For example, the user can set the target level to level 3 according to the specific application environment, and then divide the sub-components in the independent sub-components with the hierarchical information equal to level 3 in the independent component into sub-code segments of the next level associated with the current independent sub-component. The hierarchical information to be used may be the hierarchical information set for the independent component by adopting a preset method.

[0063] In the above embodiments of the present invention, after obtaining the corresponding code snippets to be rendered for each page to be displayed, the obtained code snippets to be rendered are input into a pre-set code splitting unit. The code splitting unit, according to the pre-set page division rules, separately splits each independent component belonging to the same level into different sub-code snippets, obtaining multiple sub-code snippets. And for different independent components, the code splitting unit determines whether the component contains sub-components. Further, according to the sub-code snippets obtained after splitting, the code snippets to be rendered are determined, and the information on the levels to be used for each independent component is recorded.

[0064] Specifically, Figure 3 A flowchart of code splitting and rendering is provided. As Figure 3 shown, it includes the following links: code splitting, code compilation, and code rendering. The code of the front-end page is first split in the code splitting unit, then input into the code compilation unit for compilation, and finally the compiled code is rendered in the code rendering unit. Specifically:

[0065] 1. Code splitting unit. Code splitting is performed according to the page element structure, and elements at the same level are split into the same code segment, and independent sub-components are separately split into different code snippets. Figure 4 A schematic diagram of the page framework structure is provided. As Figure 4 shown, the areas circled by the black rectangular frames in the page are sub-components. When splitting the code, the code snippet corresponding to the home page only saves the positions, shapes, sizes, etc. of the first-level elements, that is, the positions of the black rectangular frames, and the codes of each sub-component are separately split into different code snippets. As Figure 4 shown: Component 1 corresponds to code snippet 1, and Component 2 corresponds to code snippet 2.

[0066] Specifically, Figure 5 A flowchart of the operation mechanism of code splitting is provided. As Figure 5 shown, first, the front-end code component is input into the code splitting unit. First, it is determined whether the component contains sub-components inside. If it does not contain sub-components, no code splitting process is required. If the component contains sub-components inside, then it is determined whether the level of its sub-components is a component above level N (where N can be the target level and can be set according to the actual situation. Generally, it is 3). If so, the component is no longer split, and together with the sub-components, it enters the next unit as a whole. If the level of its sub-components is not a component above level N, then the component needs to be split, the sub-components are split out, and the above loop continues to determine whether the split sub-components still need to be split.

[0067] If all sub-components of the code have passed the filtering and splitting processes, then the split code snippets are input into the code compilation unit.

[0068] 2. Code compilation unit. The code snippets obtained by splitting through the code splitting unit are input into the code compilation unit for compilation to obtain a series of compiled codes.

[0069] 3. Code rendering unit. The code rendering unit first renders the page skeleton of the compiled code, and then renders the page details.

[0070] (1) Rendering of the page framework. The system first loads the code snippets corresponding to the first-level elements of the home page to form the framework of the system's home page. Since the amount of code corresponding to the first-level elements of the system's home page is limited, the loading speed of the code will be very fast. Therefore, when a user accesses the system, feedback can be given to the user in a very short time, rendering a framework page for the user to let the user pre-understand the page layout structure of the system, reducing the waiting time of the user, and eliminating the bad experience of the white screen on the home page for the user.

[0071] (2) Rendering of page details. When the framework of the system's home page is rendered, the information of its sub-components can be gradually loaded and rendered to perform the rendering of page details, gradually enriching and improving the page. When the rendering of all component codes of the page is completed, the rendering of all content of the page is completed.

[0072] In the embodiment of the present invention, by splitting the code of the page according to the organizational structure of the system page components, it is more reasonable than the method of splitting the code with the system page as the unit. And in the present invention, splitting the code of the system according to the organizational structure of the page elements can make the code splitting more balanced, avoiding the situation of too long or too short code snippets.

[0073] Based on the above technical solution, determining the code snippet to be rendered based on each sub-code snippet includes:

[0074] Compiling and processing each sub-code snippet based on a preset code compilation unit to obtain the code snippet to be rendered.

[0075] Specifically, after obtaining the sub-code snippets corresponding to each component in the page to be displayed, the sub-code snippets are input into a preset compilation unit, and after the compilation unit compiles and processes the sub-code snippets, the code snippet to be rendered is obtained.

[0076] The technical solution provided in the second embodiment of the present invention determines the code snippets to be rendered corresponding to each page to be displayed, and determines the usage levels of each component in the code snippets to be rendered. When a page display request is received, the code snippets to be rendered are rendered based on the corresponding usage levels to obtain a target display page corresponding to the page display request. According to the pre-set page division rules, each independent component belonging to the same level is separately divided into different sub-code snippets to obtain a plurality of sub-code snippets, and based on each sub-code snippet, the code snippets to be rendered and the usage levels of each independent component are determined. Each sub-code snippet is compiled based on the pre-set code compilation unit to obtain the code snippets to be rendered. By using the above method, the code of the page can be segmented according to the organizational structure of the components on the page, thereby improving the rationality of code segmentation, making the code segmentation more balanced, and thus improving the efficiency of code segmentation.

[0077] Embodiment 3

[0078] Figure 6 FIG. is a schematic structural diagram of a page display device provided in Embodiment 3 of the present invention. The device includes:

[0079] A code snippet to be rendered acquisition module 61, configured to acquire a code snippet to be rendered corresponding to a received page display request;

[0080] A target page frame determination module 62, configured to obtain a target page frame displayed on a display interface according to the level information of each component corresponding to the code snippet to be rendered;

[0081] A sub-code snippet rendering module 63, configured to render the sub-code snippets in the corresponding code snippet to be rendered according to the level information, and update the rendering result to the target page frame until all sub-code snippets are rendered to obtain a target display page.

[0082] Based on the above technical solution, optionally, the page display device includes:

[0083] A level information determination module 60, configured to determine the code snippets to be rendered corresponding to each page to be displayed, and determine the usage levels of each component in the code snippets to be rendered, so as to, when a page display request is received, perform rendering processing on the code snippets to be rendered based on the corresponding usage levels to obtain a target display page corresponding to the page display request.

[0084] Based on the above technical solution, optionally, the level information determination module 60 is configured to:

[0085] According to the pre-set page division rules, each independent component belonging to the same level is respectively segmented into different sub-code segments to obtain a plurality of sub-code segments, and based on each sub-code segment, the code segment to be rendered and the level information to be used corresponding to each independent component are determined.

[0086] Based on the above technical solution, optionally, the level information determination module 60 includes:

[0087] A code segmentation unit, which is used for each independent component. If at least one independent sub-component is included in the current independent component, the at least one independent sub-component is segmented into different sub-code segments of the next level associated with the current independent component until no independent sub-unit is included in the independent sub-component, to obtain the code segment to be rendered corresponding to each independent component and the level information to be used corresponding to each independent component; or,

[0088] For each independent component, if at least one independent sub-component is included in the current independent component and the level corresponding to the independent sub-component is the target level, the independent sub-components associated with the target level are segmented into sub-code segments of the next level associated with the current independent sub-component;

[0089] Based on each sub-code segment, the code segment to be rendered is determined, and the level information to be used for each independent component is recorded.

[0090] Based on the above technical solution, optionally, the level information determination module 60 includes:

[0091] A code compilation unit, which is used for compiling each sub-code segment to obtain the code segment to be rendered.

[0092] Based on the above technical solution, optionally, the target page frame determination module 62 includes:

[0093] A target page frame rendering unit, which is used for rendering the sub-code segment of the first level according to the level information of the code segment to be rendered to obtain a target page frame corresponding to the target display page.

[0094] Based on the above technical solution, optionally, the sub-code rendering module 63 is specifically used for:

[0095] If it is determined according to the level information that the corresponding component is an independent component or an independent sub-component, the corresponding sub-code segment is rendered to obtain frame information corresponding to the independent component or sub-component;

[0096] If, according to the hierarchical information, it is determined that the corresponding component is a non-independent component or an independent sub-component, then the corresponding sub-code snippet is rendered to obtain the detailed information corresponding to the corresponding component;

[0097] Update the frame information and the detailed information to the target page frame until the rendering of each sub-code snippet is completed, and the target display page is obtained.

[0098] The page display device provided by the embodiments of the present invention can execute the page display method provided by any embodiment of the present invention, and has the corresponding functional modules and beneficial effects for executing the method.

[0099] It should be noted that the various units and modules included in the above system are only divided according to functional logic, but are not limited to the above division, as long as the corresponding functions can be achieved; in addition, the specific names of the functional units are only for the convenience of mutual distinction and do not limit the protection scope of the embodiments of the present invention.

[0100] Embodiment Four

[0101] Figure 7 It is a schematic structural diagram of an electronic device provided by Embodiment Four of the present invention. Figure 7 It shows a block diagram of an exemplary electronic device 70 suitable for implementing the embodiments of the present invention. Figure 7 The shown electronic device 70 is only an example and should not bring any limitation to the functions and usage scope of the embodiments of the present invention.

[0102] As Figure 7 shown, the electronic device 70 is presented in the form of a general-purpose computing device. The components of the electronic device 70 may include, but are not limited to: one or more processors or processing units 701, a system memory 702, and a bus 703 connecting different system components (including the system memory 702 and the processing unit 701).

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

[0104] The electronic device 70 typically includes a variety of computer system-readable media. These media can be any available media accessible by the electronic device 70, including volatile and non-volatile media, removable and non-removable media.

[0105] System memory 702 may include computer system readable media in the form of volatile memory, such as random access memory (RAM) 704 and / or cache memory 705. The electronic device 70 may further include other removable / non-removable, volatile / non-volatile computer system storage media. By way of example only, storage system 706 can be used for reading and writing non-removable, non-volatile magnetic media ( Figure 7 not shown, typically referred to as a "hard disk drive"). Although Figure 7 not shown in the figure, a disk drive for reading and writing removable non-volatile disks (such as "floppy disks") and an optical disk drive for reading and writing removable non-volatile optical disks (such as CD-ROM, DVD-ROM or other optical media) may be provided. In these cases, each drive can be connected to the bus 703 through one or more data media interfaces. Memory 702 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 708 having a set (at least one) of program modules 707 may be stored, for example, in memory 702. Such program modules 707 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 707 generally perform the functions and / or methods in the embodiments described in the present invention.

[0107] The electronic device 70 can also communicate with one or more external devices 709 (such as a keyboard, a pointing device, a display 710, etc.), and can also communicate with one or more devices that enable a user to interact with the electronic device 70, and / or communicate with any device that enables the electronic device 70 to communicate with one or more other computing devices (such as a network card, a modem, etc.). Such communication can be carried out through an input / output (I / O) interface 711. Also, the electronic device 70 can communicate with one or more networks (such as a local area network (LAN), a wide area network (WAN), and / or a public network, such as the Internet) through a network adapter 712. As Figure 7 shown, the network adapter 712 communicates with other modules of the electronic device 70 through the bus 703. It should be understood that although Figure 7 not shown in the figure, other hardware and / or software modules can be used in conjunction with the electronic device 70, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems, etc.

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

[0109] Embodiment 5

[0110] Embodiment 5 of the present invention provides a storage medium containing computer-executable instructions, on which computer-executable instructions are stored. When the instructions are executed by a processor, the page display method provided by the above embodiments is implemented:

[0111] Obtain a code snippet to be rendered corresponding to the received page display request;

[0112] Obtain a target page framework to be displayed on the display interface according to the hierarchical information of each component corresponding to the code snippet to be rendered;

[0113] Render the sub-code snippets in the corresponding code snippet to be rendered according to the hierarchical information, and update the rendering result to the target page framework until all sub-code snippets are rendered to obtain a target display page.

[0114] The storage medium containing computer-executable instructions of the embodiments of the present invention may adopt any combination of one or more computer-readable media. The computer-readable medium may be a computer-readable signal medium or a computer-readable storage medium. The computer-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 (non-exhaustive list) of the computer-readable storage medium include: an electrical connection having one or more wires, a portable computer 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. In this document, the computer-readable storage medium may 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] The computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries the computer-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 computer-readable signal medium may also be any computer-readable medium other than the computer-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.

[0116] The program code contained on a computer-readable medium can be transmitted using any suitable medium, including - but not limited to - wireless, wire, optical fiber, RF, etc., or any suitable combination of the foregoing.

[0117] The computer program code for performing the operations of the embodiments of the present invention can be written in one or more programming languages or combinations thereof. The programming languages include object-oriented programming languages - such as Java, Smalltalk, C++, and also include 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, executed as a stand-alone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer can be connected to the user's computer through any type of network - including a local area network (LAN) or a wide area network (WAN) - or, alternatively, can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0118] Note that the above is only the preferred embodiment of the present invention and the technical principles applied. Those skilled in the art will understand that the present invention is not limited to the specific embodiments described herein. Various obvious changes, re-adjustments, and substitutions can be made by those skilled in the art without departing from the protection scope of the present invention. Therefore, although the present invention has been described in more detail through the above embodiments, the present invention is not limited to the above embodiments. Without departing from the concept of the present invention, it can also include more other equivalent embodiments, and the scope of the present invention is determined by the scope of the appended claims.

Claims

1. A page display method, characterized in that, Including: Obtaining a code snippet to be rendered corresponding to a received page display request; Obtaining a target page framework to be displayed on a display interface according to the hierarchical information of each component corresponding to the code snippet to be rendered; Rendering sub-code snippets in the corresponding code snippet to be rendered according to the hierarchical information, and updating the rendering result to the target page framework until all sub-code snippets are rendered to obtain a target display page; The rendering of the sub-code snippets in the corresponding code snippet to be rendered according to the hierarchical information, and updating the rendering result to the target page framework until all sub-code snippets are rendered to obtain a target display page includes: If it is determined according to the hierarchical information that the corresponding component is an independent component or an independent sub-component, rendering the corresponding sub-code snippet to obtain framework information corresponding to the independent component or the independent sub-component; If it is determined according to the hierarchical information that the corresponding component is a non-independent component or a non-independent sub-component, rendering the corresponding sub-code snippet to obtain detailed information corresponding to the corresponding component; Updating the framework information and the detailed information to the target page framework until all sub-code snippets are rendered to obtain the target display page.

2. The method according to claim 1, characterized in that, Further including: Determining code snippets to be rendered corresponding to each page to be displayed, and determining the hierarchical information to be used for each component in the code snippets to be rendered, so that when a page display request is received, rendering the code snippets to be rendered based on the corresponding hierarchical information to be used to obtain a target display page corresponding to the page display request.

3. The method according to claim 2, wherein The determining the code snippets to be rendered corresponding to each page to be displayed, and determining the hierarchical information to be used for each component in the code snippets to be rendered includes: According to a preset page division rule, separately dividing each independent component belonging to the same level into different sub-code snippets to obtain a plurality of sub-code snippets, and determining the code snippets to be rendered and the hierarchical information to be used corresponding to each independent component based on each sub-code snippet.

4. The method according to claim 3, wherein The separately dividing each independent component belonging to the same level into different sub-code snippets to obtain a plurality of sub-code snippets, and determining the code snippets to be rendered and the hierarchical information to be used corresponding to each independent component based on each sub-code snippet includes: For each independent component, if the current independent component includes at least one independent sub-component, dividing the at least one independent sub-component into different sub-code snippets at the next level associated with the current independent component until the independent sub-component does not include an independent subunit, to obtain the code snippets to be rendered corresponding to each independent component, and the hierarchical information to be used corresponding to each independent component; or, For each independent component, if the current independent component includes at least one independent sub-component and the level corresponding to the independent sub-component is the target level, dividing each independent sub-component associated with the target level into sub-code snippets at the next level associated with the current independent component; Determining the code snippets to be rendered according to each sub-code snippet, and recording the hierarchical information to be used for each independent component.

5. The method according to claim 3, wherein Determining the code snippet to be rendered based on each sub-code snippet includes: Compiling each sub-code snippet based on a pre-set code compilation unit to obtain the code snippet to be rendered.

6. The method according to claim 1, characterized in that, Obtaining the target page framework displayed on the display interface according to the hierarchical information of each component corresponding to the code snippet to be rendered includes: Rendering the sub-code snippet at the first level according to the hierarchical information of the code snippet to be rendered to obtain the target page framework corresponding to the target display page.

7. A page display device, characterized in that, It includes: A code snippet to be rendered acquisition module, configured to acquire the code snippet to be rendered corresponding to the received page display request; A target page framework determination module, configured to obtain the target page framework displayed on the display interface according to the hierarchical information of each component corresponding to the code snippet to be rendered; A sub-code rendering module, configured to render the sub-code snippet in the corresponding code snippet to be rendered according to the hierarchical information, and update the rendering result to the target page framework until all sub-code snippets are rendered to obtain the target display page; The sub-code rendering module is specifically configured to: if it is determined according to the hierarchical information that the corresponding component is an independent component or an independent sub-component, render the corresponding sub-code snippet to obtain the framework information corresponding to the independent component or the independent sub-component; if it is determined according to the hierarchical information that the corresponding component is a non-independent component or a non-independent sub-component, render the corresponding sub-code snippet to obtain the detailed information corresponding to the corresponding component; update the framework information and the detailed information to the target page framework until all sub-code snippets are rendered to obtain the target display page.

8. An electronic device, characterized in that, The electronic device includes: One or more processors; A 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 display method according to any one of claims 1-6.

9. A storage medium containing computer-executable instructions, characterized in that, The computer-executable instructions are used to execute the page display method according to any one of claims 1-6 when executed by a computer processor.

Images