CN111880789A

CN111880789A - Page rendering method, device, server and computer-readable storage medium

Info

Publication number: CN111880789A
Application number: CN202010536796.8A
Authority: CN
Inventors: 熊军慧; 王振兴; 王海飞; 林翔宇; 易斌
Original assignee: Beijing Sankuai Online Technology Co Ltd
Current assignee: Beijing Sankuai Online Technology Co Ltd
Priority date: 2020-06-12
Filing date: 2020-06-12
Publication date: 2020-11-03

Abstract

The application discloses a page rendering method, a page rendering device, a server and a computer-readable storage medium, wherein the page rendering method comprises the following steps: acquiring a server rendering request sent by a client, analyzing the server rendering request, and acquiring a read Native service package according to an analysis result; injecting a runtime library of a real Native framework into a runtime environment of a server; running the React Native service package according to the running environment of the server side injected into the running library to obtain a rendering operation sequence; and sending the rendering operation sequence to the client so that the client performs page rendering according to the rendering operation sequence. According to the method and the device, on the premise that the real Native service code is not changed, the real Native service code can complete most of rendering work at the Node server side by injecting the operation library, and a complete rendering sequence which can be resolved by the client side is output, so that the operation of the real Native at the server side is realized, and the page rendering performance is improved.

Description

Page rendering method, device, server and computer-readable storage medium

Technical Field

The application relates to the technical field of webpage development, in particular to a page rendering method, a page rendering device, a server and a computer-readable storage medium.

Background

A commonly used page rendering method in the prior art mainly includes Server Side rendering (SSR for short) and Client Side rendering (CSR for short). The principle of the SSR is to assemble an HTML (Hyper text markup Language) page and corresponding dynamic data thereof at a server, and then directly present the complete page in a browser. The principle of CSR is that the assembly of HTML pages and dynamic data occurs at the client, i.e. browser end, and the client rendering mechanism is adopted in the case of front and back end separation.

The fact Native (RN) is a cross-platform mobile application development framework sourced by Facebook in 2015, and is a derivative product of fact in a Native mobile application platform of a User Interface (UI) framework sourced by Facebook earlier. The RN develops a mobile application based on the Java Script language, and completes rendering of one page using the client rendering CSR.

However, the inventor finds that the SSR in the prior art can only output the HTML document, cannot output data required by client rendering, and does not support the real Native.

Disclosure of Invention

In view of the above, the present application is proposed to provide a page rendering method, apparatus, server and computer-readable storage medium that overcome or at least partially solve the above problems.

According to a first aspect of the present application, there is provided a page rendering method, including:

acquiring a server rendering request sent by a client, analyzing the server rendering request, and acquiring a read Native service package according to an analysis result;

injecting a runtime library of a real Native framework into a runtime environment of a server;

running the React Native service package according to the running environment of the server side injected into the running library to obtain a rendering operation sequence;

and sending the rendering operation sequence to the client so that the client performs page rendering according to the rendering operation sequence.

Optionally, the run library for injecting the real Native framework in the run environment of the server includes:

creating a sandbox environment according to the analysis result so as to isolate the operation environment of the real Native framework from the operation environment of the server side;

and under the sandbox environment, injecting the operation library of the React Native framework into the operation environment of the server.

and injecting the operation library of the real Native framework in the operation environment of the Node server.

Optionally, the operating the ReactNative service package according to the operating environment of the server injected into the runtime, and obtaining a rendering operation sequence includes:

loading a React Native framework according to the operating environment of the server side injected into the operating library;

and running the React Native service package according to the loading result of the React Native framework.

Optionally, the page rendering method further includes:

acquiring service data according to the analysis result;

and after the read Native framework is loaded, injecting the service data into the read Native service packet and running to obtain the rendering operation sequence.

Optionally, the page rendering method further includes:

and acquiring the read Native service package through a content distribution network server, and acquiring the service data through a service server.

Optionally, the page rendering method further includes:

and acquiring the read Native service packet and the service data through an internal local area network or a private network.

According to a second aspect of the present application, there is provided a page rendering apparatus including:

the first acquisition unit is used for acquiring and analyzing a server rendering request sent by a client, and acquiring a real Native service package according to an analysis result;

the first injection unit is used for injecting a runtime library of the React Native framework into a runtime environment of the server;

the operation unit is used for operating the Reactnative service package according to the operation environment of the server side injected into the operation library to obtain a rendering operation sequence;

and the sending unit is used for sending the rendering operation sequence to the client so as to enable the client to render pages according to the rendering operation sequence.

Optionally, the first injection unit is further configured to:

Optionally, the operation unit is further configured to:

Optionally, the page rendering apparatus further includes:

a second obtaining unit, configured to obtain service data according to the analysis result;

and the second injection unit is used for injecting the service data into the real Native service packet and running the service data after the loading of the real Native framework is finished, so as to obtain the rendering operation sequence.

Optionally, the page rendering apparatus further includes:

and the third acquisition unit is used for acquiring the read Native service package through a content distribution network server and acquiring the service data through a service server.

Optionally, the page rendering apparatus further includes:

and the fourth acquisition unit is used for acquiring the read Native service packet and the service data through an internal local area network or a private network.

According to a third aspect of the present application, there is provided a server, including: a processor; and a memory arranged to store computer executable instructions that, when executed, cause the processor to perform a page rendering method as in any one of the above.

According to a fourth aspect of the present application, there is provided a computer readable storage medium, wherein the computer readable storage medium stores one or more programs which, when executed by a processor, implement the page rendering method as any one of the above.

