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

Abstract

The embodiment of the invention provides a page rendering method, a server, a client, equipment and a storage medium. The method comprises the following steps: receiving a rendering request for a target page from a client, wherein the rendering request is used for acquiring 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 one part of basic content of the target page based on the first data block; requesting business data of the target page from a business server in response to the rendering request; and after the service server returns the service data to the server, returning a second data block to the client, so that the client renders at least one part of the service content of the target page based on the second data block. The embodiment of the invention is beneficial to improving the user experience.

Description

Technical Field

[0001] The present application relates to the technical field of page rendering, and in particular to a page rendering method, a server, a client, a device and a storage medium. Background Art

[0002] With the development of web technology, more and more applications have developed web features. The lower the web page rendering time, the shorter the time users see the content, the greater the probability of users browsing the content, and the higher the exposure and click volume of the content. Therefore, the web page rendering time is a key performance indicator of the web version of the application.

[0003] At present, in order to provide the best user experience and a higher functional limit, the server-side rendering (SSR) architecture is generally used to render web pages. However, when using the SSR architecture to render web pages, the time to render a complete web page is still long, and the user experience is low. Summary of the invention

[0004] Embodiments of the present application provide a page rendering method, a server, a client, a device, and a storage medium.

[0005] In a first aspect, an embodiment of the present application provides a page rendering method, which is applied to a server, and the method includes:

[0006] Receiving a rendering request for a target page from a client, wherein the rendering request is used to obtain basic data and business data of the target page;

[0007] In response to the rendering request, returning a first data block to the client, so that the client renders at least a portion of the basic content of the target page based on the first data block, wherein the first data block is obtained by encoding a fragment of the basic data;

[0008] In response to the rendering request, requesting business data of the target page from a business server;

[0009] After the business server returns the business data to the service end, it returns 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, where the second data block is obtained by encoding a fragment of the business data.

[0010] In a second aspect, an embodiment of the present application provides a page rendering method, which is applied to a client, and the method includes:

[0011] Sending a rendering request for a target page to a server, wherein the rendering request is used to obtain basic data and business data of the target page;

[0012] receiving a first data block from the server, where the first data block is obtained by the server encoding a fragment of the basic data, and the basic data is obtained by the server in response to the rendering request;

[0013] Rendering at least a portion of the basic content of the target page based on the first data block, and rendering the basic content of the target page after acquiring the basic data;

[0014] receiving a second data block from the server, where the second data block is obtained by the server encoding a segment of the business data, and the business data is obtained by the server from the business server in response to the rendering request;

[0015] At least a portion of the business content is rendered based on the second data block, and after the business data is acquired, the business content of the target page is rendered.

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

[0017] The transceiver unit is used to receive a rendering request for a target page from a client, wherein the rendering request is used to obtain basic data and business data of the target page;

[0018] The processing unit is configured to return a first data block to the client in response to the rendering request, so that the client renders at least a portion of the basic content of the target page based on the first data block, wherein the first data block is obtained by encoding a fragment of the basic data; and request the business data of the target page from the business server in response to the rendering request;

[0019] The transceiver unit is also used to return a second data block to the client after the business server returns the business data to the server, so that the client renders at least a part of the business content of the target page based on the second data block, and the second data block is obtained by encoding a fragment of the business data.

[0020] In a fourth aspect, an embodiment of the present application provides a client, comprising: a transceiver unit and a processing unit;

[0021] The transceiver unit is used to send a rendering request for a target page to a server, wherein the rendering request is used to obtain basic data and business data of the target page; receive a first data block from the server, wherein the first data block is obtained by the server encoding a fragment of the basic data, and the basic data is obtained by the server in response to the rendering request;

[0022] The processing unit is configured to render at least a portion of the basic content of the target page based on the first data block, and render the basic content of the target page after acquiring the basic data;

[0023] The transceiver unit is further configured to receive a second data block from the server, where the second data block is obtained by the server encoding a segment of the business data, and the business data is obtained by the server from the business server in response to the rendering request;

[0024] The processing unit is configured to render at least a portion of the business content based on the second data block, and render the business content of the target page after acquiring the business data.

[0025] In a fifth aspect, an embodiment of the present application provides an electronic device, comprising: a processor and a memory, wherein the processor is connected to the memory, the memory is used to store a computer program, and the processor is used to execute the computer program stored in the memory, so that the electronic device performs the method described in the first aspect or the second aspect.

[0026] In a sixth aspect, an embodiment of the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method described in the first aspect or the second aspect is implemented.

[0027] In a seventh aspect, an embodiment of the present application provides a computer program product, wherein the computer program product includes a computer program, and when the computer program is executed by a processor, the method described in the first aspect or the second aspect is implemented.

[0028] Implementing the embodiments of the present application has the following beneficial effects:

[0029] It can be seen that in the embodiment of the present application, after receiving the page rendering request from the client, the server will encode and transmit the basic data of the target page to the client in segments, so that the client can first obtain the first data block of the basic data, and then the client can first render the first data block to display the basic content of the target page. Since the basic data is easy to obtain, the server can quickly return it to the client, so that the client can quickly display a basic content and avoid waiting for a long time for a blank screen. Then, in the process of returning the first data block, the server can request the business data of the target page from the business server, so that while the client is rendering the basic content, the server can obtain the business data in parallel, and after obtaining a segment of the business data, it will immediately return the segment to the client for rendering the business content, so that users can see the business content as soon as possible, improving the page rendering efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0030] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0031] Figure 1 A schematic diagram of a web page rendered using an SSR architecture provided in an embodiment of the present application;

[0032] Figure 2 A schematic diagram of an SSR architecture rendering sequence provided in an embodiment of the present application;

[0033] Figure 3 A schematic diagram of a page rendering system provided in an embodiment of the present application;

[0034] Figure 4 A schematic diagram of a flow chart of a page rendering method provided in an embodiment of the present application;

[0035] Figure 5 A schematic diagram of an HTML file provided in an embodiment of the present application;

