Page generation method, device and equipment and readable storage medium

Abstract

The embodiment of the invention provides a page generation method and device, equipment and a readable storage medium, and the method comprises the steps: creating an initial skeleton screen corresponding to a page file based on page information obtained by analyzing the page file; rendering the initial skeleton screen according to preset initial activation data, and generating an initial rendering page corresponding to the page file; in response to a page request initiated by a user, displaying an initial rendering page; and on the basis of the real activation data corresponding to the page request, replacing the initial activation data of the initial rendering page to obtain a target rendering page. According to the method and the device, the initial activation data is further utilized for rendering on the skeleton screen, and the initial activation data only needs to be replaced by real data in a subsequent page request process, so that the problem that the rendering performance of a browser is influenced by frequently creating and deleting mounting points is avoided.

Description

Technical Field

[0001] The embodiments of the present application relate to the technical field of skeleton screen rendering, and in particular to a page generation method, apparatus, device and readable storage medium. Background Art

[0002] In order to improve the user experience, many servers use skeleton screens for display when the page is loading. It usually consists of a simplified version of the page layout, and when the application is loading content, placeholders and boxes are used to display the content that has not yet been loaded, providing visual feedback to users and reducing the perceived loading time.

[0003] However, the existing skeleton screen relies on the skeleton screen mount point, which usually removes the mount point and replaces the entire skeleton screen page after the real data is requested, and then remounts the real page. This frequent creation and deletion of mount points will cause the browser to frequently redraw and rearrange the page. Although it optimizes the user experience, it greatly reduces the browsing rendering performance, causing problems such as device heating or page freezing. Summary of the invention

[0004] The embodiments of the present application provide a page generation method, apparatus, device and readable storage medium, aiming to solve the problem of frequent creation and deletion of mounting points resulting in reduced browsing rendering performance in the existing method of generating pages through a skeleton screen.

[0005] On the one hand, an embodiment of the present application provides a page generation method, including:

[0006] Based on the page information obtained by parsing the page file, creating an initial skeleton screen corresponding to the page file;

[0007] Rendering the initial skeleton screen according to preset initial activation data to generate an initial rendering page corresponding to the page file;

[0008] In response to a page request initiated by a user, displaying the initial rendering page;

[0009] Based on the real activation data corresponding to the page request, the initial activation data of the initial rendering page is replaced to obtain a target rendering page.

[0010] As a feasible embodiment of the present application, the initial skeleton screen is rendered according to the preset initial activation data to generate the initial rendering page corresponding to the page file, including:

[0011] Obtaining a data slice list corresponding to each element node in the initial skeleton screen;

[0012] In response to a write operation in the data slice list, the corresponding element nodes in the initial skeleton screen are processed according to the initial activation data written in the data slice list to generate an initial rendering page corresponding to the page file.

[0013] As a feasible embodiment of the present application, after the step of providing a data slice list corresponding to each element node in the initial skeleton screen, the initial activation data of the initial rendering page is replaced based on the real activation data corresponding to the page request to obtain the target rendering page, including:

[0014] In response to the asynchronous data loading request in the page request, reading real activation data from an application program interface corresponding to the asynchronous data loading request;

[0015] The initial activation data in the data slice list that matches the real activation data is overwritten according to the real activation data to complete the replacement of the initial activation data in the initial rendering page and obtain the target rendering page.

[0016] As a feasible embodiment of the present application, the reading of the real activation data from the application program interface corresponding to the asynchronous data loading request includes:

[0017] Setting the priority of each of the initial activation data based on the element type of the element node corresponding to each of the initial activation data in the data slice list;

[0018] The real activation data corresponding to each of the initial activation data are sequentially read from the application program interface corresponding to the asynchronous data loading request according to the priority of each of the initial activation data.

[0019] As a feasible embodiment of the present application, the step of creating an initial skeleton screen corresponding to the page file based on the page information obtained by parsing the page file includes:

[0020] Get the initial project page of the page file through server rendering;

[0021] The initial project page is processed based on a pre-trained neural network model to obtain element information in the initial project page; the element information at least includes element type information and element position information;

[0022] An element node is created in a preset interface based on the element information to generate an initial skeleton screen corresponding to the page file.

[0023] As a feasible embodiment of the present application, after the step of obtaining the initial project page of the page file by server rendering, the method further includes:

[0024] Extracting data structure information of the initial project page based on a preset asynchronous request of the initial project page;

[0025] Slice the data structure information based on the element information in the initial project page to obtain a data slice list corresponding to the element information;

[0026] The step of rendering the initial skeleton screen according to the preset initial activation data to generate an initial rendering page corresponding to the page file includes:

[0027] The skeleton screen is rendered according to the preset initial activation data and the data slice list to generate an initial rendering page corresponding to the page file.

[0028] As a feasible embodiment of the present application, after the step of rendering the initial skeleton screen according to the preset initial activation data to generate the initial rendering page corresponding to the page file, the method further includes:

[0029] Caching the initial rendered page in a browser cache;

[0030] The step of displaying the initial rendering page in response to a page request initiated by a user includes:

[0031] In response to a page request initiated by a user, the initial rendering page is read from the browser cache and displayed.

[0032] On the other hand, the embodiment of the present application further provides a page generation device, including:

[0033] A parsing module, used for creating an initial skeleton screen corresponding to the page file based on the page information obtained by parsing the page file;

[0034] A rendering module, used for rendering the initial skeleton screen according to preset initial activation data, and generating an initial rendering page corresponding to the page file;

[0035] A display module, used to display the initial rendering page in response to a page request initiated by a user;

[0036] The replacement module is used to replace the initial activation data of the initial rendering page based on the real activation data corresponding to the page request to obtain a target rendering page.

[0037] On the other hand, an embodiment of the present application further provides a computer device, which includes a processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the above-mentioned page generation method.

[0038] On the other hand, an embodiment of the present application further provides a computer-readable storage medium, on which a computer program is stored, and the computer program is executed by a processor to implement the above-mentioned page generation method.

[0039] The page generation method provided by the present application, after creating the initial skeleton screen by parsing the page file to obtain the page information, will further use the preset initial activation data to render the skeleton screen to obtain the initial rendering page, and after responding to the page request initiated by the user, display the initial rendering page, and then replace the initial activation data on the initial rendering page after using the real activation data. Since the initial rendering page is already the prototype of the real page, only part of the data needs to be replaced in the actual page request process, thereby avoiding the problem of frequent creation and deletion of mounting points in the existing process of generating pages through the skeleton screen, which affects the browser rendering performance, improves the browser rendering performance, and reduces the risk of device heating or page jamming. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative work.

[0041] Figure 1 A schematic diagram of the steps of a page generation method provided in an embodiment of the present application;

[0042] Figure 2 A schematic diagram of a process flow for implementing initial page rendering based on a data slice list provided in an embodiment of the present application;

[0043] Figure 3 A schematic diagram of a process flow for implementing real page rendering based on a data slice list provided in an embodiment of the present application;

[0044] Figure 4 A schematic diagram of a flow chart of the steps of sequentially reading real activation data provided by an embodiment of the present application;

[0045] Figure 5 A schematic diagram of a process flow for creating an initial skeleton screen provided in an embodiment of the present application;

[0046] Figure 6 A schematic diagram of a process flow for creating a data slice list provided in an embodiment of the present application;

[0047] Figure 7A schematic diagram of a process flow for implementing a rendered page display based on a cache technology provided in an embodiment of the present application;

[0048] Figure 8 A schematic diagram of the structure of a page generation device provided in an embodiment of the present application;

[0049] Fig. 9 A schematic diagram of the structure of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0050] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative work are within the scope of the present invention.

[0051] In the embodiments of the present application, the word "exemplary" is used to mean "used as an example, illustration or description". Any embodiment described as "exemplary" in the embodiments of the present application is not necessarily to be construed as being more preferred or advantageous than other embodiments. The following description is given to enable any technician in the field to implement and use the present invention. In the following description, details are listed for the purpose of explanation. It should be understood that a person of ordinary skill in the art can recognize that the present invention can be implemented without using these specific details. In other examples, well-known structures and processes will not be elaborated in detail to avoid unnecessary details that make the description of the present invention obscure. Therefore, the present invention is not intended to be limited to the embodiments shown, but is consistent with the widest range of principles and features disclosed in the embodiments of the present application.

[0052] To facilitate understanding of the page generation method provided in the embodiment of the present application, the application scenario of the method is first described. The page generation method provided in the present application is mainly used in the implementation scenario where a user requests data from a server so that the server displays the data page to the user through a terminal device. Specifically, in the above process, in order to improve the user experience, many servers will use a skeleton screen for display when the page is loaded. The skeleton screen is usually composed of a simplified version of the page layout. When the application is loading content, placeholders and boxes are used to display content that has not yet been loaded, providing visual feedback to the user and reducing the perceived loading time.

[0053] However, the existing skeleton screen relies on the skeleton screen mounting point, which usually removes the mounting point and replaces the entire skeleton screen page after the real data is requested, and then remounts the real page. This frequent creation and deletion of mounting points will cause the browser of the terminal device to frequently redraw and rearrange the page. Although it optimizes the user experience, it greatly reduces the browsing rendering performance, causing problems such as device heating or page freezing.

[0054] Precisely to solve the above problems, the present application provides a page generation method, device, equipment and readable storage medium, which further uses the initial activation data to render the skeleton screen on the basis of generating a skeleton screen, thereby obtaining an initial rendering page with a real rendering page prototype, and after responding to the user's request, first display the initial rendering page, and then use the real activation data to replace the initial activation data in the initial rendering page, thereby obtaining the final rendering page, avoiding the problem of relying on frequent creation of mount points to affect the rendering performance of the device browser in the existing process of generating pages through the skeleton screen. Specifically, the page generation method is installed in the page generation device in the form of a computer program, and the page generation device is set in the computer device in the form of a processor. The page generation device in the computer device executes the steps of the page generation method provided in the embodiment of the present application by running the computer program corresponding to the page generation method.

