A page rendering method and device, computer device and storage medium

Abstract

The present disclosure provides a page rendering method and device, computer equipment and a storage medium, wherein the method comprises: in response to an access request for a target page of a preset type, obtaining a plurality of sub-entry files corresponding to the target page in sequence according to file access links stored in a main entry file of the target page; the plurality of sub-entry files are obtained and stored after being rendered by a server according to sub-page content information at different page parts of the target page; the preset type refers to a page type in which a corresponding static data proportion is greater than or equal to a set threshold; sub-page content is rendered according to at least one of the sub-entry files, and the sub-page content is displayed in the target page to obtain the first screen content of the target page.

Description

TECHNICAL FIELD

[0001] The present disclosure relates to the technical field of computer, and in particular, to a page rendering method and device, a computer device and a storage medium. BACKGROUND

[0002] With the iteration of web pages becoming more and more complex, the performance requirements for web page loading are also getting higher and higher. In order to meet the increasingly high performance requirements, a series of page rendering methods have emerged. Among these rendering schemes, the most widely used schemes usually include a client side rendering (CSR) scheme and a server side rendering (SSR) scheme.

[0003] However, the above two schemes are not ideal for rendering of pages with a high proportion of static data (i.e., pages with a proportion of static data higher than a proportion of dynamic data). There are usually problems of slow rendering speed and large performance overhead. SUMMARY

[0004] The present disclosure provides at least a page rendering method, device, computer device and storage medium.

[0005] In a first aspect, the present disclosure provides a page rendering method applied to a client, comprising:

[0006] In response to an access request for a target page of a preset type, a plurality of sub-entry files corresponding to the target page are obtained in sequence according to file access links stored in a main entry file of the target page; the plurality of sub-entry files are obtained and stored by a server after rendering sub-page content information at different page parts of the target page; and the preset type refers to a page type with a proportion of static data greater than or equal to a set threshold.

[0007] Sub-page content is rendered according to at least one of the sub-entry files, and the sub-page content is displayed in the target page to obtain first screen content of the target page.

[0008] In a possible implementation, the rendering of sub-page content according to at least one of the sub-entry files comprises:

[0009] A target sub-entry file matching the first screen content is determined according to a page part corresponding to each of the sub-entry files, a file data amount of each of the sub-entry files, and a first screen loading probability; and the first screen loading probability is used to indicate a probability that the sub-page content corresponding to the sub-entry file can be used as the first screen content.

[0010] According to each of the target sub-entry files, sub-page content corresponding to each of the target sub-entry files is rendered.

[0011] In a possible implementation, according to each of the target sub-entry files, sub-page content corresponding to each of the target sub-entry files is rendered, including:

[0012] In a case where the target sub-entry file includes a plurality of target sub-entry files, sub-page content corresponding to each of the target sub-entry files is obtained by sequentially rendering a page according to each of the target sub-entry files in an order of acquisition of each of the target sub-entry files;

[0013] The sub-page content is displayed in the target page, including:

[0014] The sub-page content is sequentially displayed in the target page according to a generation order of the sub-page content corresponding to each of the target sub-entry files.

[0015] In a possible implementation, before the sub-page content corresponding to each of the target sub-entry files is rendered according to each of the target sub-entry files, the method further includes:

[0016] Page data information corresponding to the target page is acquired, and the page data information includes each piece of to-be-displayed dynamic data in the target page;

[0017] The sub-page content corresponding to each of the target sub-entry files is rendered according to each of the target sub-entry files, including:

[0018] For any target sub-entry file, target dynamic data matched with the target sub-entry file is filtered from the to-be-displayed dynamic data;

[0019] The target sub-entry file is rendered according to the target dynamic data and the target sub-entry file, to obtain sub-page content corresponding to the target sub-entry file.

[0020] In a possible implementation, the target sub-entry file is rendered according to the target dynamic data and the target sub-entry file, to obtain sub-page content corresponding to the target sub-entry file, including:

[0021] The target sub-entry file is rendered according to the target sub-entry file, to obtain initial page content corresponding to the target sub-entry file;

[0022] A target display position of the target dynamic data in the initial page content is determined;

[0023] According to the target dynamic data, dynamic page content is rendered, and the dynamic page content is supplemented in a target display position in the initial page content to obtain sub-page content corresponding to the target sub-entry file.

[0024] In a possible implementation, after the first-screen content of the target page is obtained, the method further includes:

[0025] obtaining a non-first-screen page file corresponding to the target page; the non-first-screen page file is used to render to-be-supplemented page content, the to-be-supplemented page content being page content of the target page other than the first-screen content; and the non-first-screen page file includes a sub-entry file other than the target sub-entry file;

[0026] performing page rendering according to the non-first-screen page file to obtain the to-be-supplemented page content, and supplementally displaying the to-be-supplemented page content on the target page.

[0027] In a possible implementation, different page parts of the target page include a header part, a main body part, and a footer part.

[0028] In a possible implementation, the sequentially obtaining the plurality of sub-entry files corresponding to the target page according to the file access links stored in the main entry file of the target page includes:

[0029] The sequentially obtaining the plurality of sub-entry files corresponding to the target page according to the file access links stored in the main entry file of the target page includes:

[0030] In a second aspect, the embodiments of the present disclosure further provide a page rendering apparatus applied to a client and including:

[0031] The obtaining module is configured to, in response to an access request for a target page of a preset type, sequentially obtain a plurality of sub-entry files corresponding to the target page according to file access links stored in a main entry file of the target page; the plurality of sub-entry files are obtained and stored by a server after rendering sub-page content information at different page parts of the target page; and the preset type refers to a page type in which a corresponding static data proportion is greater than or equal to a set threshold.

[0032] The first rendering module is configured to render to obtain sub-page content according to at least one of the sub-entry files, and display the sub-page content in the target page to obtain first-screen content of the target page.