[0036] Figure 6 A schematic diagram of rendering Vdom provided in an embodiment of the present application;

[0037] Figure 7 A schematic diagram of rendering basic data and rendering service content provided in an embodiment of the present application;

[0038] Figure 8 A schematic diagram of an adaptive display provided in an embodiment of the present application;

[0039] Fig. 9 A schematic diagram of a rendering sequence provided in an embodiment of the present application;

[0040] Fig.10 A schematic diagram of a server provided in an embodiment of the present application;

[0041] Fig.11 A schematic diagram of a client provided in an embodiment of the present application;

[0042] Fig.12 A schematic diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0043] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0044] The terms "first", "second", "third" and "fourth" etc. in the specification and claims of the present application and the drawings are used to distinguish different objects, rather than to describe a specific order. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not limited to the listed steps or units, but optionally includes steps or units that are not listed, or optionally includes other steps or units inherent to these processes, methods, products or devices.

[0045] Reference to "embodiments" herein means that a particular feature, result, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present application. The appearance of the phrase in various locations in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0046] First of all, it should be noted that the pages involved in this application can be understood as web pages. Furthermore, this application mainly deals with the homepage of the web page. Therefore, the pages mentioned later can be understood as the homepage or the first screen.

[0047] In order to facilitate understanding of the technical solution of the present application, the homepage of a web page rendered using the SSR architecture is first described as an example.

[0048] See also Figure 1 , Figure 1A schematic diagram of an SSR architecture for rendering a web page provided in an embodiment of the present application.

[0049] like Figure 1 As shown, the user accesses a web page through a browser. The browser requests the SSR server to render the web page. The SSR server renders the web page in response to the browser's request, and the SSR server renders the complete content of the web page. Specifically, the SSR server requests the dynamic content of the web page from the business server, the business server returns the dynamic content to the SSR server, and then the SRR server renders the complete content of the web page based on the dynamic content, that is, renders the Hypertext Markup Language (HTML) file of the web page, and returns the assembled HTML file to the browser. Correspondingly, after the browser receives the rendered HTML file, it can render a complete web page by parsing the HTML file of the web page, and by parsing the HTML file, it can obtain a cascading style sheet (CSS) link, and through the CSS link, request the CSS static resources of the web page from the Content Delivery Network (CDN), and the CDN returns the CSS static resources to the browser, so that the browser further adjusts the layout and style of the rendered web page based on the CSS static resources, and renders a web page adapted to the browser. Finally, the user can see the complete web page through the browser.

[0050] Therefore, based on Figure 1 The rendering process shown in the figure, the SSR architecture rendering order can be as follows Figure 2 As shown, specifically, the client first initiates a web page rendering request to the server through the gateway; then, the SSR server requests the dynamic content of the web page. After obtaining the dynamic content, the SSR server renders the dynamic content to assemble the basic content and dynamic content of the web page into an HTML file and send it to the client. The client's browser parses the HTML file and renders the web page through the browser, and the user can see the web page.

[0051] It can be seen that using the SSR architecture to render a web page requires the SSR server to fully assemble the complete HTML file of the page before returning the HTML file to the client for rendering, resulting in a long rendering time and a long white screen wait, resulting in a poor user experience.

[0052] For the purpose of unified description, it is first explained that the pages involved in this application can be understood as web pages. The two are essentially the same and do not need to be distinguished. Furthermore, the target page rendered by this application can be any type of web page, as well as a web page in any browsing stage. This application mainly uses the target page as the homepage of the application, also known as the discovery page of the application, as an example for explanation; secondly, the static resources of the web pages involved in this application can also be understood as the basic data of the web pages, and the dynamic resources of the web pages can also be understood as the business data of the web pages. Then, accordingly, the content rendered by the static resources (basic data) of the web pages can also be called the skeleton screen of the web pages or the HTML pages of the web pages or the basic content of the web pages. They are essentially the same and do not need to be distinguished. The content rendered by the dynamic resources (business data) of the web pages can also be called the dynamic content of the web pages or the business content of the web pages. They are also essentially the same and do not need to be distinguished.

[0053] That is to say, the basic data corresponds to the basic content of the target page, for example, the skeleton content or frame content of the target page, and the same basic content is usually displayed for different users. The business data corresponds to the business content of the target page, and needs to be obtained from the corresponding business server. In some embodiments, the business server obtains business data that matches the user based on the user, and then renders and displays the corresponding business content. Different business content can usually be displayed for different users. For example, in a recommendation scenario, the business content may be personalized media content for the user; in an advertising scenario, the business content may be personalized advertising content for the user. This application is mainly explained using the example of card notes as business content.

[0054] See also Figure 3 , Figure 3 A schematic diagram of a page rendering system provided in an embodiment of the present application.

[0055] like Figure 3 As shown, the page rendering system includes: a client 10, a server 20 and a business server 30. The client 10 is installed with a browser 40.

[0056] Exemplarily, a user can browse the target page of the application through a 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 first obtains the basic data of the target page, and after obtaining a fragment of the basic data, encodes a fragment of the basic data to obtain a first data block corresponding to the fragment, and then transmits the first data block to the client 10, and continues to obtain the basic data of the target page. Correspondingly, the browser 40 of the client 10 renders based on the first data block to obtain at least a part of the basic content of the target page, so that the client 10 obtains the complete basic data and can render the basic content of the target page. Then, in the process of returning the first data block to the client 10, the server 20 will synchronously request the business data of the target page from the business server 30, and when the server 20 obtains a fragment of the business data, it can encode the fragment to obtain a second data block corresponding to the fragment, and return the second data block to the client 10, and the server 20 will continue to obtain the business data until the complete business data is returned to the client 10. Correspondingly, the browser of the client 10 renders at least a portion of the business content based on the second data block, and after obtaining the business data, that is, obtaining the complete business data, can render the business content of the target page, that is, completely render the target page.

