CN119537729A

CN119537729A - Page rendering method, server, client, device and storage medium

Info

Publication number: CN119537729A
Application number: CN202411637555.7A
Authority: CN
Inventors: 赵旭阳; 董浩洋; 徐铁豹; 张进霖
Original assignee: Xingyin Information Technology Shanghai Co ltd
Current assignee: Xingyin Information Technology Shanghai Co ltd
Priority date: 2024-11-15
Filing date: 2024-11-15
Publication date: 2025-02-28

Abstract

The embodiment of the present application provides a page rendering method, a server, a client, a device and a storage medium. The method includes: receiving a rendering request for a target page from a client, the rendering request is used to obtain the basic data and business data of the target page; in response to the rendering request, returning a first data block to the client, so that the client renders at least a part of the basic content of the target page based on the first data block; in response to the rendering request, requesting the business data of the target page from a business server; after the business server returns the business data to the server, returning a second data block to the client, so that the client renders at least a part of the business content of the target page based on the second data block. The embodiment of the present application is conducive to improving user experience.

Description

Page rendering method, server, client, device and storage medium

Technical Field

The application relates to the technical field of page rendering, in particular to a page rendering method, a server, a client, equipment and a storage medium.

Background

With the development of web page technology, more and more applications develop web page functions. The lower the rendering time of the webpage is, the shorter the time of the user seeing the content is, the larger the probability of the user browsing the content is, and the exposure and click quantity of the content are also improved, so that the rendering time of the webpage is a key performance index of the applied webpage version.

Currently, for a very good user experience and a higher functional upper limit, a server rendering (SERVER SIDE RENDER, SSR) architecture is generally used to render web pages. However, the SSR architecture is adopted to render the webpage, the time for rendering the complete webpage is still long, and the user experience is low.

Disclosure of Invention

The embodiment of the application provides a page rendering method, a server, a client, equipment and a storage medium.

In a first aspect, an embodiment of the present application provides a page rendering method, applied to a server, where the method includes:

Receiving a rendering request aiming at a target page from a client, wherein the rendering request is used for acquiring basic data and business data of the target page;

Responding to the rendering request, returning a first data block to the client so that the client renders at least one part of the basic content of the target page based on the first data block, wherein the first data block is obtained by encoding a segment of the basic data;

Responding to the rendering request, and requesting service data of the target page from a service server;

And after the service server returns the service data to the service end, returning a second data block to the client end so that the client end renders at least one part of the service content of the target page based on the second data block, wherein the second data block is obtained by encoding a segment of the service data.

In a second aspect, an embodiment of the present application provides a page rendering method, applied to a client, where the method includes:

sending a rendering request aiming at a target page to a server, wherein the rendering request is used for acquiring basic data and business data of the target page;

Receiving a first data block from the server, wherein the first data block is obtained by encoding a segment of the basic data by the server, and the basic data is obtained by the server in response to the rendering request;

rendering at least a part of the basic content of the target page based on the first data block, and rendering the basic content of the target page after the basic data is acquired;

receiving a second data block from the service end, wherein the second data block is obtained by encoding a fragment of the service data by the service end, and the service data is obtained by the service end from a service server in response to the rendering request;

and rendering at least one part of the service content based on the second data block, and rendering the service content of the target page after the service data is acquired.

In a third aspect, an embodiment of the present application provides a server, including a transceiver unit and a processing unit;

the receiving and transmitting unit is used for receiving a rendering request aiming at a target page from a client, wherein the rendering request is used for acquiring basic data and business data of the target page;

The processing unit is used for responding to the rendering request, returning a first data block to the client so that the client renders at least one part of the basic content of the target page based on the first data block, wherein the first data block is obtained by encoding one segment of the basic data;

The receiving and transmitting unit is further configured to return a second data block to the client after the service server returns the service data to the server, so that the client renders at least a portion of the service content of the target page based on the second data block, where the second data block is obtained by encoding a segment of the service data.

In a fourth aspect, an embodiment of the present application provides a client, including a transceiver unit and a processing unit;

The receiving and transmitting unit is used for sending a rendering request for a target page to a server, wherein the rendering request is used for acquiring basic data and business data of the target page; receiving a first data block from the server, wherein the first data block is obtained by encoding a segment of the basic data by the server, and the basic data is obtained by the server in response to the rendering request;

the processing unit is used for rendering at least one part of the basic content of the target page based on the first data block, and rendering the basic content of the target page after the basic data is acquired;

The receiving and transmitting unit is further configured to receive a second data block from the server, where the second data block is obtained by encoding a segment of the service data by the server, and the service data is obtained by the server in response to the rendering request;

And the processing unit is used for rendering at least one part of the service content based on the second data block and rendering the service content of the target page after the service data are acquired.

In a fifth aspect, an embodiment of the present application provides an electronic device, including a processor and a memory, where the processor is connected to the memory, the memory is configured to store a computer program, and the processor is configured to execute the computer program stored in the memory, so that the electronic device performs the method according to the first aspect or the second aspect.

In a sixth aspect, embodiments of the present application provide a computer readable storage medium storing a computer program which, when executed by a processor, implements the method according to the first or second aspect.

In a seventh aspect, embodiments of the present application provide a computer program product comprising a computer program which, when executed by a processor, implements a method as described in the first or second aspect.

The embodiment of the application has the following beneficial effects:

It can be seen that, in the embodiment of the present application, after receiving a page rendering request from a client, a server encodes and transmits a base data fragment of a target page to the client, so that the client can first acquire a first data block of the base data, and then the client can first render the first data block, and display the base content of the target page. Then, in the process of returning the first data block, the server side can request the service data of the target page to the service server, so that the service side can obtain the service data in parallel when the client side renders the basic content, and after a fragment of the service data is obtained, the fragment is immediately returned to the client side for rendering the service content, thereby enabling a user to see the service content as soon as possible and improving the rendering efficiency of the page.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for the description of the embodiments will be briefly described below, and it is obvious that the drawings in the following description are some embodiments of the present application, and other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.

FIG. 1 is a schematic diagram of rendering a webpage with an SSR architecture according to an embodiment of the present application;

FIG. 2 is a schematic diagram of an SSR architecture rendering sequence according to an embodiment of the present application;

FIG. 3 is a schematic diagram of a page rendering system according to an embodiment of the present application;

Fig. 4 is a schematic flow chart of a page rendering method according to an embodiment of the present application;

FIG. 5 is a schematic diagram of an HTML file according to an embodiment of the present application;

FIG. 6 is a schematic diagram of a rendering Vdom provided in accordance with an embodiment of the present application;

Fig. 7 is a schematic diagram of rendering basic data and rendering service content according to an embodiment of the present application;

FIG. 8 is a schematic diagram of an adaptive display according to an embodiment of the present application;

FIG. 9 is a schematic diagram of a rendering sequence according to an embodiment of the present application;

fig. 10 is a schematic diagram of a server provided in an embodiment of the present application;

FIG. 11 is a schematic diagram of a client according to an embodiment of the present application;

Fig. 12 is a schematic diagram of an electronic device according to an embodiment of the present application.

Detailed Description

The following description of the embodiments of the present application will be made clearly and fully with reference to the accompanying drawings, in which it is evident that the embodiments described are some, but not all embodiments of the application. All other embodiments, which can be made by those skilled in the art based on the embodiments of the application without making any inventive effort, are intended to be within the scope of the application.

The terms "first," "second," "third," and "fourth" and the like in the description and in the claims and drawings are used for distinguishing between different objects and not necessarily for describing a particular sequential or chronological order. Furthermore, the terms "comprise" and "have," as well as any variations thereof, are intended to cover a non-exclusive inclusion. For example, a process, method, system, article, or apparatus that comprises a list of steps or elements is not limited to only those listed steps or elements but may include other steps or elements not listed or inherent to such process, method, article, or apparatus.

Reference herein to "an embodiment" means that a particular feature, result, or characteristic described in connection with the embodiment may be included in at least one embodiment of the application. The appearances of such phrases in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. Those of skill in the art will explicitly and implicitly appreciate that the embodiments described herein may be combined with other embodiments.

First, the page referred to by the present application is understood as a web page, and further, the present application is mainly directed to the first page of the web page, so that the page referred to later is understood as the first page or first screen.

In order to facilitate understanding of the technical scheme of the application, first, description is given to a first page of a webpage rendered by an SSR architecture.

Referring to fig. 1, fig. 1 is a schematic diagram of an SSR architecture rendering web page according to an embodiment of the present application.

As shown in fig. 1, a user accesses a web page through a browser. The browser requests rendering of the web page from the SSR server. The SSR server responds to the request of the browser to render the webpage, and the SSR server renders the complete content of the webpage. Specifically, the SSR server requests the dynamic content of the webpage to the service server, the service server returns the dynamic content to the SSR server, and then the SRR server renders the complete content of the webpage based on the dynamic content, namely, renders a hypertext markup-up Language (HTML) file of the webpage, and returns the assembled HTML file to the browser. Accordingly, after the browser receives the rendered HTML file, a complete webpage can be rendered by analyzing the HTML file of the webpage, a cascading style sheet (CASCADING STYLE SHEETS, css) link can be obtained by analyzing the HTML file, css static resources of the webpage are requested to a content delivery network (Content Delivery Network, CDN) through the css link, the css static resources are returned to the browser by the CDN, and therefore the browser further adjusts the layout and style of the rendered webpage based on the css static resources, and the webpage adapting to the browser is rendered. Finally, the user can see the complete web page through the browser.

Based on the rendering process shown in fig. 1, the rendering sequence of the SSR architecture may be as shown in fig. 2, specifically, the client initiates a webpage rendering request to the server through the gateway first, then the SSR server requests the dynamic content of the webpage, after obtaining the dynamic content, the SSR server renders the dynamic content to assemble the basic content and the dynamic content of the webpage into an HTML file and send the HTML file to the client, the browser of the client parses the HTML file, and the browser renders the webpage, so that the user can see the webpage.

It can be seen that when the SSR architecture is used for rendering the webpage, the SSR server is required to completely assemble the complete HTML file of the webpage, and the HTML file is returned to the client for rendering, so that the rendering time is long, a long-time white screen waiting is required, and the user experience is poor.

For purposes of unification, first a page to which the present application is directed is understood to be a web page, and both are consistent in nature and indiscriminate. Furthermore, the target page rendered by the application can be any type of webpage and any webpage in a browsing stage, the application mainly takes the target page as a first page of an application, which is also called a discovery page of the application, secondly, the static resources of the webpage related to the application can be understood as basic data of the webpage, the dynamic resources of the webpage can be understood as business data of the webpage, and accordingly, the content rendered by the static resources (basic data) of the webpage can be also called a skeleton screen of the webpage or an HTML page of the webpage or the basic content of the webpage, which are basically the same, the content rendered by the dynamic resources (business data) of the webpage can be not distinguished, the dynamic contents of the webpage or the business contents of the webpage can be also called the same, and the content rendered by the dynamic resources (business data) of the webpage can not be distinguished.