[0033] In a third aspect, the optional implementation of the present disclosure further provides a computer device, a processor and a memory, the memory stores machine readable instructions executable by the processor, and the processor is configured to execute the machine readable instructions stored in the memory, and the machine readable instructions are executed by the processor to perform the steps of the first aspect or any possible implementation of the first aspect.

[0034] In a fourth aspect, the optional implementation of the present disclosure further provides a computer readable storage medium, and the computer readable storage medium stores a computer program, and the computer program is executed to perform the steps of the first aspect or any possible implementation of the first aspect.

[0035] The effects of the page rendering apparatus, the computer device and the computer readable storage medium are described above in the description of the page rendering method, and will not be repeated here.

[0036] The page rendering method, the apparatus, the computer device and the storage medium provided by the embodiments of the present disclosure can directly utilize the pre-stored multiple sub-entry files to quickly perform page rendering when accessing the target page each time, and avoid the problem that each time the target page is accessed, the server is utilized to pre-render each part of content in the target page, and then the file obtained by pre-rendering is utilized to perform page rendering. In this way, the entire page loading process is completed based on the pre-stored multiple sub-entry files, that is, the computing resources of the server can be saved, and the loading speed of the first screen content of the target page of the preset type can be ensured.

[0037] In order to make the above objectives, characteristics and advantages of the present disclosure more apparent and easy to understand, the following preferred embodiments are specifically described below, and the accompanying drawings are described in detail as follows. BRIEF DESCRIPTION OF DRAWINGS

[0038] In order to more clearly illustrate the technical solutions of the embodiments of the present disclosure, the following will briefly introduce the drawings needed to be used in the embodiments. The drawings herein are incorporated into the specification and form a part of the specification, which illustrate the embodiments consistent with the present disclosure, and are used to explain the technical solutions of the present disclosure together with the specification. It should be understood that the following drawings only show some embodiments of the present disclosure, and therefore should not be regarded as a limitation on the scope, and for those skilled in the art, other related drawings can also be obtained without creative labor on the basis of these drawings.

[0039] Figure 1 A flow chart of a page rendering method applied to a client according to an embodiment of the present disclosure is shown.

[0040] Figure 2 A schematic diagram of first screen content is shown according to an embodiment of the present disclosure.

[0041] Figure 3 An interaction schematic diagram is shown according to an embodiment of the present disclosure.

[0042] Figure 4 A schematic diagram of a page rendering apparatus applied to a client is shown according to an embodiment of the present disclosure.

[0043] Figure 5 A structural schematic diagram of a computer device is shown according to an embodiment of the present disclosure. DETAILED DESCRIPTION

[0044] To make the objectives, technical solutions and advantages of the embodiments of the present disclosure clearer, the following will be combined with the accompanying drawings for the embodiments of the present disclosure to clearly and completely describe the technical solutions of the embodiments of the present disclosure. Obviously, the described embodiments are only part of the embodiments of the present disclosure, rather than all the embodiments. The components of the embodiments of the present disclosure described and shown herein can be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of the present disclosure is not intended to limit the scope of the claimed present disclosure, but only represents selected embodiments of the present disclosure. Based on the embodiments of the present disclosure, all other embodiments obtained by those skilled in the art without creative work belong to the scope of protection of the present disclosure.

[0045] In addition, the terms “first”, “second”, and the like in the specification and claims of the embodiments of the present disclosure and the above-described accompanying drawings are used to distinguish similar objects, and do not necessarily have to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged under appropriate circumstances, so that the embodiments described herein can be implemented in an order other than that illustrated or described herein.

[0046] “Multiple or several” mentioned herein refers to two or more. “And / or” describes the association relationship of the associated objects, which means that there can be three relationships, for example, A and / or B, which can represent the three cases of A alone, A and B together, and B alone. The character “ / ” generally represents that the front and rear associated objects are in an “or” relationship.

[0047] It is found through research that, for the SSR scheme, the client side can directly render the first screen content by injecting the service-side rendered Hyper Text Markup Language (HTML) file. However, the scheme has the disadvantage that the service side needs to be used for real-time rendering every time the page is accessed, resulting in a large resource overhead of the service side. Especially in a short period of time, if there are a large number of page access requests for the same page, a large number of service sides are needed to ensure the speed and effect of page rendering, which not only requires a high number of service side machines, but also increases the maintenance cost of the service side. Therefore, it can be seen that the SSR scheme has the disadvantage of large performance overhead. For the CSR scheme, although the service side does not need to be involved, the rendering operation is completed by the client and the browser (front end), but the scheme needs to pull all page resources before page rendering, resulting in the problem of slow page rendering speed.

[0048] Based on the above research, the present disclosure provides a page rendering method and device, a computer device and a storage medium. Since the plurality of sub-entry files corresponding to the target page are obtained by rendering and storing the sub-page content information at different page parts in the target page of a preset type, the plurality of sub-entry files stored in advance can be directly used for page rendering every time the target page is accessed, avoiding the problem of pre-rendering each part of the content in the target page by the service side every time the target page is accessed, and then using the pre-rendered file to render the page. In this way, the entire page loading process is completed based on the plurality of sub-entry files stored in advance, which not only saves the computing resources of the service side, but also ensures the first screen content loading speed of the target page of the preset type.

[0049] The above-mentioned defects are the results of the inventors' practice and careful research, and therefore, the discovery process of the above-mentioned problems and the solutions proposed by the present disclosure to solve the above-mentioned problems should be the contributions of the inventors to the present disclosure.

[0050] It should be noted that similar reference numerals and letters refer to similar items throughout the drawings, and therefore, once an item is defined in one drawing, it does not need to be further defined and explained in subsequent drawings.

[0051] It can be understood that before using the technical solutions disclosed in the embodiments of the present disclosure, the type, use range, use scenario, etc. of the personal information involved in the present disclosure should be informed to the user and the authorization of the user should be obtained through appropriate means in accordance with relevant laws and regulations.