[0057] It can be seen that in the embodiment of the present application, after receiving the page rendering request from the client, the server will encode and transmit the basic data of the target page to the client in segments, so that the client can first obtain the first data block of the basic data, and then the client can first render the first data block to display the basic content of the target page. Since the basic data is easy to obtain, the server can quickly return it to the client, so that the client can quickly display a basic content and avoid waiting for a long time for a blank screen. Then, in the process of returning the first data block, the server can request the business data of the target page from the business server, so that while the client is rendering the basic content, the server can obtain the business data in parallel, and after obtaining a segment of the business data, it will immediately return the segment to the client for rendering the business content, so that users can see the business content as soon as possible, improving the page rendering efficiency.

[0058] See also Figure 4 , Figure 4 A flow chart of a page rendering method provided in an embodiment of the present application. The method is applied to the above-mentioned rendering system. The method includes but is not limited to the following steps:

[0059] 401: The client sends a rendering request for a target page to the server, wherein the rendering request is used to obtain basic data and business data of the target page.

[0060] It should be noted that this application mainly uses the target page as the homepage of the web version of the application, which can also be called the first screen, as an example for explanation, but this application does not limit the type of the target page.

[0061] Exemplarily, when a user browses the target page through a browser of a client, the client may send a rendering request to the server through the browser of the client. Accordingly, the server receives the rendering request. Optionally, the rendering request may be a Hypertext Transfer Protocol (HTTP) request, and the rendering request includes a Uniform Resource Locator (URL) of the target page.

[0062] 402: In response to the rendering request, the server returns a first data block to the client, so that the client renders at least a portion of the basic content of the target page based on the first data block, where the first data block is obtained by encoding a fragment of the basic data.

[0063] Exemplarily, in response to the rendering request, the server assembles basic data of the target page; segments the basic data to obtain a fragment of the basic data; renders a fragment of the basic data to obtain a first string; and performs block transfer encoding on the first string to obtain the first data block.

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

[0065] Optionally, the present application mainly uses the HTML file of the target page as an example for explanation, and the basic content can be understood as the skeleton screen of the target page.

[0066] Optionally, when returning basic data, that is, returning an HTML file, the present application divides the HTML file of the target page into multiple fragments, and then encodes each fragment separately to obtain a data block corresponding to each fragment, and returns the data block of each fragment to the client for rendering in succession. Specifically, after the server assembles the basic data of the target page, it divides the basic data of the target page into multiple fragments, so that each fragment can render at least a part of the basic content, and encodes each fragment separately (block transfer encoding), obtains a data block corresponding to each fragment, and returns the data block corresponding to each fragment to the client in succession.

[0067] Therefore, the first data block in step 402 may be a data block of any fragment, and the present application mainly uses the first data block as a partially corresponding data block as an example for explanation.

[0068] It should be noted that if Figure 5 As shown in the figure, a complete HTML file generally consists of three parts, namely: , , . Among them, is the root tag of the website, and all web page tags are in it, so , and are written at the beginning and end of an HTML document. It mainly includes the metadata of the page and information related to the page, which is usually not displayed directly on the page. For example, the head part includes <meta> Elements: used to set character encoding, viewport settings, <title> Element: defines the title of the page, displayed in the browser tab;< / title> <link> Element: used to link to external resources, such as CSS static resources. <script>元素：引用外部JavaScript文件或包含内联脚本；<style>元素：包含内联css样式。<body>主要包括应用本体和JavaScript脚本代码，其中，应用本体主要包括页面上可见的内容，其中，该页面上的可见的内容又可以区分为基础数据和业务数据，例如，基础数据包括但不限于：页面的logo、导航栏、搜索栏、页脚，等等；业务数据包括但不限于：文本、图像、链接、表格和表单，等等。如图5所示，应用本体主要存放在标签<div id＝"${root}">和之间，JavaScript目标脚本代码主要存放在标签<script>和< / script> In the meantime, the JavaScript target script code of this application is mainly used to achieve adaptive layout.

[0069] It should be noted that after receiving the rendering request, the server can directly obtain the HTML template of the target page, so as to obtain the part of the target page, and the part. This application mainly uses the part as an example for explanation. Therefore, before returning the first data block to the client, the server first returns the part of the target page to the client, that is, the server first encodes the part as a fragment to obtain the data block corresponding to the part, and then the client can parse the data block to obtain the part. In this way, the client can first execute the part to parse out the HTML version, language, etc. used by the target page; execute the part to obtain the CSS static resources of the target page, such as parsing embedded CSS static resources or downloading CSS static resources based on links, so that the page layout and page structure of the target page can be parsed based on the CSS static resources.

[0070] The basic data of the target page is fixed, and in response to the rendering request, the server can directly obtain the basic data. Then, the server first renders the first hypertext markup language string of the basic data.

[0071] Optionally, in streaming rendering, the transmission of data blocks precedes the rendering of data blocks, so once the data blocks are transmitted, they cannot be withdrawn. Therefore, in order to ensure that the data blocks can be rendered successfully, a synchronous creation is required on the server side first.

[0072] Exemplarily, after acquiring the basic data, the server divides the basic data to obtain a fragment of the basic data, that is, a fragment corresponding to the first data block. Then, a rendering function is used to render a fragment of the basic data to create a first virtual document object model Vdom corresponding to a fragment of the basic data, that is, the server determines whether it can create a first Vdom of a fragment of the basic data. Since there is no failure condition when converting Vdom to actual dom, if the first Vdom can be created, it means that the browser can successfully render the first data block. Then, the string rendering function is used to render the first Vdom to obtain the first string of the basic data, wherein the string involved in this application is an HTML string, and the strings mentioned subsequently can all be understood as HTML strings. The two are essentially the same and do not need to be distinguished.

