Page rendering method and device and electronic equipment

Abstract

The embodiment of the invention discloses a page rendering method and device and electronic device.According to the embodiment, in response to a target page starting instruction, a pre-stored page executable file of a target page is executed, a page instance of the target page is created, and the life cycle of the target page is executed; and re-rendering the target page according to the page initial data of the target page. Wherein the page executable file is determined in the compiling stage according to page initial data of the target page, and the page initial data at least comprises component attribute information in the target page. According to the embodiment, each real node can be immediately rendered and displayed through the pre-stored page executable file when the page is started, and then the life cycle of each component is executed, so that the white screen condition caused by overlong page loading time can be avoided.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and more specifically, to a page rendering method, device and electronic device. Background Art

[0002] In various program applications (such as various small program applications that can be used without downloading and installing), after the page is started, the view layer (or view engine) needs to render the corresponding page content according to the execution result of the logic layer (or logic engine), which makes the overall page startup process link longer and takes a long time to render the page, that is, the phenomenon of long-term white screen occurs, resulting in poor user experience. At the same time, it may also cause the white screen detection module to detect such a situation as a system white screen, which further affects the online data. Summary of the invention

[0003] In view of this, the purpose of the present invention is to provide a page rendering method, device and electronic device, so that when the page is started, each real node is immediately rendered and displayed through a pre-stored page executable file, and then the life cycle of each component is executed, thereby avoiding the white screen caused by the long page loading time.

[0004] In a first aspect, an embodiment of the present invention provides a page rendering method, the method comprising:

[0005] In response to a target page startup instruction, executing a pre-stored page executable file of the target page, the page executable file being determined according to the page initial data of the target page during a compiling phase;

[0006] Creating a page instance of the target page and executing the life cycle of the target page;

[0007] The target page is re-rendered according to the initial page data of the target page, where the initial page data at least includes component attribute information in the target page.

[0008] Optionally, the method further includes:

[0009] During the compilation phase, a page executable file is generated for one or more target pages corresponding to the program.

[0010] Optionally, generating a page executable file of one or more target pages corresponding to the program in the compiling stage includes:

[0011] Integrate the initial page data of each target page in the compilation stage;

[0012] Generate an initial real node tree for each target page according to the initial page data of each target page;

[0013] The initial real node tree of each target page is written into the view container, and a page executable file corresponding to each target page is generated.

[0014] Optionally, the re-rendering the target page according to the initial page data of the target page includes:

[0015] Constructing a virtual node tree according to the initial page data of the target page;

[0016] Traversing the virtual node tree to determine the built-in components of the target page;

[0017] Determine the current real node tree based on the built-in components in the target page;

[0018] The current real node tree is executed to re-render the target page.

[0019] Optionally, determining the current real node tree based on the built-in components in the target page includes:

[0020] In response to the identifier of the real node to be determined in the current real node tree being consistent with the node identifier in the initial real node tree, the nodes in the initial real node tree are reused to determine the current real node tree.

[0021] Optionally, generating an initial real node tree of each target page according to the initial page data of each target page includes:

[0022] Constructing a virtual node tree of each target page according to the initial page data of each target page and a virtual tree construction function;

[0023] Traversing the virtual node tree of each target page to determine the built-in components in each target page;

[0024] Creating a real node according to the real node template of each of the built-in components;

[0025] The corresponding real nodes are spliced ​​according to the hierarchical relationship of the built-in components in each of the target pages to obtain an initial real node tree of each of the target pages.

[0026] Optionally, the node identifiers in the initial real node tree are determined by the order in which the real nodes are created.

[0027] In a second aspect, an embodiment of the present invention provides a page rendering device, the device comprising:

[0028] A pre-rendering unit is configured to execute a pre-stored page executable file of the target page in response to a target page startup instruction, wherein the page executable file is determined according to the page initial data of the target page during the compilation stage;

[0029] An execution unit, configured to create a page instance of the target page and execute the life cycle of the target page;

[0030] The re-rendering unit is configured to re-render the target page according to the initial page data of the target page.