[0052] To facilitate understanding of this embodiment, a page rendering method disclosed in this disclosure will first be described in detail. The execution subject of the page rendering method provided in this disclosure is generally a terminal device or other processing device with certain computing power. The terminal device can be a user equipment (UE), mobile device, user terminal, terminal, personal digital assistant device (PDA), handheld device, computer device, etc. In some possible implementations, the page rendering method can be implemented by the processor calling computer-readable instructions stored in the memory.

[0053] The following describes the page rendering method provided in this embodiment, taking the client as the executing entity as an example.

[0054] like Figure 1 The flowchart shown is a page rendering method applied to a client according to an embodiment of this disclosure, which may include the following steps:

[0055] S101: In response to an access request for a target page of a preset type, the server sequentially retrieves multiple sub-entry files corresponding to the target page based on the file access links stored in the main entry file of the target page. The multiple sub-entry files are obtained and stored by the server after rendering the sub-page content information in different parts of the target page. The preset type refers to the page type in which the proportion of static data is greater than or equal to a set threshold.

[0056] Here, static data can be fixed data that is not updated on the page, such as the article title, article content, and article images on the article details page, or data whose update frequency is lower than a preset frequency. The preset frequency can be set based on experience, and this embodiment does not impose a specific limitation. If the update frequency of a piece of page data is higher than the preset frequency, it indicates that the page data is frequently changing (such as the hot list data on the page); conversely, it indicates that the page data is relatively fixed.

[0057] Dynamic data, in contrast to static data, can be data that needs to be frequently updated on a page, with an update frequency higher than or equal to a preset frequency. For example, dynamic data could be trending topics or real-time updated video data.

[0058] The threshold can be set based on experience, and this embodiment does not specify a particular threshold. Optionally, the threshold can be set to 0, that is, any page is considered to be a page of a preset type.

[0059] The preset page type can be a page where the proportion of static data is greater than or equal to a set threshold, or a page where the proportion of static data is higher than the proportion of dynamic data. For example, the preset page type can be an article detail page, an event terms page, or a novel content page.

[0060] A page can correspond to a unique main entry file, through which page data can be retrieved. Specifically, the main entry file can be the HTML file corresponding to the target page. In this embodiment, the main entry file may include file access links to various sub-entry files corresponding to the target page, and the sub-entry files can also be HTML files. The file access links are used to access the sub-entry files, and different sub-entry files correspond to different sub-entries, which are entry points to local pages of the target page. In specific implementations, different sub-entries correspond to different page sections of the target page, which may include the header, body, and footer. For example, in this embodiment, the main entry file of the target page may store file access links to three sub-entry files: the file access link to the sub-entry file corresponding to the header, the file access link to the sub-entry file corresponding to the body, and the file access link to the sub-entry file corresponding to the footer.

[0061] Each sub-entry file for a specific page section can be generated and stored by the server after rendering the page based on the content information of the sub-page within that section. Specifically, the process of generating and storing each sub-entry file on the server side can be as follows:

[0062] After configuring the target page information in the backend for configuring page content, the backend can call the content transfer interface provided by the server to send the configured target page information to the server. Upon receiving the page information, the server can then break it down according to the page structure to obtain the sub-page content information corresponding to different page parts, i.e., the sub-page content information corresponding to each sub-entry point. Then, for each sub-entry point, the server can render the page based on the sub-page content information corresponding to that sub-entry point to obtain the corresponding sub-entry point file. Optionally, for each sub-entry point, the server can also determine the static data information from the sub-page content information corresponding to that sub-entry point, and then render the page based on the static data information to obtain the corresponding sub-entry point file.

[0063] For example, taking the target page as the image and text page corresponding to the target article, the content information of the subpages corresponding to each page part of the target page can be as follows:

[0064] The header section (also called the page header part) contains information such as the title and author.

[0065] The main body (represented by the article): This is the core part of the article, containing images, text, and other information.

[0066] The footer section contains supplementary information at the bottom of the article, such as footnotes and source information.

[0067] For the header section, the generated sub-entry file can be header.html; for the body section, the generated sub-entry file can be article.html; and for the footer section, the generated sub-entry file can be footer.html.

[0068] Finally, the server can store the generated sub-entry files in a Content Delivery Network (CDN) and store the file access links of the sub-entry files in the main entry file corresponding to the target page. In this way, since the proportion of static data in the target page is greater than a set threshold, the page content corresponding to each sub-entry in the target page does not change much and the content is relatively fixed. By pre-rendering the page content corresponding to the sub-entries and caching the rendered sub-entry files in the CDN, not only can persistent caching of this type of content be achieved, but it can also effectively save computing resources compared to re-rendering on the server every time the target is accessed. Furthermore, even if the page content corresponding to each sub-entry changes, the previously cached sub-entry files can be promptly replaced after regenerating the sub-entry files corresponding to the changed page content, ensuring accurate loading of the target page.

[0069] Optionally, when configuring the page information for the target page, the backend server can categorize the page information for each page section according to the page structure. Then, the categorized information is sent to the server. In this way, the server can directly generate and store the sub-entry files corresponding to each sub-entry point based on the categorized information.

[0070] The access request is a request to access a target page of a preset type. Specifically, it can be a request generated after the user triggers the access to the target page, and the page type of the target page is a preset type. In a specific implementation of S101, the client can respond to the access request for the target page and obtain the main entry file of the target page. Then, the main entry file is parsed to determine the file access links of each sub-entry file included therein. Subsequently, according to the storage order of each file access link in the main entry file, each file access link can be accessed sequentially, thereby sequentially obtaining each sub-entry file corresponding to the target page.

[0071] In one embodiment, the sub-entry files corresponding to pages of a preset type can all be stored in a CDN. Therefore, the step of obtaining sub-entry files in S101 can be implemented according to the following steps:

[0072] Using the file access links stored in the main entry file of the target page, the corresponding sub-entry files of the target page are retrieved sequentially from the content distribution network that stores the sub-entry files.

[0073] For example, for the target page, the file access links can be accessed sequentially according to the order of the file access links stored in the main entry file, thereby fulfilling the request for each sub-entry file. Then, the CDN system will direct each request to the service node closest to the user, and then the sub-entry files corresponding to the target page can be retrieved sequentially from the nearest service node.

[0074] S102: Render the subpage content based on at least one sub-entry file, and display the subpage content on the target page to obtain the first screen content of the target page.

[0075] Here, one sub-entry file corresponds to one sub-page content, which is the page content of the corresponding page section of the sub-entry file. The first screen content is the content that needs to be displayed on the first screen after the target page is accessed and displayed on the client's screen.

[0076] In practice, the client can use the deployed browser (i.e., the front-end) to render pages sequentially based on each sub-entry file, thus obtaining the content of each sub-page. Then, the content of each sub-page can be displayed on the target page, resulting in the first screen content of the target page.

[0077] Optionally, after obtaining the various sub-entry files, the files to be rendered can be selected from multiple main entry files based on the page portions that need to be displayed in the first screen content of the target page. The page portions to be displayed in the first screen content can be pre-specified; for example, for target page 1, the first screen content can be the header; for target page 2, the first screen content can be both the header and the body text. Then, each file to be rendered is rendered to obtain the corresponding sub-page content. Finally, the sub-page content can be displayed on the target page, thus obtaining the first screen content of the target page.

[0078] In this way, since the multiple sub-entry files corresponding to the target page are rendered and stored from the sub-page content information of different parts of the target page of the preset type, each time the target page is accessed, the pre-stored multiple sub-entry files can be directly used to quickly render the page. This avoids the problem of using the server to pre-render each part of the target page content for each access and then using the pre-rendered files for page rendering. Thus, the entire page loading process is completed based on the pre-stored multiple sub-entry files, which can save server computing resources and ensure the loading speed of the first screen content of the preset type of target page.

[0079] In one embodiment, the step of "rendering subpage content based on at least one sub-entry file" in S102 above can be implemented according to the following steps:

[0080] S102-1: Based on the page portion corresponding to each sub-entry file, the file data volume of each sub-entry file, and the first-screen loading probability, determine the target sub-entry file that matches the first-screen content; the first-screen loading probability is used to indicate the probability that the sub-page content corresponding to the sub-entry file can be used as the first-screen content.

[0081] Here, file data size indicates the file size of the sub-entry file. The larger the file data size, the more time and resources are required to load the corresponding page content. The first-screen load probability can be determined based on the importance of the sub-entry file. The higher the importance of the file, the greater the possibility that it needs to be displayed on the first screen, and the higher the first-screen load probability; conversely, the lower the importance of the file, the less likely it is to be displayed on the first screen, and the lower the first-screen load probability.

[0082] For example, the target page portion to be displayed on the first screen of a preset type of page can be pre-specified, along with file data volume thresholds and probability thresholds. After obtaining each sub-entry file, a first sub-entry file matching the target page portion can be selected based on the page portion corresponding to each sub-entry file. Then, for the second sub-entry files other than the first sub-entry file, a third sub-entry file whose file data volume is less than the file data volume threshold and whose first screen load probability is greater than the probability threshold can be selected based on the file data volume and first screen load probability of the second sub-entry file. The first and third sub-entry files can then be used as target sub-entry files matching the first screen content.

[0083] For example, the target page can consist of a header and a body. For multiple sub-entry files corresponding to the target page (i.e., header.html, article.html, and footer.html), header.html and article.html can be designated as the first sub-entry files. Then, if the file size of footer.html is less than a file size threshold and the probability of loading on the first screen is greater than a probability threshold, footer.html can also be designated as a target sub-entry file; otherwise, footer.html cannot be designated as a target sub-entry file.

[0084] Optionally, separate file data volume thresholds and probability thresholds can be pre-set for different page segments, with different thresholds for each segment. For each sub-entry file of the target page, the file data volume threshold and probability threshold can be determined based on the page segment to which the sub-entry file corresponds. If the file data volume of the sub-entry file is less than its corresponding file data volume threshold, and its first-screen load probability is greater than its corresponding probability threshold, then the sub-entry file is selected as the target sub-entry file; otherwise, it is determined that the sub-entry file cannot be selected as the target sub-entry file.

[0085] In this way, by utilizing the page portion corresponding to the sub-entry file, the file data volume of each sub-entry file, and the probability of loading the first screen, it is possible to reasonably select the target sub-entry file that can be used to load the content of the first screen from multiple sub-entry files.

[0086] S102-2: Render the subpage content corresponding to each target sub-entry file based on each target sub-entry file.

[0087] For example, after identifying each target sub-entry file, the page can be rendered sequentially according to the positional relationship of the page portion corresponding to each target sub-entry file within the target page, thus obtaining the subpage content corresponding to each target sub-entry file. Then, the subpage content corresponding to each target sub-entry file can be displayed on the target page, thereby obtaining the first screen content of the target page.

[0088] In one embodiment, when filtering multiple sub-entry files using S102-1, the filtered sub-entry files may include one or more. Regarding S102-2 above, when there are multiple target sub-entry files, the page can be rendered sequentially according to the order in which each target sub-entry file is obtained, thus obtaining the subpage content corresponding to each target sub-entry file.

[0089] For example, the main entry file indicates the reference relationships between the main entry file and each sub-entry file, and these reference relationships indicate the order in which the sub-entry files are retrieved. Specifically, the file access links in the main entry file can be accessed sequentially according to the reference relationships, thereby achieving the sequential retrieval of each sub-entry file. For each target sub-entry file, after retrieving the target sub-entry file, page rendering can be performed based on the target sub-entry file to obtain the sub-page content corresponding to that target sub-entry file, thus achieving the sequential rendering of the content of each sub-page according to the retrieval order of the target sub-entry files.