[0055] like Figure 1 As shown, Figure 1 A schematic diagram of a page generation method provided in an embodiment of the present application, specifically, comprising steps S110 to S140:

[0056] S110, creating an initial skeleton screen corresponding to the page file based on the page information obtained by parsing the page file.

[0057] In the embodiment of the present application, the creation of the initial skeleton screen of the page can usually be implemented by parsing the page file. For example, as the most common feasible embodiment, the parsing of the page file can be implemented based on the abstract syntax tree (AST, AbstractSyntax Tree) to create the corresponding initial skeleton screen. The specific implementation scheme is as follows:

[0058] 1) Parse the page file (usually an HTML file) into an AST syntax tree, and analyze the page structure and page elements of the page file by analyzing the syntax tree, then determine the type and position of each page element, extract the page data structure, and associate the page elements with the data;

[0059] 2) Then, according to the type of page elements, define the skeleton screen template containing the page elements. For example, first use the page elements that are used for display and have a large content ratio in the page to build the main structure of the skeleton screen. The page elements controlled by the initial data are defined as skeleton elements, which need to be activated at the beginning of page rendering. Other page elements are ordinary elements and only need to be displayed when the complete page is rendered;

[0060] 3) After obtaining the skeleton element, by analyzing the element type, size, border, color and other attributes of the skeleton element, the skeleton element is given the initial CSS (Cascading Style Sheets) attributes or user-specified CSS attributes by directly operating the AST of the page. Specifically, the CSS attributes here include the initial color of the skeleton screen or other text attributes, background attributes, etc.;

[0061] 4) After modifying the AST, generate the skeleton HTML code of the page according to the AST data, then insert the skeleton HTML code into the page, and set the placeholders of the inactivated elements, so as to create the initial skeleton screen corresponding to the page file.

[0062] Of course, the above method only provides an implementation scheme for obtaining the initial skeleton screen based on the parsing of the page file. It is also feasible to use other file parsing methods to create the initial skeleton screen. The embodiments of this application will not be repeated here. Of course, considering that the process of parsing the page file to obtain the initial skeleton screen relies on the analysis of the page information by the technicians, the labor cost is high. In order to quickly create the initial skeleton screen, as a feasible embodiment of this application, a solution is provided to quickly create the skeleton screen based on deep learning to improve efficiency. The specific implementation steps can be referred to in the subsequent Figure 5 and its explanatory contents.

[0063] S120, rendering the initial skeleton screen according to preset initial activation data to generate an initial rendering page corresponding to the page file.

[0064] In the aforementioned creation of the initial skeleton screen corresponding to the page file, usually, the initial skeleton screen can be used to display in advance in response to the page request initiated by the user. However, in order to avoid the problem of frequent creation and deletion of mount points affecting the browser rendering performance, in the embodiment of the present application, the created initial skeleton screen will be further processed. Specifically, the page generation device will use the preset initial activation data to perform a preliminary rendering of the initial skeleton screen, so as to obtain an initial rendering page with a prototype of the final page rendering effect. It can be understood that the page display effect of the initial rendering page is basically similar to that of the final rendering page, and the only difference is that the data used on the page is different.

[0065] Of course, in order to facilitate the replacement of data, as a feasible embodiment of the present application, the page generation device usually implements the rendering of the initial skeleton screen by maintaining a data slice list corresponding to the page file. The specific implementation scheme can be referred to in the subsequent Figure 2 and its explanatory contents.

[0066] Furthermore, after the initial rendering page corresponding to the aforementioned generated page file is generated, in order to avoid repeated generation of the initial rendering page and reduce the waste of unnecessary computing resources, the initial rendering page can be similar to the initial skeleton screen and stored in the browser cache of the terminal device in advance by caching, so that when responding to the page request initiated by the user, the corresponding initial rendering page can be directly read from the cache and displayed. The specific implementation scheme can be referred to in the subsequent Figure 7 and its explanatory contents.

[0067] S130, in response to a page request initiated by a user, display the initial rendering page.

[0068] Similar to the initial skeleton screen, the initial rendering page generated by the embodiment of the present application can also provide visual feedback to the user to reduce the perceived loading time. Therefore, when the user initiates a page request through the terminal device, the page generation device will display the initial rendering page created and generated above, for example, reading the corresponding initial rendering page from the cache and displaying it.

[0069] Of course, it should be noted that the above is only an example of generating a corresponding initial rendering page from a single page file. In fact, in a complete project, such as application software, it usually includes several levels of application pages, that is, it includes multiple application pages, and for each application page, the corresponding initial rendering page can be obtained through the page generation method provided in the embodiment of the present application, and when responding to the user's corresponding page request, the corresponding initial rendering page will be displayed to the user first. The embodiment of the present application will not be repeated here.

[0070] S140: Replace the initial activation data of the initial rendering page based on the real activation data corresponding to the page request to obtain a target rendering page.