[0031] In a third aspect, an embodiment of the present invention provides an electronic device, comprising a memory and a processor, wherein the memory is used to store one or more computer program instructions, wherein the one or more computer program instructions are executed by the processor to implement the method as described above.

[0032] In a fourth aspect, an embodiment of the present invention provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method described above is implemented.

[0033] In a fifth aspect, an embodiment of the present invention provides a computer program product, which, when executed on a computer, enables the computer to execute the method described above.

[0034] In response to the target page startup instruction, this embodiment executes the pre-stored page executable file of the target page, creates a page instance of the target page, executes the life cycle of the target page, and re-renders the target page according to the page initial data of the target page. Among them, the page executable file is determined according to the page initial data of the target page during the compilation stage, and the page initial data at least includes the component attribute information in the target page. This embodiment can immediately render and display each real node through the pre-stored page executable file when the page starts, and then execute the life cycle of each component, thereby avoiding the white screen caused by too long page loading time. BRIEF DESCRIPTION OF THE DRAWINGS

[0035] The above and other objects, features and advantages of the present invention will become more apparent through the following description of the embodiments of the present invention with reference to the accompanying drawings, in which:

[0036] Figure 1 It is a schematic diagram of the page rendering process of the related technology;

[0037] Figure 2 is a flow chart of a page rendering method according to an embodiment of the present invention;

[0038] Figure 3 is a flow chart of a method for generating a page executable file according to an embodiment of the present invention;

[0039] Figure 4 is a schematic diagram of a virtual node tree according to an embodiment of the present invention;

[0040] Figure 5 is a schematic diagram of a real node template of an embodiment of the present invention;

[0041] Figure 6 is a schematic diagram of a page executable file according to an embodiment of the present invention;

[0042] Figure 7 is a flow chart of a page re-rendering method according to an embodiment of the present invention;

[0043] Figure 8 is a schematic diagram of a real node multiplexing process according to an embodiment of the present invention;

[0044] Fig. 9 is a schematic diagram of a page rendering process according to an embodiment of the present invention;

[0045] Fig.10 is a schematic diagram of a page rendering device according to an embodiment of the present invention;

[0046] Fig.11 is a schematic diagram of an electronic device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0047] The present application is described below based on embodiments, but the present application is not limited to these embodiments. In the detailed description of the present application below, some specific details are described in detail. It is possible for those skilled in the art to fully understand the present application without the description of these details. In order to avoid confusing the essence of the present application, known methods, processes, flows, components and circuits are not described in detail.

[0048] In addition, persons of ordinary skill in the art will appreciate that the drawings provided herein are for illustration purposes and are not necessarily drawn to scale.

[0049] Unless the context clearly requires otherwise, the words "include", "comprising" and similar words throughout the application should be interpreted as including rather than exclusive or exhaustive; that is, the meaning is "including but not limited to".

[0050] In the description of this application, it should be understood that the terms "first", "second", etc. are only used for descriptive purposes and cannot be understood as indicating or implying relative importance. In addition, in the description of this application, unless otherwise specified, the meaning of "plurality" is two or more.

[0051] The solutions described in this specification and in the examples, if they involve the processing of personal information, will be processed on the premise of having a legal basis (such as obtaining the consent of the subject of personal information, or being necessary for the performance of a contract, etc.), and will only be processed within the scope of regulations or agreements. If a user refuses to process personal information other than the necessary information for basic functions, it will not affect the user's use of basic functions.

[0052] This embodiment is mainly described by taking the page loading of the applet as an example. It should be understood that this embodiment can also be applied to other applications with long page loading links or long time consumption. Furthermore, the solution of the embodiment of the present invention can be applied to a dual-engine architecture applet including a logic engine and a view engine, and can also be applied to a single-engine architecture applet including a logic layer and a view layer. The architecture of the applet is not limited here. The following is mainly described by taking the dual-engine architecture applet including a logic engine and a view engine as an example.

[0053] The logic engine or logic layer is used to create page instances and execute the life cycle of the page (that is, responsible for executing business logic), and the view engine or view layer includes page templates for each page and renders the corresponding page based on the execution results of the logic engine or logic layer. Furthermore, the page template is composed of a series of basic components, such as view, text and other components.