[0090] Regarding the step of "displaying the subpage content on the target page" in S102, the content of each subpage can be displayed on the target page in sequence according to the generation order of the subpage content corresponding to each target sub-entry file.

[0091] Here, the generation order can match the acquisition order, that is, the target sub-entry file acquired first can also generate the corresponding sub-page content first.

[0092] Specifically, after generating the content of each subpage, the content of that subpage can be directly displayed on the target page. Alternatively, after generating the content of the subpages corresponding to each target sub-entry file, the content of each subpage can be displayed on the target page sequentially according to the generation order.

[0093] For example, based on the target sub-entry file and the reference relationships between each sub-entry file, the header.html file can be obtained first. If the header.html file is confirmed as the target sub-entry file, the page rendering of the header file line by line can be used to obtain the subpage content corresponding to the header section. This subpage content can then be displayed on the target page. Next, based on the reference relationships, the article.html file can be obtained. If the article.html file is confirmed as the target sub-entry file, the page rendering of the article.html file line by line can be used to obtain the subpage content corresponding to the body section. This subpage content can then be displayed on the target page. Finally, based on the reference relationships, the footer.html file can be obtained. If it is determined that the footer.html file is not a target sub-entry file, its subpage content can be left ungenerated. At this point, the subpage content corresponding to the header section and the subpage content corresponding to the body section can be used as the first screen content of the target page.

[0094] Specifically, the steps for rendering subpage content based on the target sub-entry file can be as follows: After obtaining the target sub-entry file, it is inserted into the reserved page section corresponding to the target sub-entry file within the target page using inner HTML. For example, header.html can be inserted into the header of the target page, and article.html into the body of the target page using inner HTML. Then, the page section containing the inserted target sub-entry file can be rendered to obtain and display the corresponding subpage content.

[0095] In this way, by obtaining the sub-entry files based on the reference relationship, and then rendering and displaying the corresponding sub-page content after obtaining the sub-entry files, it is possible to achieve segmented rendering and segmented display of each page part of the target page, thereby improving the speed of displaying page content on the target page and reducing the white screen time of the target page.

[0096] In one embodiment, the target page may include not only static data but also a small amount of dynamic data to be displayed. Therefore, in order to ensure the integrity of the content of the first screen of the target page, the following steps may be performed before executing S102-2:

[0097] Obtain the page data information corresponding to the target page; the page data information includes each piece of dynamic data to be displayed on the target page.

[0098] Here, the dynamic data to be displayed refers to the dynamic data that needs to be shown in the first screen content. Page data information can be actively obtained from the server by the front-end through a request to the data interface corresponding to the target page. This can include complete page data corresponding to the target page. Specifically, the page data information can include the dynamic data to be displayed (such as trending data), page attribute information, page configuration rules, etc. For data other than the dynamic data to be displayed, the page data information corresponding to the trigger operation can be determined and displayed after the first screen content is displayed, in response to the trigger operation for the first screen content.

[0099] In practice, upon responding to an access request for the target page, the page data information of the target page can be obtained by requesting the corresponding data interface from the server. Then, the data carrying dynamic data identifiers can be extracted from the page data information as the dynamic data to be displayed on the target page.

[0100] Furthermore, regarding S102-2, the following steps can be followed:

[0101] S102-2-1: For any target sub-entry file, filter out the target dynamic data that matches the target sub-entry file from the dynamic data to be displayed.

[0102] Here, the target dynamic data that matches the target sub-entry file is the dynamic data to be displayed in the corresponding page section of the target sub-entry file. For example, if dynamic data 1 to be displayed needs to be displayed in the main text section, then dynamic data 1 to be displayed is the target dynamic data that matches the article.html file.

[0103] For example, upon obtaining any target sub-entry file, and before rendering the page based on that target sub-entry file, it can be determined whether there is target dynamic data in the dynamic data to be displayed that matches the target sub-entry file. If not, the page can be rendered directly based on the target sub-entry file to obtain the subpage content. If yes, then the following S102-2-2 can be executed.

[0104] S102-2-2: Render the page based on the target dynamic data and the target sub-entry file to obtain the sub-page content corresponding to the target sub-entry file.

[0105] For example, the location of the target dynamic data in the target sub-entry file can be determined, and then it can be inserted into that location to obtain the updated target sub-entry file. Finally, the page can be rendered based on the updated target sub-entry file to obtain the sub-page content corresponding to the target sub-entry file, wherein the sub-page content includes the target dynamic data.

[0106] In one embodiment, S102-2-2 described above can be implemented according to the following steps:

[0107] S102-2-2-1: Render the page based on the target sub-entry file to obtain the initial page content corresponding to the target sub-entry file.

[0108] For example, the front-end can render the page based on the header.html file to obtain the initial page content corresponding to the header section.

[0109] S102-2-2-2: Determine the target display position of the target dynamic data in the initial page content.

[0110] Taking the target dynamic data as the data corresponding to the header section as an example, we can determine the target display position of the target dynamic data in the initial page content. For example, the target display position can be the head position, the tail position, etc. of the initial page content.

[0111] S102-2-2-3: Render dynamic page content based on target dynamic data, and supplement the target display position in the initial page content with the dynamic page content to obtain the subpage content corresponding to the target sub-entry file.

[0112] Here, dynamic page content refers to the page content corresponding to the target dynamic data.

[0113] For example, the target dynamic data can be rendered to obtain dynamic page content. Then, the dynamic page content can be inserted into the target display position in the initial page content, thereby obtaining the complete subpage content corresponding to the target sub-entry file, which includes the dynamic page content.