That is, the base data corresponds to the base content of the target page, for example, the skeleton content or the frame content of the target page, and the same base content is generally displayed for different users. The service data corresponds to the service content of the target page and needs to be acquired from the corresponding service server. In some embodiments, the business server obtains business data matched with the user based on the user, then renders and displays corresponding business content, and different business content can be generally displayed for different users. For example, in a recommendation scenario, the business content may be personalized media content for the user, and in an advertising scenario, the business content may be personalized advertising content for the user. The application is mainly described by taking business content as a card note as an example.

Referring to fig. 3, fig. 3 is a schematic diagram of a page rendering system according to an embodiment of the present application.

As shown in fig. 3, the page rendering system includes a client 10, a server 20, and a service server 30. Wherein a browser 40 is installed on the client 10.

Illustratively, a user may browse a target page of an application through the browser 40, when the user browses the target page, the client 10 sends a rendering request for the target page to the server 20, and in response to the rendering request, the server 20 obtains basic data of the target page first, and after obtaining a segment of the basic data, encodes the segment of the basic data to obtain a first data block corresponding to the segment, and then transmits the first data block to the client 10, and continues to obtain the basic data of the target page. Accordingly, the browser 40 of the client 10 performs rendering based on the first data block to obtain at least a part of the basic content of the target page, so that the complete basic data is obtained at the client 10, and the basic content of the target page can be rendered. Then, in the process of returning the first data block to the client 10, the server 20 will synchronously request the service data of the target page from the service server 30, until the server 20 acquires a segment of the service data, and can encode the segment to obtain a second data block corresponding to the segment, and return the second data block to the client 10, and the server 20 will continue to acquire the service data until the complete service data is returned to the client 10. Accordingly, the browser of the client 10 renders at least a part of the service content based on the second data block, and after obtaining the service data, that is, obtaining the complete service data, the browser may render the service content of the target page, that is, complete rendering of the target page.

Referring to fig. 4, fig. 4 is a flow chart of a page rendering method according to an embodiment of the present application. The method is applied to the rendering system. The method includes, but is not limited to, the following:

And 401, the client sends a rendering request for the target page to the server, wherein the rendering request is used for acquiring basic data and business data of the target page.

It should be noted that the present application mainly uses the target page as the home page of the web page version of the application, and may also be referred to as the home screen for illustration, but the present application does not limit the type of the target page.

For example, when a user browses the target page through the browser of the client, the client may send a rendering request to the server through the browser of the client. Accordingly, the server receives the rendering request. Alternatively, the rendering request may be a hypertext transfer protocol (Hypertext Transfer Protocol, HTTP) request that includes the uniform resource locator (Uniform Resource Locator, URL) of the target page.

And 402, the server side returns a first data block to the client side in response to the rendering request, so that the client side renders at least one part of the basic content of the target page based on the first data block, wherein the first data block is obtained by encoding a segment of the basic data.

The method comprises the steps of responding to a rendering request, assembling basic data of a target page by a server, dividing the basic data to obtain a segment of the basic data, rendering the segment of the basic data to obtain a first character string, and carrying out block transmission coding on the first character string to obtain a first data block.

Illustratively, in response to the rendering request, a URL of a target page is parsed from the rendering request, and a target page to be accessed by the client is determined based on the URL. Then, the server side assembles the basic data of the target page and returns the basic data to the client side so that the client side renders the basic content corresponding to the basic data based on the basic data.

Optionally, the present application is mainly described by taking the HTML file with the basic data as the target page as an example, and the basic content can be understood as a skeleton screen of the target page.

Optionally, when basic data is returned, namely, when the HTML file is returned, the HTML file of the target page is divided into a plurality of fragments, then each fragment is respectively encoded to obtain a data block corresponding to each fragment, and the data block of each fragment is successively returned to the client for rendering. Specifically, after the server side assembles the basic data of the target page, the basic data of the target page is divided into a plurality of segments, and each segment can render at least a part of the basic content, encode (block transmission encoding) each segment respectively, obtain a data block corresponding to each segment, and return the data block corresponding to each segment to the client side successively.

Therefore, the first data block in step 402 may be any one of the data blocks, and the present application will be mainly described by taking the data block corresponding to the < body > portion as an example.

It should be noted that, as shown in fig. 5, a complete HTML file generally includes three parts, specifically, < HTML >, < head >, < body >. Where < HTML > is the root tag of the web site, all web page tags are in < HTML > </HTML >, so < HTML > and </HTML > are written at the beginning and ending portions of one HTML document. The < head > mainly includes metadata of the page and information related to the page, and is not normally directly displayed on the page, for example, the head part includes a < meta > element for setting a code of a character, a view port setting, a < title > element for defining a title of the page and displaying on a browser tab, and a < link > element for linking to an external resource such as css static resource. The < script > element refers to an external JavaScript file or contains an inline script, and the < style > element contains an inline css style. The < body > mainly comprises an application body and JavaScript script code, wherein the application body mainly comprises visible content on a page, wherein the visible content on the page can be further divided into basic data and business data, for example, the basic data comprises, but is not limited to, logo, navigation bar, search bar, footer and the like of the page, and the business data comprises, but is not limited to, text, image, link, form and the like. As shown in fig. 5, the application body is mainly stored between the labels < divid= "$ { root" > and </div >, and the JavaScript target script code is mainly stored between the labels < script > and </script >, and the JavaScript target script code of the application is mainly used for realizing self-adaptive layout.