According to the technical scheme, the method comprises the steps of obtaining a server rendering request sent by a client and analyzing the server rendering request, obtaining a ReactNative service package according to an analysis result, injecting a ReactNative framework operation library into the operation environment of the server, operating the ReactNative service package according to the operation environment of the server injected into the operation library to obtain a rendering operation sequence, and sending the rendering operation sequence to the client so that the client can render pages according to the rendering operation sequence. According to the method and the device, on the premise that the real Native service code is not changed, the real Native service code can complete most of rendering work at the Node server side by injecting the operation library, and a complete rendering sequence which can be resolved by the client side is output, so that the operation of the real Native at the server side is realized, and the page rendering performance is improved.

The foregoing description is only an overview of the technical solutions of the present application, and the present application can be implemented according to the content of the description in order to make the technical means of the present application more clearly understood, and the following detailed description of the present application is given in order to make the above and other objects, features, and advantages of the present application more clearly understandable.

Drawings

Various other advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiments. The drawings are only for purposes of illustrating the preferred embodiments and are not to be construed as limiting the application. Also, like reference numerals are used to refer to like parts throughout the drawings. In the drawings:

FIG. 1 shows a schematic flow diagram of a page rendering method according to an embodiment of the present application;

FIG. 2 illustrates a page rendering flow diagram according to one embodiment of the present application;

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

FIG. 4 illustrates a schematic structural diagram of a server according to an embodiment of the present application;

FIG. 5 shows a schematic structural diagram of a computer-readable storage medium according to an embodiment of the present application.

Detailed Description

Exemplary embodiments of the present application will be described in more detail below with reference to the accompanying drawings. While exemplary embodiments of the present application are shown in the drawings, it should be understood that the present application may be embodied in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.

The SSR rendering method for the server in the prior art mainly comprises the following steps: 1) the server side runs the React code to generate HTML; 2) sending HTML to a browser end; 3) displaying HTML by a browser end; 4) loading the same React code by a browser; 5) the browser side executes the React code and takes over the page operations.

It can be seen that the SSR rendering process based on fact in the prior art can only output HTML documents, but cannot output data required by client rendering, such as data required for implementing client functions, and does not support implementation of the fact Native framework.

Based on this, the embodiment of the present application provides a page rendering method, where the page refers to a page in a client, and is not a general HTML page. As shown in fig. 1, the page rendering method includes steps S110 to S140 as follows:

and step S110, acquiring and analyzing a server rendering request sent by the client, and acquiring a real Native service package according to an analysis result.

In specific implementation, when performing page rendering, an SSR request sent by a client may be obtained first, where the SSR request may specifically include information such as generation time of the rendering request, identification information of the corresponding client, and a URL (Uniform Resource Locator or web address) of a target page to be rendered. The received SSR request is analyzed, and corresponding page rendering parameters can be obtained, for example, parameters including the name, version, component ID, number of components, component type, and the like of the page to be rendered can be obtained. And then acquiring a corresponding read Native service Bundle (Bundle) according to the parameter information obtained by analysis, wherein the read Native service Bundle can be a file Bundle related to a specific service scene, and can specifically comprise various resource files such as Java Script codes, pictures, layout files and the like.

Step S120, injecting a runtime library of the real Native framework into the runtime environment of the server.

In order to enable the same React Native code running on the client to run on the server, the embodiment of the application injects the running library of the Reactnative framework into the running environment of the server after completing the analysis of the SSR request and acquiring the corresponding React Native service Bundle. In some programming languages, some reusable programs or instances are packaged or reconstructed into a "runtime library" and these instances can be linked or invoked by any program as they are running. According to the embodiment of the application, the operation library of the React Native framework is injected into the operation environment of the server, so that the server can render the page in the operation state of the React Native framework.

And step S130, operating the React Native service package according to the operating environment of the server side injected into the operating library to obtain a rendering operation sequence.

And after the operation library of the React Native framework is injected into the operation environment of the server, operating the React Native service package in the operation environment, and further obtaining a rendering operation sequence. The rendering operation sequence herein may refer to rendering data that can be analyzed by the client, and specifically may refer to a drawing sequence of each page component, for example, a text box is first generated at the client, and then a dialog box is created, and by controlling a sequence in which a specific component is drawn on the screen, a positional relationship between the components may be better controlled.

Step S140, sending the rendering operation sequence to the client so that the client performs page rendering according to the rendering operation sequence.

And after a complete rendering operation sequence which can be analyzed by the client is obtained, the rendering operation sequence is sent to the client so that the client executes the rendering operation sequence, and then page rendering is completed. According to the embodiment of the application, on the premise that the ReactNative service code is not changed, the ReactNative service code can complete most of rendering work at the server side by injecting the operation library into the operation environment of the server side, and a complete rendering sequence which can be resolved by the client side is output, so that the React Native service code can be operated at the server side, and the page rendering performance is improved.

In one embodiment of the present application, the Runtime library comprises a Runtime (Runtime). Runtime refers to a state in which a program is running (or being executed), that is, when a program is opened to run on a terminal, the program is at Runtime. According to the embodiment of the application, the Runtime of the React Native framework is injected into the running environment of the server, so that the server can render the page in the running state of the React Native framework.

In an embodiment of the present application, the run library injected into the real Native framework in the run environment of the server includes: creating a sandbox environment according to the analysis result so as to isolate the operation environment of the real Native framework from the operation environment of the server side; and under the sandbox environment, injecting the operation library of the React Native framework into the operation environment of the server.