[0114] For example, taking recent trending data as the target dynamic data, a header entry for the trending data needs to be inserted in the header section of the target page. However, due to the high variability of trending data, each change requires re-rendering. Therefore, rendering the trending data on the server side and storing it on a CDN would introduce high rendering and CDN maintenance costs, making it impractical. In this case, it is necessary to obtain the trending data by actively requesting page data information from the front end and inserting it into the header of the header.html file, thereby achieving the rendering and display of the target dynamic data. Figure 2 The diagram illustrates a first-screen content provided in an embodiment of this disclosure. At the top of the target page, subpage content corresponding to the header and subpage content corresponding to the main text are displayed. Furthermore, at the top of the subpage content corresponding to the header, dynamic page content corresponding to the target dynamic data (i.e.,...) is also displayed. Figure 2The "Nth trending search term: XXXXXX" in the search results.

[0115] In one embodiment, the target page may include not only the initial screen content but also non-initial screen content. After obtaining the initial screen content of the target page, supplementary rendering of the target page is required to display the non-initial screen content as well. Specifically, after obtaining the initial screen content of the target page, the corresponding non-initial screen page file can be obtained; the non-initial screen page file is used to render the supplementary page content, which is the page content of the target page other than the initial screen content; the non-initial screen page file includes sub-entry files other than the target sub-entry file.

[0116] Here, non-first-screen files can include page resource files related to the target page, excluding the various sub-entry files, as well as files within the sub-entry files that are not used as target sub-entry files. Non-first-screen page files are used to load non-first-screen content; the content to be supplemented is the non-first-screen content, that is, the content that needs to be rendered on the target page. Examples include the publisher information in the footer, the related reading section in the footer, and the related search content in the footer.

[0117] Optionally, if all sub-entry files are used as target sub-entry files, then the sub-entry files will not be included in the non-first screen page files.

[0118] In practice, after rendering the first screen content, the remaining JavaScript resources corresponding to the target page can be requested to obtain the non-first screen page files corresponding to the target page.

[0119] Then, the page can be rendered based on the non-first screen page file to obtain the page content to be supplemented, and the page content to be supplemented can be displayed on the target page.

[0120] For example, after obtaining the content of the non-first-screen page, the React framework can be used to render the page based on the non-first-screen page file to obtain the non-first-screen content corresponding to the target page. The React framework is a JavaScript library for building user interfaces. Then, the non-first-screen content can be added to the target page, thereby achieving full-page rendering and obtaining the complete target page. The process of rendering the non-first-screen content can be referred to the rendering process of the CSR scheme, and will not be elaborated further in this embodiment.

[0121] like Figure 3The diagram illustrates an interaction method provided in this embodiment of the present disclosure. Based on the interaction between the server and the front-end, the page rendering method provided in this embodiment can be used to render a target page of a preset type. For the server, after receiving the backend post (i.e., after obtaining the page information of the configured target page), the server can render the page according to the sub-page content information corresponding to each sub-entry point, obtaining the sub-entry file corresponding to each sub-entry point. Then, each sub-entry file is uploaded to the CDN.

[0122] For the front-end, the initial rendering logic can be executed first. Specifically, in response to a user accessing the target page, multiple sub-entry files corresponding to the target page can be retrieved sequentially from the CDN based on the file access links stored in the main entry file of the target page. Then, the target sub-entry file can be determined from the sub-entry files, and page rendering can be performed based on each target sub-entry file to obtain the sub-page content corresponding to each target sub-entry file. Finally, the sub-page content corresponding to each target sub-entry file can be displayed on the target page, resulting in the initial screen content of the target page.

[0123] Afterwards, the frontend can execute supplementary rendering logic. Specifically, the frontend can request the remaining JavaScript resources corresponding to the target page to obtain the non-first-screen page files. Then, based on the non-first-screen page files, it renders the content to be supplemented and displays it on the target page, thereby achieving full-page rendering and obtaining the complete target page.

[0124] Those skilled in the art will understand that, in the above-described method of the specific implementation, the order in which each step is written does not imply a strict execution order and does not constitute any limitation on the implementation process. The specific execution order of each step should be determined by its function and possible internal logic.

[0125] Based on the same inventive concept, this disclosure also provides a page rendering device corresponding to the page rendering method. Since the principle of the device in this disclosure for solving the problem is similar to the page rendering method described above in this disclosure, the implementation of the device can refer to the implementation of the method, and the repeated parts will not be described again.

[0126] like Figure 4 The diagram shown is a schematic representation of a page rendering apparatus applied to a client according to an embodiment of this disclosure, comprising:

[0127] The acquisition module 401 is used to respond to an access request for a target page of a preset type, and sequentially acquire multiple sub-entry files corresponding to the target page according to the file access links stored in the main entry file of the target page; the multiple sub-entry files are obtained and stored by the server after rendering the sub-page content information of different page parts of the target page; the preset type refers to a page type in which the proportion of static data is greater than or equal to a set threshold.

[0128] The first rendering module 402 is used to render subpage content based on at least one of the sub-entry files, and display the subpage content on the target page to obtain the first screen content of the target page.

[0129] In one possible implementation, the first rendering module 402, when rendering the subpage content based on at least one of the sub-entry files, is used to:

[0130] Based on the page portion corresponding to each of the sub-entry files, the file data volume of each of the sub-entry files, and the first-screen loading probability, a target sub-entry file matching the first-screen content is determined; the first-screen loading probability is used to indicate the probability that the sub-page content corresponding to the sub-entry file can be used as the first-screen content.

[0131] Based on each of the target sub-entry files, the content of the corresponding sub-pages is rendered.

[0132] In one possible implementation, the first rendering module 402, when rendering the subpage content corresponding to each of the target sub-entry files based on each of the target sub-entry files, is used to:

[0133] When there are multiple target sub-entry files, the page is rendered sequentially according to the acquisition order of each target sub-entry file to obtain the sub-page content corresponding to each target sub-entry file.

[0134] And, when displaying the subpage content on the target page, the method is used to:

[0135] Based on the generation order of the subpage content corresponding to each target sub-entry file, the content of each subpage is displayed sequentially on the target page.

[0136] In one possible implementation, before rendering the subpage content corresponding to each of the target sub-entry files based on each target sub-entry file, the acquisition module 401 is further configured to:

[0137] Obtain page data information corresponding to the target page; the page data information includes each piece of dynamic data to be displayed on the target page;

[0138] The first rendering module 402, when rendering the subpage content corresponding to each target sub-entry file based on each target sub-entry file, is used to:

[0139] For any of the target sub-entry files, select the target dynamic data that matches the target sub-entry file from the dynamic data to be displayed;

[0140] The page is rendered based on the target dynamic data and the target sub-entry file to obtain the sub-page content corresponding to the target sub-entry file.

[0141] In one possible implementation, the first rendering module 402, when rendering the page based on the target dynamic data and the target sub-entry file to obtain the subpage content corresponding to the target sub-entry file, is configured to:

[0142] Render the page based on the target sub-entry file to obtain the initial page content corresponding to the target sub-entry file;

[0143] Determine the target display position of the target dynamic data within the initial page content;

[0144] Dynamic page content is rendered based on the target dynamic data, and the dynamic page content is added to the target display position in the initial page content to obtain the subpage content corresponding to the target sub-entry file.

[0145] In one possible implementation, the device further includes:

[0146] After obtaining the first screen content of the target page, the second rendering module 403 is further used for:

[0147] Obtain the non-first-screen page file corresponding to the target page; the non-first-screen page file is used to render the page content to be supplemented, and the page content to be supplemented is the page content in the target page other than the first-screen content; the non-first-screen page file includes sub-entry files other than the target sub-entry file;

[0148] The page is rendered based on the non-first screen page file to obtain the page content to be supplemented, and the page content to be supplemented is displayed on the target page.

[0149] In one possible implementation, the different page portions of the target page include a header portion, a body portion, and a footer portion.

[0150] In one possible implementation, the acquisition module 401, when sequentially acquiring multiple sub-entry files corresponding to the target page based on the file access links stored in the main entry file of the target page, is used to:

[0151] Using the file access links stored in the main entry file of the target page, the sub-entry files corresponding to the target page are sequentially obtained from the content distribution network storing the sub-entry files.

[0152] The processing flow of each module in the device and the interaction flow between each module can be referred to the relevant descriptions in the above method embodiments, and will not be detailed here.

[0153] Based on the same technical concept, embodiments of this application also provide a computer device. (Refer to...) Figure 5 The diagram shown is a structural schematic of a computer device provided in an embodiment of this application, comprising:

[0154] The system includes a processor 51, a memory 52, and a bus 53. The memory 52 stores machine-readable instructions executable by the processor 51. The processor 51 executes these machine-readable instructions, and when executed, performs the following steps: S101: In response to an access request for a target page of a preset type, the processor sequentially obtains multiple sub-entry files corresponding to the target page based on the file access links stored in the main entry file of the target page. These sub-entry files are obtained and stored by the server after rendering the sub-page content information from different parts of the target page. The preset type refers to a page type where the proportion of static data is greater than or equal to a set threshold. S102: Based on at least one sub-entry file, the processor renders the sub-page content and displays it on the target page, obtaining the first screen content of the target page.

[0155] The aforementioned memory 52 includes a main memory 521 and an external memory 522. The main memory 521, also known as internal memory, is used to temporarily store the computational data in the processor 51, as well as the data exchanged with external memory such as a hard disk. The processor 51 exchanges data with the external memory 522 through the main memory 521. When the computer device is running, the processor 51 and the memory 52 communicate through the bus 53, so that the processor 51 executes the execution instructions mentioned in the above method embodiments.

[0156] This disclosure also provides a computer-readable storage medium storing a computer program, which, when executed by a processor, performs the steps of the page rendering method described in the above method embodiments. The storage medium can be a volatile or non-volatile computer-readable storage medium.

[0157] The computer program product of the page rendering method provided in this disclosure includes a computer-readable storage medium storing program code. The instructions included in the program code can be used to execute the steps of the page rendering method described in the above method embodiments. For details, please refer to the above method embodiments, which will not be repeated here.

[0158] The computer program product can be implemented specifically through hardware, software, or a combination thereof. In one alternative embodiment, the computer program product is specifically embodied in a computer storage medium; in another alternative embodiment, the computer program product is specifically embodied in a software product, such as a software development kit (SDK), etc.

[0159] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working process of the device described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here. In the several embodiments provided in this disclosure, it should be understood that the disclosed device and method can be implemented in other ways. The device embodiments described above are merely illustrative. For example, the division of units is only a logical functional division; in actual implementation, there may be other division methods. Furthermore, multiple units or components may be combined, or some features may be ignored or not executed. Another point is that the displayed or discussed mutual coupling or direct coupling or communication connection may be through some communication interfaces; the indirect coupling or communication connection of devices or units may be electrical, mechanical, or other forms.

[0160] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0161] In addition, the functional units in the various embodiments of this disclosure can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0162] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a processor-executable, non-volatile, computer-readable storage medium. Based on this understanding, the technical solution of this disclosure, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this disclosure. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0163] If the technical solution of this application involves personal information, the product using this technical solution has clearly informed the user of the personal information processing rules and obtained the user's voluntary consent before processing the personal information. If the technical solution of this application involves sensitive personal information, the product using this technical solution has obtained the user's separate consent before processing the sensitive personal information, and also meets the requirement of "express consent". For example, at personal information collection devices such as cameras, clear and prominent signs are set up to inform users that they have entered the scope of personal information collection and that personal information will be collected. If an individual voluntarily enters the collection scope, it is deemed that they have agreed to the collection of their personal information; or on the personal information processing device, with clear signs / information informing users of the personal information processing rules, authorization is obtained from the user through pop-up information or by asking the user to upload their personal information; wherein, the personal information processing rules may include information such as the personal information processor, the purpose of personal information processing, the processing method, and the types of personal information processed.

