CN116719523A - Page rendering method and electronic device - Google Patents

Page rendering method and electronic device Download PDF

Info

Publication number
CN116719523A
CN116719523A CN202310577001.1A CN202310577001A CN116719523A CN 116719523 A CN116719523 A CN 116719523A CN 202310577001 A CN202310577001 A CN 202310577001A CN 116719523 A CN116719523 A CN 116719523A
Authority
CN
China
Prior art keywords
component
rendering
page
server
client
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202310577001.1A
Other languages
Chinese (zh)
Inventor
陈康
施海斌
王致富
叶克良
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Zhejiang Tmall Technology Co Ltd
Original Assignee
Zhejiang Tmall Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Zhejiang Tmall Technology Co Ltd filed Critical Zhejiang Tmall Technology Co Ltd
Priority to CN202310577001.1A priority Critical patent/CN116719523A/en
Publication of CN116719523A publication Critical patent/CN116719523A/en
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/34Graphical or visual programming
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/36Software reuse
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/40Transformation of program code
    • G06F8/41Compilation
    • G06F8/42Syntactic analysis
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/40Transformation of program code
    • G06F8/41Compilation
    • G06F8/42Syntactic analysis
    • G06F8/427Parsing
    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Abstract

The embodiment of the application discloses a page rendering method and electronic equipment, wherein the method comprises the following steps: responding to an access request of a user to a page, determining a target component needing to be rendered by a server, and loading a first compiling result of the corresponding component into a server execution environment from a storage catalog of a server local storage system according to a corresponding component dependency tree so as to complete the server rendering of the target component; the page is generated by constructing a page by utilizing a pre-developed and compiled isomorphic component, and the compiling result corresponding to the isomorphic component comprises the first compiling result executable by a server side and the second compiling result executable by a client side; and generating a client rendering code and assembling the client rendering code and the server rendering result into a page markup language document. According to the embodiment of the application, page development supporting isomorphic rendering can be performed based on the building mode of the assembly, so that page development efficiency is improved, and resource waste is reduced.

Description