In the page rendering process, in order to prevent execution of a malicious program, after obtaining an analysis result of an SSR request, the embodiment of the present application further creates a sandbox environment in the operating environment according to parameters obtained by analysis, for example, creates a corresponding sandbox environment according to parameters such as an analyzed page name and version. Sandboxes (Sandbox), also known as sandboxes, are a security mechanism that provides an isolated environment for running programs. Sandboxes are generally used as experimental programs for which some sources are not trusted, are destructive or cannot determine the intention of the program, and are widely applied to applications for analyzing and processing network resources, such as browsers and document readers. In the embodiment of the application, under the created sandbox environment, the Runtime of the React Native framework is injected into the operating environment of the server, so that the operating environment of the React Native framework is isolated from the operating environment of the server program, normal functions of the server are not interfered, and normal operation of the React Native framework is guaranteed.

In an embodiment of the present application, the run library injected into the real Native framework in the run environment of the server includes: and injecting the operation library of the real Native framework in the operation environment of the Node server.

In the process of rendering at the service end, the Node rendering process generally comprises a browser end (client), a Node service end and a back-end server, wherein the Node service end plays a role of an intermediate layer, and a typical Node intermediate layer application is a process of providing data at the back end, rendering templates at the Node intermediate layer and dynamically rendering at the browser end. The Node intermediate layer can realize quick response of the first screen and SEO (search engine optimization) friendliness, and simultaneously, the functions of front-end and back-end separation and client rendering are reserved (namely the first screen is rendered by a server, and the other screens are rendered by clients). In the page rendering process of the embodiment of the application, the homogeneous foundation of the back-end server and the client is constructed based on the Node server, and the Runtime of the real Native framework is injected into the running environment of the Node server, so that the Node server can render the page in the running state of the real Native framework, and the page rendering performance is improved.

In an embodiment of the application, the operating the read Native service package according to the operating environment of the server injected into the runtime library to obtain a rendering operation sequence includes: loading a React Native framework according to the operating environment of the server side injected into the operating library; and running the React Native service package according to the loading result of the React Native framework.

In specific implementation, after the operation library of the real Native framework is injected into the operation environment of the server, the real Native engine is started in the operation environment, and after the real Native engine is successfully started, the real Native service Bundle is operated to obtain a rendering operation sequence which can be analyzed by the client.

In an embodiment of the application, the page rendering method further includes: acquiring service data according to the analysis result; and after the read Native framework is loaded, injecting the service data into the read Native service packet and running to obtain the rendering operation sequence.

In specific implementation, after the SSR request is analyzed to obtain the corresponding parameter information, the embodiment of the present application may further pull the corresponding service data according to the parameter information obtained by the analysis, where the service data may refer to data related to a specific service field of a page to be rendered, and specifically may include service data of each component required when rendering page content in a certain service scene, including service data corresponding to a parent component and a child component respectively.

For example, when a user enters a web page, the service data acquired first is a list of all items (parent components), that is, the service data can be regarded as main service data, the user selects a certain dashboard (child component) under one item from the main service data for display, and at this time, the sub-component data, that is, the sub-service data, is acquired.

In an embodiment of the application, the page rendering method further includes: and acquiring the read Native service package through a content distribution network server, and acquiring the service data through a service server.

In specific implementation, the read Native service package in the embodiment of the present application is obtained from a Content Delivery Network (CDN) server, and a basic principle of the CDN is to widely use various cache servers, distribute the cache servers to a region or a Network where user access is relatively concentrated, and when a user accesses a website, point the user access to a closest cache server that works normally, and directly respond to a user request by the cache server, so that the user access response speed and hit rate are improved. In the embodiment of the application, the CDN server is adopted to greatly improve the efficiency of obtaining the read Native service package, and further shorten the time of page rendering.

For the service data, a dynamic acquisition mode can be adopted to obtain the service data from the service server. Of course, those skilled in the art may also acquire the service data by combining dynamic acquisition and static acquisition, for example, the service data may be packaged into an offline package, and the offline package is distributed to the local client before page rendering, and when a user accesses a page, the static service resource is preferentially acquired from the local client, and the dynamic service resource requests the service server for acquisition.

In an embodiment of the application, the page rendering method further includes: and acquiring the read Native service packet and the service data through an internal local area network or a private network.

In specific implementation, in order to reduce network time consumption, the read Native service Bundle and the service data of the embodiment of the application are acquired from a remote server through an intranet or a private network, so that the data acquisition efficiency is greatly improved, the page rendering time is shortened, and the user experience is further improved.

As shown in fig. 2, an embodiment of the present application further provides a page rendering flow diagram. Firstly, page initialization is carried out on a client, then a SSR request sent by the client is received, and parameter analysis is carried out on the SSR request. Acquiring corresponding service data from a service server according to the obtained parameter information, acquiring corresponding ReactNative service bundle from a CDN server, simultaneously creating a sandbox environment, injecting a Runtime of a React Native framework into an operating environment of a Node server under the sandbox environment, isolating the operating environments of the React Native framework and a server program, enabling the Node server to render pages under the operating state of the React Native framework, loading React Native framework codes after the operating environment is created, operating the React Native service bundle and simultaneously injecting the previously acquired service data, finally obtaining a rendering operation sequence capable of being analyzed by a client, and sending the rendering operation sequence to the client so as to enable the client to render and display the pages.

