CN113641358A

CN113641358A - Page generation and page display method and device

Info

Publication number: CN113641358A
Application number: CN202110797111.XA
Authority: CN
Inventors: 易成浩
Original assignee: Beijing Sankuai Online Technology Co Ltd
Current assignee: Beijing Sankuai Online Technology Co Ltd
Priority date: 2021-07-14
Filing date: 2021-07-14
Publication date: 2021-11-12

Abstract

The specification discloses a page generation method, a page display method, a page generation device, a page display device and a page display device. The visualized components are selected from the first page, the placeholder elements with similar outlines to the visualized components are determined, the second page built by the placeholder elements is generated and displayed to the user before the first page is loaded, the user can visually perceive the loading process of the first page, and therefore the user's patience is improved when waiting for the first page to be loaded.

Description

Page generation and page display method and device

Technical Field

The present disclosure relates to the field of computer technologies, and in particular, to a method and an apparatus for generating and displaying a page.

Background

At present, when a terminal device accesses a page, a request needs to be sent to a server, then the server returns a corresponding page file, and then the terminal device analyzes the page file to obtain the loaded page.

However, research and practice show that in the process of waiting for page loading, the interest of a user in a page to be accessed is reduced, and the experience of page access is also deteriorated.

In the prior art, the progress of page loading can be shown to the user by showing a progress bar as shown in fig. 1 to the user when the page is loaded, but according to the progress bar, the user can only perceive the approximate time required for waiting for page loading, and the user does not always provide more patience for the page being loaded.

Disclosure of Invention

The present specification provides a page generation method and a page display method and apparatus, so as to partially solve the above problems in the prior art.

The technical scheme adopted by the specification is as follows:

the present specification provides a page generation method, including:

determining a first page and acquiring a page structure tree of the first page;

generating a rendering tree of the first page according to the page structure tree; traversing the page structure tree to obtain the components contained in the first page;

for each component contained in the first page, judging whether the component is a designated component according to the mapping of the component on the rendering tree;

and generating a corresponding second page for the first page according to the rendering data of each specified component, wherein the second page is used for replacing the first page to be displayed to a user before the loading of the first page is completed.

Optionally, the first page is a page constructed by Flutter;

traversing the page structure tree to obtain the components contained in the first page, specifically including:

and traversing the page structure tree, and determining the components defined by the nodes in the component configuration tree according to the corresponding relation between the nodes contained in the page structure tree and the nodes contained in the component configuration tree of the first page.

Optionally, determining whether the component is a designated component according to the mapping of the component on the rendering tree specifically includes:

and when the rendering tree contains a node corresponding to the component, and/or when the component rendered according to the rendering tree is located in a designated area, taking the component as the designated component, wherein the designated area is an area with a designated offset distance between a boundary and a boundary of the first page.

determining a third page, and taking a component contained in the determined third page as a comparison component;

and judging whether the component is a comparison component or not aiming at each component corresponding to the node contained in the rendering tree, and if not, taking the component as a specified component.

Optionally, determining the third page specifically includes:

determining jump links contained in each page, and taking each page containing the jump links jumped to the first page as a third page;

generating a corresponding second page for the first page, specifically including:

and for each third page, determining rendering data of each specified component determined according to the comparison component contained in the third page, and generating a second page corresponding to the third page for the first page according to the determined rendering data.

Optionally, generating a corresponding second page for the first page according to the rendering data of each specified component, specifically including:

for each determined specified component, constructing a placeholder element corresponding to the specified component by rendering data of the specified component, wherein the rendering data at least comprises the size and the position of the specified component in the first page;

a second page is generated that is comprised of the determined placeholder elements.

Optionally, constructing the placeholder element corresponding to the specified component by using the rendering data of the specified component specifically includes:

determining rendering data specifying a target contained in the component;

and constructing the position occupying element corresponding to the specified component by using the rendering data of the target contained in the specified component.

The present specification provides a page display method, when monitoring an access request for a first page input by a user, comprising:

sending the access request input by the user to a target platform; determining a second page corresponding to the first page, wherein the second page is generated according to any page generation method;

acquiring a page file of a second page, and analyzing the page file of the second page to display the second page to a user;

and responding to the received page file of the first page, analyzing the page file of the first page, and replacing the second page with the first page to show to a user, wherein the page file of the first page is returned by the target platform according to the access request.

This specification provides a page generating apparatus, including:

the structure module is used for determining a first page and acquiring a page structure tree of the first page;

the component rendering module is used for generating a rendering tree of the first page according to the page structure tree; traversing the page structure tree to obtain the components contained in the first page;

the component specifying module is used for judging whether each component contained in the first page is a specified component or not according to the mapping of the component on the rendering tree;

and the page generation module is used for generating a corresponding second page for the first page according to the rendering data of each specified component, and the second page is used for replacing the first page and displaying the first page to a user before the loading of the first page is finished.

This specification provides a page display device including:

the request response module is used for sending the access request input by the user to the target platform when the access request input by the user for the first page is monitored; determining a second page corresponding to the first page, wherein the second page is generated according to any page generation method;

the page display module is used for acquiring a page file of a second page and analyzing the page file of the second page so as to display the second page to a user;

and the page replacing module is used for responding to the received page file of the first page, analyzing the page file of the first page, and replacing the second page with the first page to display to a user, wherein the page file of the first page is returned by the target platform according to the access request.

The present specification provides a computer-readable storage medium storing a computer program which, when executed by a processor, implements the above-described page generating or page displaying method.

The present specification provides an electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements the above-mentioned page generating or page displaying method when executing the program.

The technical scheme adopted by the specification can achieve the following beneficial effects:

in the page generation or page display method provided by the specification, the visualized components are selected from the first page, the placeholder elements with similar outlines to the visualized components are determined, the second page constructed by the placeholder elements is generated and displayed to a user before the first page is loaded, the user can visually perceive the loading process of the first page, and the user's patience is improved when waiting for the first page to be loaded.

Drawings

The accompanying drawings, which are included to provide a further understanding of the specification and are incorporated in and constitute a part of this specification, illustrate embodiments of the specification and together with the description serve to explain the specification and not to limit the specification in a non-limiting sense. In the drawings:

fig. 1 is a schematic diagram of a progress bar display method in this specification;

fig. 2 is a schematic flowchart of a page display method provided in this specification;

FIG. 3A is a schematic view of a first page provided herein;

FIG. 3B is a schematic view of a second page provided herein;

fig. 4 is a schematic flowchart of a page generation method provided in this specification;

FIG. 5A is a schematic diagram of a component configuration tree provided herein;

fig. 5B is a schematic structural diagram of a page structure tree provided in this specification;

fig. 5C is a schematic structural diagram of a render tree provided in this specification;

FIG. 6A is a schematic view of an assembly provided herein;

FIG. 6B is a schematic diagram of a placeholder element as taught in this specification;

FIG. 7 is a schematic diagram of a page generation apparatus provided in the present specification;

FIG. 8 is a schematic diagram of a page display apparatus provided herein;

fig. 9 is a schematic structural diagram of an electronic device provided in this specification.

Detailed Description

Therefore, a skeleton screen can be generated for the page requested to be accessed in advance, the skeleton screen comprises placeholder elements with similar outlines to components in the page requested to be accessed, at the moment, when a user inputs an access request for the page, on one hand, request information can be sent to a server of the page according to the access request, and a page file returned by the server according to the request is waited, on the other hand, the skeleton screen file of the page requested to be accessed by the user can be analyzed, the analyzed skeleton screen is obtained, the skeleton screen is displayed for the user, and the page file is analyzed and the skeleton screen is replaced by the analyzed first page until the user receives the page file returned by the server.

The page file of the skeleton screen is usually small and fast in return speed, and even the page file of the skeleton screen can be stored in the local terminal, so that the loading speed of the skeleton screen is fast, when a user requests to access a page, the skeleton screen can be loaded fast, the skeleton screen is replaced when the page requesting to access is loaded, the page is loaded when the user inputs an access request, and then information in the page is progressively loaded, so that the patience of the user in the waiting process is increased.

In the embodiment of the specification, a page generation and page display method is provided, in which a visualized component is selected from a first page, placeholder elements with similar outlines to the visualized component are determined, a second page constructed by the placeholder elements is generated and displayed to a user before the first page is loaded, so that the user can visually perceive a loading process of the first page, and thus the patience of the user when waiting for the first page to be loaded is improved.