It should be noted that, after receiving the rendering request, the server may directly obtain the HTML template of the target page, so as to obtain the < HTML > portion and the < head > portion of the target page. Therefore, before returning the first data block to the client, the server firstly returns the < head > part of the target page to the client, that is, the server firstly codes the < head > part as a segment to obtain a data block corresponding to the < head > part, and then the client can analyze the data block to obtain the < head > part, so that the client can firstly execute the < HTML > part to analyze the HTML version, the language and the like used by the target page, and execute the < head > part to obtain css static resources of the target page, for example, analyze embedded css static resources or download css static resources based on links, so that the page layout and the page structure of the target page can be analyzed based on the css static resources.

The base data for the target page is fixed, and the server side can directly acquire the base data in response to the rendering request. Then, the server side firstly renders a first hypertext markup language character string of the basic data.

Alternatively, the transmission of the data block is earlier than the rendering of the data block at the time of streaming rendering, and thus the data block cannot be withdrawn once it starts to be transmitted. Therefore, to ensure that the data block can be rendered successfully, a synchronous creation needs to be performed at the server side.

The server side divides the basic data to obtain a segment of the basic data, namely a segment corresponding to the first data block. Then, rendering a segment of the base data by using a rendering function to create a first virtual document object model Vdom corresponding to the segment of the base data, that is, the server determines whether the first Vdom of the segment of the base data can be created, and if the first Vdom can be created, it is explained that the browser can successfully render the first data block because Vdom is converted into true (Actual) dom without failure condition, and rendering the first Vdom by using a character string rendering function to obtain a first character string of the base data, wherein the character string related to the application is an HTML character string, and the character strings referred to later can be understood as HTML character strings, which are substantially the same and can be indistinguishable.

Specifically, as shown in fig. 6, firstly, the server creates a responsive component Component reactive, the Component reactive captures the state of the renderer (Render) by capturing the dependency (TRACK DEPENDENCIES), after the server acquires a piece of the basic data, the server renders the piece of the basic data to the renderer, and Component reactive can capture a piece of the basic data to be used by the renderer, trigger (Trigger) the renderer to compile (Compiled Into) the HTML Template of the target page into a rendering function (Render function), and then the rendering function receives the state of the renderer (i.e. a piece of the basic data) as input data to Render, and returns (returns) the Virtual dom, thus obtaining the first Vdom. Then, the first Vdom is used as input data of a character string rendering function (rendertostring), and the first Vdom is rendered to obtain a first character string of a segment of the basic data.

Further, as shown in fig. 6, if a fragment of the base data, i.e., the first data block, is rendered for the first time, if the first Vdom is converted into a real dom, the renderer may render the first Vdom into an Actual dom using a Mount function.

Further, after obtaining the first hypertext markup language string, in order to support streaming, the first data block needs to be obtained by performing block transmission encoding on the first string. For example, the streaming response header is first configured, for example, the content type of the response header is set to be a character string, a character set, and a streaming tag, where the streaming tag is used to indicate that the transmission mode of the data block is streaming, for example, the streaming tag may be { end: false }. After the client is instructed to receive the data block by the stream tag, the response is not stopped, and the data block is continuously received. Thus, for the first string and the stream tag as a block transfer encoded payload, the payload is encoded based on the response header, resulting in a first data block.

Specifically, the class Readable is first imported from a stream (stream) module of a rendering frame (e.g., vue frame), and the pipeline method is imported from the stream module. And using a pipeline method to stream the first hypertext markup language character string to obtain a first data block. The first string is illustratively read from the stream module using the Readable class. For example, the first string may be obtained by reading the content between < head > tag and < divid= "$ { root }" >, which is the result of reading { headPart } < divid= "$ { root }", and then obtaining the first data block based on block transmission encoding (transfer-encoding) of the first string.

In one embodiment of the present application, if the first virtual dom is not created, that is, the rendering function does not return to the first Vdom, the server returns a failure response to the client for the rendering request, where the failure response is used to indicate that the streaming rendering of the target page fails, and the server may return the HTML file of the target page to the client through a server rendering manner, so that the client renders the target page based on the HTML file.

In particular, code blocks that raise errors are wrapped using a try. Thus, when the rendering function fails to render Vdom, a rendering error is detected and then downgrade rendering logic is performed.

Optionally, if the downgrade rendering logic is rendering through the server. The server side can acquire basic data and service data of the target page again, an HTML file of the target page is assembled based on the basic data and the service data, the HTML file is returned to the client side, and the client side renders the target page based on the HTML file.

Alternatively, if the downgraded rendering logic is to return a preconfigured HTML page, such as an error hint page, to the client, the server may return the downgraded HTML page to the client.

And 403, the client renders at least one part of the basic content of the target page based on the first data block, and renders the basic content of the target page after the basic data is acquired.

The client side analyzes the first data block to obtain the first character string, namely, a segment of the basic data is obtained, then renders the first character string, namely, a segment of the basic data is utilized to obtain at least one part of the basic content of the target page, for example, the first data block is a < head > part, the < head > part is rendered to obtain metadata of the target page and information related to the page, for example, if the first data block is a < body > part, the fixed content on the target page, for example, logo, navigation bar, search bar and footer of the page can be rendered. It can be understood that, when the server transmits the first data block encoded by a segment of the basic data to the client, the client can render a portion of the basic content based on the first data block, so that when the server transmits all of the basic data to the client, the client obtains the basic data, that is, after obtaining all of the basic data, the client can completely render the basic content of the target page. According to the application, after the server side obtains the basic data, the basic data can be encoded and transmitted in segments, namely, the basic data is transmitted to the client side in a streaming mode, so that the client side can obtain the segments of the basic data as soon as possible, render part of the basic content as soon as possible for a user to watch, and the user can see the content as soon as possible.