The embodiment of the application provides a page rendering device 300, and the page refers to a page in a client, and is not a general HTML page. As shown in fig. 3, the page rendering apparatus 300 includes: a first acquisition unit 310, a first injection unit 320, an execution unit 330 and a sending unit 340.

The first obtaining unit 310 is configured to obtain and analyze a server rendering request sent by a client, and obtain a real Native service package according to an analysis result.

The first injection unit 320 is configured to inject a runtime library of the fact Native framework into a runtime environment of the server.

And the running unit 330 is configured to run the ReactNative service package according to the running environment of the server injected into the runtime library, so as to obtain a rendering operation sequence.

A sending unit 340, configured to send the rendering operation sequence to the client, so that the client performs page rendering according to the rendering operation sequence.

In an embodiment of the present application, the first injection unit 320 is further configured to: creating a sandbox environment according to the analysis result so as to isolate the operation environment of the real Native framework from the operation environment of the server side; and under the sandbox environment, injecting the operation library of the React Native framework into the operation environment of the server.

In an embodiment of the present application, the first injection unit 320 is further configured to: and injecting the operation library of the real Native framework in the operation environment of the Node server.

In an embodiment of the present application, the operation unit 330 is further configured to: loading a React Native framework according to the operating environment of the server side injected into the operating library; and running the React Native service package according to the loading result of the React Native framework.

In an embodiment of the present application, the page rendering apparatus further includes: a second obtaining unit, configured to obtain service data according to the analysis result; and the second injection unit is used for injecting the service data into the real Native service packet and running the service data after the loading of the real Native framework is finished, so as to obtain the rendering operation sequence.

In an embodiment of the present application, the page rendering apparatus further includes: and the third acquisition unit is used for acquiring the read Native service package through a content distribution network server and acquiring the service data through a service server.

In an embodiment of the present application, the page rendering apparatus further includes: and the fourth acquisition unit is used for acquiring the read Native service packet and the service data through an internal local area network or a private network.

The embodiment of the application also provides a page rendering method based on the client, wherein the page is a page in the client instead of a general HTML page. The page rendering method based on the client comprises the following steps:

and generating a server rendering request of the target page.

In specific implementation, when performing page rendering, a page rendering request may be generated according to an operation of a user at a client, where the page rendering request may be a request for server-side rendering (SSR). The rendering request may specifically include generation time of the rendering request, identification information of a corresponding client, a URL (uniform resource Locator or web page address) of a target page to be rendered, and the like.

For example, when a user opens an application on a client, a server rendering request corresponding to the application is generated on the client, and then a page of the application may be rendered according to the content of the request to be displayed to the user.

And sending the server side rendering request to a server side so that the server side runs a real Native service package according to the server side rendering request to obtain a rendering operation sequence.

In order to solve the problem of long first screen rendering time caused by client rendering (CSR), the embodiment of the application sends a request for rendering to the server after the request is generated, and accelerates page rendering and shortens the first screen rendering time of the client by means of strong computing power of the server. Specifically, the server may operate a corresponding ReactNative service package (Bundle) according to the SSR request to obtain a rendering operation sequence. The read Native service Bundle herein may be obtained from a CDN (Content Delivery Network) server, and the read Native service Bundle may be a file package related to a specific service scene, and may specifically be composed of various resource files such as a Java Script code, a picture, and a layout file. The rendering operation sequence refers to the drawing sequence of each object such as a page component, for example, a text box is firstly generated, then a dialog box is created, and the position relation between components can be better controlled by controlling the drawing sequence of a specific component on a screen.

And receiving and executing the rendering operation sequence returned by the server, and finishing the rendering of the target page according to the execution result.

After the server rendering request is sent to the server, a rendering operation sequence returned by the server is received, the rendering operation sequence is sequentially executed according to a server rendering (SSR) process, and then the rendering of a target page is completed, the rendered page is displayed to a user, and further the response to the user operation is realized.

Compared with the page rendering method in the prior art, the page rendering method provided by the embodiment of the application transfers the time-consuming process in the CSR flow to the server for proceeding, accelerates the page rendering by using the powerful computing power of the server, realizes the SSR rendering flow at the client according to the rendering operation sequence generated by the server, shortens the rendering time of the first screen of the client, and improves the user experience.

In an embodiment of the application, the receiving and executing the rendering operation sequence returned by the server includes: and executing the rendering operation sequence based on a server-side rendering mechanism to obtain a user interface component and a Native view of the target page.

In specific implementation, after the rendering operation sequence returned by the server is obtained, the rendering operation sequence is executed based on a server rendering (SSR) mechanism, and then the user interface component and the Native view corresponding to the target page are obtained. The SSR mechanism in the prior art mainly comprises the following steps: 1) the browser end sends a URL request to the Node server end; 2) a Node server side acquires first screen data from a back-end server; 3) the Node server renders the acquired first screen data to obtain a first screen HTML; 4) the Node server side returns the rendered first screen HTML to the browser side; 5) the browser side can continue to send other data requests to the Node server side. In the embodiment of the application, the rendering operation sequence is executed on the client by the rendering process based on the SSR mechanism, so that the target page rendered by the client is obtained.

In an embodiment of the application, the finishing rendering of the target page according to the execution result includes:

generating a virtual DOM view of the target page based on a client rendering mechanism; and finishing the event binding of the user interface component based on the matching condition of the view tags of the virtual DOM view and the Native view.