[0054] Figure 1 This is a schematic diagram of the page rendering process of the related technology. Figure 1 As shown, the page rendering process of the related technology is as follows:

[0055] 1) When the logic engine 11 of the applet is started, the business code corresponding to the page, such as js (JavaScript) code, is injected to create a page instance and execute the page life cycle.

[0056] 2) The logic engine 11 notifies the view engine 12 that a page jump can be performed.

[0057] 3) After receiving the message that the page can be jumped, the view engine 12 injects the configuration files such as the page code and page-related styles, and notifies the logic engine 11 to register each component and organize the data, and then waits for the logic engine 11 to send the initial data of the page.

[0058] 4) The logic engine 11 integrates the information such as the properties of each component, obtains the initial data of the page, and sends the integrated initial data of the page to the view engine 12.

[0059] 5) After receiving the page initial data, the view engine 12 constructs a virtual node tree according to the page initial data and the virtual tree constructor.

[0060] 6) The view engine 12 traverses the virtual tree nodes to determine the built-in components corresponding to the page, creates a built-in component tree, and establishes a hierarchical relationship between the built-in components.

[0061] 7) The view engine 12 creates real nodes through the real node templates of the built-in components, and assembles the real node tree according to the hierarchical relationship of the built-in components.

[0062] 8) Write the root node of the real node tree into the view container (ie, Html body) to complete page rendering.

[0063] It can be seen that in the page rendering process of the related technology, it is necessary to register custom components and integrate the initial data of the page through the logic engine, synchronize to the view engine through the vertical signal, and the view engine creates a virtual node tree through the initial data of the page, and then creates a built-in component tree and a real node tree through the virtual node tree, and finally renders the page. In this process, when the page nodes are more complex, it will be more time-consuming for the view engine to wait for the vertical signal and create the virtual node tree and the real node tree, resulting in a long waiting time for the final rendering of the page, that is, a long white screen phenomenon occurs, resulting in a poor user experience. At the same time, it may also cause the white screen detection module to detect such a situation as a system white screen and further affect the online data. Therefore, the embodiment of the present invention provides a page rendering method, device and electronic device, so that when the page is started, each real node is immediately rendered and displayed through a pre-stored page executable file, and then the life cycle of each component is executed, thereby avoiding the white screen caused by too long page loading time.

[0064] Figure 2 is a flow chart of a page rendering method according to an embodiment of the present invention. Figure 2 As shown, the page rendering method of this embodiment includes the following steps:

[0065] Step S110, in response to the target page start instruction, executing the pre-stored page executable file of the target page, wherein the page executable file is determined according to the page initial data of the target page during the compilation stage.

[0066] In an optional implementation, this embodiment generates a page executable file of one or more target pages corresponding to the program during the compilation phase, so that pre-rendering can be performed when each target page of the program is loaded, thereby pre-rendering the target page immediately when a target page startup instruction is received to avoid a white screen situation.

[0067] Further optionally, the pre-stored page executable file integrates the page initial data of each target page during the compilation phase, and generates a page executable file based on the page initial data. The page initial data includes component attribute information in the target page. Furthermore, this embodiment generates an initial real node tree of each target page based on the page initial data of each target page, writes the initial real node tree of each target page into the view container of the view engine (or view layer), and obtains the page executable file corresponding to each target page.

[0068] Figure 3 FIG. 1 is a flow chart of a method for generating a page executable file according to an embodiment of the present invention. Figure 3 As shown, the page executable file of this embodiment is generated by the following steps:

[0069] Step S210, integrating the page initial data of each target page in the compilation stage. Taking the mini program as an example, the component attribute information and other page initial data of each target page are integrated through the logic engine or logic layer in the mini program compilation stage. Among them, the component attribute information may include a combination of one or more of the following: component name, component position or relative position relationship with other components, dependency relationship between components, and other description information of components.

[0070] Step S220, constructing a virtual node tree of each target page according to the page initial data of each target page and the virtual tree construction function. Optionally, the virtual tree construction function can be determined based on the corresponding page description syntax. The virtual node tree is a virtual representation of the components of the corresponding target page, which characterizes the page structure of the target page. Among them, the page structure corresponding to the virtual node tree is a virtual structure and cannot be directly rendered in the target page. Specifically, the virtual node tree is the VDOM corresponding to the target page.