Specifically, after the service end returns the < head > part to the client end, the client end analyzes the < head > part to obtain css static resources, and the element layout and the element style of the page can be obtained based on the css static resources. And then, after the first character string is obtained, analyzing the label of each basic data to obtain the attribute of each basic data, and rendering each basic data to the corresponding position of the display window of the client based on the attribute of each basic data to obtain the basic content. Specifically, as shown in fig. 6, the browser renders the first Vdom based on the first string, renders the first Vdom into a first Actual dom using a Mount or Patch function, and finally renders the base content based on the first Actual dom, that is, renders each dom in the first Actual dom to a corresponding position of a display window of the client, thereby obtaining the base content of the target page.

As shown in fig. 7, the view and layout of the target page are first rendered based on css static resources, and the places with content in the view are filled by placeholders. And then, after the basic data is obtained, filling the basic data into the corresponding position, and replacing the placeholder of the corresponding position of the basic data by using the basic data to obtain the basic content. Wherein the business data comprises a cover map and a title. For example, as shown in the right side of fig. 7, after the browser obtains the segment corresponding to the first blank card in the service data, the front cover image, that is, a windowsill image shown in fig. 7, and the title corresponding to the card, that is, the "fine window view collection" shown in fig. 7 may be rendered in the first blank card, so that the user may be able to see the service content corresponding to the first blank card. Therefore, as shown in fig. 7, after the browser renders the service content corresponding to each blank card, the service content corresponding to each blank card may refer to the content shown on the right side of fig. 7, and the user may see the complete web page without further description.

It should be noted that, the client parses the first data block, and may also obtain a streaming tag, and based on the streaming tag, the client may continue to receive other data blocks, and may not stop responding.

And 404, the server side responds to the rendering request and requests the service data of the target page to the service server.

For example, after receiving the rendering request, the server may synchronize the service data of the target page to the service server, or in the process of returning the first data block to the client, the server may request the service data of the target page to the service server. For example, the server may send a first data acquisition request to the service server, where the first data acquisition request includes user information of a user, and the first data acquisition request is used to request the service server to assemble service data of the target page. Illustratively, the user information includes identity information, preference information, location information, and the like of the user. Accordingly, the service server determines service data matched with the user based on the user information, namely, determines service data recommended to the user. After the service server assembles the dynamic resource, the dynamic resource can be sent to the server.

And 405, after the service server returns the service data to the service end, the service end returns a second data block to the client end so that the client end renders at least one part of the service data of the target page based on the second data block, wherein the second data block is obtained by encoding a fragment of the service data.

It should be noted that, after the server side obtains a segment of the service data of the target page, the server side may encode the segment of the service data to obtain the second data block.

The method comprises the steps of dividing service data to obtain a fragment of the service data, rendering the fragment of the service data to obtain a second character string, and carrying out block transmission coding on the second character string to obtain the second data block.

In one embodiment of the present application, after the server obtains the service data, the server uses a rendering function to render a segment of the service data, so as to construct a second virtual document object model Vdom of the segment of the service data, that is, the server determines whether a second Vdom of the segment of the service data can be created, and if a second Vdom can be constructed, it is indicated that the browser can successfully render the second data block because Vdom is converted into Actual dom without failure condition, and then uses a string rendering function to render the second Vdom, so as to obtain the second string.

Specifically, as shown in fig. 6, after the server acquires a segment of the service data, the server will Render the segment of the service data to the renderer, so Component reactive can capture that the segment of the service data is used by the renderer, that is, the state of the renderer is captured to change, and Trigger (Trigger) the renderer to Render again (re-Render), so that the renderer will compile (Compiled Into) the HTML Template of the target page into a rendering function (Render function), and then the rendering function will receive the state of the renderer (that is, a segment of the service data) as input data to Render, and return (returns) Virtual dom to obtain the second Vdom, that is, new Vdom. Then, the second Vdom is used as input data of a character string rendering function (rendertostring), and the second Vdom is rendered to obtain a second character string.

Further, after the second character string is obtained, the second character string is subjected to block transmission coding to obtain a second data block. Specifically, to support streaming, a streaming tag needs to be added at the tail of the second string, resulting in the second data block. For example, the stream tag may be { end: false }. The second data block is indicated by the streaming tag as a streaming data block and the reception of the other data blocks is continued without stopping the response after rendering the second data block.

Specifically, the pipeline method is used for carrying out streaming processing on the second hypertext markup language character string to obtain a second data block. The second hypertext markup language string is read from the stream module, illustratively using the Readable classes. And then carrying out block transmission coding on the second character string, and adding a stream tag at the tail part of the coding result to obtain a second data block.

And 406, the client renders at least one part of the service content based on the second data block, and renders the service content of the target page after the service data are acquired.

The client side analyzes the second data block after obtaining the second data block to obtain a second character string, and performs page rendering based on the second character string to obtain a target page, namely, renders the complete target page. It can be understood that after the service end obtains a segment of the service data, the segment is encoded and transmitted to the client end, so that the client end can render a part of the service content by using the segment.

Specifically, as shown in fig. 7, similar to the server, the client may construct a second Vdom corresponding to the service data based on the second string, then compare the second Vdom with the first Vdom to obtain a dom that needs to be updated, then apply the dom that needs to be updated to the Actual dom to obtain a new Actual dom, and perform page rendering by using the new Actual dom to obtain a target page, that is, find that the updated Actual dom has an updated dom, and render the dom to a placeholder in a corresponding position in the basic content, thereby rendering the target page.

In one embodiment of the application, the business data includes a plurality of items of content, such as a plurality of notes. The client may adaptively render the plurality of items of content based on the object script code. The server side streams the target script code to obtain a third data block, wherein the target script code is used for controlling the display position and the display size of the service data in the display window of the client side. Then, the server sends the third data block to the client. Correspondingly, the client receives the third data block, analyzes the third data block to obtain the third target script code, and then executes the target script code to obtain the display position and the display size of each content in the display window of the client. And then, rendering each item of content to a display position corresponding to each item of content according to the display size of each item of content to obtain the target page.