The method and the device for rendering the pages of the client can be achieved by combining a server rendering (SSR) mechanism and a client rendering (CSR) mechanism, the SSR mechanism is mainly used for rendering the first screen, and refreshing of the subsequent pages can be completed based on a read Native client rendering CSR mechanism. When the method is concretely implemented, a CSR mechanism based on the fact Native can generate a virtual DOM view of a target page, the virtual DOM has the advantages that a Java Script Native object is compared through a Diff algorithm in the fact Native, a DOM needing to be changed is calculated, only the changed DOM is operated instead of updating the whole view, performance consumption caused by the fact that the Java Script operates the real DOM is reduced, an original rendering process is abstracted, cross-platform capacity is achieved, the method is not limited to a DOM of a browser, and the method can also be used as a Native component of android and IOS (a mobile operating system of apple mobile equipment).

In addition, in order to establish an association relationship between the server rendering SSR and the client rendering CSR and ensure consistency of subsequent page refreshing, a virtual DOM view generated by the client rendering CSR and a view tag (view tag) of a Native view generated by the server rendering SSR can be matched, and event binding of a user interface component is completed according to a matching result. The view tag (view tag) refers to that each created UI view in the UI has a tag value as its unique identifier when added to a window. An event binding is an event handler associated with an event binding for a user interface component.

In one embodiment of the present application, the generating a virtual DOM view of a target page based on a client rendering mechanism includes: starting a real Native engine and a Java Script engine; running the React Native service package based on the started React Native engine and the started JavaScript engine; and generating a virtual DOM view according to the operation result of the read Native service package.

In specific implementation, when the virtual DOM view is generated based on the CSR mechanism of the real Native, the real Native engine and the Java Script engine may be started first, and then the real Native service package is run. The starting of the ReactNative engine under the CSR mechanism can be carried out simultaneously with the generation of the SSR request under the SSR mechanism, and after the corresponding Native view is generated based on the SSR mechanism, the Java Script engine under the CSR mechanism can be restarted to enable the CSR mechanism to take over the subsequent page refreshing operation.

The real Native service package (Bundle) can be obtained from the CDN server, and specifically can be composed of various resource files such as Java Script codes, pictures, and layout files, and the like, and the content is the same as the real Native service package run by the server, and finally, a corresponding virtual DOM view can be obtained according to the running result of the real Native service package.

In an embodiment of the present application, the performing the sequence of rendering operations based on the server-side rendering mechanism includes: and simulating a client rendering environment based on the started real Native engine, and executing the rendering operation sequence in the simulated client rendering environment.

In specific implementation, as described above, the fact Native engine develops a mobile application based on the Java Script language, and uses a client rendering CSR mechanism to complete rendering of one page, so that in order to implement operation of the fact Native in the SSR rendering process, the fact Native engine may be started while generating a server rendering request, simulate an operating environment of the fact Native rendered by the client in the SSR rendering process, and further execute a rendering operation sequence in the simulated client rendering environment to obtain a rendered Native view.

In an embodiment of the application, the target page is a top-screen page of the client, and the page rendering method further includes: and shielding the secondary rendering of the head screen page by a rendering mechanism of the client through a Hook function.

In specific implementation, the SSR mechanism of the embodiment of the present application is mainly used for rendering the first screen, so the first screen page of the client is obtained based on the SSR mechanism, and since the CSR mechanism also operates at the same time at the client, and the same ReactNative service Bundle is executed, in order to avoid the CSR mechanism from rendering the rendered first screen page again, the embodiment of the present application uses a UI Manager Module (user interface management Module) to call a Hook function to shield or intercept the secondary rendering of the CSR mechanism on the first screen page. The Hook function is a callback function defined by an application program and is used for monitoring a system or a certain type of events, and the events may be associated with a certain thread or events of all threads in the system, and in this embodiment of the present application, may refer to rendering of a front screen page based on a CSR mechanism.

In an embodiment of the present application, the method for rendering a page based on a client further includes: obtaining a refreshing request for the first screen page; and refreshing the head screen page according to the page refreshing request and the view tag.

In specific implementation, a user can refresh the first screen page to browse new content by clicking the first screen page and the like on the client, so that the refresh request of the first screen page can be acquired according to the operation of the user on the client. In addition, to ensure consistency of page refresh, the top screen page may be refreshed based on the view tags of the pages. The refresh operation herein may include operations such as deletion or modification of the page view.

The embodiment of the application also provides a page rendering device based on the client, wherein the page is a page in the client and is not a general HTML page. The page rendering apparatus includes: the device comprises a generating unit, a sending unit and a rendering unit.

The generation unit in the embodiment of the application is used for generating a server rendering request of a target page.

The sending unit is used for sending the server rendering request to the server, so that the server runs the real Native service package according to the server rendering request, and a rendering operation sequence is obtained.

In order to solve the problem of long first screen rendering time caused by client rendering (CSR), the embodiment of the application sends a request for rendering to the server after the request is generated, and accelerates page rendering and shortens the first screen rendering time of the client by means of strong computing power of the server. Specifically, the server may operate a corresponding ReactNative service package (Bundle) according to the SSR request to obtain a rendering operation sequence. The read Native service Bundle herein may be obtained from a CDN (Content Delivery Network) server, and the read Native service Bundle may be a file package related to a specific service scene, and may specifically be composed of various resource files such as a Java Script code, a picture, and a layout file. The rendering operation sequence refers to the drawing sequence of each object such as a page component, that is, the position relation between components can be better controlled by controlling the sequence of drawing a specific component on a screen.

The rendering unit in the embodiment of the application is configured to receive and execute the rendering operation sequence returned by the server, and complete rendering of the target page according to the execution result.