[0071] Figure 4 Schematic diagram of a virtual node tree according to an embodiment of the present invention. Figure 4 As shown, the virtual node tree 4 corresponds to a target page Page, which includes virtual nodes image, text and checkbox corresponding to each built-in component.

[0072] Step S230, traverse the virtual node tree of each target page to determine the built-in components in each target page. Since the virtual node tree describes the page structure of the target page, including each built-in component in the target page, the built-in components in each target page and the hierarchical relationship of each built-in component in each target page can be determined by traversing the virtual node tree of each target page.

[0073] Step S240, creating a real node according to the real node template of each built-in component. The view engine or view layer has a real node template (ie, page template), and the view engine creates an executable real node based on the real node template of each built-in component.

[0074] Figure 5 is a schematic diagram of a real node template of an embodiment of the present invention. The real node template includes information such as elements included in each built-in component. Figure 5 As shown, in the real node template 5, the real node image corresponding to the built-in component has div and span elements, the real node text has two span elements, the real node checkbox has an upper div element, and the upper div element also has div and span elements. The real node template has the elements in each real node and the upper-lower relationship between the elements, so this embodiment can create the corresponding real node according to the real node template.

[0075] Step S250 , splicing the corresponding real nodes according to the hierarchical relationship of the built-in components in each target page to obtain an initial real node tree of each target page.

[0076] Step S260, writing the initial real node tree of each target page into the view container, and generating a page executable file corresponding to each target page.

[0077] The initial real node tree is also used to represent the page structure corresponding to the target page, and the structure corresponding to the initial real node tree is a real loadable and renderable structure, which can be drawn in the target page. Specifically, the initial real node tree is the DOM corresponding to the target page.

[0078] Figure 6 Schematic diagram of a page executable file according to an embodiment of the present invention. Figure 6 As shown, the real components are spliced ​​based on the hierarchical relationship of the built-in components (image, text and checkbox) in the target page to obtain a real node tree, and the real node tree is written into the view container (Html ​​Body) to generate a page executable file 6 corresponding to the corresponding target page.

[0079] It should be understood that Figure 4-Figure 6 This is only an exemplary process of generating a real node tree, and does not represent the actual situation of a certain applet.

[0080] In this embodiment, by traversing the virtual node tree that cannot be directly rendered, the built-in components in the corresponding target page and the hierarchical relationship of each built-in component are determined, and real nodes are created based on the real node templates of each built-in component, and the real nodes are spliced ​​according to the hierarchical relationship of the built-in components in the target page to obtain an initial real node tree. Thus, a real node in the initial node tree can correspond to a built-in component in the target page, and each real node in the initial node tree can correspond to each built-in component in the target page. The initial real node tree of each target page is written into the view container, which can be used as a page executable file.

[0081] This embodiment can pre-generate the initial real node tree of each target page during the program compilation stage and load it into the view container, so that after receiving the target page startup instruction, the view engine or view layer can immediately execute the initial node tree in the page executable file, thereby realizing pre-rendering of the target page and avoiding the white screen situation.

[0082] Furthermore, the view engine of this embodiment can determine the position of the nodes corresponding to each built-in component from the initial real node tree (for example, the relative position relationship between the built-in components, or the specific position in the target page, etc.), and use the position of the node corresponding to each built-in component as the position of the built-in component in the target page, and then determine the style of the component at each position according to the relevant page style configuration information (for example, the shape, size, color, corresponding text and other information of the component), load and execute the initial real node tree and the relevant page style configuration information, and realize pre-rendering of the target page.

[0083] At this time, since the logic engine does not execute the page life cycle, it can only render each component and cannot perform interactive operations. Therefore, this embodiment needs to re-render based on the execution result of the logic engine to achieve loading and rendering of the target page.

[0084] Step S120, creating a page instance of the target page and executing the life cycle of the target page.