The client executes the target script code to obtain the window width of the display window of the client, and then continues to execute the target script code, and determines the column number, the horizontal distance, the vertical distance and the column width of the display content of the display window based on the width of the display window, wherein the horizontal distance is the distance between two adjacent columns, and the vertical distance is the distance between the contents displayed in the same column. Specifically, the object script code includes a mapping relationship between a window width, a column number, a horizontal distance, and a vertical distance, and based on the mapping relationship and the window width of the display window of the client, the column number, the horizontal distance, and the vertical distance corresponding to the client can be determined, for example, when the window width is greater than or equal to 1424px, the column number can be set to be 5 columns, the horizontal distance is 32px, and the vertical height is 5px. Then, the column width is determined based on the horizontal distance and the column number. By way of example, the column width can be represented by formula (1):

columnWidth=(width-(gapH*(columns+1)+1))/(columns+1);

Wherein columnWidth is column width, width is window width, gapH is horizontal distance, column is column, and (column+1) represents side column as a column to divide the window width, so the total column number can be added 1 on column basis, (column+1) +1) represents the distance between the leftmost column and the left edge, and the distance between the rightmost column and the right edge is also set as gapH.

Then, a column height index vector corresponding to the column number is constructed for the column number, wherein each element in the column height index vector is used for indicating the height of the column corresponding to the element, each element in the column height index vector corresponds to one column, each element is used for indicating the height of the column, for example, as shown in fig. 8, when the column number is 3 columns, a column height index vector (index 1, index2, index 3) with a dimension of 3 can be constructed, the column heights of one column are respectively represented by index1, index2 and index3, the original height and the original width of each content are sequentially obtained from the second data block, namely, the second data block is parsed to obtain a second character string, and then the second character string is sequentially parsed to sequentially obtain each content and the original height and the original width of each content. Finally, a display position and a display size of each item of content in the display window are determined based on the original height, the original width, the column width, the horizontal distance, the vertical distance, and the column height index vector of each item of content.

For each item of content, the column with the smallest column height is obtained based on the column height index vector, the column with the smallest column height is taken as a target column corresponding to the item of content, namely the item of content is arranged under the target column, and the column height corresponding to the item of content is determined based on the column height and the vertical distance corresponding to the target column. As shown in fig. 8, the first column is the target column if the column height of the first column is the smallest, and then the sum of the column height and the vertical distance of the first column is the column height of the item of content. Then, a row width corresponding to each item of content is determined based on the target column, the column width, and the horizontal distance. Illustratively, based on the target column, the number of horizontal distances involved in the calculation, and the number of columns involved in the calculation are determined, thereby determining the row width to which the item of content corresponds. Further, based on the original height, original width, and column width of each item of content, determining a display height of each item of content under the target column, i.e., obtaining a ratio between the column width and the original width, and taking a product between the original height and the ratio as the display height. And obtaining the display size of each item of content based on the display height of each item of content under the target column and the column width, namely taking the display height of each item of content under the target column as the display height of the content and taking the column width as the width of each item of content.

In one embodiment of the present application, since the first data block, the second data block and the third data block are forwarded to the client by each gateway step by step, the first data block, the second data block and the third data block each include indication information, where the indication information is used to instruct each gateway to directly forward the first data block, the second data block and the third data block, that is, instruct each gateway to close the buffering function for the first data block, the second data block and the third data block, so as to transmit the first data block, the second data block and the third data block to the client in time.

The indication information is location/explore { proxy_ buffers 8;proxy_buffering off }, and the cache function of proxy_ buffers 8 is closed.

In one embodiment of the application, the server renders the target page through streaming, so as shown in fig. 9, the sequence of rendering the target page by the server is that the client sends a rendering request to the server through a gateway, then, after receiving the rendering request, the server starts to assemble an HTML file for the client, and requests service data of the target page while assembling the HTML file, and then, in the process of assembling the HTML, the server firstly carries out streaming transmission on the head part of the target page, so that a browser of the client can download the head part and analyze the head part, thereby obtaining the layout and view of the target page. Then, after streaming the head part, the client starts streaming the basic data of the target page, the browser can download the basic data and render the basic data, and the basic content of the target page can be rendered. And finally, after the service end receives the service data of the target page, carrying out streaming transmission on the service data, correspondingly, downloading the service data by a browser of the client end, rendering the service data, and rendering the service content of the target page, thereby rendering the complete target page. Compared with the rendering sequence shown in fig. 2, the method and the device can execute the request service data in parallel with the process of assembling the HTML, thereby reducing the rendering time of the target page, and the basic content of the target page is firstly transmitted back to the client in a streaming manner without waiting for a long-time complete white screen, so that the user experience is improved.

Referring to fig. 10, fig. 10 is a schematic diagram of a server according to an embodiment of the present application. The server 1000 includes a transceiver unit 1001 and a processing unit 1002, where:

a transceiver unit 1001, configured to receive a rendering request for a target page from a client, where the rendering request is used to obtain basic data and service data of the target page;

a processing unit 1002, configured to return, in response to the rendering request, a first data block to the client, so that the client renders at least a portion of the base content of the target page based on the first data block, where the first data block is obtained by encoding a segment of the base data;

The transceiver 1001 is further configured to return, after the service server returns the service data to the server, a second data block to the client, so that the client renders at least a portion of the service content of the target page based on the second data block, where the second data block is obtained by encoding a segment of the service data.