[0164] Finally, it should be noted that the above-described embodiments are merely specific implementations of this disclosure, used to illustrate the technical solutions of this disclosure, and not to limit it. The protection scope of this disclosure is not limited thereto. Although this disclosure has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can still modify or easily conceive of changes to the technical solutions described in the foregoing embodiments, or make equivalent substitutions for some of the technical features, within the scope of the technology disclosed in this disclosure. Such modifications, changes, or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this disclosure, and should all be covered within the protection scope of this disclosure. Therefore, the protection scope of this disclosure should be determined by the protection scope of the claims.

Claims

1. A page rendering method, characterized in that, Applied to the client side, including: In response to an access request for a target page of a preset type, multiple sub-entry files corresponding to the target page are sequentially obtained based on the file access links stored in the main entry file of the target page. The multiple sub-entry files are obtained and stored by the server after rendering the sub-page content information in different parts of the target page. The preset type refers to a page type in which the proportion of static data is greater than or equal to a set threshold. Based on at least one of the sub-entry files, the sub-page content is rendered and displayed on the target page to obtain the first screen content of the target page; Obtain the dynamic data to be displayed from the target page; in response to the existence of target dynamic data in the dynamic data to be displayed that matches the target sub-entry file in at least one sub-entry file, render the obtained sub-page content based on the target dynamic data and the target sub-entry file.

2. The method according to claim 1, characterized in that, The step of rendering subpage content based on at least one of the sub-entry files includes: Based on the page portion corresponding to each of the sub-entry files, the file data volume of each of the sub-entry files, and the first-screen loading probability, a target sub-entry file matching the first-screen content is determined; the first-screen loading probability is used to indicate the probability that the sub-page content corresponding to the sub-entry file can be used as the first-screen content. Based on each of the target sub-entry files, the content of the corresponding sub-pages is rendered.

3. The method according to claim 2, characterized in that, The step of rendering the subpage content corresponding to each target sub-entry file based on each target sub-entry file includes: When there are multiple target sub-entry files, the page is rendered sequentially according to the acquisition order of each target sub-entry file to obtain the sub-page content corresponding to each target sub-entry file. Displaying the subpage content on the target page includes: Based on the generation order of the subpage content corresponding to each target sub-entry file, the content of each subpage is displayed sequentially on the target page.

4. The method according to claim 2, characterized in that, Before rendering the subpage content corresponding to each target sub-entry file based on each target sub-entry file, the method further includes: Obtain page data information corresponding to the target page; the page data information includes each piece of dynamic data to be displayed on the target page; The step of rendering the subpage content corresponding to each target sub-entry file based on each target sub-entry file includes: For any of the target sub-entry files, select the target dynamic data that matches the target sub-entry file from the dynamic data to be displayed; The page is rendered based on the target dynamic data and the target sub-entry file to obtain the sub-page content corresponding to the target sub-entry file.

5. The method according to claim 4, characterized in that, The step of rendering the page based on the target dynamic data and the target sub-entry file to obtain the sub-page content corresponding to the target sub-entry file includes: Render the page based on the target sub-entry file to obtain the initial page content corresponding to the target sub-entry file; Determine the target display position of the target dynamic data within the initial page content; Dynamic page content is rendered based on the target dynamic data, and the dynamic page content is added to the target display position in the initial page content to obtain the subpage content corresponding to the target sub-entry file.

6. The method according to claim 2, characterized in that, After obtaining the first screen content of the target page, the process also includes: Obtain the non-first-screen page file corresponding to the target page; the non-first-screen page file is used to render the page content to be supplemented, and the page content to be supplemented is the page content in the target page other than the first-screen content; the non-first-screen page file includes sub-entry files other than the target sub-entry file; The page is rendered based on the non-first screen page file to obtain the page content to be supplemented, and the page content to be supplemented is displayed on the target page.

7. The method according to claim 1, characterized in that, The target page includes a header, a body, and a footer.

8. The method according to claim 1, characterized in that, The step of sequentially obtaining multiple sub-entry files corresponding to the target page based on the file access links stored in the main entry file of the target page includes: Using the file access links stored in the main entry file of the target page, the sub-entry files corresponding to the target page are sequentially obtained from the content distribution network storing the sub-entry files.

9. A page rendering device, characterized in that, Applied to the client side, including: The acquisition module is used to respond to access requests for target pages of a preset type, and sequentially acquire multiple sub-entry files corresponding to the target page based on the file access links stored in the main entry file of the target page; the multiple sub-entry files are obtained and stored by the server after rendering the sub-page content information in different parts of the target page; the preset type refers to the page type in which the proportion of static data is greater than or equal to a set threshold. The first rendering module is used to render subpage content based on at least one of the sub-entry files, and display the subpage content on the target page to obtain the first screen content of the target page; The acquisition module is further configured to acquire dynamic data to be displayed on the target page, and The first rendering module is further configured to, in response to the existence of target dynamic data in the dynamic data to be displayed that matches a target sub-entry file in at least one sub-entry file, render the obtained sub-page content based on the target dynamic data and the target sub-entry file.

10. A computer device, characterized in that, include: A processor and a memory, the memory storing machine-readable instructions executable by the processor, the processor executing the machine-readable instructions stored in the memory, wherein when the machine-readable instructions are executed by the processor, the processor performs the steps of the page rendering method as described in any one of claims 1 to 8.

11. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, which, when executed by a computer device, performs the steps of the page rendering method as described in any one of claims 1 to 8.

Images