In order to make the objects, technical solutions and advantages of the present disclosure more clear, the technical solutions of the present disclosure will be clearly and completely described below with reference to the specific embodiments of the present disclosure and the accompanying drawings. It is to be understood that the embodiments described are only a few embodiments of the present disclosure, and not all embodiments. All other embodiments obtained by a person of ordinary skill in the art based on the embodiments in the present specification without any creative effort belong to the protection scope of the present specification.

The technical solutions provided by the embodiments of the present description are described in detail below with reference to the accompanying drawings.

Fig. 2 is a flowchart illustrating a page display method provided in this specification, in an embodiment of this specification, when an access request for a first page input by a user is monitored, the following steps S200 to S204 are performed:

s200: sending the access request input by the user to a target platform; and determining a second page corresponding to the first page.

In the embodiment of the present specification, a user accesses a page using a terminal device (hereinafter, referred to as a terminal). The first page accessed by the user is a page provided by the target platform, and the first page may be a page in an Application (APP) or a page in a browser. The terminal in this specification may include, but is not limited to, a computer, a mobile phone, a tablet computer, a notebook computer, and the like, and the terminal having a page access function may be referred to as a terminal in this specification.

The target platform providing the first page may be a server or a terminal, and in this embodiment of the present specification, the target platform is taken as an example for description.

The terminal can monitor input performed by a user through the terminal, and when it is monitored that the user inputs an access request for a first page, the terminal can send the received access request to a target platform and determine a second page corresponding to the first page, where the second page is a skeleton screen generated for the first page in advance, and the second page is generated according to any page generation method in the embodiments of the present specification, and the present specification does not describe how to generate the skeleton screen of the first page.

S202: and acquiring a page file of a second page, and analyzing the page file of the second page so as to display the second page to a user.

In this embodiment of the present specification, a duration of loading the second page by the terminal is shorter than a duration of loading the first page.

Specifically, the second page may be a page provided by a server, and the pagefile of the second page is stored in the server, where the data of the pagefile of the second page may be less than the data of the pagefile of the first page. The server providing the second page may be a target platform or another server, and for brevity, the server providing the second page is taken as the target platform for description.

The terminal can send an access request for a second page to the target platform according to the received access request for the first page, the target platform can return a page file of the second page to the terminal according to the received access request for the second page, and the terminal responds to the received page file of the second page and can display the second page to a user according to the page file of the second page. Of course, the second page may also be a page provided by another terminal capable of communicating with the terminal, that is, the page file of the second page is stored in the other terminal, and at this time, the second page may also be presented to the user in any of the above manners, which is not limited in this specification.

Of course, after the second page is generated, the pagefile of the second page may be stored locally in the terminal, so that the terminal may obtain the pagefile of the second page stored locally in the terminal according to the determined second page, and display the second page to the user by analyzing the pagefile.

In this embodiment of the present specification, a terminal may access a corresponding page by parsing a page file, where the page file may be a file in any format, for example, a file in a JavaScript Object Notation (JSON) format, a file in an Extensible Markup Language (XML) format, a file in a HyperText Markup Language (HTML) format, and the like.

S204: and responding to the received page file of the first page, analyzing the page file of the first page, and replacing the second page with the first page to show to a user, wherein the page file of the first page is returned by the target platform according to the access request.

And the target platform returns the page file of the first page to the terminal according to the received access request of the first page, and the terminal analyzes the page file of the first page and displays the page file of the first page to the user by replacing the second page with the first page.

Fig. 3A is a schematic diagram of a first page illustrated in an embodiment of the present disclosure, fig. 3A at least includes a component carrying image information shown in a shaded portion in the drawing and a component carrying text information shown in a plurality of xs in the drawing, and fig. 3B is a schematic diagram of a second page corresponding to the first page illustrated in fig. 3A and illustrated in an embodiment of the present disclosure. Therefore, based on the page display method shown in fig. 2, the second page can be displayed to the user before the first page is loaded, and the first page replaces the second page after the first page is loaded, so that the user can visually perceive the loading process of the first page through the transition of the second page, and the patience of the user when waiting for the loading of the first page is improved.

Corresponding to the page display method provided in fig. 2, an embodiment of the present specification provides a page generation method as shown in fig. 4, which is used for generating a corresponding second page for a first page in advance, where the page generation method includes the following steps:

s400: determining a first page, and acquiring a page structure tree of the first page.

S402: generating a rendering tree of the first page according to the page structure tree; traversing the page structure tree to obtain the components contained in the first page;