[0071] After the initial rendering page that can provide visual feedback to reduce the perceived loading time is shown to the user, considering that the data used by the initial rendering page is the initial activation data rather than the real data related to the user request, the initial activation data of the initial rendering page can be directly replaced based on the real activation data corresponding to the page request, so as to obtain the target rendering page that meets the user's requirements.

[0072] Specifically, taking the above step of maintaining the data slice list corresponding to the page file to realize the rendering of the initial skeleton screen as an example, at this time, the replacement of the initial activation data of the initial rendering page is also realized based on the data slice list. The specific implementation scheme can be referred to in the subsequent Figure 3 and its explanatory contents.

[0073] The page generation method provided by the present application, after creating the initial skeleton screen by parsing the page file to obtain the page information, will further use the preset initial activation data to render the skeleton screen to obtain the initial rendering page, and after responding to the page request initiated by the user, display the initial rendering page, and then replace the initial activation data on the initial rendering page after using the real activation data. Since the initial rendering page is already the prototype of the real page, only part of the data needs to be replaced in the actual page request process, thereby avoiding the problem of frequent creation and deletion of mounting points in the existing process of generating pages through the skeleton screen, which affects the browser rendering performance, improves the browser rendering performance, and reduces the risk of device heating or page jamming.

[0074] like Figure 2 As shown, Figure 2 A schematic flow chart of a step of implementing initial page rendering based on a data slice list provided in an embodiment of the present application, specifically, comprising steps S210 to S220:

[0075] S210, obtaining a data slice list corresponding to each element node in the initial skeleton screen;

[0076] In the embodiment of the present application, the data slice list is usually similar to the initial skeleton screen, which is obtained in advance based on the parsing of the page file. Specifically, the initial skeleton screen usually includes element nodes that describe the page element information in the page file. On this basis, the data slice list contains several data slices corresponding to each element node in the initial skeleton screen. For specific implementation schemes for creating data slice lists, please refer to the subsequent Figure 6 and its explanatory contents.

[0077] S220, in response to the write operation in the data slice list, processing the corresponding element nodes in the initial skeleton screen according to the initial activation data written in the data slice list to generate an initial rendering page corresponding to the page file.

[0078] After providing a data slice list containing several data slices corresponding to each element node, in response to a write operation in the data slice list, the initial activation data written in each data slice in the data slice list can be used to process the corresponding element nodes in the initial skeleton screen, that is, the data can be used to render the corresponding element nodes in the initial skeleton screen, and an initial rendering page having a prototype of the final rendering page can be obtained.

[0079] like Figure 3 As shown, Figure 3 A schematic flow chart of a step of implementing real page rendering based on a data slice list provided in an embodiment of the present application, specifically, comprising steps S310 to S320:

[0080] S310, in response to the asynchronous data loading request in the page request, read the real activation data from the application program interface corresponding to the asynchronous data loading request.

[0081] In an embodiment of the present application, the page generating device will usually also obtain the latest data in real time through the corresponding application program interface and provide it to the user. Therefore, in addition to including a request for the application page, the page request will usually also include an asynchronous data loading request, such as asynchronous ajax data, to request the latest data. Therefore, in response to the asynchronous data loading request in the page request, the page generating device will also read the latest real-time data, that is, the real activation data, through the corresponding application program interface according to the asynchronous data loading request.

[0082] Furthermore, under normal circumstances, the page generation device will complete the replacement of the initial activation data only after loading all the real activation data from the application interface. This will still cause a certain waiting period in a weak network environment, which is not user-friendly. In order to improve the page generation experience in a weak network environment, in the embodiment of the present application, the real activation data corresponding to each initial activation data will be read from the application interface based on the priority of each initial activation data. For specific implementation schemes, please refer to the subsequent Figure 4 and its explanatory contents.

[0083] S320, overwriting the initial activation data in the data slice list that matches the real activation data according to the real activation data, so as to complete the replacement of the initial activation data in the initial rendering page and obtain a target rendering page.

[0084] After obtaining the real-time real activation data mentioned above, the real activation data is used to overwrite the corresponding initial activation data in the data slice list, so as to complete the replacement of the initial activation data in the initial rendering page and obtain the target rendering page. Specifically, in the above process, the rendering of the page can be achieved based on dynamic monitoring, that is, in the data update process, the changes in the data slice list are detected in real time based on dynamic monitoring. When new activation data is pushed into the list, the page generation device will use the template engine to render the element node associated with the real activation data in the real page. After the rendering is completed, this real activation data will be removed from the list. When the data slice list is empty, it means that the page rendering is completed and the dynamic monitoring can be removed.

[0085] like Figure 4 As shown, Figure 4 A schematic flow chart of a step of sequentially reading real activation data provided in an embodiment of the present application, specifically, comprising steps S410 to S420:

[0086] S410: Setting the priority of each of the initial activation data based on the element type of the element node corresponding to each of the initial activation data in the data slice list.

[0087] In an embodiment of the present application, each initial activation data in the data slice list is usually associated with each element node in the skeleton screen, and the node information of each element node usually includes an element type, such as a navigation bar, a title, etc. Therefore, the priority of each initial activation data can be set based on the importance of the element type of the element node corresponding to each initial activation data in the page. For example, for core elements, the priority of the corresponding initial activation data can be set higher. Conversely, for other ordinary elements, the priority of the corresponding initial activation data can be set lower.