In an embodiment of the application, the rendering unit is further configured to: and executing the rendering operation sequence based on a server-side rendering mechanism to obtain a user interface component and a Native view of the target page.

In an embodiment of the application, the rendering unit is further configured to: generating a virtual DOM view of the target page based on a client rendering mechanism; and finishing the event binding of the user interface component based on the matching condition of the view tags of the virtual DOM view and the Native view.

In one embodiment of the present application, the rendering sheet is further configured to: starting a real Native engine and a JavaScript engine; running the React Native service package based on the started React Native engine and the started Java Script engine; and generating a virtual DOM view according to the operation result of the read Native service package.

In an embodiment of the application, the rendering unit is further configured to: and simulating a client rendering environment based on the started real Native engine, and executing the rendering operation sequence in the simulated client rendering environment.

In an embodiment of the application, the target page is a top-screen page of the client, and the client-based page rendering apparatus further includes: and the shielding unit is used for shielding the secondary rendering of the head screen page by the rendering mechanism of the client through a Hook function.

In an embodiment of the present application, the client-based page rendering apparatus further includes: the acquisition unit is used for acquiring a refreshing request of the head screen page; and the refreshing unit is used for refreshing the head screen page according to the page refreshing request and the view tag.

The embodiment of the application also provides a page rendering method, which is realized based on a client and a server, and comprises the following steps:

the client generates a server rendering request of a target page and sends the server rendering request to the server.

In specific implementation, when performing page rendering, a client may first generate a page rendering request according to an operation of a user at the client, where the page rendering request may be a request for server-side rendering (SSR). The rendering request may specifically include generation time of the rendering request, identification information of a corresponding client, a URL (Uniform Resource Locator or web page address) of a target page to be rendered, and the like.

For example, when a user opens an application on a client, a server rendering request corresponding to the application is generated on the client and sent to the server for subsequent processing.

And the server analyzes the server rendering request, runs a ReactNative service package according to an analysis result, obtains a rendering operation sequence and sends the rendering operation sequence to the client.

In order to solve the problem of long first screen rendering time caused by client rendering (CSR), the embodiment of the application sends a request for rendering to the server after the request is generated, and accelerates page rendering and shortens the first screen rendering time of the client by means of strong computing power of the server. Specifically, the server may parse the received SSR request to obtain corresponding page rendering parameters, which may include parameters such as a name, a version, a component ID, a component number, and a component type of the page to be rendered. And then, running a corresponding read Native service package (Bundle) according to the analysis result to obtain a rendering operation sequence. The read Native service Bundle herein may be obtained from a CDN (Content Delivery Network) server, and the read Native service Bundle may be a file package related to a specific service scene, and may specifically be composed of various resource files such as a Java Script code, a picture, and a layout file. The rendering operation sequence refers to the drawing sequence of each object such as a page component, for example, a text box is firstly generated, then a dialog box is created, and the position relation between components can be better controlled by controlling the drawing sequence of a specific component on a screen. And then the server side sends the generated rendering operation sequence to the client side for page rendering.

And the client receives and executes the rendering operation sequence returned by the server, and generates a rendered target page according to an execution result.

And the client receives the rendering operation sequence returned by the server and sequentially executes the rendering operation sequence so as to complete the rendering of the target page, and the rendered page is displayed to the user so as to realize the response to the user operation.

Compared with the page rendering method in the prior art, the page rendering method provided by the embodiment of the application migrates the time-consuming process in the CSR flow to the server side for proceeding, accelerates page rendering by using the powerful computing power of the server side, shortens the first screen rendering time of the client side, and improves user experience.

In an embodiment of the present application, the analyzing, by the server, the server rendering request, and running a real Native service package according to an analysis result to obtain a rendering operation sequence and send the rendering operation sequence to the client includes: the server side creates a sandbox environment according to the analysis result so as to isolate the operation environment of the React Native framework from the operation environment of the server side; and under the sandbox environment, injecting the operation library of the React Native framework into the operation environment of the server.

In the page rendering process, in order to prevent execution of a malicious program, after the server side obtains an analysis result of the SSR request, a sandbox environment is created in the operating environment according to parameters obtained through analysis, for example, a corresponding sandbox environment is created according to parameters such as an analyzed page name and version. Sandboxes (Sandbox), also known as sandboxes, are a security mechanism that provides an isolated environment for running programs. Sandboxes are generally used as experimental programs for which some sources are not trusted, are destructive or cannot determine the intention of the program, and are widely applied to applications for analyzing and processing network resources, such as browsers and document readers. In the embodiment of the application, the operation library of the React Native framework is injected into the operation environment of the server under the created sandbox environment, so that the operation environment of the React Native framework is isolated from the operation environment of the server program, normal functions of the server are not interfered, and normal operation of the React Native framework is guaranteed.

In an embodiment of the present application, the analyzing, by the server, the server rendering request, and running a real Native service package according to an analysis result to obtain a rendering operation sequence and send the rendering operation sequence to the client includes: the server side loads a real Native framework according to the operation environment of the server side injected into the operation library; and running the React Native service package according to the loading result of the Reactnative framework.

In one embodiment of the present application, the method further comprises: the server side acquires service data according to the analysis result; and after the read Native framework is loaded, injecting the service data into the read Native service packet and running to obtain the rendering operation sequence.