in this embodiment of the present specification, an execution subject of the page generation method may be a terminal or a server, when the execution subject of the page generation method is a terminal, the execution subject may be a terminal that presents the first page to a user, or may be any other terminal, and when the execution subject of the page generation method is a server, the execution subject may be a target platform or any other server, which is not limited in this specification.

After the page file of the first page is obtained, data in the page file needs to be presented in a page form. The loading process of the first page can be divided into the steps of analyzing the page file of the first page, obtaining the visual components in the first page, and constructing a rendering tree to draw the components, so that the first page is obtained and displayed to the user by the terminal.

Generally, typical components are buttons (buttons), text fields (text fields), Progress bars (Progress bars), keyboards (keys), images, text, and the like. The attributes and contents of the components in the page are defined by tags or nodes, for example, in an XML-formatted page file, the components contained in the page can be specified by nodes of < Textview >, < ImgView >, < butterview >, and the like, and the components and the nodes have a one-to-one correspondence relationship. Therefore, it may be considered that the page structure tree of the first page is obtained by parsing the page file of the first page, where the page structure tree includes a plurality of nodes, each node corresponds to one component included in the first page, and after the page structure tree is parsed, a rendering tree may be generated according to the page structure tree.

In an embodiment of this specification, the first page may be a page built by using any existing page building method, where the building method of the first page corresponds to a page file of the generated first page, and the page structure tree in the embodiment of this specification is a page operation interface adapted to the page file, and may be, for example, a Document Object Model (DOM), and of course, when the first page is a page built by Flutter, the page structure tree may also be an Element (Element) tree.

Generally speaking, nodes of the page structure tree of the first page include nodes corresponding to visualized components (hereinafter referred to as visualized component nodes) and nodes containing information other than the visualized components (hereinafter referred to as non-visualized component nodes), for example, nodes for defining attributes of the components, and during the rendering process, only the visualized components need to be rendered, so that there is a one-to-one correspondence relationship between the nodes contained in the rendering tree constructed according to the page structure tree and the visualized component nodes contained in the page structure tree.

The components contained in the first page may be obtained in different ways according to the type of the page structure tree. When the page structure tree is a DOM tree, each node of the DOM tree can be traversed, and the components specified by each component node can be obtained. And when the page structure tree is an Element tree, traversing Element nodes on the Element tree, and taking components defined by the nodes in the component configuration tree of the first page as components contained in the first page according to the corresponding relationship between each Element node and the nodes contained in the component configuration tree of the first page, wherein at this time, the component configuration tree is a component (Widget) tree, and the nodes in the component configuration tree are Widget nodes. In the following description of the embodiments of the present specification, the first page is a page constructed by Flutter, and the page structure tree is an Element (Element) tree.

Fig. 5A to 5C respectively show structural schematic diagrams of a component configuration tree, a page structure tree, and a rendering tree in the embodiment of the present specification, where the component configuration tree includes nodes a1 to a4, the page structure tree includes nodes B1 to B4, and the rendering tree includes nodes C1, C3, and C4. In the embodiment of the present specification, each node in the component configuration tree has a one-to-one correspondence relationship with each node in the page structure tree, where a1 and B1, a2 and B2, A3 and B3, a4 and B4, and a5 and B5 have a correspondence relationship therebetween, respectively, and it can be seen that the component 2 is not a visual component rendered on the first page, and therefore, the node corresponding to the component 2 is not included in the rendering tree.

The nodes in the component configuration tree include configuration information for defining a component, for example, a1 includes configuration information for defining a component 1, and the nodes in the page structure tree include context information of the component, that is, environment information of the component, on the basis of the configuration information of the component, and it can be considered that the nodes in the component configuration tree include configuration information of the component itself, the nodes in the page structure tree include instantiation information of the component, and the rendering tree includes actual rendering data of the component of the visualization to be rendered.

Specifically, in the embodiment of the present specification, for each node in the component configuration tree, the node may include data of a parent node of the node, a component defined by the parent node of the node is used as a container of the component defined by the node, and the node includes a position offset of the node defined by the node relative to the container in which the node is located. The node in the page structure tree corresponding to the node may include a size of the component defined by the node relative to the container in which the component is located. When the component defined by the node corresponds to the node in the rendering tree, the rendering tree includes the screen size of the screen for displaying the first page, and the actual size of each component can be determined according to the relative size between each component and the container and the relative size between the first page and the screen, so that the rendering tree includes the actual size of each component in the first page.