[0088] S420: Reading real activation data corresponding to each of the initial activation data in sequence from the application program interface corresponding to the asynchronous data loading request according to the priority of each of the initial activation data.

[0089] On the basis of the foregoing, when in a weak network environment, for example, it is possible to determine whether the current environment is a weak network environment based on the network speed. At this time, the real activation data corresponding to each initial activation data can be read in sequence from the application program interface corresponding to the asynchronous data loading request according to the priority of each initial activation data. That is, priority is given to requesting to read the real activation data corresponding to those core elements, and completing the replacement of the corresponding initial activation data in real time, thereby further improving the user experience.

[0090] like Figure 5 As shown, Figure 5A schematic diagram of a process flow for creating an initial skeleton screen provided in an embodiment of the present application, specifically, including steps S510 to S530:

[0091] S510, obtaining an initial project page of the page file through server rendering.

[0092] In order to realize the automated creation of the skeleton screen, in the embodiment of the present application, the web page generation device will complete the processing of the page file based on the server rendering technology (SSR, Server-Side Rendering), so as to obtain the initial project page.

[0093] S520: Process the initial project page based on a pre-trained neural network model to obtain element information in the initial project page.

[0094] In an embodiment of the present application, based on the foregoing, the initial project page is processed by a neural network model pre-trained based on deep learning, such as a convolutional neural network (CNN) or a recurrent neural network (RNN), and the element information in the initial project page can also be automatically extracted. Specifically, the element information here includes at least element type information or element position information, etc.

[0095] Among them, the process of pre-training and generating a neural network model based on deep learning relies on data samples, that is, the sample page and the element information marked in the sample page can be used in advance to train the initialized neural network model, and the neural network model used to implement project page processing in the embodiment of the present application can be obtained. Specifically, the embodiment of the present application does not elaborate on the implementation scheme of obtaining the corresponding model based on deep learning and using sample data for training.

[0096] S530: Creating element nodes in a preset interface based on the element information to generate an initial skeleton screen corresponding to the page file.

[0097] In the embodiment of the present application, based on the element information extracted above, an element node corresponding to the element information is created in the preset interface, and the initial skeleton screen corresponding to the page file can be automatically generated. In the above manner, a large number of page files in the project can be batch processed to generate the corresponding initial skeleton screen template, thereby effectively improving the effect of generating the initial skeleton screen.

[0098] Of course, considering that the page rendering requires the use of a data slice list, in the aforementioned process, in addition to extracting element information from the initial project page to create element nodes and thus generate the initial skeleton screen, it is usually necessary to generate a data slice list based on the data structure information of the project page. Figure 6 shown.

[0099] like Figure 6 As shown, Figure 6 A schematic diagram of a step flow of creating a data slice list provided in an embodiment of the present application, specifically, comprising steps S610 to S620:

[0100] S610: Extract data structure information of the initial project page based on a preset asynchronous request of the initial project page.

[0101] In the embodiment of the present application, based on the asynchronous request of the initial project page, the data structure information of the initial project page can be further extracted.

[0102] S620: Slice the data structure information based on the element information in the initial project page to obtain a data slice list corresponding to the element information.

[0103] On the basis of the above, by slicing the data structure based on the data slicing algorithm of the key elements, several data slices can be obtained, thereby further obtaining a corresponding data slice list containing several data slices. On this basis, by analyzing the association between the data slices and the element information in the initial project page, a data slice and each element information in the initial project page can be obtained, that is, a data slice list corresponding to each element node in the initial skeleton screen. The data slice list can be further used to complete the rendering of the initial skeleton screen through the initial activation data, thereby obtaining the initial rendering page. For details, please refer to the content provided in the aforementioned step S120.

[0104] like Figure 7 As shown, Figure 7 A schematic flow chart of steps for implementing rendering page display based on cache technology provided in an embodiment of the present application, specifically, including steps S710 to S720:

[0105] S710: Cache the initial rendering page in a browser cache.

[0106] In the embodiment of the present application, considering that in the middle and late stages of most front-end program projects, the changes in the project structure are usually changes in non-skeleton elements, if the skeleton screen needs to be dynamically generated every time the project is run, it will lead to unnecessary waste of calculation. Therefore, in order to reduce the waste of calculation, the initial rendering page, that is, the data slice list written with the initial activation data and the initial skeleton screen describing the skeleton screen style structure can be cached in the browser cache, such as IndexedDB, so that after the user initiates a page request, the corresponding initial rendering page can be directly read from the browser cache.

[0107] S720, in response to a page request initiated by a user, reading the initial rendering page from the browser cache and displaying it.

[0108] In an embodiment of the present application, when a user initiates a page request, if a corresponding initial rendering page exists in the browser cache IndexedDB, the initial rendering page can be directly read and displayed. Conversely, if the initial rendering page corresponding to the page request does not exist in the browser cache IndexedDB, a page generation method can be provided through an embodiment of the present application to first generate an initial rendering page and provide it to the user, and then replace the initial activation data in the initial rendering page in sequence.