[0085] Optionally, in this embodiment, after receiving the target page startup instruction, the view engine executes the pre-stored page executable file for fast rendering. At the same time, the logic engine notifies the view engine to jump to the page, the view engine injects the page code, and waits for relevant data. Further, the logic engine creates a corresponding page instance according to the target page startup instruction and executes the page life cycle. Among them, the page life cycle may include page loading, page display, rendering completion, etc.

[0086] Step S130: re-render the target page according to the initial page data of the target page.

[0087] Optionally, in this embodiment, after injecting the page code, the view engine notifies the logic engine to integrate the initial page data of the target page, and after receiving the initial page data of the target page, re-renders the target page according to the initial page data of the target page. At this time, the life cycle (e.g., created, attached, etc.) of each pre-rendered real node (i.e., each built-in component) has been executed, and the re-rendered real component can respond to events such as interaction.

[0088] Therefore, the embodiment of the present invention can generate an initial real node tree in the compilation stage and write it into the view container to form a page executable file, so that after the target page startup instruction is triggered, the page executable file and related page style configuration information can be loaded to achieve fast rendering of the target page and avoid the white screen situation. At the same time, while pre-rendering the target page, the page life cycle is executed and the target page is re-rendered, so that the re-rendered target page can achieve events such as page interaction.

[0089] Figure 7 is a flow chart of a page re-rendering method according to an embodiment of the present invention. Figure 7 As shown, the page re-rendering method of the embodiment of the present invention includes the following steps:

[0090] Step S310, constructing a virtual node tree according to the initial page data of the target page.

[0091] Optionally, in this embodiment, after receiving the target page start instruction, the view engine injects the page code after receiving the page jump notification from the logic engine, and notifies the logic engine to integrate the page initial data of the target page, and after receiving the page initial data of the target page, builds the virtual node tree of the target page according to the page initial data of the target page and the virtual tree construction function. The component attribute information may include a combination of one or more of the following: component name, component position or relative position relationship with other components, dependency relationship between components, and other description information of components.

[0092] Optionally, the virtual tree construction function can be determined based on the corresponding page description syntax. The virtual node tree is a virtual representation of the components of the corresponding target page, which represents the page structure of the target page.

[0093] Step S320, traverse the virtual node tree to determine the built-in components of the target page. Since the virtual node tree describes the page structure of the target page, including each built-in component in the target page, the built-in components in the target page and the hierarchical relationship between each built-in component in each target page can be determined by traversing the virtual node tree of the target page.

[0094] Step S330, determining the current real node tree based on the built-in components in the target page.

[0095] After traversing the virtual node tree to determine the built-in components, the built-in components need to create real nodes through real node templates. However, in this embodiment, since the target page has pre-rendered the real nodes and displayed them, the current real node tree is consistent or basically consistent with the structure of the real node tree generated during the compilation process of the mini program. Therefore, in an optional implementation method, this embodiment can reuse the already rendered real nodes, thereby avoiding repeated creation of real nodes, saving the overhead of creating real nodes, and optimizing the performance of the mini program.

[0096] Further optionally, this embodiment realizes the reuse of corresponding real nodes through the identification mapping relationship of the components in the target page. Specifically, in response to the identification of the real node to be determined in the current real node tree being consistent with the node identification in the initial real node tree, this embodiment reuses the nodes in the initial real node tree to determine the current real node tree.

[0097] Step S340, executing the current real node tree to re-render the target page.

[0098] In an optional implementation, since the initial real node tree is a real node created for the first time, the identifier (i.e., id) of each real node can be added based on the creation order of the real node. In this way, when the real node corresponding to the current built-in component is generated, the id of each real node in the initial real node tree can be checked, and when the id of the real node to be determined is consistent with the id of the real node in the initial real node tree, the real node in the initial real node tree can be reused. Among them, the identifier of the real node of the current real node tree is determined based on the generation order. It should be understood that this embodiment does not limit the encoding method of the node identifier, and other encoding methods of node identifiers, such as pre-identifying each real component and continuing the identifier in constructing the virtual node tree and the real node tree, can all be applied to this embodiment.