Page rendering method and electronic device
Technical Field
The present application relates to the field of page rendering technologies, and in particular, to a page rendering method and an electronic device.
Background
In the front-end technical field, the traditional page rendering scheme is that a client renders, that is, a front-end service pushes rendering logic to a browser at a client side, and the browser executes processing such as rendering restoration of page elements and completes presentation. However, the problem with this client-side rendering approach is that it takes a while for the page logic to pass to the client-side browser to perform the rendering process, so that the user may first see the white screen and then gradually show the page content a little by little, and the user may feel a significant delay.
The other way is that the server side renders, that is, after the user initiates the page access request, the rendering can be completed at the server side, the data required by the page display can be assembled and sent to the client side, and the client side can directly display, so that the white screen time of the page of the client side can be reduced, and the time for the page content to reach the user is shortened. In addition, the rendering mode of the server can effectively improve the display performance of the page and simultaneously can also effectively improve the display stability and compatibility of the page.
However, rendering through the server side is often impractical because, first, the number of user requests is large, and rendering the entire page through the server side results in a huge pressure on the server side; in addition, under the conditions of unstable network connection and the like, the page display can be unstable due to the fact that the rendering mode of the server side is depended on; moreover, some components related to embedded point interaction and the like can only be rendered by the server, at this time, the client is required to complete the water injection process, that is, add the interaction event of the front end to the specific component, otherwise, although the user can see the specific component in the page, the user is in a state of being unable to click interactively, and the like.
For the above situation, one possible solution is to complete the page rendering by combining the client rendering with the server rendering, for example, the rendering of the first screen content of the page may be completed by the server and provided to the client, so that the client may directly display, and the waiting time of the user is shortened, while regarding other page contents after the first screen, the rendering pressure of the server may be reduced by the client rendering.
However, since the server-side rendering and the client-side rendering differ in rendering processing logic, in order to achieve the above-described purpose of combining the client-side rendering and the server-side rendering, it is necessary to enable components in a page to support both the server-side rendering logic and the client-side rendering logic (also referred to as "isomorphic rendering"). For this reason, in the prior art, it is generally required that a technician developing a page implements support for the isomorphic rendering logic in a page code, and if multiple pages are required to implement the isomorphic rendering logic, it is required to implement the isomorphic rendering logic in separate page projects, so that implementation efficiency is low. In addition, a great deal of code redundancy may be generated in the system, which wastes system resources.
Disclosure of Invention
The application provides a page rendering method and electronic equipment, which can perform page development supporting isomorphic rendering based on a building mode of an assembly, thereby improving page development efficiency and reducing resource waste.
The application provides the following scheme:
a method of page rendering, comprising:
responding to an access request of a user to a page, determining a target component needing to be rendered by a server, and loading a first compiling result of the corresponding component into a server execution environment from a storage catalog of a server local storage system according to a corresponding component dependency tree so as to complete the server rendering of the target component; the page is generated by constructing a page by utilizing a pre-developed and compiled isomorphic component, and the compiling result corresponding to the isomorphic component comprises the first compiling result executable by a server side and the second compiling result executable by a client side; the set dependency tree is generated by traversing page description information of the built page;
generating a client rendering code according to execution logic of client rendering, and assembling a page markup language document according to the client rendering code and a server rendering result, so that a client can display a target component which is rendered by the server, and according to the client rendering code, script downloading is performed on a second compiling result corresponding to a component which is not rendered, and client rendering and displaying are performed.
When compiling the isomorphic component, if the isomorphic component depends on an external code, acquiring an original code of the external code;
packaging the original codes of the external codes into disguised components according to the identifiable packaging specifications of the server and the client, and providing the component identification of the disguised components;
when the first compiling result and the second compiling result are generated, the dependency relationship of the isomorphic component on the external code is converted into the dependency relationship of the camouflage component, and the dependency relationship of the camouflage component is embedded into the component code, so that when the server rendering or the client rendering is carried out, the plurality of components depend on the same external code, the rendering of the plurality of components is completed through single downloading of the code of the camouflage component.
When compiling the isomorphic component, if the isomorphic component depends on other components, adding the dependency relationship information of the other components into the configuration information of the component, so as to acquire the dependency relationship information according to the configuration information and perform recursive analysis of the component when rendering a server or a client.
When a component dependency tree of a page is generated, determining the identification of other components on which the isomorphic component depends according to configuration information of each component included in the page, and generating the component dependency tree of the page after de-duplication processing, so that when server side rendering or client side rendering is performed, a compiling result of the component is loaded into a memory according to the component dependency tree to be executed, and when a plurality of components depend on the same component, the same component which is depended on is loaded for a single time.
The first compiling result is a function, and parameters of the function comprise an analysis auxiliary object relied by a server side and context information requested by the user, wherein the analysis auxiliary object is used for acquiring a component instance when the server side renders.
Wherein the execution logic according to the client rendering generates client rendering code, comprising:
and determining loading sequence information among the components according to the component dependency relationship tree, and providing a download address of a second compiling result of the corresponding component so as to sequentially download the second compiling result of the component from the download address to the local of the client by script mode when the client is rendered.
Wherein, still include:
in the process of building a page, receiving a data intervention strategy configured for a target block in the page, wherein the data intervention strategy comprises the following steps: policy type, policy characteristics and related component sets;
registering the data intervention strategy, and returning the generated data intervention strategy identification so as to add the intervention strategy identification into the corresponding page configuration information;
after receiving the page access request of the user, the server or the client acquires the data intervention strategy according to the configuration information of the page, so that a component display mode in the target block is generated in a personalized mode according to the strategy type and the matching relation between the context information of the page access request and the strategy characteristic.
A method of page rendering, comprising:
responding to an access request of a user to a page, acquiring a page markup language document provided by a server, wherein the page markup language document is generated by assembling a client rendering code generated by the server and a server rendering result aiming at part of components in the page;
the page is generated by constructing a page by utilizing a pre-developed and compiled isomorphic component, and the compiling result corresponding to the isomorphic component comprises a first compiling result executable by a server side and a second compiling result executable by a client side; the first compiling result is used for being downloaded to a local storage system of the server so as to complete the rendering of the server of the partial component in a mode of loading the first compiling result from the local storage system of the server to the execution environment of the server;
Displaying the partial components which are rendered by the server;
and according to the client rendering code, carrying out script downloading on a second compiling result corresponding to the component which is not rendered, and carrying out client rendering and displaying.
A page rendering system, comprising:
the compiling module is used for performing code conversion on isomorphic components developed according to preset technical standard specifications, and generating a first compiling result executable by a server side and a second compiling result executable by a client side so as to perform page building by using the isomorphic components;
the server rendering auxiliary module is used for generating a component dependency tree of the page by traversing page description information of the built page, downloading a component corresponding to the first compiling result to a server local storage system and providing a storage catalog;
the server rendering module is used for responding to the access request of the user to the page, determining a target component needing to be rendered by the server, and loading a first compiling result of the corresponding component into a server execution environment from the storage catalog according to the component dependency tree so as to complete the server rendering of the target component;
The client-side rendering code preparation module is used for generating client-side rendering codes according to the execution logic of client-side rendering, assembling page markup language documents according to the client-side rendering codes and the server-side rendering results, displaying target components which are finished in the server-side rendering by the client-side conveniently, downloading scripts according to the client-side rendering codes, and performing client-side rendering and displaying on second compiling results corresponding to the components which are not rendered.
A page rendering apparatus comprising:
the system comprises a page markup language document acquisition unit, a page markup language document generation unit and a page processing unit, wherein the page markup language document acquisition unit is used for responding to an access request of a user to a page and acquiring a page markup language document provided by a server, and the page markup language document is generated by assembling a client rendering code generated by the server and a server rendering result aiming at part of components in the page;
the page is generated by constructing a page by utilizing a pre-developed and compiled isomorphic component, and the compiling result corresponding to the isomorphic component comprises a first compiling result executable by a server side and a second compiling result executable by a client side; the first compiling result is used for being downloaded to a local storage system of the server so as to complete the rendering of the server of the partial component in a mode of loading the first compiling result from the local storage system of the server to the execution environment of the server;
The first display unit is used for displaying the partial components which are rendered by the server;
and the second display unit is used for carrying out script downloading on a second compiling result corresponding to the component which is not yet rendered according to the client rendering code, and carrying out client rendering and display.
A computer readable storage medium having stored thereon a computer program which when executed by a processor performs the steps of the method of any of the preceding claims.
An electronic device, comprising:
one or more processors; and
a memory associated with the one or more processors, the memory for storing program instructions that, when read for execution by the one or more processors, perform the steps of the method of any of the preceding claims.
According to the specific embodiment provided by the application, the application discloses the following technical effects:
by the embodiment of the application, the technical standard specification of the isomorphic component can be provided, so that a technician can develop the component without perception (without perception of the difference between the server rendering and the client rendering logic). Moreover, the isomorphic components can be compiled into two parts by the compiler according to the embodiment of the application, and the isomorphic components are respectively used for running during server rendering and client rendering. Thus, after registering a component, page building can be performed based on the registered component. In addition, because the components may rely on external codes or other components, and the server side rendering does not support downloading of external resources by means of scripts in the rendering process, a rendering service is provided, the published page description information can be traversed through the rendering service, component information included in the page is determined, a component dependency tree of the page is generated according to the dependency between the components, and the relevant components are downloaded to a server side local storage system corresponding to the first compiling result according to the component dependency tree, and a storage catalog is provided. In this way, after a specific user sends out a page access request, a target component needing to be rendered by a server can be determined, and according to the component dependency tree, a first compiling result of the corresponding component is loaded into a server execution environment from the storage directory so as to complete the server rendering of the target component, thereby solving the problem of server rendering. And the client can also generate client rendering codes according to the execution logic of the client rendering so that the client can display the components which are rendered by the server according to the page markup language documents, acquire a second compiling result corresponding to the components which are not rendered by the server according to the client rendering codes, and perform client rendering and display. By the method, the page supporting isomorphic rendering can be developed in a building mode, so that page development efficiency can be improved, and non-technicians can participate in the development of the page supporting isomorphic rendering.
In the case that the component depends on the external code, the external code can be packaged into the form of the component when compiling, so that the original code of an external code library is not required to be directly embedded in the component code, but a handle pointing to the packaged component identifier is directly embedded, and the problem that the component code amount or the subsequently built page code amount is greatly increased due to the embedding of the external code is avoided.
In addition, in order to meet the requirements of data intervention in the scenes of 'thousands of people and thousands of faces' of pages and the like, isomorphic rendering of a server and a client can still be realized under the condition of data intervention, the embodiment of the application also provides a function for configuring a data intervention strategy in the page building process, and provides a data intervention service, the intervention strategy can be registered in the service, and the specific intervention strategy can be acquired from the data intervention service in the mode of acquiring the intervention data by the server or the client when the service is consumed.
Of course, it is not necessary for any one product to practice the application to achieve all of the advantages set forth above at the same time.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings that are needed in the embodiments will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
FIGS. 1-1 and 1-2 are schematic diagrams of an overall architecture provided by embodiments of the present application;
FIG. 2 is a flowchart of a server method according to an embodiment of the present application;
FIG. 3 is a schematic diagram of compiling and registering components according to an embodiment of the present application;
FIG. 4 is a schematic diagram of a dependency relationship processing manner in a component compiling process according to an embodiment of the present application;
FIG. 5 is a schematic diagram of providing data intervention services in a page building process according to an embodiment of the present application;
fig. 6 is a schematic diagram of a preparation flow of rendering materials at a server according to an embodiment of the present application;
FIG. 7 is a schematic diagram of component code loading in a server rendering process according to an embodiment of the present application;
fig. 8 is a schematic diagram of data acquisition in a server rendering process according to an embodiment of the present application;
FIG. 9 is a schematic diagram of a server rendering process according to an embodiment of the present application;
FIG. 10 is a schematic diagram of a processing result of server rendering according to an embodiment of the present application;
FIG. 11 is a schematic diagram of a client rendering process provided by an embodiment of the present application;
FIG. 12 is a flow chart of a client method provided by an embodiment of the present application;
FIG. 13 is a schematic diagram of a system provided by an embodiment of the present application;
FIG. 14 is a schematic diagram of a client device according to an embodiment of the present application;
Fig. 15 is a schematic diagram of an electronic device according to an embodiment of the present application.
Detailed Description
The following description of the embodiments of the present application will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present application, but not all embodiments. All other embodiments, which are derived by a person skilled in the art based on the embodiments of the application, fall within the scope of protection of the application.
Firstly, it should be noted that, in order to improve the page development efficiency and reduce the technical threshold of page development, non-technicians can also participate in the page development, and a page building system appears in the prior art. In such a system, a technician may develop individual components and save them in a component repository, after which a non-technician (e.g., a product designer, etc.) may select a particular component from the component repository and drag it to a designated location in the page, according to the functionality that the particular page needs to implement, after which the online publication may be performed so that the user may access.
The above-mentioned modular page building system can promote the development efficiency of the page, make non-technicians participate in the page development too, but the existing page building system only supports the way that the customer end rendered, can't realize the support to the rendering of the server. This is because conventional front-end component development and rendering rarely involves consideration of the rendering of the server, and thus is simpler in component specification design and generally cannot be adapted to the rendering execution environment of the server. For example, external dependencies of pure front-end execution components may be introduced by means of a browser's script tag (defining a client script) into static script resources hosted on the content distribution network, while the server is executing without the relevant environmental conditions, and thus rendering of such components is not possible. In this case, if a page supporting isomorphic rendering needs to be developed, in the prior art, the implementation of the isomorphic page building system is impossible, and only the technician can write the code for the page with isomorphic rendering requirements separately.
Aiming at the situation, in the embodiment of the application, the support for isomorphic rendering can be realized on the basis of the componentized page building system, namely, the page to be subjected to isomorphic rendering can be developed through the componentized page building system by the scheme provided by the embodiment of the application, and the page code is not required to be independently written by technicians.
As shown in fig. 1-1 and 1-2, the overall technical architecture of an embodiment of the present application is shown. First, a standardized design specification for isomorphic components in the component development process may be provided, so that a technician may complete component development without perception (without perception of the difference between the server-side rendering and the client-side rendering). In addition, a compiling tool 11 for compiling the component may be provided, and by using the compiling tool 11, source codes of the component may be compiled into codes that may be executed by a machine in a rendering process, where specific compiling results may be two, and different rendering logics corresponding to the server rendering and the client rendering respectively. After compiling is completed, the components may be saved into a component repository, after which the components in such a component repository may be page built based on the page building editor 12. In the process of building the page, registered components can be pulled from a component warehouse, and a developer can select specific components for specific blocks (including resource bits (also called pit bits), units and the like) in the page so as to complete page development in a mode of assembling the components.
In addition, considering the requirement of displaying personalized page (for example, for a certain pit in the same page, the components displayed when facing different users may be different, some low-price label related components, some high-quality label related components, etc.), and meanwhile, the server side and the client side can both realize the display of personalized data when rendering. After the page is built, a publication may be made, at which time a page description may be published, which information describes which components are specifically used in the page, where each component is located, and so on.
After the page construction and the configuration of the intervention policy (as optional items) are completed, the page can be issued, at this time, a part of page description information is issued, and then, the rendering service 14 of the server can perform component analysis (including analysis of dependency relationships, loading of codes and the like) on components referenced by the page according to the page description information, so as to prepare relevant materials for specific rendering of the server. The reason why the material preparation link is performed is that there may be some interdependence between components, but as described above, when the client executes the external dependency of the component, static Script resources hosted on the content distribution network may be introduced by means of a Script tag of the browser, but when the server executes the static Script resources, there is no relevant environmental condition, so external code cannot be obtained by means of Script downloading. If the external codes relied on by the components or codes of other components are directly packed into the codes of the current components, the code quantity of the page can be huge, so in the embodiment of the application, the preparation can be finished in advance for rendering the required materials (including the external codes needed to be relied on, the codes of other components and the like) for the server by other modes. Specifically, the published page description information may be traversed, component information included in the page is determined, a component dependency tree of the page is generated according to the dependency between components, and according to the component dependency tree, the relevant component is downloaded to a server local storage system (for example, a local disk of the server) corresponding to the first compiling result, and a storage directory is provided. And then, particularly after receiving the page access request, determining a component needing to be rendered at the server in the process of rendering at the server, and reading a specific component code from the storage catalog into a memory running environment of the server for execution.
When the server-side rendering is completed, a complete page markup language document can be assembled according to the server-side rendering result, a client-side rendering code is generated according to execution logic of the client-side rendering, then the rendering service 15 of the client-side can display the components which have completed the server-side rendering according to the page markup language document, and a second compiling result corresponding to the components which have not been subjected to the server-side rendering is obtained according to the client-side rendering code, and the client-side rendering and the displaying are performed.
The following describes in detail the specific implementation scheme provided by the embodiment of the present application.
Example 1
Firstly, from the perspective of the server side, the embodiment of the application provides a page rendering method, and referring to fig. 2, the method may include:
s201: and responding to the access request of the user to the page, determining a target component needing to be rendered by the server, and loading a first compiling result of the corresponding component into a server execution environment from a storage catalog of a local storage system of the server according to the corresponding component dependency tree so as to complete the server rendering of the target component.
The page is generated by constructing a page by utilizing a pre-developed and compiled isomorphic component, and the compiling result corresponding to the isomorphic component comprises the first compiling result executable by a server side and the second compiling result executable by a client side. A specific set of component dependency trees may be generated by traversing page description information of the built pages.
Specifically, in order to realize page development in a manner of building a component and simultaneously realize support of isomorphic rendering of server rendering and client rendering, in the embodiment of the application, a standardized design specification of isomorphic components can be provided first, so that a technician can develop the component according to the specification, and in a development stage, the technician can not need to perceive the difference between the server rendering and the client rendering. That is, in the component development stage, the same component can support two modes of server rendering and client rendering, and differential development is not needed.
Specifically, as shown in fig. 3, one component may include the following design elements: name, version number, dependency information, where the name and version number are mainly used to uniquely locate one component, and the dependency may specifically include a dependency on an external code library, or a dependency on another component. That is, in the process of developing components, one component may rely on some common external code library, or may rely on other components already published, for example, some common functions such as date processing, date formatting, etc. may be required in many components, but if each component rewrites the code of the function, there is a great deal of code redundancy in the system, and in addition, component development efficiency is reduced. Thus, in embodiments of the present application, support for dependencies between components is provided. In particular, the dependency relationships of components may be declared in component engineering, i.e., by referencing other components in component code through specific syntax.
Component code developed by technicians is typically expressed using programming languages, and therefore requires compilation after development to convert it into machine-executable code. That is, the component compiling is mainly to meet the component technical specification, convert the code information in the component engineering into the runtime information when the page rendering is executed, and the runtime information is passed to the rendering execution program to analyze and process, and finally complete the rendering processing of the component.
In the development process of the isomorphic component, the support of different rendering modes of the server and the client is not needed to be considered, so that in order to enable the server and the client to execute corresponding component codes in the subsequent rendering stage, the embodiment of the application optimizes the compiler, and the optimized compiler can be used for realizing the compiling of the isomorphic component. Specifically, in the compiling process, component codes of one isomorphic component can be compiled into two different compiling results according to rendering processing logic of a server side and a client side respectively, wherein the two different compiling results are respectively a first compiling result rendered by the corresponding server side and a second compiling result rendered by the corresponding client side, and in the rendering process, the server side executes the first compiling result and the client side executes the second compiling result.
In particular, in the compiling process, the dependency condition of the component can be processed. Where components rely on external code libraries, in conventional client-only page rendering schemes, the relevant libraries may be compiled as external resources into dependent remote addresses and then introduced by means of the browser's script loading capabilities. However, in the case of a component isomorphism scheme, since the server side has no relevant script introduction mechanism, it is necessary to package the source code into the code repository of the component at compile time, and register the source code into the code repository of the component together with the component code.
In order to achieve the above objective, in one processing manner, the original code in the specific external code library may be directly downloaded and embedded into the corresponding dependency statement in the component code. However, a disadvantage of this approach is that the amount of original code in the external code library may be very large, and at this time, embedding the original code of the external code library directly into the component code may result in a significant increase in the code amount of the component. In addition, there may be a case where a plurality of different components rely on the same external code library, and at this time, if the original codes of the same external code library are respectively embedded into the component codes of each component, a large amount of redundant codes may exist in the system. In addition, if there are cases that the same external code library is relied on through multiple components in one page, the code amount required to be transmitted to the client is very large in the client rendering process, so that a large amount of transmission bandwidth is occupied, and the like.
In view of the above, in the preferred embodiment of the present application, if a component is found to depend on a certain external code library during compiling, the original code of the external code library may be packaged into a component (i.e., the external code may be disguised as a component, which may be referred to as a "disguised component" for convenience of description), and the component may also conform to the specification of the component configured in the embodiment of the present application, specifically, the disguised component may be provided with identification information such as a corresponding name and version number, and of course, since it is not required to rely on other external codes or components therein, the disguised component belongs to an atomic component. Here, since the rendering logic at the time of rendering is different between the server and the client, when the above-mentioned camouflage components are packaged, the camouflage components satisfying the rendering logic of different ends may be packaged according to the rendering logic of the server and the client, respectively.
After the camouflage component is obtained, the original codes of the external code library do not need to be embedded into the component codes, but the dependency sentences in the component codes on the external code library can be converted into the dependencies on the camouflage component, namely, the component codes can point to the specific components which need to be relied by a handle and the like, and a plurality of lines of external original codes do not need to be embedded, so that the large increase of the quantity of the component codes can be avoided. Of course, since there may be two disguised components corresponding to the same external code, which correspond to the server rendering and the client rendering, respectively, a specific dependency code may be generated using the name, version number, etc. of the corresponding disguised component in the two compiling results. For example, in the compilation result for the server, the dependency handle points to the identity of the disguised component encapsulated according to the server rendering logic, and in the compilation result for the client, the dependency handle points to the identity of the disguised component encapsulated according to the client rendering logic.
In the case of disguising the external code, the correspondence between the specific disguised component and the external code library may be saved, and when other components (for example, new components developed by the same technician later, or components developed by other technicians, etc.) are compiled, if other components are found to also depend on the external code library, the original code of the external code is not downloaded again, and the dependency statement about the external code library in the component code of such other components may be converted into the dependency on the external code library.
The mechanism for packaging the external code into the component and converting the dependence of the component on the external code into the dependence on the disguised component can reduce the loading problem of repeated modules in the page through a front-end and back-end isomorphic component dependence analysis mechanism, so that a plurality of component modules in the page are introduced and used together. When the server rendering or the client rendering is performed, for the case that a plurality of components depend on the same external code, the rendering of the plurality of components can be completed by downloading the code of the disguised component once.
In addition, as described above, the component may also depend on other components, and when the page is rendered, the related execution code may be resolved and acquired according to the component dependency relationship when the server is rendered and the client is rendered. In the case of dependent components, the list of dependent components may be appended to the component configuration information of the current component during compilation for recursive resolution and pull of components during subsequent rendering.
That is, as shown in fig. 4, specifically, when compiling the component code, the original code of the component may be parsed, and if the component is found to depend on the external code, the external code may be embedded in the component execution code, and combined with the compiling result of the component code itself. When the external code is embedded, the original code in the external code library can be directly embedded, or the embedding can be completed by embedding a handle pointing to the disguised component. For the case that the component depends on other components, the component dependence mapping result can be added into the configuration information of the component execution after the dependence relationship is continued, so that the component configuration information can not only comprise component basic information, but also comprise mapping information of the component dependence relationship.
On the compiling result of the codes, different results can be compiled according to the requirements of the server side and the client side so as to meet the requirements of different execution environments. For the server, the compiling result of the overall output may be a function, and the parameters of the function may include: the server relies on the analysis auxiliary object (used for obtaining component examples when the server renders and used when the server renders is executed) and context information of the access request of a specific user to the page, wherein each request generates an independent context mainly comprising content relevant to the request, such as page address information when the request is made, client cache information, user information and the like. Specifically, when a compiling result corresponding to the server side is generated, grammar compiling related to other components in the component source code can be converted into references to identification information such as names, version numbers and the like of the other components; syntax compilation referencing external code for component source code translates into: the external code is directly embedded and replaces the current reference syntax position, or in the case of the external code packaged as a disguised component, the reference syntax position in the component code can be embedded and replaced in the form of a handle that depends on the disguised component.
For compiling of the client, the component source code reference can be compiled into a module specification supported by a browser, for example, the module specification supported by the browser can comprise an asynchronous module loading mechanism or a synchronous module loading mechanism, and the like, and the component source code reference can be compiled into syntax of other components: and performing dependency processing compiling conversion according to the asynchronous module loading mechanism or synchronous module loading mechanism specifications. The syntax of component source code referencing external code can be compiled into: the external code is directly embedded and replaces the current reference syntax position. Alternatively, in the case of the aforementioned encapsulation of the external code into a disguised component, the reference syntax position in the component code may be embedded and replaced in the form of a handle that depends on the disguised component.
As can be seen from the foregoing, in the embodiment of the present application, a technical standard specification of a isomorphic component is provided, and a technician may develop the isomorphic component based on the specification, and in the process of developing the component, the server may not be aware of the rendering difference with the client, that is, the same function may be correspondingly developed for the same isomorphic component. After the development of the isomorphic component is completed, the compiler provided by the embodiment of the application can be used for compiling the isomorphic component, and in the compiling process, the source codes of the isomorphic component can be compiled into two different compiling results so as to respectively meet the runtime requirements of the server side rendering and the client side rendering. In addition, in the compiling process, the conditions of the component dependence component, the component dependence external code and the like are processed, so that code redundancy is reduced, occupation of client bandwidth is reduced, and the like.
After the development and compilation of the components is completed, the components may be registered in a component repository, which may be located to specific components by unique identification information such as names and versions. In addition, component developers can also describe effects, functions, etc. of the components. Thereafter, when the page development is performed, the page building can be performed using such registered components. Specifically, the components in the component warehouse can be pulled to a building platform, page engineering can be created in the building platform, and a specific required component is selected to complete the building process according to the effect, the function and the like of the specific component, and after the building is completed, the page can be issued.
It should be noted that, in the process of actually displaying a page, there may be a requirement for personalized display of the page, for example, for a page that needs to be displayed through multiple channels in a merchandise information service system, where a specific resource bit is used for displaying a merchandise information card, however, the area of the merchandise information card is limited, all information of the merchandise may not be displayed, but only a part of important information is displayed. While what information is specifically presented may be different for different users. For example, a particular article may include many tag-like components for presenting the selling point of the article in many ways, but depending on information such as user preferences, the particular tag or tags presented in the article information card may be different. That is, for the same item presented in the same page, some users may see "low cost" tag-related components in the item information card, some users may see "good quality" tag-related components, and so on. The foregoing personalized data presentation manner may be implemented directly by writing codes for the case of rendering only at the client, but in the embodiment of the present application, isomorphic rendering needs to be implemented, so that the presentation of such personalized data may be implemented both at the server and at the client when rendering is required. Therefore, in the preferred embodiment of the present application, the function of configuring the data intervention policy may be provided in the page building tool, so that the page personnel may configure the data intervention policy for a specific page block during the process of building the page. That is, a specific intervention policy may be completed during the page building process, and when a specific implementation is performed, an operation option for performing data intervention policy configuration may be provided on an associated interface of the page building tool, through which a user may complete configuration of the data intervention policy.
In particular, when the input intervention policy configuration is performed, as shown in fig. 5, the following information may be included:
policy type: for example, it may include a resource bit (or "pit" that only reveals one of the components), a unit (orders the components); wherein, the resource bit and the unit can be incorporated into the rendering flow in a component way;
policy features: for example, in the scenario of displaying merchandise information in a merchandise information system, specific policy features may include crowd features, merchandise features, channel features, and so on, that is, feature configuration may be performed on different crowds, different merchandise, different channels, and so on, so as to determine how policies are used for data intervention for the crowd, merchandise, or channels of the specific features;
policy element: component identification lists, i.e., the components may be selected or ordered to obtain personalized data intervention results.
After the configuration of the intervention strategy is completed, registering can be carried out to the rendering intervention service, identifiers such as intervention ID and the like can be generated after registering, and then the intervention ID can be saved in page configuration information so as to be used in the subsequent rendering process. For example, when the server or the client performs rendering, a specific intervention strategy may be obtained from the data intervention service request according to the intervention ID, and a component display manner in the target block may be generated in a personalized manner according to context information (for example, user information, commodity information, channel information, etc.) of the specific request, which specifically includes determining components specifically required to be displayed or sorting the components, and so on. For example, for a tag class component that needs to be displayed in a commodity resource location, a "low cost" tag, a "premium" tag, etc., the revealed tag component may be different when displayed to users of different shopping preferences, etc.
When the page generated through the platform is published, the description information of the page is published specifically, and the description information can be used for describing the structure and the like of the page specifically, for example, description information about which components are included in the page, where each component is located and the like can be included. To enable such pages to be rendered, preparation before rendering may also be performed.
Specifically, because the dependency relationship between components is specifically related, in the embodiment of the present application, the dependent components are not directly inserted into the component code, but are described in a manner of pointing to a handle, and when the server side renders, the downloading of the code based on the script loading mechanism of the browser cannot be performed like the client side renders, so that in order to enable the server side rendering, the embodiment of the present application may also provide the rendering service of the server side. After the page description information is released, the page description information can be pushed to the rendering service, and the rendering service completes the preparation work of the data and the materials required by the rendering of the server side.
The rendering service may traverse the page description information, determine component information included in the page, generate a component dependency tree of the page according to a dependency between components, and then download the relevant component corresponding to the first compiling result to a server local storage system according to the component dependency tree, and provide a storage directory. Because the dependency relationship mapping of the components is added to the configuration information of the components during compiling, the identification of other components on which the isomorphic components depend can be determined according to the configuration information of the components, and a component dependency relationship tree of the page can be generated. That is, this step is mainly to complete resource pulling and information entry of the component, recursively complete parsing of the sub-component on which the current component depends, and prepare all rendering raw materials required for rendering in advance. Specifically, the above process may be as shown in fig. 6, and specifically may include the following steps:
S601: acquiring identification information such as component names and version numbers;
s602: judging whether the component is resolved, if yes, ending, otherwise, entering step S603:
s603: acquiring configuration information and a component code of a component;
s604: the step of marking component information is mainly to analyze page static resources and inject the page static resources into HTML (Hyper Text Mark-up Language) and other page Mark Language documents executable by a client end at last, and the main method is to record component information, sequence and other information required by current rendering and store the information into the context of the current request for static resource configuration of the client end rendering.
S605: acquiring a component dependency list;
s606: traversing the component dependency list;
s607: it is determined whether there is still a next component, and if so, it returns to S601, otherwise it ends.
Specifically, for the server side rendering, since the downloading of the code component cannot be realized according to the downloading address of the component code in the rendering process, the code required for rendering can be downloaded in advance by the rendering service and stored in the local storage system of the server side to generate the storage catalog, so that the server side can load the specific component code into the memory from the local storage system and complete the specific rendering task when the server side rendering is performed subsequently.
It should be noted that, for a page, since a single component may be built by using multiple different components, and a single component may depend on other components, different components may also depend on the same component, and so on, when generating the component dependency tree, in order to comb the component references and dependencies in the page, a deduplication process may also be performed on the repeatedly occurring components, so that the same component only appears once in the component dependency tree of a page. In this way, it is not necessary to repeatedly download component code multiple times for the same component, whether it is server-side rendering or client-side rendering, even if it is relied upon by multiple other components.
After the construction of the page and the preparation of the materials needed by the rendering based on the rendering service are completed, the page can be formally released online, at this time, the user can access to a specific page, and at this time, the specific isomorphic page rendering process is involved. In the embodiment of the application, the main processing flow of isomorphic page rendering is at the server, on one hand, page markup Language document (such as HTML (Hyper Text markup-up Language) and the like) template rendering of the server and straight-out of rendering content of the server (namely, the rendering result of the server can be completed), and on the other hand, the composition structure of the HTML can be planned, so that client side rendering can be completed when the browser loads and executes the HTML.
For the server rendering part, the target component that needs to be rendered by the server may be determined first, specifically, regarding which components need to be rendered by the server, and may be determined in various manners. For example, in one mode, according to information such as the screen height of the terminal device of the user, components required to be displayed on the first screen can be predicted, and the components are used as target components required to be rendered on the server side. That is, the component which needs to be subjected to the first screen display can be subjected to the server rendering so as to shorten the waiting time of the user for the first screen content; other components which are not covered by the first screen can adopt a client rendering mode. Or, the page developer may specify the components that need to be rendered at the server according to specific requirements. For example, in a merchandise information service system, for a page built for a large-scale sales promotion, a page developer may designate a component corresponding to an atmosphere background element of the page as a component to be rendered at a server, so that a client may preferentially display such atmosphere element, so as to attract the attention of a user, and other contents may be gradually rendered and displayed by the client. It should be noted that, for some components of the interaction class, the case where the server and the client together complete rendering may be involved. For example, for an interactive component, if the interactive component needs to be displayed on the first screen, rendering of a front-end display style of the component can be completed on the server, but at this time, only the component can be displayed in the page, and the user can know that the component exists in the page, but cannot interact, that is, is in a non-clickable state. The client can then complete the "water filling" of such components, i.e. specific interactive content is achieved, at which point the components can only be made to have a truly interactable function.
Besides determining the components needing to be rendered at the server, the first compiling results corresponding to the components stored in the local storage system at the server can be read into the memory environment at the server according to the component dependency relationship tree. When the components are loaded specifically, the loading sequence of the components can be determined according to the dependency relationship among the components. For example, assuming that leaf nodes in the component dependency tree are atomic nodes, that is, components that do not need to depend on other components, components corresponding to leaf nodes in the tree may be loaded preferentially, then loaded up step by step, and so on.
In a specific implementation manner, a process of loading a component instance in a server rendering process may be as shown in fig. 7:
s701: acquiring input parameters, namely identification information such as component names, version numbers and the like;
s702: acquiring the directory address of the component in a storage system such as a local disk of a server according to the name and version number of the component;
s703: reading configuration information and loading a component instance, namely a first compiling result corresponding to the component;
s704: storing the component instance into a server memory LRU (Least Recently Used, least recently used algorithm);
S705: judging whether the memory LRU overflows or not, if so, entering S706, otherwise, ending the flow;
s706: an unusual component instance is ejected from the memory LRU.
Wherein, the dependence of static resources (namely, codes of the components, style templates and the like, the server side downloads to a local disk, and loads the static resources from the disk to a memory execution environment through an auxiliary method) generates script and style information required by the current page. In the rendering execution of the server, the component can be pulled from the code warehouse to the local disk of the server according to the name and version of the component, so that a specific rendering auxiliary method can be called. In the generation of the client rendering code, a resource URL (Uniform Resource Locator ) address and related HTML fragments may be generated and added to the HTML document of the page through labels such as Script, link, etc. for constructing the client execution environment. The Script tag is generally used to define a Script, the link tag is used to link an external style, and when the HTML uses an external style sheet, the browser obtains the style from a CSS (Cascading Style Sheets, cascading style sheet) file corresponding to the external connection and renders the picture when parsing the HTML document.
Besides obtaining the first compiling result of the component, a data request can be performed, specifically, data to be displayed under a data intervention policy can be pulled, and in addition, data related to a specific application scene can be included partially, and the like. After the data is acquired, specific rendering logic can be executed to complete component rendering to generate component HTML fragments for subsequent assembly of the overall page HTML. Of course, during rendering, a rendering tree of pages may also be generated (the generation logic for the rendering tree is not described in detail herein). In a specific implementation manner, the related flow of the data request performed by the server may be as shown in fig. 8:
s801: traversing a page rendering tree root component;
s802: acquiring identification information such as component names and version numbers;
s803: the method comprises the steps of obtaining rendering information of a component, wherein the rendering information mainly comprises first compiling result and other runtime codes of the component;
s804: generating a server request parameter;
s805: requesting server data;
s806: generating a render DOM (Document Object Model, document object model, i.e., data structure that can parse HTML into trees) container; the step is used for mounting the actual content of the component under the container, and the common DIV element is generally used; the DIV element is a positioning technology in the cascading style sheet, is called DIVision, namely DIVision, and can also be called a layer, and in general, the DIV element can be used for providing elements of structure and background for massive content in an HTML document.
S807: constructing server side rendering component attribute data, which specifically can comprise server side data and rendering intervention data of the components, and can also comprise a rendering tree of the current components for component selection and sequencing during subsequent rendering intervention;
s808: the root component server side renders (is mounted to the DOM container), specifically, a server side rendering method of the component can be called, the attribute data of the server side rendering component is transmitted to obtain a rendering result, and then the obtained rendering result can be added to the lower part of the rendering DOM container generated above to finish component mounting of the server side. Thereafter, if there is still a next root component, S801 is returned, otherwise the flow is ended.
When intervention data is requested, the intervention data can be selected/sequenced according to an intervention strategy, namely, the sub-components associated with the current component are selected or sequenced according to component identification data returned by rendering intervention service.
Then, a specific server rendering process may be entered, and specifically may be as shown in fig. 9:
s901: generating an HTML frame;
s902: injecting static resources of the page;
s903: render tree data injection (including render intervention data, etc.);
s904: generating a client rendering code;
S905: responding to the rendering request of the client.
The above description mainly describes the process of server rendering, and in the embodiment of the present application, since isomorphic rendering of the server and the client is required, in the process of performing the server rendering, generation of a client rendering code may also be performed, which is described in the following step S204.
S202: generating a client rendering code according to execution logic of client rendering, assembling a page markup language document according to the client rendering code and a server rendering result, displaying a target component which is rendered by a client, downloading a script according to the client rendering code, and performing client rendering and displaying, wherein the second compiling result corresponds to a component which is not rendered.
For the components which finish the rendering of the server, the rendering result can be added into a document in an HTML format and the like for providing for the client, and in addition, a client rendering code can be generated according to the execution logic of the rendering of the client so as to facilitate the rendering and displaying of the components which are not rendered by the client. That is, as shown in fig. 10, in a specific HTML document, a static resource segment, a component code segment that has completed server-side rendering (that can be carried by the DOM container), and a code segment that is rendered by the client side may be included.
As described above, for the rendered portion of the server, the server side does not support the script downloading mechanism of browsing, so that a manner of loading specific component codes from the local disk directory is adopted. However, for the browser side, since it is not practical to construct the above-mentioned directory system at the client side, the downloading of a specific component instance (i.e., the second compiling result obtained by compiling the component code before) can still be implemented in a script downloading manner.
Specifically, the rendering logic of the client rendering code is similar to that of the server, but the component instance can be imported into the execution domain by means of labels such as script and link of a browser through static resource injection, rendering attribute acquisition is completed based on a rendering tree, and then a rendering function is called to complete rendering of the component at the front end. Event binding, interaction logic processing and the like can be additionally performed relative to the rendering of the server, namely the processing of 'water injection' and the like of the interaction component.
Specifically, the rendering flow of the client may be as shown in fig. 11:
s1101: traversing a page rendering tree root component;
s1102: if the next component exists, acquiring a component instance in a script downloading mode, wherein the acquisition of static resource codes is included;
S1103: acquiring a component rendering attribute;
s1104: the components render into the corresponding DOM containers.
In summary, by the embodiment of the application, the technical standard specification of the isomorphic component can be provided, so that a technician can develop the component without perception (without perception of the difference between the server rendering and the client rendering logic). Moreover, the isomorphic components can be compiled into two parts by the compiler according to the embodiment of the application, and the isomorphic components are respectively used for running during server rendering and client rendering. Thus, after registering a component, page building can be performed based on the registered component. In addition, because the components may rely on external codes or other components, and the server side rendering does not support downloading of external resources by means of scripts in the rendering process, a rendering service is provided, the published page description information can be traversed through the rendering service, component information included in the page is determined, a component dependency tree of the page is generated according to the dependency between the components, and the relevant components are downloaded to a server side local storage system corresponding to the first compiling result according to the component dependency tree, and a storage catalog is provided. In this way, after a specific user sends out a page access request, a target component needing to be rendered by a server can be determined, and according to the component dependency tree, a first compiling result of the corresponding component is loaded into a server execution environment from the storage directory so as to complete the server rendering of the target component, thereby solving the problem of server rendering. And the client can also generate client rendering codes according to the execution logic of the client rendering so that the client can display the components which are rendered by the server according to the page markup language documents, acquire a second compiling result corresponding to the components which are not rendered by the server according to the client rendering codes, and perform client rendering and display. By the method, the page supporting isomorphic rendering can be developed in a building mode, so that page development efficiency can be improved, and non-technicians can participate in the development of the page supporting isomorphic rendering.
In the case that the component depends on the external code, the external code can be packaged into the form of the component when compiling, so that the original code of an external code library is not required to be directly embedded in the component code, but a handle pointing to the packaged component identifier is directly embedded, and the problem that the component code amount or the subsequently built page code amount is greatly increased due to the embedding of the external code is avoided.
In addition, in order to meet the requirements of data intervention in the scenes of 'thousands of people and thousands of faces' of pages and the like, isomorphic rendering of a server and a client can still be realized under the condition of data intervention, the embodiment of the application also provides a function for configuring a data intervention strategy in the page building process, and provides a data intervention service, the intervention strategy can be registered in the service, and the specific intervention strategy can be acquired from the data intervention service in the mode of acquiring the intervention data by the server or the client when the service is consumed.
Example two
In a second embodiment, from the perspective of a client, a page rendering method is provided, referring to fig. 12, and the method may include:
s1201: responding to an access request of a user to a page, acquiring a page markup language document provided by a server, wherein the page markup language document is generated by assembling a client rendering code generated by the server and a server rendering result aiming at part of components in the page;
The page is generated by constructing a page by utilizing a pre-developed and compiled isomorphic component, and the compiling result corresponding to the isomorphic component comprises a first compiling result executable by a server side and a second compiling result executable by a client side; the first compiling result is used for being downloaded to a local storage system of the server so as to complete the rendering of the server of the partial component in a mode of loading the first compiling result from the local storage system of the server to the execution environment of the server;
s1202: displaying the partial components which are rendered by the server;
s1203: and according to the client rendering code, carrying out script downloading on a second compiling result corresponding to the component which is not rendered, and carrying out client rendering and displaying.
In particular, steps S1202 and S1203 may be executed in parallel.
For the undescribed parts in the second embodiment, reference may be made to the description of the first embodiment and other parts of the specification, and the description is not repeated here.
It should be noted that, in the embodiment of the present application, the use of user data may be involved, and in practical application, the user specific personal data may be used in the solution described herein within the scope allowed by the applicable legal regulations in the country under the condition of meeting the applicable legal regulations in the country (for example, the user explicitly agrees to the user to notify practically, etc.).
Corresponding to the foregoing method embodiment, the embodiment of the present application further provides a page rendering system, referring to fig. 13, where the system may include:
the compiling module 1301 is configured to perform code conversion on a isomorphic component developed according to a preset technical standard specification, generate a first compiling result executable by a server side and a second compiling result executable by a client side, so as to perform page building by using the isomorphic component;
the server rendering auxiliary module 1302 is configured to generate a component dependency tree of the page by traversing page description information of the built page, and download a component corresponding to the first compiling result to a server local storage system to provide a storage directory;
the server rendering module 1303 is configured to determine, in response to an access request of a user to a page, a target component that needs to be rendered by a server, and load, according to the component dependency tree, a first compiling result of a corresponding component from the storage directory into a server execution environment, so as to complete server rendering of the target component;
the client rendering code preparation module 1304 is configured to generate a client rendering code according to execution logic of client rendering, assemble a page markup language document according to the client rendering code and a server rendering result, facilitate a client to display a target component that has completed server rendering, download a script according to the client rendering code, and perform client rendering and display.
Wherein, the compiling module can be specifically used for:
if the structuring component depends on an external code, acquiring an original code of the external code;
packaging the original codes of the external codes into disguised components according to the identifiable packaging specifications of the server and the client, and providing the component identification of the disguised components;
when the first compiling result and the second compiling result are generated, the dependency relationship of the isomorphic component on the external code is converted into the dependency relationship of the camouflage component, and the dependency relationship of the camouflage component is embedded into the component code, so that when the server rendering or the client rendering is carried out, the plurality of components depend on the same external code, the rendering of the plurality of components is completed through single downloading of the code of the camouflage component.
In addition, the compiling module may be specifically configured to:
if the isomorphic component depends on other components, the dependency relationship information of the other components is added into the configuration information of the components, so that when the server or the client renders, the dependency relationship information is acquired according to the configuration information, and the recursion analysis of the components is performed.
Specifically, the server rendering auxiliary module may specifically be configured to:
and determining the identification of other components on which the isomorphic components depend according to configuration information of each component included in the page, and generating a component dependency tree of the page after de-duplication processing, so that when server side rendering or client side rendering is performed, the compiling result of the components is loaded into a memory according to the component dependency tree for execution, and when a plurality of components depend on the same component, the same component which is depended on is loaded for a single time.
The first compiling result is a function, and parameters of the function comprise an analysis auxiliary object relied by a server side and context information requested by the user, wherein the analysis auxiliary object is used for acquiring a component instance when the server side renders.
In addition, the client rendering code preparation module may specifically be configured to:
and determining loading sequence information among the components according to the component dependency relationship tree, and providing a download address of a second compiling result of the corresponding component so as to sequentially download the second compiling result of the component from the download address to the local of the client by script mode when the client is rendered.
Furthermore, the apparatus may further include:
the intervention strategy information receiving unit is used for receiving a data intervention strategy configured for a target block in a page in the process of constructing the page, wherein the data intervention strategy comprises the following steps: policy type, policy characteristics and related component sets;
an intervention policy registration unit, configured to register the data intervention policy, and return a generated data intervention policy identifier, so that the intervention policy identifier is added to corresponding page configuration information;
and the personalized display unit is used for acquiring the data intervention strategy by the server or the client according to the configuration information of the page after receiving the page access request of the user, so as to generate the component display mode in the target block in a personalized manner according to the strategy type and the matching relationship between the context information of the page access request and the strategy characteristics.
Corresponding to the embodiment, the embodiment of the application also provides a page rendering device, referring to fig. 14, which may include:
a page markup language document obtaining unit 1401, configured to obtain a page markup language document provided by a server in response to an access request of a user to a page, where the page markup language document is generated by assembling a client rendering code generated by the server and a server rendering result for a part of components in the page;
The page is generated by constructing a page by utilizing a pre-developed and compiled isomorphic component, and the compiling result corresponding to the isomorphic component comprises a first compiling result executable by a server side and a second compiling result executable by a client side; the first compiling result is used for being downloaded to a local storage system of the server so as to complete the rendering of the server of the partial component in a mode of loading the first compiling result from the local storage system of the server to the execution environment of the server;
a first display unit 1402, configured to display the partial component rendered by the server;
the second display unit 1403 is configured to perform script downloading on a second compiling result corresponding to the component that has not been rendered according to the client rendering code, and perform client rendering and display.
In addition, the embodiment of the application also provides a computer readable storage medium, on which a computer program is stored, which when being executed by a processor, implements the steps of the method of any one of the previous method embodiments.
And an electronic device comprising:
one or more processors; and
a memory associated with the one or more processors for storing program instructions that, when read for execution by the one or more processors, perform the steps of the method of any of the preceding method embodiments.
Fig. 15 illustrates an architecture of an electronic device, which may include a processor 1510, a video display adapter 1511, a disk drive 1512, an input/output interface 1513, a network interface 1514, and a memory 1520, among others. The processor 1510, the video display adapter 1511, the disk drive 1512, the input/output interface 1513, the network interface 1514, and the memory 1520 may be communicatively connected by a communication bus 1530.
The processor 1510 may be implemented by a general-purpose CPU (Central Processing Unit, processor), microprocessor, application specific integrated circuit (Application Specific Integrated Circuit, ASIC), or one or more integrated circuits, etc. for executing related programs to implement the technical scheme provided by the present application.
The Memory 1520 may be implemented in the form of ROM (Read Only Memory), RAM (Random Access Memory ), a static storage device, a dynamic storage device, or the like. The memory 1520 may store an operating system 1521 for controlling the operation of the electronic device 1500, a Basic Input Output System (BIOS) for controlling the low-level operation of the electronic device 1500. In addition, a web browser 1523, a data storage management system 1524, a page rendering processing system 1525, and the like may also be stored. The page rendering processing system 1525 may be an application program that implements the operations of the foregoing steps in the embodiments of the present application. In general, when the present application is implemented in software or firmware, the relevant program code is stored in the memory 1520 and executed by the processor 1510.
The input/output interface 1513 is used for connecting with an input/output module to realize information input and output. The input/output module may be configured as a component in a device (not shown) or may be external to the device to provide corresponding functionality. Wherein the input devices may include a keyboard, mouse, touch screen, microphone, various types of sensors, etc., and the output devices may include a display, speaker, vibrator, indicator lights, etc.
The network interface 1514 is used to connect communication modules (not shown) to enable communication interactions of the present device with other devices. The communication module may implement communication through a wired manner (such as USB, network cable, etc.), or may implement communication through a wireless manner (such as mobile network, WIFI, bluetooth, etc.).
Bus 1530 includes a path for transporting information between various components of the device (e.g., processor 1510, video display adapter 1511, disk drive 1512, input/output interface 1513, network interface 1514, and memory 1520).
It is noted that although the above devices illustrate only the processor 1510, video display adapter 1511, disk drive 1512, input/output interface 1513, network interface 1514, memory 1520, bus 1530, etc., the device may include other components necessary to achieve proper functioning in a particular implementation. Furthermore, it will be appreciated by those skilled in the art that the apparatus may include only the components necessary to implement the present application, and not all of the components shown in the drawings.
From the above description of embodiments, it will be apparent to those skilled in the art that the present application may be implemented in software plus a necessary general hardware platform. Based on such understanding, the technical solution of the present application may be embodied essentially or in a part contributing to the prior art in the form of a software product, which may be stored in a storage medium, such as a ROM/RAM, a magnetic disk, an optical disk, etc., including several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the method described in the embodiments or some parts of the embodiments of the present application.
In this specification, each embodiment is described in a progressive manner, and identical and similar parts of each embodiment are all referred to each other, and each embodiment mainly describes differences from other embodiments. In particular, for a system or system embodiment, since it is substantially similar to a method embodiment, the description is relatively simple, with reference to the description of the method embodiment being made in part. The systems and system embodiments described above are merely illustrative, wherein the elements illustrated as separate elements may or may not be physically separate, and the elements shown as elements may or may not be physical elements, may be located in one place, or may be distributed over a plurality of network elements. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment. Those of ordinary skill in the art will understand and implement the present application without undue burden.
The page rendering method and the electronic device provided by the application are described in detail, and specific examples are applied to illustrate the principle and the implementation of the application, and the description of the above examples is only used for helping to understand the method and the core idea of the application; also, it is within the scope of the present application to be modified by those of ordinary skill in the art in light of the present teachings. In view of the foregoing, this description should not be construed as limiting the application.