[0109] Of course, in the process of caching the initial rendering page, the initial rendering page can also be recorded by generating a globally unique cache identifier, so as to facilitate reading or updating the corresponding initial rendering page based on the cache identifier, and the embodiments of the present application will not be repeated here.

[0110] In order to better understand the page generation method provided by this application, the following will be combined with the above Figure 1 to Figure 7 The content provided is a complete implementation process of a page generation method, specifically including:

[0111] 1) The page file is processed through SSR (server rendering) to obtain the initial project page, and the page data structure is extracted according to the asynchronous request of the current page. Then, the data slicing algorithm of key elements is used to slice the page data structure, and a data slice list is maintained for subsequent data-driven skeleton screen generation;

[0112] 2) Using pre-trained deep learning algorithms such as convolutional neural networks (CNNs) and recurrent neural networks (RNNs), the initial project page is processed to extract page elements, mainly including the type and location of page elements. Of course, the extracted page elements can also be processed in a fine-grained hierarchical manner, including the layout, size, style, etc. of the page elements;

[0113] 3) Based on the extracted page element information, element nodes are created in the preset interface to obtain the initial skeleton screen, and each element node is associated with each data slice in the aforementioned maintained data slice list, and the priority of the initial activation data corresponding to each element node is set based on the element type corresponding to each element node;

[0114] 4) Using the initial activation data to write into the data slice list, the initial skeleton screen is rendered, the initial rendering page is obtained and the page file is associated and stored in the browser cache;

[0115] 5) After obtaining the page request for this page file from the user, the initial rendering page is first displayed from the browser cache, and then the real-time activation data is read from the corresponding application program interface based on the asynchronous data loading request. Of course, in a weak network environment, such as an environment where the network speed is less than a certain threshold, the real-time activation data can be read from the corresponding application program interface in sequence based on the priority of the initial activation data;

[0116] 6) After writing the real activation data into the data slice list, the initial activation data in the initial rendering page is replaced to obtain the target rendering page. The whole process does not need to rely on the creation and deletion of the mounting point (DOM node), which reduces the steps of frequent redrawing and rearranging of pages by the browser, improves the rendering performance of the browser, and avoids problems such as device heating or page freezing.

[0117] In order to better implement the page generation method provided in the embodiment of the present application, based on the page generation method, the embodiment of the present application also provides a page generation device. Figure 8 As shown, Figure 8 A schematic diagram of the structure of a page generation device provided in an embodiment of the present application. Specifically, the page generation device includes:

[0118] The parsing module 810 is used to create an initial skeleton screen corresponding to the page file based on the page information obtained by parsing the page file;

[0119] A rendering module 820, configured to render the initial skeleton screen according to preset initial activation data, and generate an initial rendering page corresponding to the page file;

[0120] A display module 830, configured to display the initial rendering page in response to a page request initiated by a user;

[0121] The replacement module 840 is used to replace the initial activation data of the initial rendering page based on the real activation data corresponding to the page request to obtain a target rendering page.

[0122] As a feasible embodiment of the present application, the rendering module 820 is also used to obtain a data slice list corresponding to each element node in the initial skeleton screen; in response to a write operation in the data slice list, the corresponding element nodes in the initial skeleton screen are processed according to the initial activation data written in the data slice list to generate an initial rendering page corresponding to the page file.

[0123] As a feasible embodiment of the present application, the replacement module 840 is also used to respond to an asynchronous data loading request in the page request, read the real activation data from the application program interface corresponding to the asynchronous data loading request; overwrite the initial activation data in the data slice list that matches the real activation data according to the real activation data to complete the replacement of the initial activation data in the initial rendering page and obtain the target rendering page.

[0124] As a feasible embodiment of the present application, the rendering module 820 is also used to set the priority of each initial activation data based on the element type of the element node corresponding to each initial activation data in the data slice list; and read the real activation data corresponding to each initial activation data in sequence from the application program interface corresponding to the asynchronous data loading request according to the priority of each initial activation data.

[0125] As a feasible embodiment of the present application, the parsing module 810 is also used to obtain the initial project page of the page file through server rendering; process the initial project page based on a pre-trained neural network model to obtain element information in the initial project page; the element information includes at least element type information and element position information; based on the element information, create element nodes in a preset interface to generate an initial skeleton screen corresponding to the page file.

[0126] As a feasible embodiment of the present application, the parsing module 810 is also used to extract the data structure information of the initial project page based on the preset asynchronous request of the initial project page; the data structure information is sliced ​​based on the element information in the initial project page to obtain a data slice list corresponding to the element information; the rendering module 820 is also used to render the skeleton screen according to the preset initial activation data and the data slice list to generate an initial rendering page corresponding to the page file.

[0127] As a feasible embodiment of the present application, the display module 830 is also used to cache the initial rendering page in the browser cache; in response to a page request initiated by a user, read the initial rendering page from the browser cache and display it.