[0073] Specifically, Figure 6 As shown, first the server creates a responsive component Component reactive, which captures the state of the renderer (render) by tracking dependencies (track dependencies); after the server obtains a fragment of the basic data, it will give a fragment of the basic data to the renderer for rendering. Then Component reactive can capture a fragment of the basic data being used by the renderer, and will trigger (Trigger) the renderer to compile (Compiled Into) the HTML template of the target page, i.e. Template, into a rendering function (Render function), and then the rendering function will receive the state of the renderer (i.e. a fragment of the basic data) as input data for rendering, and return (returns) Virtual dom, i.e., the first Vdom. Then, the first Vdom is used as the input data of the string rendering function (rendertostring), and the first Vdom is rendered to obtain the first string of a fragment of the basic data.

[0074] Furthermore, if Figure 6 As shown, if a segment of basic data, that is, the first data block is rendered for the first time, if the first Vdom is converted into a real dom, the renderer can use the Mount function to render the first Vdom into an Actual dom.

[0075] Furthermore, after obtaining the first hypertext markup language string, in order to support streaming transmission, it is necessary to encode the first string for block transmission to obtain the first data block. Exemplarily, first configure the response header for streaming transmission, for example, set the content type of the response header to string, character set, streaming tag, wherein the streaming tag is used to indicate that the transmission mode of the data block is streaming transmission, for example, the streaming tag can be: {end: false}. The streaming tag indicates that after receiving the data block, the client does not stop responding and continues to receive the data block. Therefore, for the first string and the streaming tag as the payload encoded for block transmission, the payload is encoded based on the response header to obtain the first data block.

[0076] Specifically, first import the Readable class from the stream module of the rendering framework (e.g., the vue framework), and import the pipeline method from the stream module. Use the pipeline method to stream the first HTML string to obtain the first data block. Exemplarily, use the Readable class to read the first string from the stream module. For example, Readable.from(ˋ${headPart} <div id＝"${root}">ˋ), that is, read the tag to <div id＝"${root}">The first character string can be obtained by reading the content between the two characters, and then the first character string is transferred-encoded in chunks to obtain the first data block.

[0077] In one embodiment of the present application, if the first virtual DOM is not created, that is, the rendering function does not return the first Vdom, the server returns a failure response to the rendering request to the client, and the failure response is used to indicate that the streaming rendering of the target page has failed. The server can return the HTML file of the target page to the client through server-side rendering, so that the client renders the target page based on the HTML file.

[0078] Specifically, use the try...catch statement to wrap the code block that causes the error, for example, wrap the rendering function. In this way, when the rendering function cannot render the Vdom, the rendering error will be detected, and then the degradation rendering logic will be executed.

[0079] Optionally, if the downgrade rendering logic is to render through the server, the server will re-acquire the basic data and business data of the target page, assemble the HTML file of the target page based on the basic data and business data, and return the HTML file to the client, and the client will render the target page based on the HTML file.

[0080] Optionally, if the degraded rendering logic is to return a pre-configured HTML page to the client, such as an error prompt page, the server may return the degraded HTML page to the client.

[0081] 403: The client renders at least a portion of the basic content of the target page based on the first data block, and renders the basic content of the target page after acquiring the basic data.

[0082] Exemplarily, the client parses the first data block to obtain the first string, that is, obtains a fragment of the basic data; then, based on the first string, that is, using a fragment of the basic data for rendering, obtain at least a part of the basic content of the target page, for example, if the first data block is a part, then the metadata of the target page and information related to the page can be obtained for the rendering; for another example, if the first data block is a part, then the fixed content on the target page can be rendered, such as the logo, navigation bar, search bar, and footer of the page. It can be understood that each time the server transmits the first data block encoded by a fragment of the basic data to the client, the client can render a part of the basic content based on the first data block, so that when the server transmits all the basic data to the client, that is, the client obtains the basic data, that is, after obtaining all the basic data, the basic content of the target page can be completely rendered. It can be seen that in this application, after the server obtains the basic data, it can encode and transmit the basic data in fragments, that is, stream it to the client, so that the client will get the fragments of the basic data as soon as possible, and render part of the basic content as much as possible for the user to watch, so that the user can see the content as soon as possible.

[0083] Specifically, after the server returns the part to the client, the client will parse the part to obtain the CSS static resource, based on which the element layout and element style of the page can be obtained. Then, after obtaining the first string, the tags of each basic data are parsed to obtain the attributes of each basic data; based on the attributes of each basic data, each basic data is rendered to the corresponding position of the client's display window to obtain the basic content. Specifically, if Figure 6 As shown, the browser renders a first Vdom based on the first string, and uses the Mount or Patch function to render the first Vdom into a first Actual dom. Finally, the browser renders basic content based on the first Actual dom, that is, renders each dom in the first Actual dom to the corresponding position of the display window of the client, thereby obtaining the basic content of the target page.

[0084] like Figure 7 As shown in the figure, the view and layout of the target page are first rendered based on the CSS static resources, and the places with content in the view are first filled with placeholders. Then, after obtaining the basic data, the basic data is filled into the corresponding position, and the placeholders at the corresponding position of the basic data are replaced with the basic data to obtain the basic content. Among them, the business data includes the cover image and title. For example, Figure 7 As shown on the right side of , after the browser obtains the fragment corresponding to the first blank card in the business data, it can render the cover image of the first blank card, that is, Figure 7 A window sill diagram is shown, and the title corresponding to the card is rendered, that is, Figure 7 The "beautiful window collection" shown, so that the user can see the business content corresponding to the first blank card. Figure 7 As shown, after the browser renders the business content corresponding to each blank card, the business content corresponding to each blank card can be found in Figure 7 The content shown on the right side will not be described one by one, and users can see the complete web page.

[0085] It should be noted that the client can also obtain a stream tag by parsing the first data block. Based on the stream tag, the client will continue to receive other data blocks and will not stop responding.

[0086] 404: In response to the rendering request, the server requests the business data of the target page from the business server.

[0087] Exemplarily, after receiving the rendering request, the server may synchronously request the business data of the target page from the business server, or, in the process of returning the first data block to the client, the server may request the business data of the target page from the business server. Exemplarily, the server may send a first data acquisition request to the business server, wherein the first data acquisition request includes the user information of the user, and the first data acquisition request is used to request the business server to assemble the business data of the target page. Exemplarily, the user information includes the user's identity information, preference information, location information, and so on. Accordingly, the business server determines the business data that matches the user based on the user information, that is, determines the business data recommended to the user. After the business server assembles the dynamic resource, it may send the dynamic resource to the server.

[0088] 405: After the business server returns the business data to the server, the server returns a second data block to the client, so that the client renders at least a portion of the business data of the target page based on the second data block, where the second data block is obtained by encoding a fragment of the business data.

[0089] It should be noted that after the server obtains a segment of the business data of the target page, the server can encode the segment of the business data to obtain the above-mentioned second data block.

[0090] Exemplarily, the business data is segmented to obtain a segment of the business data; the segment of the business data is rendered to obtain a second character string; and the second character string is block-transfer encoded to obtain the second data block.

[0091] In one embodiment of the present application, after the server obtains the business data, the server uses a rendering function to render a fragment of the business data to construct a second virtual document object model Vdom of a fragment of the business data, that is, the server determines whether it can create a second Vdom of a fragment of the business data. Since there is no failure condition in the conversion of Vdom to Actual dom, if the second Vdom can be constructed, it means that the browser can successfully render the second data block, and then use the string rendering function to render the second Vdom to obtain the second string.

[0092] Specifically, Figure 6 As shown, after the server obtains a fragment of business data, it will give a fragment of business data to the renderer for rendering. Then Component reactive can capture a fragment of business data being used by the renderer, that is, it captures the change in the state of the renderer, which will trigger the renderer to re-render. The renderer will compile the HTML template of the target page, that is, Template, into a rendering function. Then, the rendering function will receive the state of the renderer (that is, a fragment of business data) as input data for rendering, and return Virtual dom, that is, the second Vdom, that is, the new Vdom. Then, the second Vdom is used as the input data of the string rendering function (rendertostring), and the second Vdom is rendered to obtain the second string.

[0093] Furthermore, after obtaining the second character string, the second character string is encoded for block transmission to obtain a second data block. Specifically, in order to support streaming transmission, a streaming tag needs to be added to the end of the second character string to obtain the second data block. For example, the streaming tag can be: {end: false}. The streaming tag indicates that the second data block is a streaming transmission data block, and indicates that after rendering the second data block, the response does not stop and other data blocks continue to be received.

[0094] Specifically, the pipeline method is used to perform streaming processing on the second hypertext markup language string to obtain the second data block. Exemplarily, the Readable class is used to read the second hypertext markup language string from the stream module. Then (transfer-encoding chunk) is used to perform block transfer encoding on the second string, and a streaming tag is added to the end of the encoding result to obtain the second data block.

[0095] 406: The client renders at least a portion of the business content based on the second data block, and after acquiring the business data, renders the business content of the target page.

[0096] Exemplarily, after the client obtains the second data block, it parses the second data block to obtain the second string, and renders the page based on the second string to obtain the target page, that is, renders the complete target page. It is understandable that after the server obtains a fragment of the business data, it will encode the fragment and transmit it to the client, so that the client can use the fragment to render part of the business content. It is understandable that after the server returns all the business data to the client, the client can render the complete business content, that is, render the business content of the target page.

[0097] Specifically, Figure 7 As shown, similar to the server, the client can build a second Vdom corresponding to the business data based on the second string; then compare the second Vdom with the first Vdom to obtain the dom that needs to be updated, and then apply the dom that needs to be updated to the Actual dom to obtain a new Actual dom, and use the new Actual dom to render the page to obtain the target page, that is, find the updated Actual dom with the updated dom, render the dom to the placeholder at the corresponding position in the basic content, and thus render the target page.

[0098] In one embodiment of the present application, the business data includes multiple contents, such as multiple notes. The client can adaptively render the multiple contents based on the target script code. Exemplarily, the server streams the target script code to obtain a third data block, wherein the target script code is used to control the display position and display size of the business data in the display window of the client. Then, the server sends the third data block to the client. Correspondingly, the client receives the third data block, parses the third data block, obtains the third target script code, and then executes the target script code to obtain the display position and display size of each content in the display window of the client. Then, each content is rendered to the display position corresponding to each content according to the display size of each content to obtain the target page.

[0099] Exemplarily, the client executes the target script code to obtain the window width of the display window of the client; then continues to execute the target script code, and based on the width of the display window, determines the number of columns, horizontal distance, vertical distance and column width of the display content 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 target script code includes a mapping relationship between the window width, the number of columns, the horizontal distance and the vertical distance. Based on the mapping relationship and the window width of the display window of the client, the number of columns, the horizontal distance and the vertical distance corresponding to the client can be determined. For example, when the width of the window is greater than or equal to 1424px, the number of columns can be set to 5 columns, the horizontal distance to 32px, and the vertical height to 5px. Then, based on the horizontal distance and the number of columns, the column width is determined. Exemplarily, the column width can be expressed by formula (1):

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

[0101] Among them, columnWidth is the column width, width is the window width, gapH is the horizontal distance, columns is the number of columns, (columns+1) means that the sidebar divides the window width as a column, so the total number of columns can be added by 1 based on columns, and (columns+1)+1) means that the distance between the leftmost column and the left edge, and the distance between the rightmost column and the right edge are also set to the gapH.

[0102] Then, a column height index vector corresponding to the number of columns is constructed for the number of columns, wherein each element in the column height index vector is used to indicate the height of the column corresponding to the element, each element in the column height index vector corresponds to a column, and each element is used to indicate the height of the column, for example, Figure 8 As shown, when the number of columns is 3, a column height index vector (index1, index2, index3) with a dimension of 3 can be constructed, where index1, index2, and index3 represent the column height of a column respectively; the original height and original width of each content item are obtained from the second data block in turn, that is, the second data block is parsed to obtain the second string, and then the second string is parsed in turn to obtain each content item and the original height and original width of each content item in turn. Finally, based on the original height, original width, column width, horizontal distance, vertical distance of each content item and the column height index vector, the display position and display size of each content item in the display window are determined.

