Page rendering method and device, medium and equipment
By combining server-side rendering and pre-rendering technology, the problem of slow page rendering during large traffic access is solved, efficient page rendering and loading is achieved, and user experience is improved.
Patent Information
- Application Number
- CN202411613198.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-11-12
- Publication Date
- 2025-03-07
AI Technical Summary
Existing page rendering methods are slow to render when accessing large traffic, resulting in a significant drop in page loading speed and affecting the user experience.
By combining server-side rendering and pre-rendering technologies, dynamic content and static content in the access request are determined. Dynamic content is rendered using server rendering, and static content is rendered in advance using pre-rendering. The two integrate to generate a complete HTML page and send it to the client.
It improves the page rendering speed, ensures the rendering speed and page loading speed during high traffic access, significantly improving the user experience.
Smart Images
Figure CN119577267A_ABST
Abstract
Description
Technical Field
[0001] The present invention belongs to the technical field of page rendering, and in particular relates to a page rendering method, device, medium and equipment. Background Art
[0002] With the rapid development of Internet technology, the use of web pages or APPs to display pages has gradually become a common method. Since web pages contain multiple components, such as text, pictures, audio, video, etc., it is necessary to render the web page according to the corresponding data of the content to be displayed before displaying it to users.
[0003] Common page rendering methods include client-side rendering and server-side rendering. Client-side rendering is when the user initiates an access request on the client. After receiving the access request, the server returns a front-end application file to the client. The client downloads and executes the file. After execution, it performs preliminary rendering through the framework, and then obtains dynamic data through the external API interface, and adds the dynamic data to the preliminary rendered page. Since the client needs to download the application file and then start rendering when the user visits for the first time, the first screen loading time is longer when the client is rendering. Server-side rendering is when the server receives the client request, generates a complete HTML page according to the user request and sends the HTML page to the client. After receiving the HTML page, the client directly renders and displays it, which can quickly present the page content, load the first screen quickly, and shorten the user's waiting time. Therefore, server-side rendering is widely used in Web development.
[0004] Some websites or applications have unique, professional or timely features, which attract a large number of visitors, so the number of visits to the website or application increases dramatically. When using server-side page rendering, since the server directly generates the page, the server load is high when there is a large amount of traffic access, and the server rendering speed will be affected, resulting in a significant decrease in page loading speed, which in turn affects the user experience. Summary of the invention
[0005] In view of this, the present invention provides a page rendering method, device, medium and equipment, the main purpose of which is to solve the problem that the existing page rendering method causes slow rendering when accessed with large traffic, resulting in a significant decrease in page loading speed, thereby affecting the user experience.
[0006] According to one aspect of the present application, a page rendering method is provided, the method comprising:
[0007] Obtaining an access request, and determining dynamic content and static content in a target page indicated by the access request;
[0008] Rendering the dynamic content based on a server-side rendering method to obtain a first page fragment corresponding to the dynamic content;
[0009] Rendering the static content based on a pre-rendering method to obtain a second page fragment corresponding to the static content;
[0010] The first page fragment and the second page fragment are integrated to generate a complete HTML page, and the complete HTML page is sent to a client so that the client displays the complete HTML page.
[0011] Optionally, determining the dynamic content and static content in the target page indicated by the access request includes:
[0012] Parsing the access request to obtain the request path, file type, query parameters and user identity information of the target page;
[0013] Determine the static content in the target page based on the request path and the file type;
[0014] Based on the query parameter and the user identity information, dynamic content in the target page is determined.
[0015] Optionally, rendering the dynamic content based on a server-side rendering method to obtain a first page fragment corresponding to the dynamic content includes:
[0016] Get dynamic content from a preset database;
[0017] Determine the module category corresponding to the dynamic content in the target page, and obtain a first HTML template matching the module category;
[0018] The dynamic content is inserted into the first HTML template to obtain a first page fragment corresponding to the dynamic content.
[0019] Optionally, rendering the static content based on a pre-rendering method to obtain a second page fragment corresponding to the static content includes:
[0020] Based on the access request, obtaining a second HTML template corresponding to the target page;
[0021] The static content is obtained, and the static content is inserted into the second HTML template to obtain a second page fragment corresponding to the static content.
[0022] Optionally, the step of integrating the first page fragment and the second page fragment to generate a complete HTML page includes:
[0023] The first page fragment is inserted into the corresponding position of the second page fragment through the template engine to obtain a complete HTML page.
[0024] Optionally, the first page fragment is stored in a first cache area of a preset distributed cache area, and the second page fragment is stored in a second cache area of a preset distributed cache area, wherein the storage time of the page fragment in the first cache area is shorter than the storage time of the page fragment in the second cache area.
[0025] Optionally, after the client displays the complete HTML page, the page rendering method further includes:
[0026] Obtaining the update frequency of the module where each page fragment in the target page is located, and when the update frequency of the module where any second page fragment is located is greater than a preset frequency, adjusting any second page fragment from the second cache area to the first cache area; and / or,
[0027] A life span is set for each page fragment in the distributed cache area. When the storage time of any page fragment is equal to the life span, the page fragment is removed from the distributed cache area. When the storage time of any page fragment is less than the life span and the dynamic content corresponding to the page fragment changes, the page fragment is marked as invalid.
[0028] Optionally, the page rendering method further includes:
[0029] When another access request for accessing the target page is received, querying whether the first page fragment and the second page fragment are stored in the distributed cache area;
[0030] If the first page fragment and the second page fragment are stored in the distributed cache area, the first page fragment and the second page fragment are obtained from the distributed cache area, the first page fragment and the second page fragment are integrated to generate a complete HTML page, and the complete HTML page is sent to the client so that the client displays the complete HTML page;
[0031] If the distributed cache area does not store any page fragment of the first page fragment or the second page fragment, extract a page fragment stored in the distributed cache area, determine the specified content corresponding to another page fragment not stored in the distributed cache area, render it using the rendering method corresponding to the specified content to obtain the other page fragment not stored, and integrate the stored page fragment with the other page fragment not stored to generate a complete HTML page, and send the complete HTML page to the client so that the client displays the complete HTML page, wherein the specified content is one of the dynamic content or the static content.
[0032] According to another aspect of the present application, a page rendering device is provided, comprising:
[0033] A determination module, configured to obtain an access request and determine dynamic content and static content in a target page indicated by the access request;
[0034] A first page fragment acquisition module, used to render the dynamic content based on a server-side rendering method to obtain a first page fragment corresponding to the dynamic content;
[0035] A second page fragment acquisition module, used to render the static content based on a pre-rendering method to obtain a second page fragment corresponding to the static content;
[0036] The integration module is used to integrate the first page fragment and the second page fragment to generate a complete HTML page, and send the complete HTML page to the client so that the client can display the complete HTML page.
[0037] Optionally, the determining module is further used for:
[0038] Parsing the access request to obtain the request path, file type, query parameters and user identity information of the target page;
[0039] Determine the static content in the target page based on the request path and the file type;
[0040] Based on the query parameter and the user identity information, dynamic content in the target page is determined.
[0041] Optionally, the first page fragment acquisition module is further used for:
[0042] Get dynamic content from a preset database;
[0043] Determine the module category corresponding to the dynamic content in the target page, and obtain a first HTML template matching the module category;
[0044] The dynamic content is inserted into the first HTML template to obtain a first page fragment corresponding to the dynamic content.
[0045] Optionally, the second page fragment acquisition module is further used for:
[0046] Based on the access request, obtaining a second HTML template corresponding to the target page;
[0047] The static content is obtained, and the static content is inserted into the second HTML template to obtain a second page fragment corresponding to the static content.
[0048] Optionally, the integration module is further used for:
[0049] The first page fragment is inserted into the corresponding position of the second page fragment through the template engine to obtain a complete HTML page.
[0050] Optionally, the first page fragment is stored in a first cache area of a preset distributed cache area, and the second page fragment is stored in a second cache area of a preset distributed cache area, wherein the storage time of the page fragment in the first cache area is shorter than the storage time of the page fragment in the second cache area.
[0051] Optionally, the page rendering device further includes:
[0052] an adjustment module, configured to obtain an update frequency of a module where each page fragment in the target page is located, and when the update frequency of a module where any second page fragment is located is greater than a preset frequency, adjust any second page fragment from the second cache area to the first cache area; and / or,
[0053] A processing module is used to set a life span for each page fragment in the distributed cache area. When the storage time of any page fragment is equal to the life span, the page fragment is removed from the distributed cache area. When the storage time of any page fragment is less than the life span and the dynamic content corresponding to the page fragment changes, the page fragment is marked as invalid.
[0054] Optionally, the page rendering device further includes:
[0055] a query module, configured to query whether the first page fragment and the second page fragment are stored in the distributed cache area when receiving another access request for accessing the target page;
[0056] The integration module is further configured to obtain the first page fragment and the second page fragment from the distributed cache area if the first page fragment and the second page fragment are stored in the distributed cache area, integrate the first page fragment and the second page fragment to generate a complete HTML page, and send the complete HTML page to the client so that the client can display the complete HTML page;
[0057] A rendering module is used to extract a page fragment stored in the distributed cache area if neither the first page fragment nor the second page fragment is stored in the distributed cache area, determine the specified content corresponding to another page fragment not stored in the distributed cache area, render using the rendering method corresponding to the specified content to obtain the other page fragment not stored, and integrate the stored page fragment with the other page fragment not stored to generate a complete HTML page, and send the complete HTML page to the client so that the client displays the complete HTML page, wherein the specified content is one of the dynamic content or the static content.
[0058] According to another aspect of the present application, a storage medium is provided, in which at least one executable instruction is stored, and the executable instruction enables a processor to perform operations corresponding to the above-mentioned rendering method.
[0059] According to another aspect of the present application, a computer device is provided, comprising: a processor, a memory, a communication interface and a communication bus, wherein the processor, the memory and the communication interface communicate with each other via the communication bus;
[0060] The memory is used to store at least one executable instruction, and the executable instruction enables the processor to execute operations corresponding to the above rendering method.
[0061] By means of the above technical scheme, a page rendering method, apparatus, medium and device provided by the present application determine the dynamic content and static content in the target page accessed by the access request, render the dynamic content based on the server-side rendering method, and obtain a first page fragment. The second page fragment corresponding to the static content is rendered in advance based on the pre-rendering method, and then the first page fragment and the second page fragment are integrated to generate a complete HTML page, so that the client can display the complete HTML page. Since the server-side rendering speed is relatively fast and the pre-rendering is completed in advance, the server-side rendering and pre-rendering are combined to realize intelligent layered rendering, which further improves the page rendering speed. When the traffic is large, the rendering speed and page loading speed can be guaranteed, thereby improving the user experience.
[0062] The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented according to the contents of the specification. In order to make the above and other purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are listed below. BRIEF DESCRIPTION OF THE DRAWINGS
[0063] Various other advantages and benefits will become apparent to those of ordinary skill in the art by reading the detailed description of the preferred embodiments below. The accompanying drawings are only for the purpose of illustrating the preferred embodiments and are not to be considered as limiting the present invention. Moreover, the same reference symbols are used throughout the accompanying drawings to represent the same components. In the accompanying drawings:
[0064] Figure 1 A flow chart of a page rendering method provided by an embodiment of the present application is shown;
[0065] Figure 2 Another flow chart of a page rendering method provided by an embodiment of the present application is shown;
[0066] Figure 3 A block diagram of a page rendering device provided by an embodiment of the present application is shown;
[0067] Figure 4 A schematic diagram of the structure of a computer device provided in an embodiment of the present application is shown.
[0068] In the figure: 302 - determination module; 304 - first page fragment acquisition module; 306 - second page fragment acquisition module; 308 - integration module; 402 - processor; 404 - communication interface; 406 - memory; 408 - communication bus; 410 - program. DETAILED DESCRIPTION
[0069] The present invention will be described in detail below with reference to the accompanying drawings and in combination with embodiments. It should be noted that the embodiments and features in the embodiments of the present invention can be combined with each other without conflict.
[0070] In order to further explain the technical means and effects adopted by the present invention to achieve the predetermined invention purpose, the specific implementation methods, structures, features and effects of the present invention application are described in detail below in conjunction with the accompanying drawings and preferred embodiments. In the following description, different "one embodiment" or "embodiment" does not necessarily refer to the same embodiment. In addition, specific features, structures, or characteristics in one or more embodiments may be combined in any suitable form.
[0071] In view of the problem that the existing page rendering method causes slow rendering when accessed with large traffic, resulting in a significant decrease in page loading speed, thereby affecting the user experience, the embodiment of the present application provides a page rendering method, such as Figure 1 As shown, the method includes:
[0072] 102: Obtain an access request, and determine dynamic content and static content in a target page that the access request indicates to access;
[0073] 104: Render the dynamic content based on a server-side rendering method to obtain a first page fragment corresponding to the dynamic content;
[0074] 106: Render the static content based on the pre-rendering method to obtain a second page fragment corresponding to the static content;
[0075] 108: Integrate the first page fragment and the second page fragment to generate a complete HTML page, and send the complete HTML page to the client so that the client displays the complete HTML page.
[0076] The existing page rendering method has a slow rendering speed and a significantly reduced page loading speed when accessed with large traffic. Therefore, this application proposes intelligent layered rendering, that is, determining the dynamic content and static content in the access request, rendering the dynamic content using server rendering, and the static content using pre-rendering, and then integrating the page fragments rendered by the two methods together to obtain a complete HTML page, which is sent to the client, and after the client receives the complete HTML page, it displays the complete HTML page.
[0077] Specifically, static content refers to the part that does not change due to user requests, such as page headers, footers, navigation bars, fixed images, fixed text, etc. Dynamic content refers to the part that changes according to different user requests or real-time data, such as user comments, dynamic data displays, etc. Parse the access request and obtain static content and dynamic content from the parsing results.
[0078] Render dynamic pages through server-side rendering, obtain dynamic content from a preset database, or call dynamic content through an API interface, and render to obtain the first page fragment. The server-side rendering speed is relatively fast, which can improve the rendering speed of the first screen page. Render static pages through pre-rendering. Pre-rendering is rendered before the access request is obtained. When the access request is obtained, the second page fragment corresponding to the static content of the access request is directly read from the pre-rendered content, which also improves the rendering speed of the page.
[0079] The first page fragment rendered by the server and the second page fragment rendered in advance are integrated to obtain a complete HTML page, which improves the page rendering speed. When there is a large amount of traffic access, the rendering speed and page loading speed can be guaranteed, which improves the user experience.
[0080] In one embodiment, during the construction and compilation phase, the front-end code can be scanned by a static analysis tool to automatically identify the static content part of the page. Then, the dynamic part closely related to user interaction can be identified so that pre-rendering can be performed based on the identification results and stored in the distributed cache area, which can be directly retrieved during subsequent rendering.
[0081] In one embodiment, during the construction and deployment phase, some common or frequently accessed complete pages are pre-rendered, and the rendered complete pages are cached in the distributed cache system. When the backend data changes, it is intelligently identified which pages need to be re-rendered and the cache is updated. For example, when the user's personal information changes, the page containing the personal information is re-rendered and the cache is updated. The access request is parsed. If the access request indicates that the accessed page has been completely rendered and stored in the distributed cache area, the rendered complete page is directly retrieved from the distributed cache area.
[0082] The pages in this application are not limited to web pages or APP applications, and the page rendering method of this application includes but is not limited to application scenarios such as financial management, digital healthcare, insurance business, and public services.
[0083] Compared with the prior art, the page rendering method provided by the present application determines the dynamic content and static content in the target page accessed by the access request, renders the dynamic content based on the server-side rendering method, and obtains a first page fragment. The second page fragment corresponding to the static content is rendered in advance based on the pre-rendering method, and then the first page fragment and the second page fragment are integrated to generate a complete HTML page, so that the client can display the complete HTML page. Since the server-side rendering speed is relatively fast and the pre-rendering is completed in advance, the server-side rendering and pre-rendering are combined to realize intelligent layered rendering, which further improves the page rendering speed. When there is a large amount of traffic access, the rendering speed and page loading speed can be guaranteed, thereby improving the user experience.
[0084] In another embodiment of the present invention, Figure 2 As shown, the page rendering method also includes:
[0085] 201: Parse the access request to obtain the request path, file type, query parameters, and user identity information of the target page;
[0086] 202: Based on the request path and the file type, determine the static content in the target page, and based on the query parameters and the user identity information, determine the dynamic content in the target page;
[0087] 203: Acquire dynamic content from a preset database, determine the module category corresponding to the dynamic content in the target page, acquire a first HTML template matching the module category, insert the dynamic content into the first HTML template, and obtain a first page fragment corresponding to the dynamic content;
[0088] 204: based on the access request, obtaining a second HTML template corresponding to the target page, obtaining static content, inserting the static content into the second HTML template, and obtaining a second page fragment corresponding to the static content;
[0089] 205: Insert the first page fragment into the corresponding position of the second page fragment through the template engine to obtain a complete HTML page.
[0090] Specifically, the access request of a page usually refers to an HTTP request, which is mainly composed of the following parts: URL, request method, request header, and request body. The URL is the address of the request, which tells the server which page or resource you want to access. The URL usually consists of a protocol (such as http or https), a domain name, a port (optional), a request path, a file type, and query parameters (optional). The access request is parsed, and the static content in the target page is determined based on the request path and file type, and the dynamic content in the target page is determined based on the query parameters and user identity information. For example, the URL path directly determines the static resources in the request through the access path or file extension (such as .css, .js, .png). / static / style.css or / images / logo.png are usually static resources. For example, / profile? userId=123, the user ID determines the profile to be queried, which is dynamic content.
[0091] When a user visits a page, he enters the page URL in the browser, and the browser sends an HTTP request to the server. This request usually contains the URL of the page that the user wants to visit and other related information. After receiving the request, the server will determine the dynamic content and static content that need to be rendered based on the requested URL. Then, the server obtains the dynamic content related to the page from the database or other data source, and then obtains the first HTML template that matches the module category corresponding to the dynamic content in the target page, and fills these dynamic contents into the first HTML template to obtain the first page fragment. In the pre-rendering process, the server will determine the template and static content of the page, fill the static content into the second HTML template, and generate the second page fragment in advance. The static version of the page contains all the static content required for the page. Finally, the first page fragment corresponding to the dynamic content is inserted into the corresponding position of the second page fragment through the template engine to obtain a complete HTML page.
[0092] In one embodiment, the first page fragment is stored in a first cache area of a preset distributed cache area, and the second page fragment is stored in a second cache area of a preset distributed cache area, wherein the storage time of the page fragment in the first cache area is shorter than the storage time of the page fragment in the second cache area.
[0093] Specifically, the present application introduces a distributed cache layer, such as Redis or Memcached, to store rendered page fragments or complete pages. A multi-level cache mechanism is set, such as short-term cache and long-term cache. The short-term cache can store page fragments with more dynamic data, while the long-term cache stores static page content. For example, the first cache area stores the first page fragment corresponding to the dynamic content, and the second cache area stores the second page fragment corresponding to the static content.
[0094] In one embodiment, common complete pages requested by users are pre-rendered on the server and stored in a distributed cache area, and for repeated requests, the rendered results stored in the distributed cache area are directly returned, thereby significantly reducing the service request load.
[0095] In one embodiment, real-time data stream analysis is used to support incremental page rendering, that is, rendering the changed parts, reducing unnecessary global rendering, and improving response speed.
[0096] In one embodiment, a unified data flow management and template system is used to ensure that the front-end and back-end use the same data and logic when rendering, thereby eliminating potential inconsistency issues.
[0097] In one embodiment, after the client displays the complete HTML page, the page rendering method further includes:
[0098] Obtaining the update frequency of the module where each page fragment in the target page is located, and when the update frequency of the module where any second page fragment is located is greater than a preset frequency, adjusting any second page fragment from the second cache area to the first cache area; and / or,
[0099] A lifetime is set for each page fragment in the distributed cache area. When the storage time of any page fragment is equal to the lifetime, the page fragment is removed from the distributed cache area. When the storage time of any page fragment is less than the lifetime and the dynamic content corresponding to any page fragment changes, the page fragment is marked as invalid.
[0100] Specifically, after the complete HTML file is sent to the client and the client displays the page, the user's behavior, such as page scrolling, click frequency, page dwell time, etc., is monitored, and the rendering strategy for the next request is dynamically adjusted based on these monitored data. For example, the division of static and dynamic parts is dynamically adjusted based on changes in user behavior. Some page areas may be initially considered static, but due to frequent updates, they can be adjusted to dynamic content. For example, analyze the user's click behavior, pre-render areas or buttons that are frequently clicked, or pre-load related content in advance when the user visits a specific page.
[0101] In this embodiment, a TTL (time to live) is set for each page fragment to ensure that expired page fragments are automatically removed from the distributed cache area. When the corresponding content of any unexpired page fragment in the backend database changes, the page fragment is automatically triggered to be invalidated in the distributed cache area to ensure the real-time nature of the page content.
[0102] In one embodiment, a data flow monitoring module is integrated on the server side to analyze user requests and data changes in real time, and based on the real-time data flow analysis, identify data changes related to page rendering and generate incremental data packets.
[0103] In one embodiment, when the page is already at home, only the frequently changing data is updated to avoid re-rendering the entire page. The transmission of incremental data packets is optimized through compression and batch processing technology to reduce the consumption of network bandwidth. For secondary content, asynchronous loading is adopted, and the content to be accessed is preloaded at the same time. For data streams that need to be updated in real time, two-way communication can be carried out through Web Socket or Server-Sent Events to ensure the real-time and low latency of data.
[0104] In one embodiment, a unified data flow protocol, such as GraphQL or REST, is used between the front and back ends to ensure the consistency of data requests and responses. Then a central state management tool, such as Redux or Vuex, is used to ensure that the data state remains synchronized during the front and back end rendering process.
[0105] In one embodiment, for further definition and explanation, when another access request for accessing a target page is received, querying whether the first page fragment and the second page fragment are stored in the distributed cache area;
[0106] If the first page fragment and the second page fragment are stored in the distributed cache area, the first page fragment and the second page fragment are obtained from the distributed cache area, the first page fragment and the second page fragment are integrated to generate a complete HTML page, and the complete HTML page is sent to the client so that the client displays the complete HTML page;
[0107] If neither the first page fragment nor the second page fragment is stored in the distributed cache area, a page fragment stored in the distributed cache area is extracted, and the specified content corresponding to another page fragment not stored in the distributed cache area is determined, and the specified content is rendered using a rendering method corresponding to the specified content to obtain another page fragment not stored, and the stored page fragment is integrated with the other page fragment not stored to generate a complete HTML page, and the complete HTML page is sent to the client so that the client displays the complete HTML page, and the specified content is one of dynamic content and static content.
[0108] In this embodiment, when another access request for accessing the target page is received, a query is made as to whether the first page fragment and the second page fragment are stored in the distributed cache area. When both the first page fragment and the second page fragment are stored in the distributed cache area, the first page fragment and the second page fragment are directly obtained from the distributed cache area, the first page fragment and the second page fragment are integrated to obtain a complete HTML page, the complete HTML page is sent to the client, and the client displays the target page.
[0109] When another access request for accessing the target page is received, if it is found that only one of the first page fragment and the second page fragment is stored in the distributed cache area, the stored page fragment is obtained. When the unstored page fragment corresponds to dynamic content, the dynamic content is rendered by server-side rendering to obtain the first page fragment; when the unstored page fragment corresponds to static content (because the expiration time has expired, the page fragment corresponding to the expired static content has been removed from the distributed cache area), the static content is rendered again to obtain the second page fragment. The stored page fragment and the newly generated page fragment are then integrated to obtain a complete HTML page, and the complete HTML page is sent to the client, which displays the target page.
[0110] Furthermore, as a response to the above Figure 1 The implementation of the method shown is as follows Figure 3 As shown, an embodiment of the present invention provides a page rendering device, including:
[0111] A determination module 302 is used to obtain an access request and determine the dynamic content and static content in the target page that the access request indicates to access;
[0112] A first page fragment acquisition module 304 is used to render the dynamic content based on a server-side rendering method to obtain a first page fragment corresponding to the dynamic content;
[0113] A second page fragment acquisition module 306 is used to render the static content based on the pre-rendering method to obtain a second page fragment corresponding to the static content;
[0114] The integration module 308 is used to integrate the first page fragment and the second page fragment to generate a complete HTML page, and send the complete HTML page to the client so that the client can display the complete HTML page.
[0115] Compared with the prior art, the page rendering device provided by the present application determines the dynamic content and static content in the target page accessed by the access request, renders the dynamic content based on the server-side rendering method, and obtains a first page fragment. The second page fragment corresponding to the static content is rendered in advance based on the pre-rendering method, and then the first page fragment and the second page fragment are integrated to generate a complete HTML page, so that the client can display the complete HTML page. Since the server-side rendering speed is relatively fast and the pre-rendering is completed in advance, the server-side rendering and pre-rendering are combined to realize intelligent layered rendering, which further improves the page rendering speed. When there is a large amount of traffic access, the rendering speed and page loading speed can be guaranteed, thereby improving the user experience.
[0116] In one embodiment, the determination module is further configured to:
[0117] Parse the access request to obtain the request path, file type, query parameters, and user identity information of the target page;
[0118] Determine the static content in the target page based on the request path and file type;
[0119] Based on query parameters and user identity information, determine the dynamic content in the target page.
[0120] In one embodiment, the first page fragment acquisition module is further used to:
[0121] Get dynamic content from a preset database;
[0122] Determine the module category corresponding to the dynamic content in the target page, and obtain the first HTML template matching the module category;
[0123] Insert the dynamic content into the first HTML template to obtain a first page fragment corresponding to the dynamic content.
[0124] In one embodiment, the second page fragment acquisition module is further used to:
[0125] Based on the access request, obtain a second HTML template corresponding to the target page;
[0126] The static content is obtained, and the static content is inserted into the second HTML template to obtain a second page fragment corresponding to the static content.
[0127] In one embodiment, the integration module is further configured to:
[0128] The first page fragment is inserted into the corresponding position of the second page fragment through the template engine to obtain a complete HTML page.
[0129] In one embodiment, the first page fragment is stored in a first cache area of a preset distributed cache area, and the second page fragment is stored in a second cache area of a preset distributed cache area, wherein the storage time of the page fragment in the first cache area is shorter than the storage time of the page fragment in the second cache area.
[0130] In one embodiment, the page rendering device further includes:
[0131] an adjustment module, configured to obtain an update frequency of a module where each page fragment in the target page is located, and when the update frequency of a module where any second page fragment is located is greater than a preset frequency, adjust any second page fragment from the second cache area to the first cache area; and / or,
[0132] A processing module is used to set a life span for each page fragment in the distributed cache area. When the storage time of any page fragment is equal to the life span, any page fragment is removed from the distributed cache area. When the storage time of any page fragment is less than the life span and the dynamic content corresponding to any page fragment changes, any page fragment is marked as invalid.
[0133] In one embodiment, the page rendering device further includes:
[0134] A query module, configured to query whether the first page fragment and the second page fragment are stored in the distributed cache area when receiving another access request for accessing the target page;
[0135] The integration module is further configured to obtain the first page fragment and the second page fragment from the distributed cache area if the first page fragment and the second page fragment are stored in the distributed cache area, integrate the first page fragment and the second page fragment to generate a complete HTML page, and send the complete HTML page to the client so that the client can display the complete HTML page;
[0136] A rendering module is used to extract a page fragment stored in the distributed cache area if neither the first page fragment nor the second page fragment is stored in the distributed cache area, determine the specified content corresponding to another page fragment not stored in the distributed cache area, render using the rendering method corresponding to the specified content to obtain another page fragment not stored, and integrate the stored page fragment with the other page fragment not stored to generate a complete HTML page, and send the complete HTML page to the client so that the client displays the complete HTML page, wherein the specified content is one of dynamic content and static content.
[0137] According to an embodiment of the present invention, a storage medium is provided, wherein the storage medium stores at least one executable instruction, and the computer executable instruction can execute the page rendering method in any of the above method embodiments.
[0138] Figure 4 A schematic diagram of the structure of a computer device provided according to an embodiment of the present invention is shown. The specific embodiment of the present invention does not limit the specific implementation of the computer device.
[0139] like Figure 4 As shown, the computer device may include: a processor (processor) 402 , a communication interface (Communications Interface) 404 , a memory (memory) 406 , and a communication bus 408 .
[0140] The processor 402 , the communication interface 404 , and the memory 406 communicate with each other via a communication bus 408 .
[0141] The communication interface 404 is used to communicate with other devices such as clients or other servers.
[0142] The processor 402 is used to execute the program 410, and specifically can execute the relevant steps in the above-mentioned page rendering method embodiment.
[0143] Specifically, the program 410 may include program codes, which include computer operation instructions.
[0144] The processor 402 may be a central processing unit (CPU), or an application-specific integrated circuit (ASIC), or one or more integrated circuits configured to implement the embodiments of the present invention. The one or more processors included in the computer device may be processors of the same type, such as one or more CPUs; or processors of different types, such as one or more CPUs and one or more ASICs.
[0145] The memory 406 is used to store the program 410. The memory 406 may include a high-speed RAM memory, and may also include a non-volatile memory (non-volatile memory), such as at least one disk memory.
[0146] The program 410 may be specifically configured to enable the processor 402 to perform the following operations:
[0147] Obtaining an access request, and determining dynamic content and static content in a target page indicated by the access request;
[0148] Render the dynamic content based on the server-side rendering method to obtain a first page fragment corresponding to the dynamic content;
[0149] Rendering the static content based on the pre-rendering method to obtain a second page fragment corresponding to the static content;
[0150] The first page fragment and the second page fragment are integrated to generate a complete HTML page, and the complete HTML page is sent to the client so that the client displays the complete HTML page.
[0151] The above embodiments are only exemplary embodiments of the present application and are not intended to limit the present application. The protection scope of the present application is defined by the claims. Those skilled in the art may make various modifications or equivalent substitutions to the present application within the essence and protection scope of the present application, and such modifications or equivalent substitutions shall also be deemed to fall within the protection scope of the present application.
Claims
1. A page rendering method, characterized in that: include: Obtaining an access request, and determining dynamic content and static content in a target page indicated by the access request; Rendering the dynamic content based on a server-side rendering method to obtain a first page fragment corresponding to the dynamic content; Rendering the static content based on a pre-rendering method to obtain a second page fragment corresponding to the static content; The first page fragment and the second page fragment are integrated to generate a complete HTML page, and the complete HTML page is sent to a client so that the client displays the complete HTML page.
2. The page rendering method according to claim 1, characterized in that: The determining of the dynamic content and the static content in the target page indicated by the access request includes: Parsing the access request to obtain the request path, file type, query parameters and user identity information of the target page; Determine the static content in the target page based on the request path and the file type; Based on the query parameter and the user identity information, dynamic content in the target page is determined.
3. The page rendering method according to claim 1, characterized in that: The rendering of the dynamic content based on the server-side rendering method to obtain a first page fragment corresponding to the dynamic content includes: Get dynamic content from a preset database; Determine the module category corresponding to the dynamic content in the target page, and obtain a first HTML template matching the module category; The dynamic content is inserted into the first HTML template to obtain a first page fragment corresponding to the dynamic content.
4. The page rendering method according to claim 1, characterized in that: The rendering of the static content based on the pre-rendering method to obtain a second page fragment corresponding to the static content includes: Based on the access request, obtaining a second HTML template corresponding to the target page; The static content is obtained, and the static content is inserted into the second HTML template to obtain a second page fragment corresponding to the static content.
5. The page rendering method according to claim 1, characterized in that: The step of integrating the first page fragment and the second page fragment to generate a complete HTML page includes: The first page fragment is inserted into the corresponding position of the second page fragment through the template engine to obtain a complete HTML page.
6. The page rendering method according to any one of claims 1 to 5, characterized in that: The first page fragment is stored in a first cache area of a preset distributed cache area, and the second page fragment is stored in a second cache area of a preset distributed cache area, wherein the storage time of the page fragment in the first cache area is shorter than the storage time of the page fragment in the second cache area; After the client displays the complete HTML page, the page rendering method further includes: Obtaining the update frequency of the module where each page fragment in the target page is located, and when the update frequency of the module where any second page fragment is located is greater than a preset frequency, adjusting any second page fragment from the second cache area to the first cache area; and / or, A life span is set for each page fragment in the distributed cache area. When the storage time of any page fragment is equal to the life span, the page fragment is removed from the distributed cache area. When the storage time of any page fragment is less than the life span and the dynamic content corresponding to the page fragment changes, the page fragment is marked as invalid.
7. The page rendering method according to claim 6, characterized in that: The page rendering method further includes: When another access request for accessing the target page is received, querying whether the first page fragment and the second page fragment are stored in the distributed cache area; If the first page fragment and the second page fragment are stored in the distributed cache area, the first page fragment and the second page fragment are obtained from the distributed cache area, the first page fragment and the second page fragment are integrated to generate a complete HTML page, and the complete HTML page is sent to the client so that the client displays the complete HTML page; If the distributed cache area does not store any page fragment of the first page fragment or the second page fragment, extract a page fragment stored in the distributed cache area, determine the specified content corresponding to another page fragment not stored in the distributed cache area, render it using the rendering method corresponding to the specified content to obtain the other page fragment not stored, and integrate the stored page fragment with the other page fragment not stored to generate a complete HTML page, and send the complete HTML page to the client so that the client displays the complete HTML page, wherein the specified content is one of the dynamic content or the static content.
8. A page rendering device, characterized in that: include: A determination module, configured to obtain an access request and determine dynamic content and static content in a target page indicated by the access request; A first page fragment acquisition module, used to render the dynamic content based on a server-side rendering method to obtain a first page fragment corresponding to the dynamic content; A second page fragment acquisition module, used to render the static content based on a pre-rendering method to obtain a second page fragment corresponding to the static content; The integration module is used to integrate the first page fragment and the second page fragment to generate a complete HTML page, and send the complete HTML page to the client so that the client can display the complete HTML page.
9. A storage medium, wherein at least one executable instruction is stored in the storage medium, and the executable instruction enables a processor to perform operations corresponding to the page rendering method according to any one of claims 1 to 7.
10. A computer device comprising: A processor, a memory, a communication interface and a communication bus, wherein the processor, the memory and the communication interface communicate with each other via the communication bus; The memory is used to store at least one executable instruction, and the executable instruction enables the processor to perform an operation corresponding to the page rendering method according to any one of claims 1 to 7.