Claims (11)

1. A method of page rendering, comprising:
responding to an access request of a user to a page, determining a target component needing to be rendered by a server, and loading a first compiling result of the corresponding component into a server execution environment from a storage catalog of a server local storage system according to a corresponding component dependency tree so as to complete the server rendering of the target component; the page is generated by constructing a page by utilizing a pre-developed and compiled isomorphic component, and the compiling result corresponding to the isomorphic component comprises the first compiling result executable by a server side and the second compiling result executable by a client side; the set dependency tree is generated by traversing page description information of the built page;
Generating a client rendering code according to execution logic of client rendering, and assembling a page markup language document according to the client rendering code and a server rendering result, so that a client can display a target component which is rendered by the server, and according to the client rendering code, script downloading is performed on a second compiling result corresponding to a component which is not rendered, and client rendering and displaying are performed.
2. The method of claim 1, wherein the step of determining the position of the substrate comprises,
when compiling the structuring component, if the structuring component depends on an external code, acquiring an original code of the external code;
packaging the original codes of the external codes into disguised components according to the identifiable packaging specifications of the server and the client, and providing the component identification of the disguised components;
when the first compiling result and the second compiling result are generated, the dependency relationship of the isomorphic component on the external code is converted into the dependency relationship of the camouflage component, and the dependency relationship of the camouflage component is embedded into the component code, so that when the server rendering or the client rendering is carried out, the plurality of components depend on the same external code, the rendering of the plurality of components is completed through single downloading of the code of the camouflage component.
3. The method of claim 1, wherein the step of determining the position of the substrate comprises,
when compiling the isomorphic component, if the isomorphic component depends on other components, adding the dependency relationship information of the other components into the configuration information of the components, so as to acquire the dependency relationship information according to the configuration information and perform recursive analysis of the components when rendering a server or a client.
4. The method of claim 3, wherein the step of,
when a component dependency tree of a page is generated, determining the identification of other components on which the isomorphic component depends according to configuration information of each component included in the page, and generating the component dependency tree of the page after de-duplication processing, so that when server side rendering or client side rendering is performed, the compiling result of the component is loaded into a memory according to the component dependency tree for execution, and when a plurality of components depend on the same component, the same component which is depended on is loaded for a single time.
5. The method of claim 1, wherein the step of determining the position of the substrate comprises,
the first compiling result is a function, and parameters of the function comprise an analysis auxiliary object relied by the server side and context information requested by the user, wherein the analysis auxiliary object is used for acquiring a component instance when the server side renders.
6. The method of claim 1, wherein the step of determining the position of the substrate comprises,
the generating client rendering code according to the execution logic of the client rendering includes:
and determining loading sequence information among the components according to the component dependency relationship tree, and providing a download address of a second compiling result of the corresponding component so as to sequentially download the second compiling result of the component from the download address to the local of the client by script mode when the client is rendered.
7. The method as recited in claim 1, further comprising:
in the process of building a page, receiving a data intervention strategy configured for a target block in the page, wherein the data intervention strategy comprises the following steps: policy type, policy characteristics and related component sets;
registering the data intervention strategy, and returning the generated data intervention strategy identification so as to add the intervention strategy identification into the corresponding page configuration information;
after receiving the page access request of the user, the server or the client acquires the data intervention strategy according to the configuration information of the page, so that a component display mode in the target block is generated in a personalized mode according to the strategy type and the matching relation between the context information of the page access request and the strategy characteristic.
8. A method of page rendering, comprising:
responding to an access request of a user to a page, acquiring a page markup language document provided by a server, wherein the page markup language document is generated by assembling a client rendering code generated by the server and a server rendering result aiming at part of components in the page;
the page is generated by constructing a page by utilizing a pre-developed and compiled isomorphic component, and the compiling result corresponding to the isomorphic component comprises a first compiling result executable by a server side and a second compiling result executable by a client side; the first compiling result is used for being downloaded to a local storage system of the server so as to complete the rendering of the server of the partial component in a mode of loading the first compiling result from the local storage system of the server to the execution environment of the server;
displaying the partial components which are rendered by the server;
and according to the client rendering code, carrying out script downloading on a second compiling result corresponding to the component which is not rendered, and carrying out client rendering and displaying.
9. A page rendering system, comprising:
The compiling module is used for performing code conversion on isomorphic components developed according to preset technical standard specifications, and generating a first compiling result executable by a server side and a second compiling result executable by a client side so as to perform page building by using the isomorphic components;
the server rendering auxiliary module is used for generating a component dependency tree of the page by traversing page description information of the built page, downloading a component corresponding to the first compiling result to a server local storage system and providing a storage catalog;
the server rendering module is used for responding to the access request of the user to the page, determining a target component needing to be rendered by the server, and loading a first compiling result of the corresponding component into a server execution environment from the storage catalog according to the component dependency tree so as to complete the server rendering of the target component;
the client-side rendering code preparation module is used for generating client-side rendering codes according to the execution logic of client-side rendering, assembling page markup language documents according to the client-side rendering codes and the server-side rendering results, displaying target components which are finished in the server-side rendering by the client-side conveniently, downloading scripts according to the client-side rendering codes, and performing client-side rendering and displaying on second compiling results corresponding to the components which are not rendered.
10. A computer readable storage medium, on which a computer program is stored, characterized in that the program, when being executed by a processor, implements the steps of the method according to any one of claims 1 to 8.
11. An electronic device, comprising:
one or more processors; and
a memory associated with the one or more processors for storing program instructions that, when read for execution by the one or more processors, perform the steps of the method of any of claims 1 to 8.
CN202310577001.1A 2023-05-18 2023-05-18 Page rendering method and electronic device Pending CN116719523A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310577001.1A CN116719523A (en) 2023-05-18 2023-05-18 Page rendering method and electronic device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310577001.1A CN116719523A (en) 2023-05-18 2023-05-18 Page rendering method and electronic device