S404: and judging whether each component contained in the first page is a designated component or not according to the mapping of the component on the rendering tree.

Therefore, when the page generation method provided by the present specification generates the second page to be displayed to the user as the transition page before the loading of the first page is completed, the constructed second page may include a plurality of placeholder elements corresponding to the visualized components, where each placeholder element and the corresponding visualized component may have a similar outline.

Therefore, in this embodiment of the present specification, it may be determined, for each component, whether the component is rendered on the terminal as a visualized component when the first page is loaded according to the mapping of the component on the rendering tree, and the determined visualized component is used as a specified component.

In an embodiment of this specification, the Render tree may be a Render (Render) tree, where the Render tree includes a plurality of nodes, where each node in the Render corresponds to a visualized component, that is, the Render does not include a node corresponding to a non-visualized component, and therefore, for each component, whether the component is a specified component may be determined according to whether the component corresponds to a Render node on the Render, and a component corresponding to a Render node on the Render is used as the specified component.

In addition, since the Widget node of the component itself includes configuration information of the component, for example, text content or image content carried by the component, it can also be determined whether the component is a designated component according to the Widget node of the component itself, and when the component carries content that needs to be rendered, the component can be taken as the designated component.

When the component cannot be regarded as a specific component according to any of the above manners, the component is regarded as a non-specific component.

Further, since the user may generally be considered to pay more attention to the main area of the page, in order to reduce the amount of data of the generated pagefile of the second page so that the second page can be loaded faster, only the component located in the designated area in the first page may be used as the designated component.

Specifically, each visualized component in the first page corresponds to a node included in a rendering tree, and the node on the rendering tree is used for rendering the visualized component corresponding to the node. The rendering tree comprises the size of a terminal screen for displaying the first page and rendering data of each visual component, wherein the rendering data at least comprises the size of the visual component and the position of the visual component in the first page, so that the position of each component in the first page can be determined according to the mapping of each component on the rendering tree, and whether the component is located in a designated area in the first page is judged.

The designated area may be an area in the center of the first page, and of course, the area of the rendered first page may also be detected by using a method such as a target detection algorithm, and the area where the detected target is located is used as the designated area. The component may be considered as a designated component only when all of the area occupied by the component is located in the designated area, or may be considered as a designated component when at least a part of the area occupied by the component is located in the designated area, which is not limited in this specification.

S406: and generating a corresponding second page for the first page according to the rendering data of each specified component, wherein the second page is used for replacing the first page to be displayed to a user before the loading of the first page is completed.

After each designated component is determined in any of the manners, a corresponding second page can be generated for the first page according to rendering data of the designated component, so that the terminal displays the second page as a transition to a user before the first page is loaded.

Specifically, for each designated component, according to the rendering data of the designated component, a place occupying element having a similar outline and a similar position to the designated component is constructed as a place occupying element corresponding to the designated component, and a second page formed by the place occupying elements corresponding to the designated components is generated.

In an embodiment of this specification, a gray color block as shown in fig. 3B may be used as a placeholder element, and of course, the embodiment of this specification does not limit the way that a placeholder such as placeholder text, placeholder image, or the like is used as a placeholder element. It can be seen that, in the first page shown in fig. 3A, the first page includes a designated component located above and in the middle and a designated component located below the page and in the middle, a designated component located below the page and in the middle, and two placeholder elements determined according to rendering data of the two placeholder elements and shown in fig. 3B have similar outlines and similar positions with the corresponding designated components, respectively.

Further, in this embodiment of the specification, the determined designated components of each place-occupying element and the corresponding place-occupying element have the same size, and the position of the place-occupying element in the second page is the same as the position of the designated component corresponding to the place-occupying element in the first page, and the shape of the place-occupying element may also be the same as the shape of the designated component corresponding to the place-occupying element, for example, when the designated component corresponding to the place-occupying element is a rounded rectangle shape with designated rounded corners, the shape of the place-occupying element may also be a rounded rectangle with designated rounded corners.

In an embodiment of this specification, information carried in a component may be used as a target of the component, and a data type of the target is not limited in this specification embodiment, and may be, for example, an image, a text box, a text line, and the like.