[0103] Exemplarily, for each content, based on the column height index vector, the column with the smallest column height is obtained, and the column with the smallest column height is used as the target column corresponding to the content, that is, the content is arranged under the target column; based on the column height and vertical distance corresponding to the target column, the column height corresponding to the content is determined. Figure 8 As shown, if the first column has the smallest column height, the first column is used as the target column, and then the sum of the column height of the first column and the vertical distance is used as the column height of the content. Then, based on the target column, the column width and the horizontal distance, the row width corresponding to each content is determined. Exemplarily, 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, so as to determine the row width corresponding to the content. Further, based on the original height, original width, and column width of each content, the display height of each content under the target column is determined, that is, the ratio between the column width and the original width is obtained, and the product between the original height and the ratio is used as the display height. Finally, based on the column height, row width, and display height under the target column corresponding to each content, the display position of each content in the display window is determined; based on the display height of each content under the target column and the column width, the display size of each content is obtained, that is, the display height of the content under the target column is used as the display height of the content, and the column width is used as the width of the content.

[0104] In one embodiment of the present application, since the first data block, the second data block and the third data block are all forwarded to the client step by step through each gateway, the first data block, the second data block and the third data block all include indication information, wherein 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, to instruct each gateway to turn off the caching function of the first data block, the second data block and the third data block, so as to facilitate timely transmission of the first data block, the second data block and the third data block to the client.

[0105] Exemplarily, the indication information is: location / explore{proxy_buffers 8; proxy_bufferingoff}, and the cache function of proxy_buffers 8 is turned off.

[0106] In one embodiment of the present application, the server of the present application renders the target page in a streaming manner. Therefore, Fig. 9 As shown, the specific order of the server rendering the target page is that the client sends a rendering request to the server through the gateway; then, after receiving the rendering request, the server starts to assemble the HTML file for the client, and requests the business data of the target page while assembling the HTML file. Then, in the process of assembling HTML, the server first streams the head part of the target page, so that the client's browser can download the head part and parse the head part to obtain the layout and view of the target page. Then, after streaming the head part, the client starts to stream the basic data of the target page. The browser can download the basic data, render the basic data, and render the basic content of the target page. Finally, after the server obtains the business data of the target page, it streams the business data. Accordingly, the client's browser downloads the business data, renders the business data, renders the business content of the target page, and renders the complete target page. Figure 2 Compared with the rendering order shown, the present application can execute the request business data and the HTML assembly process in parallel, thereby reducing the rendering time of the target page. Moreover, the basic content of the target page is first streamed back to the client, without having to wait for a long time for a completely white screen, thereby improving the user experience.

[0107] See also Fig.10 , Fig.10 A schematic diagram of a server provided in an embodiment of the present application. The server 1000 includes: a transceiver unit 1001 and a processing unit 1002, wherein:

[0108] The transceiver unit 1001 is used to receive a rendering request for a target page from a client, where the rendering request is used to obtain basic data and business data of the target page;

[0109] The processing unit 1002 is configured to return a first data block to the client in response to the rendering request, so that the client renders at least a portion of the basic content of the target page based on the first data block, wherein the first data block is obtained by encoding a fragment of the basic data; and request the business data of the target page from the business server in response to the rendering request;

[0110] The transceiver unit 1001 is also used to return a second data block to the client after the business server returns the business data to the server, so that the client renders at least a part of the business content of the target page based on the second data block, and the second data block is obtained by encoding a fragment of the business data.

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

[0112] In response to the rendering request, assembling basic data of the target page;

[0113] Segmenting the basic data to obtain a segment of the basic data;

[0114] Rendering a segment of the basic data to obtain a first character string;

[0115] The first character string is subjected to block transfer encoding to obtain the first data block.

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

[0117] Capture the content of the rendering process through responsive components;

[0118] When the responsive component captures the basic data, the renderer compiles the HTML template into a rendering function;

[0119] Taking a segment of the basic data as input of the rendering function to create a first virtual document object model Vdom corresponding to the segment of the basic data;

[0120] If the rendering function returns the first Vdom, the first Vdom is rendered using a string rendering function to obtain the first string.

[0121] In one embodiment of the present application, the processing unit 1002 is also used to return a failure response to the rendering request to the client if the rendering function does not return the first Vdom, and return the HTML file of the target page to the client through server-side rendering, so that the client renders the target page based on the HTML file.

[0122] In one embodiment of the present application, before returning the second data block to the client, the processing unit 1002 is further used to segment the business data to obtain a fragment of the business data; render a fragment of the business data to obtain a second character string; and perform block transmission encoding on the second character string to obtain the second data block.

[0123] See also Fig.11 , Fig.11 A schematic diagram of a client provided in an embodiment of the present application. The client 1100 includes: a transceiver unit 1101 and a processing unit 1102, wherein:

[0124] The transceiver unit 1101 is configured to send a rendering request for a target page to a server, wherein the rendering request is used to obtain basic data and business data of the target page; receive a first data block from the server, wherein the first data block is obtained by the server encoding a fragment of the basic data, wherein the basic data is obtained by the server in response to the rendering request;

[0125] The processing unit 1102 is configured to render at least a portion of the basic content of the target page based on the first data block, and render the basic content of the target page after acquiring the basic data;

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

[0127] The processing unit 1102 is configured to render at least a portion of the business content based on the second data block, and render the business content of the target page after acquiring the business data.

[0128] In one embodiment of the present application, the business content includes multiple contents; after acquiring the business data; the transceiver unit 1101 is further used to receive a third data block streamed by the target script code from the client; the processing unit 1102 is further used to:

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

[0130] Parsing the third data block to obtain the target script code;

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

[0132] Each content item is rendered to a display position corresponding to each content item according to a display size of each content item, so as to render the business content of the target page.

[0133] In one embodiment of the present application, in running the target script code to obtain the display position and display size of each content in the display window of the client, the processing unit 1102 is specifically configured to:

[0134] Obtaining the size of the display window of the client;

[0135] Based on the window size, determine the number of columns, horizontal distance, vertical distance and column width of the display content 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;

[0136] Constructing a column height index vector corresponding to the number of columns, wherein each element in the column height index vector is used to indicate the height of the column corresponding to the element;

[0137] Obtaining the original height and original width of each content item from the second data block in sequence;

[0138] Based on the original height, original width, column width, horizontal distance, vertical distance and column height index vector of each content, the display position and display size of each content in the display window are determined.

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

[0140] For each content, based on the column height index vector, a column with the smallest column height is used as a target column corresponding to each content;

[0141] Determine the column height corresponding to each content based on the column height corresponding to the target column and the vertical distance;

[0142] Determine a row width corresponding to each content item based on the target column, the column width, and the horizontal distance;

[0143] Determine the display height of each content item under the target column based on the original height, original width, and column width of each content item;

[0144] Determine the display position of each content item in the display window based on the column height and row width corresponding to each content item and the display height under the target column;

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

[0146] See also Fig.12 , Fig.12 A schematic diagram of an electronic device provided in an embodiment of the present application. Fig.12 As shown, the electronic device 1200 includes a transceiver 1201, a processor 1202 and a memory 1203. They are connected via a bus 1204. The memory 1203 is used to store computer programs and data, and can transmit the data stored in the memory 1203 to the processor 1202. The electronic device 1200 can be the above-mentioned server 1000 or client 1100.

[0147] 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:

[0148] Receiving a rendering request for a target page from a client, wherein the rendering request is used to obtain basic data and business data of the target page;

[0149] In response to the rendering request, returning a first data block to the client, so that the client renders at least a portion of the basic content of the target page based on the first data block, wherein the first data block is obtained by encoding a fragment of the basic data;

[0150] In response to the rendering request, requesting business data of the target page from a business server;

[0151] After the business server returns the business data to the service end, it returns 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, where the second data block is obtained by encoding a fragment of the business data.

[0152] Specifically, the transceiver 1201 may be Fig.10 The transceiver unit 1001 of the server 1000 of the embodiment described above, the processor 1202 may be Fig.10 The processing unit 1002 of the server 1000 of the embodiment described above will not be described in detail about the specific functions of the transceiver 1201 and the processor 1202;

[0153] Optionally, when the electronic device 1200 is the client 1100, the processor 1202 is configured to read the computer program in the memory 1203 to perform the following operations:

[0154] Sending a rendering request for a target page to a server, wherein the rendering request is used to obtain basic data and business data of the target page;

[0155] receiving a first data block from the server, where the first data block is obtained by the server encoding a fragment of the basic data, and the basic data is obtained by the server in response to the rendering request;

[0156] Rendering at least a portion of the basic content of the target page based on the first data block, and rendering the basic content of the target page after acquiring the basic data;

[0157] receiving a second data block from the server, where the second data block is obtained by the server encoding a segment of the business data, and the business data is obtained by the server from the business server in response to the rendering request;

[0158] At least a portion of the business content is rendered based on the second data block, and after the business data is acquired, the business content of the target page is rendered.

[0159] Specifically, the transceiver 1201 may be Fig.11 The transceiver unit 1101 of the client 1100 of the embodiment described above, the processor 1202 may be Fig.11 The processing unit 1102 of the client 1100 of the embodiment described above will not be described in detail about the specific functions of the transceiver 1201 and the processor 1202;

[0160] It should be understood that the client in this application may include a smart phone (such as an Android phone, an iOS phone, a Windows Phone phone, etc.), a tablet computer, a PDA, a laptop computer, a mobile Internet device MID (Mobile Internet Devices, referred to as: MID) or a wearable device, etc. The above-mentioned client is only an example, not an exhaustive list, including but not limited to the above-mentioned client. In actual applications, the above-mentioned client may also include: a smart vehicle terminal, a computer device, etc.

[0161] The server of the present application may be a server, for example, a cloud computing server, a content delivery network (CDN) server, a network time protocol (NTP), a domain name system (DNS) server, and other types of servers. The above servers are only examples, not exhaustive, and include but are not limited to the above servers.

[0162] An embodiment of the present application also provides a computer-readable storage medium, which stores a computer program. The computer program is executed by a processor to implement part or all of the steps of any page rendering method recorded in the above method embodiments.

[0163] An embodiment of the present application also provides a computer program product, which includes a non-transitory computer-readable storage medium storing a computer program, and the computer program is operable to cause a computer to execute part or all of the steps of any page rendering method recorded in the above method embodiments.

[0164] It should be noted that, for the aforementioned method embodiments, for the sake of simplicity, they are all expressed as a series of action combinations, but those skilled in the art should be aware that the present application is not limited by the described order of actions, because according to the present application, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all optional embodiments, and the actions and modules involved are not necessarily required by the present application.

[0165] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0166] In the several embodiments provided in the present application, it should be understood that the disclosed device can be implemented in other ways. For example, the device embodiments described above are only schematic, such as the division of the units, which is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, and the indirect coupling or communication connection of the device or unit can be electrical or other forms.

[0167] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple 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.

[0168] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above integrated unit may be implemented in the form of hardware or in the form of a software program module.

[0169] If the integrated unit is implemented in the form of a software program module and sold or used as an independent product, it can be stored in a computer-readable memory. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a memory, including a number of instructions to enable a computer device (which can be a personal computer, server or network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present application. The aforementioned memory includes: U disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), mobile hard disk, disk or CD-ROM and other media that can store program codes.

[0170] A person skilled in the art can understand that all or part of the steps in the various methods of the above embodiments can be completed by instructing related hardware through a program, and the program can be stored in a computer-readable memory, and the memory can include: a flash drive, a read-only memory (English: Read-Only Memory, abbreviated as: ROM), a random access memory (English: Random Access Memory, abbreviated as: RAM), a magnetic disk or an optical disk, etc.