[0128] The specific definition of the page generation device can be found in the definition of the page generation method above, which will not be repeated here. Each module in the above page generation device can be implemented in whole or in part by software, hardware, or a combination thereof. Each module can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory of the computer device in the form of software, so that the processor can call and execute the operations corresponding to each module. Specifically, Fig. 9 As shown, Fig. 9 A schematic diagram of the structure of a computer device provided in an embodiment of the present application.

[0129] Specifically, the computer device may include one or more processing cores of the processor 901, one or more storage media of the memory 902, a power supply 903, and an input unit 904. Those skilled in the art will understand that Fig. 9 The computer device structure shown in the figure does not constitute a limitation on the computer device, and may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently. Among them:

[0130] The processor 901 is the control center of the computer device. It uses various interfaces and lines to connect various parts of the entire computer device. By running or executing software programs and / or modules stored in the memory 902 and calling data stored in the memory 902, it executes various functions of the computer device and processes data, thereby monitoring the computer device as a whole. Optionally, the processor 901 may include one or more processing cores; preferably, the processor 901 may integrate a page generator and a modem processor, wherein the page generator mainly processes the operating system, user interface, and application programs, and the modem processor mainly processes wireless communications. It is understandable that the above-mentioned modem processor may not be integrated into the processor 901.

[0131] The memory 902 can be used to store software programs and modules. The processor 901 executes various functional applications and data processing by running the software programs and modules stored in the memory 902. The memory 902 may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc.; the data storage area may store data created according to the use of the computer device, etc. In addition, the memory 902 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other volatile solid-state storage devices. Accordingly, the memory 902 may also include a memory controller to provide the processor 901 with access to the memory 902.

[0132] The computer device also includes a power supply 903 for supplying power to various components. Preferably, the power supply 903 can be logically connected to the processor 901 through a power management system, so as to manage charging, discharging, and power consumption through the power management system. The power supply 903 can also include any components such as one or more DC or AC power supplies, recharging systems, power failure detection circuits, power converters or inverters, and power status indicators.

[0133] The computer device may further include an input unit 904, which may be used to receive input digital or character information and generate keyboard, mouse, joystick, optical or trackball signal input related to user settings and function control.

[0134] Although not shown, the computer device may further include a display unit, etc., which will not be described in detail herein. Specifically in this embodiment, the processor 901 in the computer device will load the executable files corresponding to the processes of one or more application programs into the memory 902 according to the following instructions, and the processor 901 will run the application programs stored in the memory 902, thereby executing the following steps:

[0135] Based on the page information obtained by parsing the page file, creating an initial skeleton screen corresponding to the page file;

[0136] Rendering the initial skeleton screen according to preset initial activation data to generate an initial rendering page corresponding to the page file;

[0137] In response to a page request initiated by a user, displaying the initial rendering page;

[0138] Based on the real activation data corresponding to the page request, the initial activation data of the initial rendering page is replaced to obtain a target rendering page.

[0139] Furthermore, the processor running the application stored in the memory can also execute the following steps: obtaining a data slice list corresponding to each element node in the initial skeleton screen; in response to a write operation in the data slice list, processing the corresponding element nodes in the initial skeleton screen according to the initial activation data written in the data slice list, and generating an initial rendering page corresponding to the page file.

[0140] Furthermore, the processor running the application stored in the memory may also perform the following steps: in response to the asynchronous data loading request in the page request, reading the real activation data from the application program interface corresponding to the asynchronous data loading request; overwriting the initial activation data in the data slice list that matches the real activation data according to the real activation data to complete the replacement of the initial activation data in the initial rendering page and obtain the target rendering page.

[0141] Furthermore, the processor running the application stored in the memory can also execute the following steps: setting the priority of each initial activation data based on the element type of the element node corresponding to each initial activation data in the data slice list; and reading the real activation data corresponding to each initial activation data in sequence from the application program interface corresponding to the asynchronous data loading request according to the priority of each initial activation data.

[0142] Furthermore, the processor running the application stored in the memory can also perform the following steps: obtaining the initial project page of the page file through server rendering; processing the initial project page based on a pre-trained neural network model to obtain element information in the initial project page; the element information includes at least element type information and element position information; based on the element information, creating element nodes in a preset interface to generate an initial skeleton screen corresponding to the page file.

[0143] Furthermore, the processor running the application stored in the memory can also execute the following steps: extracting the data structure information of the initial project page based on the preset asynchronous request of the initial project page; slicing the data structure information based on the element information in the initial project page to obtain a data slice list corresponding to the element information; rendering the skeleton screen according to the preset initial activation data and the data slice list to generate an initial rendering page corresponding to the page file.

[0144] Furthermore, the processor running the application stored in the memory may also perform the following steps: caching the initial rendering page in the browser cache; and in response to a page request initiated by the user, reading the initial rendering page from the browser cache and displaying it.

[0145] To this end, an embodiment of the present application provides a computer-readable storage medium, which may include: a read-only memory (ROM), a random access memory (RAM), a disk or an optical disk, etc. A computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, the following steps are implemented:

[0146] Based on the page information obtained by parsing the page file, creating an initial skeleton screen corresponding to the page file;

[0147] Rendering the initial skeleton screen according to preset initial activation data to generate an initial rendering page corresponding to the page file;

[0148] In response to a page request initiated by a user, displaying the initial rendering page;

[0149] Based on the real activation data corresponding to the page request, the initial activation data of the initial rendering page is replaced to obtain a target rendering page.

[0150] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described in detail in a certain embodiment, please refer to the detailed description of other embodiments above, and will not be repeated here.

[0151] In specific implementation, the above units or structures can be implemented as independent entities, or can be arbitrarily combined to be implemented as the same or several entities. The specific implementation of the above units or structures can refer to the previous method embodiments, which will not be repeated here.

[0152] The specific implementation of the above operations can be found in the previous embodiments, which will not be described in detail here.

[0153] The above is a detailed introduction to a page generation method provided in an embodiment of the present application. Specific examples are used herein to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only used to help understand the method of the present invention and its core idea. At the same time, for those skilled in the art, according to the idea of ​​the present invention, there will be changes in the specific implementation method and application scope. In summary, the content of this specification should not be understood as a limitation on the present invention.

Claims

1. A page generation method, characterized in that: include: Based on the page information obtained by parsing the page file, creating an initial skeleton screen corresponding to the page file; Rendering the initial skeleton screen according to preset initial activation data to generate an initial rendering page corresponding to the page file; In response to a page request initiated by a user, displaying the initial rendering page; Based on the real activation data corresponding to the page request, the initial activation data of the initial rendering page is replaced to obtain a target rendering page.

2. The page generation method according to claim 1, characterized in that: The step of rendering the initial skeleton screen according to the preset initial activation data to generate an initial rendering page corresponding to the page file includes: Obtaining a data slice list corresponding to each element node in the initial skeleton screen; In response to a write operation in the data slice list, the corresponding element nodes in the initial skeleton screen are processed according to the initial activation data written in the data slice list to generate an initial rendering page corresponding to the page file.

3. The page generation method according to claim 2, characterized in that: After the step of providing a data slice list corresponding to each element node in the initial skeleton screen, the initial activation data of the initial rendering page is replaced based on the real activation data corresponding to the page request to obtain the target rendering page, including: In response to the asynchronous data loading request in the page request, reading real activation data from an application program interface corresponding to the asynchronous data loading request; The initial activation data in the data slice list that matches the real activation data is overwritten according to the real activation data to complete the replacement of the initial activation data in the initial rendering page and obtain the target rendering page.

4. The page generation method according to claim 3, characterized in that: The step of reading the real activation data from the application program interface corresponding to the asynchronous data loading request includes: Setting the priority of each of the initial activation data based on the element type of the element node corresponding to each of the initial activation data in the data slice list; The real activation data corresponding to each of the initial activation data are sequentially read from the application program interface corresponding to the asynchronous data loading request according to the priority of each of the initial activation data.

5. The page generation method according to claim 1, characterized in that: The step of creating an initial skeleton screen corresponding to the page file based on the page information obtained by parsing the page file includes: Get the initial project page of the page file through server rendering; The initial project page is processed based on a pre-trained neural network model to obtain element information in the initial project page; the element information at least includes element type information and element position information; An element node is created in a preset interface based on the element information to generate an initial skeleton screen corresponding to the page file.

6. The page generation method according to claim 5, characterized in that: After the step of obtaining the initial project page of the page file by server rendering, the method further includes: Extracting data structure information of the initial project page based on a preset asynchronous request of the initial project page; Slice the data structure information based on the element information in the initial project page to obtain a data slice list corresponding to the element information; The step of rendering the initial skeleton screen according to the preset initial activation data to generate an initial rendering page corresponding to the page file includes: The skeleton screen is rendered according to the preset initial activation data and the data slice list to generate an initial rendering page corresponding to the page file.

7. The page generation method according to any one of claims 1 to 6, characterized in that: After the step of rendering the initial skeleton screen according to the preset initial activation data to generate the initial rendering page corresponding to the page file, the method further includes: Caching the initial rendered page in a browser cache; The step of displaying the initial rendering page in response to a page request initiated by a user includes: In response to a page request initiated by a user, the initial rendering page is read from the browser cache and displayed.

8. A page generating device, characterized in that: include: A parsing module, used for creating an initial skeleton screen corresponding to the page file based on the page information obtained by parsing the page file; A rendering module, used for rendering the initial skeleton screen according to preset initial activation data, and generating an initial rendering page corresponding to the page file; A display module, used to display the initial rendering page in response to a page request initiated by a user; The replacement module is used to replace the initial activation data of the initial rendering page based on the real activation data corresponding to the page request to obtain a target rendering page.

9. A computer device, characterized in that: The computer device includes a processor, a memory, and a computer program stored in the memory and executable on the processor, and the processor executes the computer program to implement the page generation 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 the computer program is executed by a processor to implement the page generation method according to any one of claims 1 to 7.

Images