In specific implementation, after completing parsing on the SSR request, the server according to the embodiment of the present application obtains corresponding parameter information, and then pulls corresponding service data according to the parameter information obtained through parsing, where the service data may refer to data related to a specific service field of a page to be rendered, and specifically may include service data of each component required when rendering page content in a certain service scene, including service data corresponding to a parent component and a child component respectively.

In one embodiment of the present application, the method further comprises: and acquiring the read Native service package through a content distribution network server, and acquiring the service data through a service server.

In one embodiment of the present application, the method further comprises: and acquiring the read Native service packet and the service data through an internal local area network or a private network.

In an embodiment of the application, the running a read Native service package according to the analysis result to obtain a rendering operation sequence and sending the rendering operation sequence to the client includes: the server side generates a virtual DOM view according to the operation result of the read Native service package; and generating the rendering operation sequence according to the virtual DOM view and sending the rendering operation sequence to the client.

When the method is concretely implemented, the server side can generate a virtual DOM view of a target page based on a rendering mechanism of real Native, the virtual DOM has the advantages that a Java Script Native object is compared through a Diff algorithm in the real Native, a DOM needing to be changed is calculated, only the changed DOM is operated, the whole view is not updated, the performance consumption caused by JavaScript operation of the real DOM is reduced, the original rendering process is abstracted, the cross-platform capability is realized, the method is not only limited to the DOM of a browser, but also can be a Native component of android and IOS (a mobile operating system of apple Mobile devices). And then the server generates a rendering operation sequence according to the virtual DOM view and sends the rendering operation sequence to the client so as to perform subsequent page rendering.

In an embodiment of the present application, the receiving and executing, by the client, the rendering operation sequence returned by the server includes: and the client executes the rendering operation sequence to obtain a user interface component and a Native view of the target page.

In specific implementation, after the client obtains the rendering operation sequence returned by the server, the rendering operation sequence is sequentially executed by the client, and then the user interface component and the Native view corresponding to the target page are obtained.

In an embodiment of the present application, the rendered page is a rendered top-screen page, and the method further includes: the client side obtains a refreshing request for the first screen page; multiplexing the operating environment of the ReactNative framework according to the refreshing request; and refreshing the first screen page under the operating environment of the read Native framework.

During specific implementation, the operation environment of the real Native frame in the embodiment of the application can be started only once, namely, the rendering of the first screen page is aimed at, the subsequent page refreshing can directly reuse the previous operation environment of the real Native frame according to the page refreshing request, and the first screen page is refreshed under the operation environment of the real Native frame, so that the time consumption for starting the real Native frame is greatly reduced.

An embodiment of the present application further provides a page rendering system, where the page rendering system includes: client and server.

The client side is used for generating a server side rendering request of a target page and sending the server side rendering request to the server side.

The server side is used for analyzing the server side rendering request, operating a real Native service package according to an analysis result, obtaining a rendering operation sequence and sending the rendering operation sequence to the client side.

The client side is used for receiving and executing the rendering operation sequence returned by the server side, and generating a rendered target page according to an execution result.

In an embodiment of the present application, the server is further configured to: creating a sandbox environment according to the analysis result so as to isolate the operation environment of the real Native framework from the operation environment of the server side; and under the sandbox environment, injecting the operation library of the React Native framework into the operation environment of the server.

In an embodiment of the present application, the server is further configured to: loading a React Native framework according to the operating environment of the server side injected into the operating library; and running the React Native service package according to the loading result of the React Native framework.

In an embodiment of the present application, the server is further configured to: acquiring service data according to the analysis result; and after the read Native framework is loaded, injecting the service data into the read Native service packet and running to obtain the rendering operation sequence.

In an embodiment of the present application, the server is further configured to: and acquiring the read Native service package through a content distribution network server, and acquiring the service data through a service server.

In an embodiment of the present application, the server is further configured to: and acquiring the read Native service packet and the service data through an internal local area network or a private network.

In an embodiment of the present application, the server is further configured to: generating a virtual DOM view according to the operation result of the read Native service package; and generating the rendering operation sequence according to the virtual DOM view and sending the rendering operation sequence to the client.

In one embodiment of the present application, the client is further configured to: and executing the rendering operation sequence to obtain a user interface component and a Native view of the target page.

In an embodiment of the application, the rendered page is a rendered top-screen page, and the client is further configured to: obtaining a refreshing request for the first screen page; multiplexing the operating environment of the real Native framework according to the refreshing request; and refreshing the first screen page under the operating environment of the read Native framework.

It should be noted that, for the specific implementation of each apparatus embodiment, reference may be made to the specific implementation of the corresponding method embodiment, which is not described herein again.

To sum up, the technical scheme of this application adopts the server side that obtains the client and sends to render the request and analyze, obtains the mode of React Native business package according to the analytic result, pours into the runtime of React Native frame into in the operational environment of server side, according to having poured into the operational environment of the server side of runtime, operation React Native business package obtains the operation sequence of rendering, will the operation sequence of rendering send to the client, so that the client side basis the operation sequence of rendering carries out the page and renders. According to the method and the device, on the premise that the real Native service code is not changed, the real Native service code can complete most of rendering work at the Node side by injecting the operation library, and a complete rendering sequence which can be resolved by the client side is output, so that the operation of the real Native at the server side is realized, and the page rendering performance is improved.

It should be noted that:

the algorithms and displays presented herein are not inherently related to any particular computer, virtual machine, or other apparatus. Various general purpose devices may be used with the teachings herein. The required structure for constructing such a device will be apparent from the description above. In addition, this application is not directed to any particular programming language. It will be appreciated that a variety of programming languages may be used to implement the teachings of the present application as described herein, and any descriptions of specific languages are provided above to disclose the best modes of the present application.