[0099] Furthermore, the logic engine continues to execute the created and attached life cycles of each built-in component to further control the properties of the real node and add response events, etc., to achieve re-rendering of the target page.

[0100] Figure 8 FIG. 1 is a schematic diagram of a real node multiplexing process according to an embodiment of the present invention. Figure 8As shown, in the process of generating and executing the current real node tree 82, assuming that the identifier viewid=2 of the real node image to be determined in the current real node tree 82, the initial real node image with id=2 in the corresponding page executable file 81 is queried, so that the rendered initial real node image can be reused, and the created, attached, and other life cycles of the corresponding built-in component image are executed to further control the properties of the real node and add response events, etc. Similarly, assuming that the identifier viewid=3 of the real node text to be determined in the current real node tree 82, the initial real node text with id=3 in the corresponding page executable file 81 is queried, so that the rendered initial real node text can be reused, and the created, attached, and other life cycles of the corresponding built-in component text are executed to further control the properties of the real node and add response events, etc. Assuming that the identifier viewid=4 of the real node checkbox to be determined in the current real node tree 82, the initial real node checkbox with id=4 in the corresponding page executable file 81 is queried, so the rendered initial real node checkbox can be reused, and the created, attached and other life cycles of the corresponding built-in component checkbox can be executed to further control the properties of the real node and add response events, etc.

[0101] Therefore, this embodiment can generate a page executable file in advance during the program compilation phase, so that when the target page startup instruction is received, the page executable file corresponding to the target page is immediately executed to achieve fast rendering of the target page to avoid the situation of a white screen. At the same time, this embodiment executes the page life cycle through the logic engine to re-render the page, realize events such as page interaction, and reuse the real nodes in the initial real node tree when re-determining the current real node tree to reduce the overhead of creating real nodes, further improving program performance.

[0102] In other optional implementations, the current real node tree of this embodiment may also be recreated through a real node template, and this embodiment is not limited to this.

[0103] Fig. 9 Schematic diagram of the page rendering process of an embodiment of the present invention. Fig. 9As shown, in the compilation phase, this embodiment integrates the page initial data of each target page in the mini-program application, creates a virtual node tree corresponding to each target page based on the initial data of each page, creates a corresponding initial real node tree based on the virtual node tree, and writes the initial real node tree of each target page into the view container to generate a page executable file for each target page. It should be understood that the process of generating a page executable file in the compilation phase of this embodiment can refer to Figure 3-Figure 6 The corresponding embodiments will not be described in detail here.

[0104] During the page rendering process, the view engine 92 starts after receiving the target page startup instruction and executes the corresponding page executable file to quickly render the target page and avoid a white screen situation.

[0105] At the same time, the logic engine 91 of the applet is started, and the business code corresponding to the page is injected, such as js (JavaScript) code, etc., to create a page instance and execute the page life cycle. Then, the logic engine 91 notifies the view engine 92 that the page jump can be executed. After receiving the message that the page jump can be performed, the view engine 92 injects the page code and configuration files such as page-related styles, and notifies the logic engine 91 to register and organize the data of each component, and then waits for the logic engine 91 to send the initial data of the page. The logic engine 91 integrates the information such as the attributes of each component, obtains the initial data of the page, and sends the integrated initial data of the page to the view engine 92.

[0106] After receiving the initial data of the page, the view engine 92 constructs a virtual node tree according to the initial data of the page and the virtual tree constructor, and determines the built-in components corresponding to the target page by traversing the virtual tree nodes, creates a built-in component tree, and establishes the hierarchical relationship between the built-in components. Furthermore, in the process of determining the current real component tree, the view engine 92 reuses the initial real nodes in the initial real node tree through id mapping to achieve re-rendering of the target page, which avoids repeated creation of real nodes, reduces overhead, and further improves the performance of the applet. It should be understood that the detailed rendering process of the target page of this embodiment can be referred to. Figure 7-Figure 8 The corresponding embodiments will not be described in detail here.

[0107] This embodiment can generate a page executable file in advance during the program compilation phase, so that when the target page startup instruction is received, the page executable file corresponding to the target page is immediately executed to achieve fast rendering of the target page to avoid the situation of a white screen. At the same time, this embodiment executes the page life cycle through the logic engine to re-render the page, realize events such as page interaction, and reuse the real nodes in the initial real node tree when re-determining the current real node tree to reduce the overhead of creating real nodes, further improving program performance.