In one embodiment of the present application, the processing unit 1002 is further configured to, before returning the first data block to the client;

Responding to the rendering request, and assembling basic data of the target page;

dividing the basic data to obtain a segment of the basic data;

rendering a segment of the basic data to obtain a first character string;

And carrying out block transmission coding on the first character string to obtain the first data block.

In one embodiment of the present application, in rendering a segment of the base data to obtain a first string, the processing unit 1002 is specifically configured to:

Capturing, by the responsive component, content of the rendering process;

Compiling, by a renderer, an HTML template into a rendering function with the responsive component capturing the underlying data;

Taking one segment of the base data as an input to the rendering function to create a first virtual document object model Vdom corresponding to the one segment of the base data;

And if the rendering function returns to the first Vdom, rendering the first Vdom by using a character string rendering function to obtain the first character string.

In one embodiment of the present application, the processing unit 1002 is further configured to return a failure response to the rendering request to the client if the rendering function does not return to the first Vdom, and return an HTML file of the target page to the client in a server rendering manner, so that the client renders the target page based on the HTML file.

In one embodiment of the present application, before the second data block is returned to the client, the processing unit 1002 is further configured to segment the service data to obtain a segment of the service data, render the segment of the service data to obtain a second string, and perform block transmission encoding on the second string to obtain the second data block.

Referring to fig. 11, fig. 11 is a schematic diagram of a client according to an embodiment of the present application. The client 1100 includes a transceiving unit 1101 and a processing unit 1102, wherein:

The receiving and transmitting unit 1101 is configured to send a rendering request for a target page to a server, where the rendering request is used to obtain basic data and service data of the target page; receiving a first data block from the server, wherein the first data block is obtained by encoding a segment of the basic data by the server, and the basic data is obtained by the server in response to the rendering request;

The processing unit 1102 is configured to render at least a portion of the base content of the target page based on the first data block, and render the base content of the target page after the base data is acquired;

The transceiver 1101 is further configured to receive a second data block from the server, where the second data block is obtained by encoding a segment of the service data by the server, and the service data is obtained by the server in response to the rendering request;

and the processing unit 1102 is configured to render at least a portion of the service content based on the second data block, and render the service content of the target page after the service data is acquired.

In one embodiment of the present application, the service content includes a plurality of content items, the transceiving unit 1101 further configured to receive a third data block streamed by the object script code from the client after the service data is acquired, and the processing unit 1102 further configured to:

receiving a third data block from the server, wherein the third data block is obtained by encoding a target script code;

analyzing the third data block to obtain the target script code;

Executing the target script code to obtain the display position and the display size of each item of content in the display window of the client;

And rendering each item of content to a display position corresponding to each item of content according to the display size of each item of content so as to render the service content of the target page.

In one embodiment of the present application, in running the target script code, the processing unit 1102 is specifically configured to:

acquiring the size of a display window of the client;

Determining the column number, the horizontal distance, the vertical distance and the column width of the display content of the display window based on the window size, wherein the horizontal distance is the distance between two adjacent columns, and the vertical distance is the distance between the content displayed in the same column;

Constructing a column height index vector corresponding to the column number, wherein each element in the column height index vector is used for indicating the height of a column corresponding to the element;

Sequentially acquiring the original height and the original width of each content from the second data block;

A display position and a display size of each item of content in the display window are determined based on an original height, an original width, the column width, the horizontal distance, the vertical distance, and the column height index vector of each item of content.

In one embodiment of the present application, the processing unit 1102 is specifically configured to determine a display position and a display size of each item of content in the display window based on the original height, the original width, the column width, the horizontal distance, the vertical distance, and the column height index vector of each item of content:

For each item of content, taking a column with the minimum column height as a target column corresponding to each item of content based on the column height index vector;

Determining a column height corresponding to each item of content based on the column height corresponding to the target column and the vertical distance;

Determining a row width corresponding to each item of content based on the target column, the column width, and the horizontal distance;

determining a display height of each item of content under the target column based on the original height, original width, and column width of each item of content;

Determining the display position of each item of content in the display window based on the column height, the row width and the display height under the target column corresponding to each item of content;

the display size of each item of content is determined based on the display height of each item of content under the target column and the width of the target column.

Referring to fig. 12, fig. 12 is a schematic diagram of an electronic device according to an embodiment of the application. As shown in fig. 12, the electronic device 1200 includes a transceiver 1201, a processor 1202, and a memory 1203. Which are connected by a bus 1204. The memory 1203 is used for storing computer programs and data, and the data stored in the memory 1203 may be transferred to the processor 1202. The electronic device 1200 may be the server 1000 or the client 1100.

Optionally, when the electronic device 1200 is the server 1000, the processor 1202 is configured to read the computer program in the memory 1203 to perform the following operations:

Specifically, the transceiver 1201 may be the transceiver unit 1001 of the server 1000 in the embodiment shown in fig. 10, and the processor 1202 may be the processing unit 1002 of the server 1000 in the embodiment shown in fig. 10, and specific functions of the transceiver 1201 and the processor 1202 are not described in detail;

alternatively, when the electronic device 1200 is the client 1100 described above, the processor 1202 is configured to read the computer program in the memory 1203 to perform the following operations:

Specifically, the transceiver 1201 may be the transceiver 1101 of the client 1100 of the embodiment shown in fig. 11, and the processor 1202 may be the processing unit 1102 of the client 1100 of the embodiment shown in fig. 11, and specific functions of the transceiver 1201 and the processor 1202 are not described in detail;