[0171] The embodiments of the present application are introduced in detail above. Specific examples are used in this article to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method and core idea of ​​the present application. At the same time, for general technical personnel in this field, according to the idea of ​​the present application, there will be changes in the specific implementation method and application scope. In summary, the content of this specification should not be understood as a limitation on the present application.

Claims

1. A page rendering method, characterized in that: Applied to the server, the method includes: Receiving a rendering request for a target page from a client, wherein the rendering request is used to obtain 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 portion of the basic content of the target page based on the first data block, wherein the first data block is obtained by encoding a fragment of the basic data; In response to the rendering request, requesting business data of the target page from a business server; After the business server returns the business data to the service end, it returns 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, where the second data block is obtained by encoding a fragment of the business data.

2. The method according to claim 1, characterized in that Before returning the first data block to the client, the method further includes: In response to the rendering request, assembling basic data of the target page; Segmenting the basic data to obtain a segment of the basic data; Rendering a segment of the basic data to obtain a first character string; The first character string is subjected to block transfer encoding to obtain the first data block.

3. The method according to claim 2, characterized in that The rendering of a segment of the basic data to obtain a first character string includes: Capture the content of the rendering process through responsive components; When the responsive component captures the basic data, the renderer compiles the HTML template into a rendering function; Taking a segment of the basic data as input of the rendering function to create a first virtual document object model Vdom corresponding to the segment of the basic data; If the rendering function returns the first Vdom, the first Vdom is rendered using a string rendering function to obtain the first string.

4. The method according to claim 3, characterized in that The method further comprises: If the rendering function does not return the first Vdom, a failure response to the rendering request is returned to the client, and the HTML file of the target page is returned to the client through server-side rendering, so that the client renders the target page based on the HTML file.

5. The method according to any one of claims 1 to 4, characterized in that: Before returning the second data block to the client, the method further includes: Segmenting the business data to obtain a segment of the business data; Rendering a segment of the business data to obtain a second character string; The second character string is subjected to block transfer encoding to obtain the second data block.

6. A page rendering method, characterized in that: Applied to a client, the method comprises: Sending a rendering request for a target page to a server, wherein the rendering request is used to obtain basic data and business data of the target page; receiving a first data block from the server, where the first data block is obtained by the server encoding a fragment of the basic data, and the basic data is obtained by the server in response to the rendering request; Rendering at least a portion of the basic content of the target page based on the first data block, and rendering the basic content of the target page after acquiring the basic data; receiving a second data block from the server, where the second data block is obtained by the server encoding a segment of the business data, and the business data is obtained by the server from the business server in response to the rendering request; At least a portion of the business content is rendered based on the second data block, and after the business data is acquired, the business content of the target page is rendered.

7. The method according to claim 6, characterized in that The business content includes multiple contents; after obtaining the business data; the method also includes: receiving a third data block from the server, wherein the third data block is obtained by encoding the target script code; Parsing the third data block to obtain the target script code; Executing the target script code to obtain the display position and display size of each content in the display window of the client; Each content item is rendered to a display position corresponding to each content item according to a display size of each content item, so as to render the business content of the target page.

8. The method according to claim 7, characterized in that The step of running the target script code to obtain a display position and a display size of each content item in a display window of the client includes: Obtaining the size of the display window of the client; Based on the window size, determine the number of columns, horizontal distance, vertical distance and column width of the display content 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; Constructing a column height index vector corresponding to the number of columns, wherein each element in the column height index vector is used to indicate the height of the column corresponding to the element; Obtaining the original height and original width of each content item from the second data block in sequence; Based on the original height, original width, column width, horizontal distance, vertical distance and column height index vector of each content, the display position and display size of each content in the display window are determined.

9. The method according to claim 8, characterized in that The determining the display position and display size of each content item in the display window based on the original height, original width, column width, horizontal distance, vertical distance and column height index vector of each content item comprises: For each content, based on the column height index vector, a column with the smallest column height is used as a target column corresponding to each content; Determine the column height corresponding to each content based on the column height corresponding to the target column and the vertical distance; Determine a row width corresponding to each content item based on the target column, the column width, and the horizontal distance; Determine the display height of each content item under the target column based on the original height, original width, and column width of each content item; Determine the display position of each content item in the display window based on the column height and row width corresponding to each content item and the display height under the target column; The display size of each content item is determined based on the display height of each content item under the target column and the width of the target column.

10. A server, characterized in that: include: Transceiver unit and processing unit; The transceiver unit is used to receive a rendering request for a target page from a client, wherein the rendering request is used to obtain basic data and business data of the target page; The processing unit is configured to return a first data block to the client in response to the rendering request, so that the client renders at least a portion of the basic content of the target page based on the first data block, wherein the first data block is obtained by encoding a fragment of the basic data; In response to the rendering request, requesting business data of the target page from a business server; The transceiver unit is also used to return a second data block to the client after the business server returns the business data to the server, so that the client renders at least a part of the business content of the target page based on the second data block, and the second data block is obtained by encoding a fragment of the business data.

11. A client, characterized in that: include: Transceiver unit and processing unit; The transceiver unit is used to send a rendering request for a target page to a server, wherein the rendering request is used to obtain basic data and business data of the target page; receive a first data block from the server, wherein the first data block is obtained by the server encoding a fragment of the basic data, and the basic data is obtained by the server in response to the rendering request; The processing unit is configured to render at least a portion of the basic content of the target page based on the first data block, and render the basic content of the target page after acquiring the basic data; The transceiver unit is further configured to receive a second data block from the server, where the second data block is obtained by the server encoding a segment of the business data, and the business data is obtained by the server from the business server in response to the rendering request; The processing unit is configured to render at least a portion of the business content based on the second data block, and render the business content of the target page after acquiring the business data.

12. An electronic device, characterized in that: include: A processor and a memory, wherein the processor is connected to the memory, the memory is used to store a computer program, and the processor is used to execute the computer program stored in the memory, so that the electronic device executes the method according to any one of claims 1 to 9.

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

Images