In the description provided herein, numerous specific details are set forth. However, it is understood that embodiments of the application may be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been shown in detail in order not to obscure an understanding of this description.

Similarly, it should be appreciated that in the foregoing description of exemplary embodiments of the application, various features of the application are sometimes grouped together in a single embodiment, figure, or description thereof for the purpose of streamlining the application and aiding in the understanding of one or more of the various inventive aspects. However, the disclosed method should not be interpreted as reflecting an intention that: this application is intended to cover such departures from the present disclosure as come within known or customary practice in the art to which this invention pertains. Rather, as the following claims reflect, inventive aspects lie in less than all features of a single foregoing disclosed embodiment. Thus, the claims following the detailed description are hereby expressly incorporated into this detailed description, with each claim standing on its own as a separate embodiment of this application.

Those skilled in the art will appreciate that the modules in the device in an embodiment may be adaptively changed and disposed in one or more devices different from the embodiment. The modules or units or components of the embodiments may be combined into one module or unit or component, and furthermore they may be divided into a plurality of sub-modules or sub-units or sub-components. All of the features disclosed in this specification (including any accompanying claims, abstract and drawings), and all of the processes or elements of any method or apparatus so disclosed, may be combined in any combination, except combinations where at least some of such features and/or processes or elements are mutually exclusive. Each feature disclosed in this specification (including any accompanying claims, abstract and drawings) may be replaced by alternative features serving the same, equivalent or similar purpose, unless expressly stated otherwise.

Furthermore, those skilled in the art will appreciate that while some embodiments described herein include some features included in other embodiments, rather than other features, combinations of features of different embodiments are meant to be within the scope of the application and form different embodiments. For example, in the following claims, any of the claimed embodiments may be used in any combination.

The various component embodiments of the present application may be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. It will be appreciated by those skilled in the art that a microprocessor or Digital Signal Processor (DSP) may be used in practice to implement some or all of the functionality of some or all of the components in a page rendering apparatus according to embodiments of the present application. The present application may also be embodied as apparatus or device programs (e.g., computer programs and computer program products) for performing a portion or all of the methods described herein. Such programs implementing the present application may be stored on a computer readable medium or may be in the form of one or more signals. Such a signal may be downloaded from an internet website or provided on a carrier signal or in any other form.

For example, fig. 4 shows a schematic structural diagram of a server according to an embodiment of the present application. The server 400 comprises a processor 410 and a memory 420 arranged to store computer executable instructions (computer readable program code). The memory 420 may be an electronic memory such as a flash memory, an EEPROM (electrically erasable programmable read only memory), an EPROM, a hard disk, or a ROM. The memory 420 has a storage space 430 storing computer readable program code 431 for performing any of the method steps described above. For example, the storage space 430 for storing the computer readable program code may include respective computer readable program codes 431 for respectively implementing various steps in the above method. The computer readable program code 431 can be read from or written to one or more computer program products. These computer program products comprise a program code carrier such as a hard disk, a Compact Disc (CD), a memory card or a floppy disk. Such a computer program product is typically a computer readable storage medium such as that shown in fig. 5. FIG. 5 shows a schematic diagram of a computer-readable storage medium according to an embodiment of the present application. The computer readable storage medium 500 stores computer readable program code 431 for performing the steps of the method according to the present application, which is readable by the processor 410 of the server 400, and when the computer readable program code 431 is executed by the server 400, causes the server 400 to perform the steps of the method described above, and in particular, the computer readable program code 431 stored by the computer readable storage medium may perform the method shown in any of the embodiments described above. The computer readable program code 431 may be compressed in a suitable form.

It should be noted that the above-mentioned embodiments illustrate rather than limit the application, and that those skilled in the art will be able to design alternative embodiments without departing from the scope of the appended claims. In the claims, any reference signs placed between parentheses shall not be construed as limiting the claim. The word "comprising" does not exclude the presence of elements or steps not listed in a claim. The word "a" or "an" preceding an element does not exclude the presence of a plurality of such elements. The application may be implemented by means of hardware comprising several distinct elements, and by means of a suitably programmed computer. In the unit claims enumerating several means, several of these means may be embodied by one and the same item of hardware. The usage of the words first, second and third, etcetera do not indicate any ordering. These words may be interpreted as names.

Claims

1. A page rendering method, comprising:

2. The page rendering method according to claim 1, wherein the injecting a runtime library of a real Native framework in a runtime environment of a server comprises:

3. The page rendering method according to claim 1, wherein the injecting a runtime library of a real Native framework in a runtime environment of a server comprises:

4. The page rendering method according to claim 1, wherein the obtaining a rendering operation sequence by running the read Native service package according to the running environment of the server injected into the runtime library comprises:

5. The page rendering method of claim 4, further comprising:

acquiring service data according to the analysis result;

6. The page rendering method of claim 5, further comprising:

7. The page rendering method of claim 5, further comprising:

8. A page rendering apparatus, comprising:

the operation unit is used for operating the read Native service package according to the operation environment of the server side injected into the operation library to obtain a rendering operation sequence;

9. A server, wherein the server comprises: a processor; and a memory arranged to store computer-executable instructions that, when executed, cause the processor to perform the page rendering method of any of claims 1 to 7.

10. A computer readable storage medium, wherein the computer readable storage medium stores one or more programs which, when executed by a processor, implement the page rendering method of any one of claims 1 to 7.