It should be understood that the client in the present application may include a smart Phone (such as an Android Phone, an iOS Phone, a Windows Phone, etc.), a tablet computer, a palm computer, a notebook computer, a Mobile internet device MID (Mobile INTERNET DEVICES, abbreviated as MID), or a wearable device, etc. The above clients are merely examples and are not exhaustive, including but not limited to the above clients. In practical application, the client can also comprise an intelligent vehicle-mounted terminal, computer equipment and the like.

The server of the present application may be a server, for example, a cloud computing server, a content delivery network (Content Delivery Network, CDN) server, a network time protocol (Network Time Protocol, NTP), a domain name resolution system (domain NAME SYSTEM, DNS) server, and other various types of servers. The servers described above are merely examples, and are not exhaustive, including but not limited to the servers described above.

Embodiments of the present application also provide a computer-readable storage medium storing a computer program that is executed by a processor to implement some or all of the steps of any one of the page rendering methods described in the method embodiments above.

Embodiments of the present application also provide a computer program product comprising a non-transitory computer-readable storage medium storing a computer program operable to cause a computer to perform part or all of the steps of any one of the page rendering methods described in the method embodiments above.

It should be noted that, for simplicity of description, the foregoing method embodiments are all described as a series of acts, but it should be understood by those skilled in the art that the present application is not limited by the order of acts described, as some steps may be performed in other orders or concurrently in accordance with the present application. Further, those skilled in the art will also appreciate that the embodiments described in the specification are alternative embodiments, and that the acts and modules referred to are not necessarily required for the present application.

In the foregoing embodiments, the descriptions of the embodiments are emphasized, and for parts of one embodiment that are not described in detail, reference may be made to related descriptions of other embodiments.

In the several embodiments provided by the present application, it should be understood that the disclosed apparatus may be implemented in other manners. For example, the apparatus embodiments described above are merely illustrative, such as the division of the units, merely a logical function division, and there may be additional manners of dividing the actual implementation, such as multiple units or components may be combined or integrated into another system, or some features may be omitted, or not performed. Alternatively, the coupling or direct coupling or communication connection shown or discussed with each other may be an indirect coupling or communication connection via some interfaces, devices or units, or may be in electrical or other forms.

The units described as separate units may or may not be physically separate, and units shown as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

In addition, each functional unit in the embodiments of the present application may be integrated in one processing unit, or each unit may exist alone physically, or two or more units may be integrated in one unit. The integrated units described above may be implemented either in hardware or in software program modules.

The integrated units, if implemented in the form of software program modules, may be stored in a computer-readable memory for sale or use as a stand-alone product. Based on this understanding, the technical solution of the present application may be embodied essentially or partly in the form of a software product, or all or part of the technical solution, which is stored in a memory, and includes several instructions for causing a computer device (which may be a personal computer, a server, a network device, or the like) to perform all or part of the steps of the method according to the embodiments of the present application. The Memory includes a U disk, a Read-Only Memory (ROM), a random access Memory (RAM, random Access Memory), a removable hard disk, a magnetic disk, or an optical disk, etc. which can store the program codes.

Those of ordinary skill in the art will appreciate that all or part of the steps in the various methods of the above embodiments may be implemented by a program to instruct related hardware, where the program may be stored in a computer readable Memory, and the Memory may include a flash disk, a Read-Only Memory (ROM), a random access Memory (Random Access Memory, RAM), a magnetic disk or an optical disk, etc.

The foregoing has outlined rather broadly the more detailed description of embodiments of the application, wherein the principles and embodiments of the application are explained in detail using specific examples, the above examples being provided solely to facilitate the understanding of the method and core concepts of the application; meanwhile, as those skilled in the art will have variations in the specific embodiments and application scope in accordance with the ideas of the present application, the present description should not be construed as limiting the present application in view of the above.

Claims

1. A method for rendering a page, the method being applied to a server, the method comprising:

2. The method of claim 1, wherein before returning the first data block to the client, the method further comprises:

dividing the basic data to obtain a segment of the basic data;

rendering a segment of the basic data to obtain a first character string;

3. The method of claim 2, wherein rendering a segment of the base data results in a first string, comprising:

Capturing, by the responsive component, content of the rendering process;

4. A method according to claim 3, characterized in that the method further comprises:

and if the rendering function does not return to the first Vdom, returning a failure response to the rendering request to the client, and returning an HTML file of the target page to the client in a server rendering mode so that the client renders the target page based on the HTML file.

5. The method of any of claims 1-4, wherein prior to returning the second data block to the client, the method further comprises:

Dividing the service data to obtain a fragment of the service data;

rendering a fragment of the service data to obtain a second character string;

and carrying out block transmission coding on the second character string to obtain the second data block.

6. A method of page rendering, applied to a client, the method comprising:

7. The method of claim 6, wherein the business content comprises a plurality of items of content, wherein after the business data is obtained, the method further comprises:

analyzing the third data block to obtain the target script code;

8. The method of claim 7, wherein the running the object script code to obtain a display position and a display size of each item of content in a display window of the client comprises:

acquiring the size of a display window of the client;

9. The method of claim 8, wherein the determining a display position and a display size of each item of content in the display window based on an original height, an original width, the column width, the horizontal distance, the vertical distance, and the column height index vector of each item of content comprises:

10. The server side is characterized by comprising a receiving and transmitting unit and a processing unit;

11. The client is characterized by comprising a receiving and transmitting unit and a processing unit;

12. An electronic device comprising a processor and a memory, the processor being coupled to the memory, the memory being for storing a computer program, the processor being for executing the computer program stored in the memory to cause the electronic device to perform the method of any one of claims 1-9.

13. A computer readable storage medium, characterized in that the computer readable storage medium stores a computer program, which is executed by a processor to implement the method of any one of claims 1-9.