Based on the area occupied by the target in the designated component bearing image information as shown in fig. 3A, the area occupied by the target in the designated component is the same as the area occupied by the designated component itself, and for the designated component bearing text information, the area occupied by the target in the designated component is only a part of the area occupied by the designated component itself, and since the user usually has a higher attention degree on the target bearing some kind of information, in an embodiment of the present specification, the corresponding placeholder element can be determined for the designated component according to the rendering data of the target in the designated component.

Specifically, the placeholder element may be determined according to the shape of the object in the designated component, and the position and size of the object in the designated component relative to the designated component itself, in an embodiment of the present specification, the placeholder element having the same shape, position and size as the object included in the designated component may be directly determined, for example, in fig. 3A, the distance between the top end of the text in the designated component bearing the text information and the top end of the designated component including the text may be determined, the distance between the left end of the text in the designated component bearing the text information and the left end of the designated component including the text may be determined, and the placeholder element as shown in fig. 3B may be constructed according to the height and width of the text information and the height of each line.

Fig. 6A shows a schematic diagram of an image-targeted component, in which the respective image targeted is shaded, and fig. 6B shows a placeholder element constructed according to fig. 6A, wherein the placeholder element is composed of several gray color blocks. From the rendering data for each target in each of the components shown in FIG. 6A, e.g., the relative size and relative position between each target and the component, the placeholder elements shown in FIG. 6B may be determined.

When the designated component carries text information, similarly, the placeholder element may be constructed according to rendering information of each targeted text box and text line, and after the area occupied by the text information in the designated component is determined in the above manner, that is, after the height and width of the component are determined, the number of lines of the rendered text information may be determined according to a preset line height of each line. Specifically, the line number of the rendered text information may be obtained directly by dividing the height of the area occupied by the text information in the component by the preset line height of each line, and certainly, the space height between every two text lines may also be preset, and at this time, the line height of each text line and the space height between each text line are the height of the area occupied by the text information in the component. It can be seen that the layout of the text information can be determined in various ways, which is not described herein again.

After the place-occupying elements corresponding to the designated components are determined in any one of the above manners, a second page formed by the place-occupying elements can be generated, the page file for generating the second page can be stored in the server or locally in the terminal, and is used for analyzing the page file of the second page before the loading of the first page is completed, and displaying the second page to replace the first page and showing the first page to the user.

Based on the method as described in the above fig. 4, the second page built by the placeholder elements is generated by selecting the visualized components from the first page and determining the placeholder elements with similar outlines to the visualized components, and is displayed to the user before the loading of the first page is completed, so that the user can visually perceive the loading process of the first page, thereby improving the patience of the user when waiting for the loading of the first page.

As will be appreciated, when the same components as in the first page are included in a third page other than the first page, the components that are also in the third page may not be considered in determining the placeholder element. For example, the third page is a custom page, the component identical to the component in the third page is a user-defined component, and the custom component is defined at the corresponding position after the first page is loaded, at this time, it is not necessary to determine the placeholder element according to the component identical to the third page. For another example, in response to a user's access request for the first page, the terminal generally does not reload all components in the first page, and when a certain component included in an upper page accessed before jumping to the first page is the same as a component included in the first page, the component is generally not reloaded but is retained on the page. As shown in fig. 3A, the search box at the top of the first page and the interactive control at the bottom of the first page may also exist in the upper page at the same time, and when the third page is the upper page, components that are not reloaded when accessing the first page may not be considered when determining the placeholder element, but only components that need to be reloaded when accessing the first page are taken as the designated components.

Specifically, when determining the placeholder element without considering the components located in the third page at the same time, it may be determined, for each component, according to any of the above manners, whether the component is a matching component by mapping the component on the rendering tree; determining a third page, and taking a component contained in the determined third page as a comparison component; if the component is a matching component, judging whether the component is a comparison component; and if the component is a non-comparison component, taking the component as a designated component, and generating a second page consisting of the placeholder elements according to the determined designated components in any one of the manners.

In an embodiment of this specification, when the third page is a page including a jump link to jump to the first page, since the third page can jump to the first page through a plurality of jump paths, a plurality of third pages can be determined. At this time, for each third page, a second page formed by the placeholder elements may be generated in any manner, and when the generated second page is taken as a second page that corresponds to the first page when the third page jumps to the first page.

Based on the same idea, the present specification further provides a corresponding apparatus, as shown in fig. 7 and fig. 8, for the page generating and page displaying method provided in one or more embodiments of the present specification.

Fig. 7 is a schematic diagram of a page generation apparatus provided in this specification, including:

a structure module 700, configured to determine a first page and obtain a page structure tree of the first page;

a component rendering module 702, configured to generate a rendering tree of the first page according to the page structure tree; traversing the page structure tree to obtain the components contained in the first page;

a component specifying module 704, configured to determine, for each component included in the first page, whether the component is a specified component according to a mapping of the component on the rendering tree;

the page generating module 706 is configured to generate a corresponding second page for the first page according to the rendering data of each designated component, where the second page is used to replace the first page and display the first page to a user before the first page is loaded.

Optionally, the first page is a page constructed by Flutter; the component rendering module 702 is specifically configured to traverse the page structure tree, and determine a component defined by a node in the component configuration tree according to a correspondence between the node included in the page structure tree and a node included in the component configuration tree of the first page.

Optionally, the component rendering module 702 is specifically configured to, when the rendering tree includes a node corresponding to the component, and/or when the component rendered according to the rendering tree is located in a specified area, take the component as a specified component, where the specified area is an area with a specified offset distance between a boundary and a boundary of the first page.

Optionally, the component specifying module 704 is specifically configured to determine a third page, and use a component included in the determined third page as a comparison component; and judging whether the component is a comparison component or not aiming at each component corresponding to the node contained in the rendering tree, and if not, taking the component as a specified component.

Optionally, the component specifying module 704 is specifically configured to determine a jump link included in each page, and use each page including the jump link that jumps to the first page as a third page; the page generating module 706 is specifically configured to, for each third page, determine rendering data of each specified component determined according to a comparison component included in the third page, and generate a second page corresponding to the third page for the first page according to the determined rendering data.

Optionally, the page generating module 706 is specifically configured to, for each determined specified component, construct a placeholder element corresponding to the specified component with rendering data of the specified component, where the rendering data at least includes a size and a position of the specified component in the first page; a second page is generated that is comprised of the determined placeholder elements.

Optionally, the page generating module 706 is specifically configured to determine rendering data of a target included in the specified component; and constructing the position occupying element corresponding to the specified component by using the rendering data of the target contained in the specified component.

Fig. 8 is a schematic diagram of a page display device provided in this specification, including:

the request response module 800 is configured to send an access request input by a user to a target platform when the access request input by the user for a first page is monitored; determining a second page corresponding to the first page, wherein the second page is generated according to any one of the methods;

the page display module 802 is configured to obtain a page file of a second page, and parse the page file of the second page to display the second page to a user;

the page replacing module 804 is configured to, in response to the received page file of the first page, parse the page file of the first page, and replace the second page with the first page to show to the user, where the page file of the first page is returned by the target platform according to the access request.

The present specification also provides a computer-readable storage medium storing a computer program, which is operable to execute the above-described page generating and page displaying method.

The present specification also provides a schematic structural diagram of the electronic device shown in fig. 9. As shown in fig. 9, at the hardware level, the electronic device includes a processor, an internal bus, a memory, and a non-volatile memory, but may also include hardware required for other services. The processor reads the corresponding computer program from the nonvolatile memory into the memory and then runs the computer program to realize the page generation or page display method.

Of course, besides the software implementation, the present specification does not exclude other implementations, such as logic devices or a combination of software and hardware, and the like, that is, the execution subject of the following processing flow is not limited to each logic unit, and may be hardware or logic devices.

In the 90 s of the 20 th century, improvements in a technology could clearly distinguish between improvements in hardware (e.g., improvements in circuit structures such as diodes, transistors, switches, etc.) and improvements in software (improvements in process flow). However, as technology advances, many of today's process flow improvements have been seen as direct improvements in hardware circuit architecture. Designers almost always obtain the corresponding hardware circuit structure by programming an improved method flow into the hardware circuit. Thus, it cannot be said that an improvement in the process flow cannot be realized by hardware physical modules. For example, a Programmable Logic Device (PLD), such as a Field Programmable Gate Array (FPGA), is an integrated circuit whose Logic functions are determined by programming the Device by a user. A digital system is "integrated" on a PLD by the designer's own programming without requiring the chip manufacturer to design and fabricate application-specific integrated circuit chips. Furthermore, nowadays, instead of manually making an Integrated Circuit chip, such Programming is often implemented by "logic compiler" software, which is similar to a software compiler used in program development and writing, but the original code before compiling is also written by a specific Programming Language, which is called Hardware Description Language (HDL), and HDL is not only one but many, such as abel (advanced Boolean Expression Language), ahdl (alternate Hardware Description Language), traffic, pl (core universal Programming Language), HDCal (jhdware Description Language), lang, Lola, HDL, laspam, hardward Description Language (vhr Description Language), vhal (Hardware Description Language), and vhigh-Language, which are currently used in most common. It will also be apparent to those skilled in the art that hardware circuitry that implements the logical method flows can be readily obtained by merely slightly programming the method flows into an integrated circuit using the hardware description languages described above.