[0108] Fig.10 Schematic diagram of a page rendering device according to an embodiment of the present invention. Fig.10 As shown, the page rendering device 10 of this embodiment includes a pre-rendering unit 101 , an execution unit 102 and a re-rendering unit 103 .

[0109] The pre-rendering unit 101 is configured to execute a pre-stored page executable file of the target page in response to a target page startup instruction, and the page executable file is determined according to the page initial data of the target page during the compilation stage. The execution unit 102 is configured to create a page instance of the target page and execute the life cycle of the target page. The re-rendering unit 103 is configured to re-render the target page according to the page initial data of the target page.

[0110] In an optional implementation, the page rendering device 10 further includes a generation unit configured to generate page executable files of one or more target pages corresponding to the program during the compiling phase.

[0111] In an optional implementation, the generation unit includes a data integration subunit, a tree generation subunit, and a file generation subunit. The data integration subunit is configured to integrate the page initial data of each target page in the compilation stage. The tree generation subunit is configured to generate the initial real node tree of each target page according to the page initial data of each target page. The file generation subunit is configured to write the initial real node tree of each target page into the view container and generate a page executable file corresponding to each target page.

[0112] In an optional implementation, the re-rendering unit 103 includes a first tree construction subunit, a first traversal subunit, a tree determination subunit, and an execution subunit.

[0113] The tree construction subunit is configured to construct a virtual node tree according to the page initial data of the target page. The traversal subunit is configured to traverse the virtual node tree to determine the built-in components of the target page. The tree determination subunit is configured to determine the current real node tree based on the built-in components in the target page. The execution subunit is configured to execute the current real node tree to re-render the target page.

[0114] In an optional implementation, the tree determination subunit is further configured to reuse the nodes in the initial real node tree to determine the current real node tree in response to the identifier of the real node to be determined in the current real node tree being consistent with the node identifier in the initial real node tree.

[0115] In an optional implementation, the tree generation subunit includes a tree construction module, a traversal module, a node creation module and a tree generation module.

[0116] The tree construction module is configured to construct a virtual node tree of each target page according to the page initial data and the virtual tree construction function of each target page. The traversal module is configured to traverse the virtual node tree of each target page and determine the built-in components in each target page. The node creation module is configured to create real nodes according to the real node template of each built-in component. The tree generation module is configured to splice the corresponding real nodes according to the hierarchical relationship of the built-in components in each target page to obtain the initial real node tree of each target page.

[0117] In an optional implementation, the node identifiers in the initial real node tree are determined by the order in which the real nodes are created.

[0118] In response to the target page startup instruction, this embodiment executes the pre-stored page executable file of the target page, creates a page instance of the target page, executes the life cycle of the target page, and re-renders the target page according to the page initial data of the target page. Among them, the page executable file is determined according to the page initial data of the target page during the compilation stage, and the page initial data at least includes the component attribute information in the target page. This embodiment can immediately render and display each real node through the pre-stored page executable file when the page starts, and then execute the life cycle of each component, thereby avoiding the white screen caused by too long page loading time.

[0119] Fig.11 Schematic diagram of an electronic device according to an embodiment of the present invention. Fig.11 As shown, the electronic device 11 is a general data processing device, which includes a general computer hardware structure, which at least includes a processor 111 and a memory 112. The processor 111 and the memory 112 are connected via a bus 113. The memory 112 is suitable for storing instructions or programs executable by the processor 111. The processor 111 can be an independent microprocessor or a collection of one or more microprocessors. Thus, the processor 111 executes the instructions stored in the memory 112, thereby executing the method flow of the embodiment of the present invention as described above to realize the processing of data and the control of other devices. The bus 113 connects the above-mentioned multiple components together, and at the same time connects the above-mentioned components to the display controller 114 and the display device and the input / output (I / O) device 115. The input / output (I / O) device 115 can be a mouse, a keyboard, a modem, a network interface, a touch input device, a somatosensory input device, a printer, and other devices known in the art. Typically, the input / output device 115 is connected to the system via an input / output (I / O) controller 116.

[0120] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, devices (equipment) or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment or an embodiment combining software and hardware. Moreover, the present application may adopt a computer program product implemented on one or more computer-readable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0121] The present application is described with reference to flowcharts of methods, apparatuses (devices) and computer program products according to embodiments of the present application. It should be understood that each process in the flowchart can be implemented by computer program instructions.

[0122] These computer program instructions may be stored in a computer-readable memory that can direct a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture including an instruction device that implements the process Figure 1 A function specified in a process or multiple processes.

[0123] These computer program instructions may also be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device produce instructions for implementing the process Figure 1 A device that specifies functions in a process or multiple processes.

[0124] Another embodiment of the present invention relates to a non-volatile storage medium for storing a computer-readable program, wherein the computer-readable program is used for a computer to execute part or all of the above method embodiments.

[0125] That is, those skilled in the art can understand that all or part of the steps in the above-mentioned embodiment method can be completed by specifying relevant hardware through a program, and the program is stored in a storage medium, including several instructions for a device (which can be a single-chip microcomputer, chip, etc.) or a processor (processor) to execute all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk and other media that can store program codes.

[0126] The above description is only a preferred embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the present application may have various modifications and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included in the protection scope of the present application.

Claims

1. A page rendering method, characterized in that: The method comprises: In response to a target page startup instruction, executing a pre-stored page executable file of the target page, the page executable file being determined according to the page initial data of the target page during a compiling phase; Creating a page instance of the target page and executing the life cycle of the target page; The target page is re-rendered according to the initial page data of the target page, where the initial page data at least includes component attribute information in the target page.

2. The method according to claim 1, characterized in that The method further comprises: During the compilation phase, a page executable file is generated for one or more target pages corresponding to the program.

3. The method according to claim 2, characterized in that The page executable file of generating one or more target pages corresponding to the program in the compiling stage includes: Integrate the initial page data of each target page in the compilation stage; Generate an initial real node tree for each target page according to the initial page data of each target page; The initial real node tree of each target page is written into the view container, and a page executable file corresponding to each target page is generated.

4. The method according to claim 3, characterized in that The re-rendering of the target page according to the initial page data of the target page includes: Constructing a virtual node tree according to the initial page data of the target page; Traversing the virtual node tree to determine the built-in components of the target page; Determine the current real node tree based on the built-in components in the target page; The current real node tree is executed to re-render the target page.

5. The method according to claim 4, characterized in that Determining the current real node tree based on the built-in components in the target page includes: In response to the identifier of the real node to be determined in the current real node tree being consistent with the identifier of the corresponding node in the initial real node tree, the nodes in the initial real node tree are reused to determine the current real node tree.

6. The method according to claim 3, characterized in that The step of generating the initial real node tree of each target page according to the initial page data of each target page comprises: Constructing a virtual node tree of each target page according to the initial page data of each target page and a virtual tree construction function; Traversing the virtual node tree of each target page to determine the built-in components in each target page; Creating a real node according to the real node template of each of the built-in components; The corresponding real nodes are spliced ​​according to the hierarchical relationship of the built-in components in each of the target pages to obtain an initial real node tree of each of the target pages.

7. The method according to claim 6, characterized in that The node identifiers in the initial real node tree are determined by the order in which the real nodes are created.

8. A page rendering device, characterized in that: The device comprises: A pre-rendering unit is configured to execute a pre-stored page executable file of the target page in response to a target page startup instruction, wherein the page executable file is determined according to the page initial data of the target page during the compilation stage; An execution unit, configured to create a page instance of the target page and execute the life cycle of the target page; The re-rendering unit is configured to re-render the target page according to the initial page data of the target page.

9. An electronic device, comprising a memory and a processor, characterized in that: The memory is used to store one or more computer program instructions, wherein the one or more computer program instructions are executed by the processor to implement the method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

11. A computer program product, characterized in that When the computer program product is run on a computer, the computer is caused to execute the method according to any one of claims 1 to 7.

Images