Page rendering method and device, computer device and storage medium

Abstract

The application relates to a page rendering method and device, computer equipment and a storage medium, relates to the technical field of computers, and can be applied to the technical field of finance or other technical fields. The method comprises the following steps: in response to an access request for a target page, a page address of the target page is sent to a server, so that the server sends an HTML file to a client according to the page address; wherein the HTML file contains DOM information of the target page, the DOM information comprises a static storage path of static data corresponding to the target page, and dynamic data corresponding to the target page; the static data is acquired according to the static storage path; and the target page is rendered according to the static data and the dynamic data. In the method, the server returns the complete HTML file to the client, thereby accelerating the efficiency of rendering the page by the client; in addition, the DOM information is contained in the HTML file, so that the content of the page can be conveniently captured and indexed by a search engine, and the SEO optimization effect is improved.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a page rendering method, apparatus, computer device and storage medium, which can be applied to the field of financial technology or other technical fields. Background Technology

[0002] A World Wide Web (WWW) application is an application that can be accessed via the web. Currently, most web applications typically use front-end frameworks such as React and Vue to build their user interfaces. The front-end is used to build the framework for displaying the user interface, while the back-end is responsible for rendering the content of the user interface to obtain the displayed interface.

[0003] Existing technologies typically employ client-side rendering, where the server packages page parameters and the page entry file into a JavaScript (JS) file, which is then embedded into an HTML file. When a client accesses a page, it requests an HTML file from the server, retrieves the JS file from that HTML file, and uses the retrieved JS file to dynamically generate Cascading Style Sheets (CSS) and Document Object Model (DOM) files on the client side. The CSS and DOM files are then used to render the page's content.

[0004] This client-side rendering method has two drawbacks: firstly, it is inefficient at rendering pages; secondly, since the initial page load usually only has a simple HTML skeleton, search engines cannot correctly crawl and index the page content, which is detrimental to search engine optimization (SEO). Summary of the Invention

[0005] Therefore, it is necessary to provide a page rendering method, apparatus, computer equipment, and storage medium to address the aforementioned technical problems, thereby improving page rendering efficiency and SEO optimization effects.

[0006] Firstly, this application provides a page rendering method. This method is applied to a client and includes:

[0007] In response to an access request for a target page, the server sends the page address of the target page to the server, so that the server sends an HTML file to the client based on the page address; wherein the HTML file contains the Document Object Model (DOM) information of the target page, and the DOM information includes the static storage path of the static data corresponding to the target page, and the dynamic data corresponding to the target page;

[0008] Based on the static storage path, obtain the static data corresponding to the target page;

[0009] The target page is rendered based on the static data and the dynamic data.

[0010] In one embodiment, obtaining the static data corresponding to the target page based on the static storage path includes:

[0011] Send a static data retrieval request, including the static storage path, to the server, so that the server retrieves the static data corresponding to the target page from the static resource file according to the static storage path and provides feedback;

[0012] Obtain the static data corresponding to the target page returned by the server.

[0013] In one embodiment, rendering the target page based on the static data and the dynamic data includes:

[0014] Based on the static data, construct a style tree;

[0015] Associate the dynamic data with the style tree;

[0016] The target page is rendered based on the style tree, the dynamic data, and the relationship between the dynamic data and the style tree.

[0017] Secondly, this application provides another page rendering method. This method is applied to a server and includes:

[0018] Obtain the page address of the target page sent by the client in response to the access request to the target page;

[0019] Based on the page address, obtain the dynamic data corresponding to the target page;

[0020] The dynamic data is loaded into an HTML file; wherein the HTML file contains the DOM information of the target page, the DOM information including the static storage path of the static data corresponding to the target page, and the dynamic data corresponding to the target page;

[0021] The HTML file is sent to the client, so that the client can obtain the static data corresponding to the target page according to the static storage path, and render the target page according to the static data and the dynamic data.

[0022] In one embodiment, obtaining the dynamic data corresponding to the target page based on the page address includes:

[0023] Obtain the dynamic data interface file corresponding to the page address;

[0024] Extract the dynamic storage path from the dynamic data interface file;

[0025] Based on the dynamic storage path, retrieve the dynamic data corresponding to the target page from the database.

[0026] In one embodiment, loading the dynamic data into the HTML file includes:

[0027] Convert the dynamic data into a target string;

[0028] Load the target string into the HTML file.

[0029] In one embodiment, after sending the HTML file to the client, the method further includes:

[0030] Obtain the static data retrieval request sent by the client;

[0031] Based on the static storage path in the static data retrieval request, retrieve the static data corresponding to the target page from the static resource file;

[0032] The static data is fed back to the client.

[0033] Thirdly, this application also provides a page rendering apparatus, the apparatus comprising:

[0034] The first sending module is used to send the page address of the target page to the server in response to an access request for the target page, so that the server sends an HTML file to the client according to the page address; wherein, the HTML file contains the DOM information of the target page, and the DOM information includes the static storage path of the static data corresponding to the target page, and the dynamic data corresponding to the target page;

[0035] The first acquisition module is used to acquire static data corresponding to the target page according to the static storage path;

[0036] The rendering module is used to render the target page based on the static data and the dynamic data.

[0037] Fourthly, this application also provides another page rendering apparatus, the apparatus comprising:

[0038] The second acquisition module is used to acquire the page address of the target page sent by the client in response to the access request for the target page;

[0039] The third acquisition module is used to acquire dynamic data corresponding to the target page based on the page address;

[0040] A loading module is used to load the dynamic data into an HTML file; wherein the HTML file contains the DOM information of the target page, the DOM information including the static storage path of the static data corresponding to the target page, and the dynamic data corresponding to the target page;

[0041] The second sending module is used to send the HTML file to the client, so that the client can obtain the static data corresponding to the target page according to the static storage path, and render the target page according to the static data and the dynamic data.

[0042] Fifthly, this application also provides a computer device. The computer device includes a memory and a processor, the memory storing a computer program, and the processor executing the computer program to perform the following steps:

[0043] In response to an access request for a target page, the server sends the page address of the target page to the server, so that the server sends an HTML file to the client based on the page address; wherein, the HTML file contains the DOM information of the target page, and the DOM information includes the static storage path of the static data corresponding to the target page, and the dynamic data corresponding to the target page;

[0044] Based on the static storage path, obtain the static data corresponding to the target page;

[0045] The target page is rendered based on the static data and the dynamic data.

[0046] Sixthly, this application also provides another computer device. The computer device includes a memory and a processor, the memory storing a computer program, and the processor executing the computer program to perform the following steps:

[0047] Obtain the page address of the target page sent by the client in response to the access request to the target page;

[0048] Based on the page address, obtain the dynamic data corresponding to the target page;

[0049] The dynamic data is loaded into an HTML file; wherein the HTML file contains the DOM information of the target page, the DOM information including the static storage path of the static data corresponding to the target page, and the dynamic data corresponding to the target page;

[0050] The HTML file is sent to the client, so that the client can obtain the static data corresponding to the target page according to the static storage path, and render the target page according to the static data and the dynamic data.

[0051] Seventhly, this application also provides a computer-readable storage medium. The computer-readable storage medium stores a computer program thereon, which, when executed by a processor, performs the following steps:

[0052] In response to an access request for a target page, the server sends the page address of the target page to the server, so that the server sends an HTML file to the client based on the page address; wherein, the HTML file contains the DOM information of the target page, and the DOM information includes the static storage path of the static data corresponding to the target page, and the dynamic data corresponding to the target page;

[0053] Based on the static storage path, obtain the static data corresponding to the target page;

[0054] The target page is rendered based on the static data and the dynamic data.

[0055] Eighthly, this application also provides a computer-readable storage medium. The computer-readable storage medium stores a computer program thereon, which, when executed by a processor, performs the following steps:

[0056] Obtain the page address of the target page sent by the client in response to the access request to the target page;

[0057] Based on the page address, obtain the dynamic data corresponding to the target page;

[0058] The dynamic data is loaded into an HTML file; wherein the HTML file contains the DOM information of the target page, the DOM information including the static storage path of the static data corresponding to the target page, and the dynamic data corresponding to the target page;

[0059] The HTML file is sent to the client, so that the client can obtain the static data corresponding to the target page according to the static storage path, and render the target page according to the static data and the dynamic data.

[0060] Ninthly, this application also provides a computer program product. The computer program product includes a computer program that, when executed by a processor, performs the following steps:

[0061] In response to an access request for a target page, the server sends the page address of the target page to the server, so that the server sends an HTML file to the client based on the page address; wherein, the HTML file contains the DOM information of the target page, and the DOM information includes the static storage path of the static data corresponding to the target page, and the dynamic data corresponding to the target page;

[0062] Based on the static storage path, obtain the static data corresponding to the target page;

[0063] The target page is rendered based on the static data and the dynamic data.

[0064] Tenthly, this application also provides a computer program product. The computer program product includes a computer program that, when executed by a processor, performs the following steps:

[0065] Obtain the page address of the target page sent by the client in response to the access request to the target page;

[0066] Based on the page address, obtain the dynamic data corresponding to the target page;

[0067] The dynamic data is loaded into an HTML file; wherein the HTML file contains the DOM information of the target page, the DOM information including the static storage path of the static data corresponding to the target page, and the dynamic data corresponding to the target page;

[0068] The HTML file is sent to the client, so that the client can obtain the static data corresponding to the target page according to the static storage path, and render the target page according to the static data and the dynamic data.

[0069] The aforementioned page rendering method, apparatus, computer equipment, and storage medium involve the client sending the target page's URL to the server. The server then queries the HTML file based on the URL and returns the HTML file to the client. The HTML file contains the DOM information of the target page, including the static storage path of the static data and the dynamic data. The client retrieves the static data based on the static storage path and renders the target page based on the static and dynamic data. In this scheme, the server returns the complete HTML file to the client during page rendering, accelerating the client's page rendering efficiency. Furthermore, the HTML file contains DOM information, facilitating search engine crawling and indexing of the page content, thereby improving SEO optimization. Attached Figure Description

[0070] Figure 1 This application provides an application environment diagram for a page rendering method;

[0071] Figure 2 A flowchart illustrating a page rendering method provided in an embodiment of this application;

[0072] Figure 3 This is a schematic diagram illustrating a process for rendering a target page, provided as an embodiment of this application.

[0073] Figure 4 This is a schematic diagram of another page rendering method provided in an embodiment of this application;

[0074] Figure 5 A flowchart illustrating a static data acquisition method provided in an embodiment of this application;

[0075] Figure 6 Signaling diagram of a page rendering method provided in an embodiment of this application;

[0076] Figure 7 A logical framework diagram for implementing a page rendering method provided in this application embodiment;

[0077] Figure 8 This is a schematic diagram of the structure of a page rendering device provided in an embodiment of this application;

[0078] Figure 9 This is a schematic diagram of another page rendering apparatus provided in an embodiment of this application;

[0079] Figure 10 A schematic diagram of the structure of another page rendering device provided in the embodiments of this application;

[0080] Figure 11 An internal structural diagram of a computer device provided in an embodiment of this application;

[0081] Figure 12 This is an internal structural diagram of a computer device provided in an embodiment of this application. Detailed Implementation

[0082] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0083] The page rendering method provided in this application embodiment can be applied to, for example, Figure 1 In the application environment shown, terminal 102 communicates with server 104 via a network. A data storage system can store the data that server 104 needs to process. The data storage system can be integrated onto server 104 or placed on a cloud or other network server. Optionally, in this embodiment, terminal 102 sends the page address of the target page to server 104. Server 104 queries the HTML file based on the page address and returns the HTML file to terminal 102. The HTML file contains the DOM information of the target page, including the static storage path of the static data corresponding to the target page and the dynamic data corresponding to the target page. Terminal 102 sends a request to server 104 to obtain the static data according to the static storage path, and server 104 returns the static data to terminal 102. Terminal 102 renders the target page based on the static and dynamic data.

[0084] The terminal 102 can be, but is not limited to, various personal computers, laptops, smartphones, tablets, IoT devices, and portable wearable devices. IoT devices can include smart speakers, smart TVs, smart air conditioners, and smart in-vehicle systems. Portable wearable devices can include smartwatches, smart bracelets, and head-mounted devices. The server 104 can be implemented using a standalone server or a server cluster consisting of multiple servers.

[0085] Before introducing the page rendering method provided in the embodiments of this application, let's first introduce the deployment work done by developers when writing page code:

[0086] When developing a webpage, developers first separate the main.js file for each individual page into client.js and server.js. Then, the webpack bundles these two files, creating static resource files and a bundle.json file, which are deployed on the server. The static resource files contain static data needed for page rendering; the bundle.json file contains the dynamic storage paths for dynamic data required for page rendering. Developers also deploy this dynamic data on the server. Furthermore, developers specify the static data retrieval path (i.e., the static storage path) in the HTML file, allowing the client to retrieve the static data from the server based on this path.

[0087] It's important to clarify that static data can be understood as fixed resources on the front end, such as image resources, JavaScript web page interaction logic files, CSS style files, etc. Static data generally doesn't require database queries or program processing; it's a page resource that can be directly displayed. Dynamic data, on the other hand, can be understood as data that requires program processing or is retrieved from a database, and can display different data on the page based on different conditions.

[0088] The following describes the specific implementation process of the page rendering method provided in the embodiments of this application.

[0089] In one embodiment, such as Figure 2 As shown, a page rendering method is provided, which is applied to Figure 1 The method, specifically applied to a client within terminal 102, includes the following steps:

[0090] S201, in response to a request to access a target page, sends the page address of the target page to the server, so that the server sends an HTML file to the client based on the page address.

[0091] The target page is the page that the user visits. When the user visits the target page, they will enter a page address on the client, which initiates a request to access the target page. In response to the user's request to access the target page, the client sends the page address of the target page to the server, so that the server can send the HTML file to the client based on the page address.

[0092] Optionally, the HTML file sent by the server to the client may contain the DOM information of the target page. This DOM information includes the static storage path of the static data corresponding to the target page, as well as the dynamic data. It's understandable that this HTML file containing DOM information can be directly crawled and indexed by search engines, which benefits the webpage's ranking and exposure in search results, thus improving its SEO performance.

[0093] S202, based on the static storage path, obtain the static data corresponding to the target page.

[0094] Optionally, after receiving the HTML file, the client obtains the static storage path from the HTML file, and then requests the corresponding server based on the static resource path to obtain the static data of the target page.

[0095] For example, a client sends a static data retrieval request to a server, including the static storage path, so that the server can retrieve the static data corresponding to the target page from the static resource file according to the static storage path and return it; then the client can retrieve the static data corresponding to the target page returned by the server.

[0096] S203 renders the target page based on static and dynamic data.

[0097] Optionally, after the client obtains the static data, it can render the target page based on the dynamic data in the HTML and the static data obtained by the client.

[0098] In the page rendering method described above, the client sends the target page's URL to the server. The server then queries the HTML file based on the URL and returns the HTML file to the client. The HTML file contains the DOM information of the target page, including the static storage path of the static data corresponding to the target page and the dynamic data corresponding to the target page. The client retrieves the static data based on the static storage path and renders the target page based on the static and dynamic data. This scheme, by returning the complete HTML file to the client during page rendering, speeds up the client's page rendering efficiency. Furthermore, the HTML file contains DOM information, which facilitates search engine crawling and indexing of the page content, thereby improving SEO optimization.

[0099] Figure 3 This is a schematic flowchart illustrating the rendering of a target page, provided as an embodiment of this application. Based on the above embodiments, this application specifically relates to a detailed process for rendering a target page based on static and dynamic data. See also... Figure 3 The method includes the following:

[0100] S301, Build a style tree based on static data.

[0101] In this embodiment of the application, the style tree can be understood as a style tree structure constructed based on the CSS file.

[0102] Optionally, after obtaining the static data, the client extracts the CSS file for the target page from the static data, parses the CSS file, and then constructs a style tree based on the parsed content. CSS is a stylesheet language used to describe the rendering of HTML or XML documents (including XML branch languages ​​such as SVG, MathML, or XHTML). CSS describes how elements should be rendered on screen, print, audio, and other media.

[0103] S302 associates dynamic data with the style tree.

[0104] Optionally, the client can associate dynamic data with the style tree. For example, if the target page is an online store page, the dynamic data could be information such as the price and details of products on the target page. Associating dynamic data with the style tree can be understood as determining the specific form in which the dynamic data is displayed. For example, determining where the price data is displayed on the target page, and what font and color it uses.

[0105] S303 renders the target page based on the style tree, dynamic data, and the relationship between the dynamic data and the style tree.

[0106] Optionally, based on the style tree, dynamic data, and the relationship between dynamic data and the style tree, the display position and display style of dynamic data can be determined, and then the target page can be rendered based on this display information.

[0107] In this embodiment, the client constructs a style tree based on the CSS file in the static data and associates the style tree with the dynamic data loaded in the HTML file to complete the page rendering. Compared with the client-side rendering method, this improves the efficiency of page rendering.

[0108] In one embodiment, such as Figure 4 As shown, Figure 4 This is a schematic diagram of another page rendering method provided in an embodiment of this application, applied to... Figure 1 Taking server 104 as an example, the method includes the following steps:

[0109] S401, Obtain the page address of the target page sent by the client in response to the access request for the target page.

[0110] Optionally, when a user accesses a target page, they will enter a page address on the client, thus initiating a request to access the target page. In response to the user's request to access the target page, the client sends the page address of the target page to the server, and the server obtains the page address of the target page sent by the client in response to the request to access the target page.

[0111] S402: Obtain the dynamic data corresponding to the target page based on the page address.

[0112] Optionally, the server can retrieve the dynamic data corresponding to the target page from the database based on the page address. Alternatively, the server can retrieve the dynamic data interface file corresponding to the page address; extract the dynamic storage path from the dynamic data interface file; it should be understood that this dynamic data interface file is a bundle JSON file, which includes the dynamic storage path of the dynamic data required for page rendering, i.e., the path where the dynamic data is stored. Then, the server retrieves the dynamic data corresponding to the target page from the database based on the dynamic storage path.

[0113] S403 loads dynamic data into an HTML file.

[0114] Optionally, after obtaining the dynamic data corresponding to the target page, the server can load the dynamic data into the HTML file. For example, the server can convert the dynamic data into a target string; then load the target string into the HTML file to achieve the purpose of loading the dynamic data into the HTML file.

[0115] The HTML file contains the DOM information of the target page, including the static storage path of the static data corresponding to the target page, as well as the dynamic data corresponding to the target page.

[0116] Understandably, this HTML file contains DOM information, which can be directly crawled and indexed by search engines. This is beneficial for the webpage's ranking and exposure in search results, thus improving the webpage's SEO optimization effect.

[0117] S404 sends the HTML file to the client, so that the client can obtain the static data corresponding to the target page according to the static storage path, and render the target page based on the static data and dynamic data.

[0118] Optionally, the server sends the HTML file to the client, so that the client can retrieve the static data corresponding to the target page according to the static storage path, and render the target page based on the static data and dynamic data.

[0119] In the page rendering method described above, the client sends the target page's URL to the server. The server then queries the HTML file based on the URL and returns the HTML file to the client. The HTML file contains the DOM information of the target page, including the static storage path of the static data corresponding to the target page and the dynamic data corresponding to the target page. The client retrieves the static data based on the static storage path and renders the target page based on the static and dynamic data. This scheme, by returning the complete HTML file to the client during page rendering, speeds up the client's page rendering efficiency. Furthermore, the HTML file contains DOM information, which facilitates search engine crawling and indexing of the page content, thereby improving SEO optimization.

[0120] Figure 5 This is a flowchart illustrating a static data acquisition method provided in an embodiment of this application. Based on the above embodiments, this application specifically relates to a detailed process of client-server interaction to acquire static data. See also... Figure 5 The method includes the following:

[0121] S501, retrieve static data retrieval request sent by the client.

[0122] Optionally, the server obtains a static data retrieval request sent by the client, which includes the static storage path of the static data.

[0123] S502, based on the static storage path in the static data retrieval request, retrieve the static data corresponding to the target page from the static resource file.

[0124] Optionally, the server retrieves the static data corresponding to the target page from the static resource files based on the static storage path in the static data retrieval request. It should be understood that static resource files are pre-deployed on the server by the page developers.

[0125] S503 sends static data back to the client.

[0126] Optionally, after the server retrieves the static data corresponding to the target page from the static resource file, it sends the retrieved static data back to the client so that the client can render the target page.

[0127] In this embodiment, the client retrieves static data from the database based on the static storage path. Compared to client-side rendering, which generates static data through JS files, this method speeds up the retrieval of static data and further improves the efficiency of page rendering.

[0128] See Figure 6 , Figure 6This is a signaling diagram illustrating a page rendering method provided in an embodiment of this application. The flowchart shows the interaction between the client and the server, specifically including the following steps:

[0129] S601, in response to the user's request to access the target page, the client sends the page address of the target page to the server.

[0130] When a user initiates a request to access a target page on the client side, the user typically enters a URL in the client; this URL is used to access the target page, and is thus the page address of the target page. The client responds to the user's request by sending this page address to the server.

[0131] S602, the server obtains the dynamic data corresponding to the target page based on the received page address.

[0132] After receiving the page address sent by the client, the server performs the operation of retrieving the dynamic data corresponding to the target page.

[0133] Specifically, the server retrieves the corresponding dynamic data interface file based on the page address. This dynamic data interface file can be understood as a bundle JSON file. Then, the server extracts the dynamic storage path from the dynamic data interface file. Finally, based on the dynamic storage path, the server retrieves the dynamic data corresponding to the target page from the database.

[0134] S603, the server loads dynamic data into an HTML file.

[0135] After retrieving the dynamic data, the server renders it into the template in the HTML file. The server also includes the DOM information parsed from the bundle JSON file in the HTML file.

[0136] S604, the server sends the HTML file to the client.

[0137] The server sends the HTML file to the client. It's important to note that this HTML file includes DOM information, which can be directly crawled and indexed by search engines. This benefits the webpage's ranking and exposure in search results, improving its SEO performance.

[0138] S605, the client obtains the static storage path of static data in the HTML file.

[0139] The client retrieves the static storage path of static data from the HTML file to access the static data. It's important to note that during page development, developers will write the path to the static data into the HTML file.

[0140] S606, the client sends the static storage path to the server.

[0141] After the client obtains the static storage path of static data in the HTML file, it requests the corresponding server based on the static resource path, sending the static storage path of the static data to the server so that the static data can be retrieved from the static resource file on the server. It should be noted that this static resource file is generated by bundling the client.js entry file using the webpack bundling tool and is pre-deployed on the server.

[0142] S607, the server retrieves static data from the static resource file based on the static storage path.

[0143] After receiving the static storage path, the server retrieves the static data from the static resource files on the server based on the static storage path.

[0144] S608, the server sends static data to the client.

[0145] After retrieving static data from the static resource files, the server sends the static data to the client. This static data includes page navigation logic data, image data, style data, etc.

[0146] S609: The client renders the target page based on static and dynamic data.

[0147] After receiving static data, the client parses the style data within it and constructs a style tree from the parsed style data. This style tree is then mapped to each tag in the DOM information, which includes dynamic data. Each tag is then rendered according to the styles in the style tree. This process ultimately renders the target page corresponding to the target page address.

[0148] In the page rendering method of this application embodiment, the client sends the page address of the target page to the server. The server then queries the HTML file based on the page address and returns the HTML file to the client. The HTML file contains the Document Object Model (DOM) information of the target page. The DOM information includes the static storage path of the static data corresponding to the target page and the dynamic data corresponding to the target page. The client retrieves the static data according to the static storage path and renders the target page based on the static and dynamic data. In this scheme, during the page rendering process, the server returns the complete HTML file to the client, accelerating the client's page rendering efficiency. Furthermore, the HTML file contains DOM information, which facilitates search engine crawling and indexing of the page content, thereby improving SEO optimization.

[0149] The specific processes of S601-S609 described above can be found in the description of the above method embodiments. Their implementation principles and technical effects are similar, and will not be repeated here.

[0150] See Figure 7 , Figure 7 This is a logical framework diagram of a page rendering method provided in an embodiment of this application.

[0151] When developers develop a webpage, they first separate the main.js file, the entry file for each individual page, into client.js and server.js entry files.

[0152] Developers use the webpack bundling tool to bundle the client.js and server.js entry files, resulting in static resource files (JS, CSS, Img) and a bundle json file. The static resource files and the bundle json file are then deployed on the server, with the static resource files deployed in the target folder on the server.

[0153] After receiving the target page address request from the client, the server matches the target page address to the bundle JSON file, obtains the dynamic storage path of the dynamic data from the bundle JSON file, retrieves the dynamic data from the database, renders the dynamic data into the template of the HTML file, and then returns the HTML file containing the dynamic data and other DOM information to the client. The dynamic data and other DOM information are stored in the HTML file as strings.

[0154] The client obtains the HTML file, retrieves the static storage path for the static data within the HTML file, and then locates the corresponding server based on the static storage path. The server retrieves the static resources from the static resource file based on the static storage path and returns the static resources to the client. The static data includes page navigation logic data, image data, style data, etc.

[0155] The page rendering method provided in this application embodiment requests the server every time a user accesses a page address, thus realizing server-side rendering of multi-page applications. On the one hand, changing the application from single-page to multi-page can effectively reduce the resource size of modules and improve page loading speed and first-screen rendering speed. On the other hand, it ensures that the source code of each page contains DOM information, which is beneficial to the page's ranking and exposure in search results, improving the page's SEO optimization effect. Furthermore, the page rendering method provided in this application embodiment embodiment is a server-side and multi-page application modification based on an existing single-page web application (SPA), which can effectively reduce reconstruction costs and risks.

[0156] It should be understood that although the steps in the flowcharts of the embodiments described above are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the embodiments described above may include multiple steps or multiple stages. These steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the steps or stages of other steps.

[0157] Based on the same inventive concept, this application also provides a page rendering apparatus for implementing the page rendering method described above. The solution provided by this apparatus is similar to the implementation described in the above method; therefore, the specific limitations in one or more page rendering apparatus embodiments provided below can be found in the limitations of the page rendering method described above, and will not be repeated here.

[0158] In one embodiment, such as Figure 8 As shown, Figure 8 This is a schematic diagram of a page rendering apparatus provided in an embodiment of this application. The apparatus includes:

[0159] The first sending module 10 is used to send the page address of the target page to the server in response to the access request for the target page, so that the server sends an HTML file to the client according to the page address; wherein, the HTML file contains the DOM information of the target page, and the DOM information includes the static storage path of the static data corresponding to the target page, and the dynamic data corresponding to the target page;

[0160] The first acquisition module 20 is used to acquire the static data corresponding to the target page according to the static storage path;

[0161] Rendering module 30 is used to render the target page based on static and dynamic data.

[0162] In the page rendering device described above, the client sends the target page's address to the server. The server then queries the HTML file based on the address and returns the HTML file to the client. The HTML file contains the Document Object Model (DOM) information of the target page. The DOM information includes the static storage path of the static data corresponding to the target page, as well as the dynamic data corresponding to the target page. The client retrieves the static data based on the static storage path and renders the target page based on the static and dynamic data. This scheme, during page rendering, allows the server to return the complete HTML file to the client, accelerating the client's page rendering efficiency. Furthermore, the HTML file contains DOM information, facilitating search engine crawling and indexing of the page content, thereby improving SEO optimization.

[0163] In one embodiment, the first acquisition module 20 is specifically used for:

[0164] Send a static data retrieval request to the server, including the static storage path, so that the server can retrieve the static data corresponding to the target page from the static resource file according to the static storage path and return it; retrieve the static data corresponding to the target page returned by the server.

[0165] In one embodiment, the rendering module 30 is specifically used for:

[0166] Build a style tree based on static data; associate dynamic data with the style tree; render the target page based on the style tree, dynamic data, and the relationship between dynamic data and the style tree.

[0167] In one embodiment, such as Figure 9 As shown, Figure 9 This is a schematic diagram of another page rendering apparatus provided in an embodiment of this application. The apparatus includes:

[0168] The second acquisition module 40 is used to acquire the page address of the target page sent by the client in response to the access request for the target page.

[0169] The third acquisition module 50 is used to acquire the dynamic data corresponding to the target page based on the page address.

[0170] Loading module 60 is used to load dynamic data into an HTML file; wherein the HTML file contains DOM information of the target page, including the static storage path of the static data corresponding to the target page, and the dynamic data corresponding to the target page.

[0171] The second sending module 70 is used to send the HTML file to the client so that the client can obtain the static data corresponding to the target page according to the static storage path, and render the target page according to the static data and dynamic data.

[0172] In the page rendering device described above, the client sends the target page's address to the server. The server then queries the HTML file based on the address and returns the HTML file to the client. The HTML file contains the Document Object Model (DOM) information of the target page. The DOM information includes the static storage path of the static data corresponding to the target page, as well as the dynamic data corresponding to the target page. The client retrieves the static data based on the static storage path and renders the target page based on the static and dynamic data. This scheme, during page rendering, allows the server to return the complete HTML file to the client, accelerating the client's page rendering efficiency. Furthermore, the HTML file contains DOM information, facilitating search engine crawling and indexing of the page content, thereby improving SEO optimization.

[0173] In one embodiment, the third acquisition module 50 is specifically used for:

[0174] Obtain the dynamic data interface file corresponding to the page address; extract the dynamic storage path from the dynamic data interface file; and retrieve the dynamic data corresponding to the target page from the database based on the dynamic storage path.

[0175] In one embodiment, the loading module 60 is specifically used for:

[0176] Convert dynamic data into a target string; and load the target string into an HTML file.

[0177] In one embodiment, in Figure 9 On the basis of, such as Figure 10 As shown, Figure 10 This is a schematic diagram of another page rendering apparatus provided in an embodiment of this application. The apparatus further includes:

[0178] The fourth acquisition module 80 is used to acquire the static data acquisition request sent by the client; and to acquire the static data corresponding to the target page from the static resource file according to the static storage path in the static data acquisition request.

[0179] Feedback module 90 is used to send static data back to the client.

[0180] Each module in the aforementioned page rendering device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device, or stored in the memory of a computer device as software, so that the processor can call and execute the operations corresponding to each module.

[0181] In one embodiment, a computer device is provided, which may be a server, and its internal structure diagram may be as follows: Figure 11 As shown, the computer device includes a processor, memory, and a network interface connected via a system bus. The processor provides computing and control capabilities. The memory includes a non-volatile storage medium and internal memory. The non-volatile storage medium stores an operating system, computer programs, and a database. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage medium. The database stores resource data required for page rendering. The network interface communicates with external terminals via a network connection. When the computer program is executed by the processor, it implements the page rendering method on the application server side in this embodiment.

[0182] In one embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be as follows: Figure 12 As shown, the computer device includes a processor, memory, communication interface, display screen, and input device connected via a system bus. The processor provides computing and control capabilities. The memory includes a non-volatile storage medium and internal memory. The non-volatile storage medium stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage medium. The communication interface is used for wired or wireless communication with external terminals; wireless communication can be achieved through Wi-Fi, mobile cellular networks, NFC (Near Field Communication), or other technologies. When the computer program is executed by the processor, it implements the page rendering method applied to the client side in this embodiment. The display screen can be a liquid crystal display (LCD) or an e-ink display. The input device can be a touch layer covering the display screen, buttons, a trackball, or a touchpad mounted on the computer device casing, or an external keyboard, touchpad, or mouse.

[0183] Those skilled in the art will understand that Figure 11 , Figure 12The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0184] In one embodiment, a computer device is provided for a client, the computer device including a memory and a processor, the memory storing a computer program, the processor executing the computer program to perform the following steps:

[0185] In response to a request to access a target page, the server sends the page address of the target page, so that the server can send an HTML file to the client based on the page address. The HTML file contains the DOM information of the target page, including the static storage path of the static data corresponding to the target page and the dynamic data corresponding to the target page.

[0186] Based on the static storage path, retrieve the static data corresponding to the target page;

[0187] The target page is rendered based on static and dynamic data.

[0188] In one embodiment, the processor, when executing a computer program, also performs the following steps:

[0189] Send a static data retrieval request to the server, including the static storage path, so that the server can retrieve the static data corresponding to the target page from the static resource file according to the static storage path and return it; retrieve the static data corresponding to the target page returned by the server.

[0190] In one embodiment, the processor, when executing a computer program, also performs the following steps:

[0191] Build a style tree based on static data; associate dynamic data with the style tree; render the target page based on the style tree, dynamic data, and the relationship between dynamic data and the style tree.

[0192] In one embodiment, a computer device is provided for use as a server, the computer device including a memory and a processor, the memory storing a computer program, the processor executing the computer program to perform the following steps:

[0193] Obtain the page address of the target page sent by the client in response to the access request to the target page;

[0194] Based on the page address, obtain the dynamic data corresponding to the target page; load the dynamic data into the HTML file; the HTML file contains the DOM information of the target page, including the static storage path of the static data corresponding to the target page, and the dynamic data corresponding to the target page;

[0195] The HTML file is sent to the client so that the client can retrieve the static data corresponding to the target page according to the static storage path, and render the target page based on the static data and dynamic data.

[0196] In one embodiment, the processor, when executing a computer program, also performs the following steps:

[0197] Obtain the dynamic data interface file corresponding to the page address; extract the dynamic storage path from the dynamic data interface file; and retrieve the dynamic data corresponding to the target page from the database based on the dynamic storage path.

[0198] In one embodiment, the processor, when executing a computer program, also performs the following steps:

[0199] Convert dynamic data into a target string; load the target string into an HTML file.

[0200] In one embodiment, the processor, when executing a computer program, also performs the following steps:

[0201] Get the static data retrieval request sent by the client; retrieve the static data corresponding to the target page from the static resource file according to the static storage path in the static data retrieval request; and send the static data back to the client.

[0202] In one embodiment, a computer-readable storage medium is provided for a client, the computer-readable storage medium storing a computer program that, when executed by a processor, performs the following steps:

[0203] In response to a request to access a target page, the server sends the page address of the target page, so that the server can send an HTML file to the client based on the page address. The HTML file contains the DOM information of the target page, including the static storage path of the static data corresponding to the target page and the dynamic data corresponding to the target page.

[0204] Based on the static storage path, retrieve the static data corresponding to the target page;

[0205] The target page is rendered based on static and dynamic data.

[0206] In one embodiment, when the computer program is executed by a processor, it also performs the following steps:

[0207] Send a static data retrieval request to the server, including the static storage path, so that the server can retrieve the static data corresponding to the target page from the static resource file according to the static storage path and return it; retrieve the static data corresponding to the target page returned by the server.

[0208] In one embodiment, when the computer program is executed by a processor, it also performs the following steps:

[0209] Build a style tree based on static data; associate dynamic data with the style tree; render the target page based on the style tree, dynamic data, and the relationship between dynamic data and the style tree.

[0210] In one embodiment, a computer-readable storage medium is provided for use in a server, the computer-readable storage medium storing a computer program that, when executed by a processor, performs the following steps:

[0211] Obtain the page address of the target page sent by the client in response to the access request to the target page;

[0212] Based on the page address, obtain the dynamic data corresponding to the target page;

[0213] Load dynamic data into the TML file; the HTML file contains the DOM information of the target page, including the static storage path of the static data corresponding to the target page, and the dynamic data corresponding to the target page.

[0214] The HTML file is sent to the client so that the client can retrieve the static data corresponding to the target page according to the static storage path, and render the target page based on the static data and dynamic data.

[0215] In one embodiment, when the computer program is executed by a processor, it also performs the following steps:

[0216] Obtain the dynamic data interface file corresponding to the page address; extract the dynamic storage path from the dynamic data interface file; and retrieve the dynamic data corresponding to the target page from the database based on the dynamic storage path.

[0217] In one embodiment, when the computer program is executed by a processor, it also performs the following steps:

[0218] Convert dynamic data into a target string; load the target string into an HTML file.

[0219] In one embodiment, when the computer program is executed by a processor, it also performs the following steps:

[0220] Get the static data retrieval request sent by the client; retrieve the static data corresponding to the target page from the static resource file according to the static storage path in the static data retrieval request; and send the static data back to the client.

[0221] In one embodiment, a computer program product is provided, including a computer program that, when executed by a processor, implements the page rendering method described in any of the above embodiments.

[0222] In response to a request to access a target page, the server sends the page address of the target page, so that the server can send an HTML file to the client based on the page address. The HTML file contains the DOM information of the target page, including the static storage path of the static data corresponding to the target page and the dynamic data corresponding to the target page.

[0223] Based on the static storage path, retrieve the static data corresponding to the target page;

[0224] The target page is rendered based on static and dynamic data.

[0225] In one embodiment, when the computer program is executed by a processor, it also performs the following steps:

[0226] Send a static data retrieval request to the server, including the static storage path, so that the server can retrieve the static data corresponding to the target page from the static resource file according to the static storage path and return it; retrieve the static data corresponding to the target page returned by the server.

[0227] In one embodiment, when the computer program is executed by a processor, it also performs the following steps:

[0228] Build a style tree based on static data; associate dynamic data with the style tree; render the target page based on the style tree, dynamic data, and the relationship between dynamic data and the style tree.

[0229] In one embodiment, another computer program product is provided, comprising a computer program that, when executed by a processor, performs the following steps:

[0230] Obtain the page address of the target page sent by the client in response to the access request to the target page;

[0231] Based on the page address, obtain the dynamic data corresponding to the target page;

[0232] Load dynamic data into an HTML file; the HTML file contains the DOM information of the target page, including the static storage path of the static data corresponding to the target page, and the dynamic data corresponding to the target page.

[0233] The HTML file is sent to the client so that the client can retrieve the static data corresponding to the target page according to the static storage path, and render the target page based on the static data and dynamic data.

[0234] In one embodiment, when the computer program is executed by a processor, it also performs the following steps:

[0235] Obtain the dynamic data interface file corresponding to the page address; extract the dynamic storage path from the dynamic data interface file; and retrieve the dynamic data corresponding to the target page from the database based on the dynamic storage path.

[0236] In one embodiment, when the computer program is executed by a processor, it also performs the following steps:

[0237] Convert dynamic data into a target string; load the target string into an HTML file.

[0238] In one embodiment, when the computer program is executed by a processor, it also performs the following steps:

[0239] Get the static data retrieval request sent by the client; retrieve the static data corresponding to the target page from the static resource file according to the static storage path in the static data retrieval request; and send the static data back to the client.

[0240] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. Any references to memory, databases, or other media used in the embodiments provided in this application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM). The databases involved in the embodiments provided in this application may include at least one type of relational database and non-relational database. Non-relational databases may include, but are not limited to, blockchain-based distributed databases. The processors involved in the embodiments provided in this application may be general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic devices, quantum computing-based data processing logic devices, etc., and are not limited to these.

[0241] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0242] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of this patent application. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this application should be determined by the appended claims.

Claims

1. A page rendering method, characterized in that, Applied to a client, the method includes: In response to an access request for a target page, the server sends the page address of the target page to the server, so that the server sends an HTML file to the client based on the page address; wherein, the HTML file contains the Document Object Model (DOM) information of the target page, the DOM information including the static storage path of the static data corresponding to the target page, and the dynamic data corresponding to the target page; the method further includes: after obtaining the target page address request sent by the client, the server matches the bundle json file according to the target page address and obtains the dynamic storage path of the dynamic data; Based on the static storage path, obtain the static data corresponding to the target page; The target page is rendered based on the static data and the dynamic data; Rendering the target page based on the static data and the dynamic data includes: Based on the static data, construct a style tree; Associate the dynamic data with the style tree; The target page is rendered based on the style tree, the dynamic data, and the relationship between the dynamic data and the style tree.

2. The method according to claim 1, characterized in that, The step of obtaining the static data corresponding to the target page according to the static storage path includes: Send a static data retrieval request, including the static storage path, to the server, so that the server retrieves the static data corresponding to the target page from the static resource file according to the static storage path and provides feedback; Obtain the static data corresponding to the target page returned by the server.

3. A page rendering method, characterized in that, Applied to a server, the method includes: Obtain the page address of the target page sent by the client in response to the access request to the target page; Based on the page address, obtain the dynamic data corresponding to the target page; The dynamic data is loaded into an HTML file; wherein the HTML file contains the DOM information of the target page, the DOM information includes the static storage path of the static data corresponding to the target page, and the dynamic data corresponding to the target page; the method further includes: after the server receives the target page address request sent by the client, it obtains a bundle json file based on the page address and obtains the dynamic storage path of the dynamic data; The HTML file is sent to the client, so that the client can obtain the static data corresponding to the target page according to the static storage path, and render the target page according to the static data and the dynamic data; The client renders the target page based on the static data and the dynamic data, including: Based on the static data, construct a style tree; Associate the dynamic data with the style tree; The target page is rendered based on the style tree, the dynamic data, and the relationship between the dynamic data and the style tree.

4. The method according to claim 3, characterized in that, The step of obtaining the dynamic data corresponding to the target page based on the page address includes: Obtain the dynamic data interface file corresponding to the page address; Extract the dynamic storage path from the dynamic data interface file; Based on the dynamic storage path, retrieve the dynamic data corresponding to the target page from the database.

5. The method according to claim 3, characterized in that, The step of loading the dynamic data into the HTML file includes: Convert the dynamic data into a target string; Load the target string into the HTML file.

6. The method according to claim 3, characterized in that, After sending the HTML file to the client, the method further includes: Obtain the static data retrieval request sent by the client; Based on the static storage path in the static data retrieval request, retrieve the static data corresponding to the target page from the static resource file; and send the static data back to the client.

7. A page rendering device, characterized in that, The device includes: The first sending module is used to send the page address of the target page to the server in response to an access request for the target page, so that the server sends an HTML file to the client according to the page address; wherein, the HTML file contains the DOM information of the target page, and the DOM information includes the static storage path of the static data corresponding to the target page, and the dynamic data corresponding to the target page; The first acquisition module is used to acquire static data corresponding to the target page according to the static storage path; A rendering module is used to render the target page based on the static data and the dynamic data; The rendering module is also used to construct a style tree based on static data; associate dynamic data with the style tree; and render the target page based on the style tree, dynamic data, and the association between dynamic data and the style tree. After receiving the target page address request sent by the client, the server obtains the bundlejson file based on the page address and obtains the dynamic storage path of the dynamic data.

8. A page rendering apparatus, characterized in that, The device includes: The second acquisition module is used to acquire the page address of the target page sent by the client in response to the access request for the target page; The third acquisition module is used to acquire dynamic data corresponding to the target page based on the page address; A loading module is used to load the dynamic data into an HTML file; wherein the HTML file contains the DOM information of the target page, the DOM information including the static storage path of the static data corresponding to the target page, and the dynamic data corresponding to the target page; The second sending module is used to send the HTML file to the client, so that the client can obtain the static data corresponding to the target page according to the static storage path, and render the target page according to the static data and the dynamic data; The device is further configured to: construct a style tree based on the static data; associate the dynamic data with the style tree; and render the target page based on the style tree, the dynamic data, and the association between the dynamic data and the style tree. The device is also used to obtain a bundle json file based on the page address after receiving a target page address request sent by the client, and to obtain the dynamic storage path of the dynamic data.

9. A computer device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 6.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 6.

11. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 6.

Images