The controller may be implemented in any suitable manner, for example, the controller may take the form of, for example, a microprocessor or processor and a computer-readable medium storing computer-readable program code (e.g., software or firmware) executable by the (micro) processor, logic gates, switches, an Application Specific Integrated Circuit (ASIC), a programmable logic controller, and an embedded microcontroller, examples of which include, but are not limited to, the following microcontrollers: ARC 625D, Atmel AT91SAM, Microchip PIC18F26K20, and Silicone Labs C8051F320, the memory controller may also be implemented as part of the control logic for the memory. Those skilled in the art will also appreciate that, in addition to implementing the controller as pure computer readable program code, the same functionality can be implemented by logically programming method steps such that the controller is in the form of logic gates, switches, application specific integrated circuits, programmable logic controllers, embedded microcontrollers and the like. Such a controller may thus be considered a hardware component, and the means included therein for performing the various functions may also be considered as a structure within the hardware component. Or even means for performing the functions may be regarded as being both a software module for performing the method and a structure within a hardware component.

The systems, devices, modules or units illustrated in the above embodiments may be implemented by a computer chip or an entity, or by a product with certain functions. One typical implementation device is a computer. In particular, the computer may be, for example, a personal computer, a laptop computer, a cellular telephone, a camera phone, a smartphone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or a combination of any of these devices.

For convenience of description, the above devices are described as being divided into various units by function, and are described separately. Of course, the functions of the various elements may be implemented in the same one or more software and/or hardware implementations of the present description.

As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.

The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

In a typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.

The memory may include forms of volatile memory in a computer readable medium, Random Access Memory (RAM) and/or non-volatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of a computer-readable medium.

Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, a computer readable medium does not include a transitory computer readable medium such as a modulated data signal and a carrier wave.

It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

As will be appreciated by one skilled in the art, embodiments of the present description may be provided as a method, system, or computer program product. Accordingly, the description may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the description may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.

This description may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The specification may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.

The embodiments in the present specification are described in a progressive manner, and the same and similar parts among the embodiments are referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, for the system embodiment, since it is substantially similar to the method embodiment, the description is simple, and for the relevant points, reference may be made to the partial description of the method embodiment.

The above description is only an example of the present specification, and is not intended to limit the present specification. Various modifications and alterations to this description will become apparent to those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present specification should be included in the scope of the claims of the present specification.

Claims

1. A page generation method is characterized by comprising the following steps:

determining a first page and acquiring a page structure tree of the first page;

2. The method of claim 1, wherein the first page is a page constructed by Flutter;

3. The method of claim 1, wherein determining whether the component is a designated component according to the mapping of the component on the render tree comprises:

4. The method of claim 1, wherein determining whether the component is a designated component according to the mapping of the component on the render tree comprises:

5. The method of claim 4, wherein determining the third page specifically comprises:

6. The method of claim 1, wherein generating a corresponding second page for the first page according to rendering data of each specified component specifically comprises:

7. The method of claim 6, wherein constructing the placeholder element corresponding to the designated component from the rendering data of the designated component comprises:

determining rendering data specifying a target contained in the component;

8. A page display method, when monitoring an access request for a first page input by a user, comprising:

sending the access request input by the user to a target platform; determining a second page corresponding to the first page, wherein the second page is generated according to the method of any one of claims 1 to 7;

9. A page generating device is characterized in that the device specifically comprises:

10. A page display device is characterized in that the device specifically comprises:

the request response module is used for sending the access request input by the user to the target platform when the access request input by the user for the first page is monitored; determining a second page corresponding to the first page, wherein the second page is generated according to the method of any one of claims 1 to 7;

11. A computer-readable storage medium, characterized in that the storage medium stores a computer program which, when executed by a processor, implements the method of any of the preceding claims 1 to 8.

12. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements the method of any of claims 1 to 8 when executing the program.