Publications (1)

Publication Number Publication Date
CN116719523A true CN116719523A (en) 2023-09-08

Family

ID=87866961

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310577001.1A Pending CN116719523A (en) 2023-05-18 2023-05-18 Page rendering method and electronic device

Country Status (1)

Country Link
CN (1) CN116719523A (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117215592A (en) * 2023-11-07 2023-12-12 芯瞳半导体技术(山东)有限公司 Rendering program generation method, device, electronic equipment and storage medium

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117215592A (en) * 2023-11-07 2023-12-12 芯瞳半导体技术(山东)有限公司 Rendering program generation method, device, electronic equipment and storage medium
CN117215592B (en) * 2023-11-07 2024-02-20 芯瞳半导体技术(山东)有限公司 Rendering program generation method, device, electronic equipment and storage medium

Similar Documents

Publication Publication Date Title
CN109508191B (en) Code generation method and system
CN110806863A (en) Interface document generation method and device, electronic equipment and storage medium
CN100416567C (en) Sharable two way method and system for switching between object model and XML
CA2438176C (en) Xml-based multi-format business services design pattern
US9086931B2 (en) System for translating diverse programming languages
CN106293675B (en) System static resource loading method and device
US7836119B2 (en) Distributed execution model for cross-organizational declarative web applications
US8839192B2 (en) System and method for presentation of cross organizational applications
US20150242194A1 (en) System for Translating Diverse Programming Languages
CN112100550A (en) Page construction method and device
US20100269093A1 (en) Content Management System and Method for Generating Dynamic Applications
CN111068328A (en) Game advertisement configuration table generation method, terminal device and medium
US11237945B2 (en) Configuration content integration
CN116719523A (en) Page rendering method and electronic device
CN113419729B (en) Front-end page building method, device, equipment and storage medium based on componentization
CN101876998B (en) Method and system for editing data
CN108874384B (en) Terminal device, server, web page data processing method, and computer storage medium
AU2019222873B2 (en) Method and system for providing content
CN114637499B (en) Visualization component processing method, device, equipment and medium
CN115390846A (en) Compiling construction method and device, electronic equipment and storage medium
CN114968220A (en) Dynamic portal design method and device
CN114579137B (en) Page rendering method and device, computer equipment and storage medium
CN117311799B (en) Configuration method of software project page
CN117348871A (en) Page control generation method and device based on template
CN114090059A (en) File construction method and device, computer equipment and storage medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination