Rendering system and rendering method

Abstract

The present application provides a rendering system and a rendering method, wherein the rendering system includes a presentation layer, the presentation layer includes metadata and identifications of multiple projects, and the presentation layer also includes rendering data required for rendering the project to be rendered; an internal rendering layer, which obtains the identification of the project to be rendered, and the internal rendering layer is configured to render the project to be rendered according to the identification, wherein the internal rendering layer is configured to determine whether rendering data is required for rendering the project to be rendered, and if so, the internal rendering layer requests rendering data from the presentation layer. The rendering system and rendering method provided by the present application can improve page rendering performance and user experience, and accurately meet the personalized needs of different users.

Description

Technical Field

[0001] The present application mainly relates to the field of electronic technology, and in particular to a rendering system and a rendering method. Background Art

[0002] At present, the rendering of template projects is mainly based on the concept of componentization through mobile page construction, which breaks down the page into reusable components, such as buttons, text boxes, lists, etc. Each component contains independent UI, style and status, and displays different content and performs different behaviors after receiving external properties (props). Taking the news application as an example, the article list page consists of components such as article title, summary, and release time. Based on the components, further abstraction forms a template project, integrating related components into specific functional layout units. For example, the e-commerce product details template covers components such as picture display, detailed description, and purchase button, standardizing the page structure and display logic for unified management and maintenance.

[0003] Nowadays, in order to achieve preliminary personalization, user registration information (such as registration duration, membership level), behavioral data (browsing history, purchase history), etc. are often used to identify user types. The server-side preliminarily screens the data based on this, and the mobile terminal receives it and displays it slightly differently according to the preset template. For example, the homepage of new users pushes more novice guides, and old users display personalized recommendations, laying the foundation for subsequent precise personalized services. Traditional data requests are initiated by each template or component on demand, and the network request library (such as axios) is used to obtain data from the server. For example, the product details template independently requests product details, inventory and other information, and displays it after processing. User behavior processing is similar. For example, clicking the purchase button triggers the event function in the template to complete the logic of adding a shopping cart, including data verification, request sending and other operations. Each template is independent and lacks overall coordination.

[0004] The existing template rendering solutions are crudely classified, and only make simple distinctions between various template projects, which makes it difficult to meet complex personalized needs. The configuration methods are primitive, mostly relying on developers to manually change the code logic or server-side configuration file parameters, and lack a visual and convenient management terminal. For example, if a financial application intends to promote exclusive templates for high-net-worth users, developers need to add complex wealth judgments and template adaptation logic in every corner of the code, which is prone to errors and difficult to maintain. At the same time, existing template projects often "have multiple roles", responsible for both the presentation of exquisite content and the processing of user behavior. For example, in a product list template, when clicking on a product image, the internal code must monitor the click, initiate a jump to the details page, and handle data preloading and animation effects. The code is lengthy and complex, and the responsibilities are unclear. Subsequent modifications to the interaction or display details are very likely to introduce new bugs, affecting page stability.

[0005] Because each template blindly initiates data requests without overall planning, such as multiple product display templates competing for the same classification data, repeated requests cause network congestion and high server load. When the interface changes, all templates involved are modified one by one, the development cost increases dramatically, and data processing is decentralized. Different templates have different ways of parsing and converting the same data, which leads to data inconsistency risks and damages user trust and product image. Summary of the invention

[0006] The technical problem to be solved by the present application is to provide a rendering system and a rendering method, which can improve page rendering performance and user experience, and accurately meet the personalized needs of different users.

[0007] To solve the above technical problems, the present application provides a rendering system, including: a presentation layer, the presentation layer including metadata and identifiers of multiple template items, the presentation layer also including rendering data required for rendering the item to be rendered; an internal rendering layer, obtaining the identifier of the item to be rendered, the internal rendering layer being configured to render the item to be rendered according to the identifier, wherein the internal rendering layer is configured to determine whether the rendering data is required for rendering the item to be rendered, and if so, the internal rendering layer requests the rendering data from the presentation layer.

[0008] Optionally, the metadata includes applicable scenarios and component composition of each template item.

[0009] Optionally, the identifier of the template item includes a specific name attribute identifier.

[0010] Optionally, the rendering data includes any of user information, product price, product amount, and product SKU.

[0011] Optionally, the presentation layer also includes a user interaction interface.

[0012] Optionally, the presentation layer further includes a scheduling center, and the scheduling center is suitable for storing the rendering data.

[0013] Optionally, the presentation layer includes a mobile terminal, and the internal rendering layer includes a front end, a micro front end, and a server end.

[0014] Optionally, the front end includes an H5 web page.

[0015] To solve the above technical problems, the present application provides a rendering method, which is applicable to the rendering system as described above, and includes the following steps: obtaining metadata and identifiers of multiple template items; rendering the items to be rendered according to the identifiers; determining whether rendering data is required to render the items to be rendered, and if so, requesting the rendering data from the presentation layer.

[0016] In order to solve the above technical problem, the present application provides a computer-readable medium storing a computer program code, and the computer program code implements the above method when executed by a processor.

[0017] Compared with the prior art, this application uses only the display layer as the interface for interaction with the user in the rendering system, and renders each template project in the internal rendering layer. Template rendering and content display are processed separately, which can reduce user behavior logic such as click jump and data preloading, improve page rendering performance and rendering stability, reduce the difficulty of troubleshooting and repairing problems, and reduce maintenance costs. Furthermore, by rendering operations only in the internal rendering layer, template projects can be managed uniformly, repeated rendering requests can be reduced, thereby avoiding excessive network bandwidth, avoiding rendering freezes and crashes, and further improving page loading speed. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] The accompanying drawings are included to provide a further understanding of the present application. They are included and constitute a part of the present application. The accompanying drawings illustrate embodiments of the present application and together with the present specification serve to explain the principles of the present application. In the accompanying drawings:

[0019] Figure 1 is a module schematic diagram of a rendering system in one embodiment of the present application;

[0020] Figure 2 It is a flowchart of a rendering method in one embodiment of the present application. DETAILED DESCRIPTION

[0021] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the following is a brief introduction to the drawings required for the description of the embodiments. Obviously, the drawings described below are only some examples or embodiments of the present application. For ordinary technicians in this field, the present application can also be applied to other similar scenarios based on these drawings without creative work. Unless it is obvious from the language environment or otherwise explained, the same reference numerals in the figures represent the same structure or operation.

[0022] As shown in this application and claims, unless the context clearly indicates an exception, the words "a", "an", "an" and / or "the" do not refer to the singular and may also include the plural. Generally speaking, the terms "include" and "comprise" only indicate the inclusion of the steps and elements that have been clearly identified, and these steps and elements do not constitute an exclusive list. The method or device may also include other steps or elements.

[0023] Unless otherwise specifically stated, the relative arrangement, numerical expressions and numerical values ​​of the parts and steps set forth in these embodiments do not limit the scope of the present application. At the same time, it should be understood that, for ease of description, the sizes of the various parts shown in the accompanying drawings are not drawn according to the actual proportional relationship. The technology, method and equipment known to those of ordinary skill in the relevant field may not be discussed in detail, but in appropriate cases, the technology, method and equipment should be considered as a part of the authorization specification. In all examples shown and discussed here, any specific value should be interpreted as being merely exemplary, rather than as a limitation. Therefore, other examples of exemplary embodiments may have different values. It should be noted that similar reference numerals and letters represent similar items in the following drawings, so that once a certain item is defined in an accompanying drawing, it does not need to be further discussed in subsequent drawings.

[0024] In the description of the present application, it should be understood that the directions or positional relationships indicated by directional words such as "front, back, up, down, left, right", "lateral, vertical, perpendicular, horizontal" and "top, bottom" are usually based on the directions or positional relationships shown in the drawings, and are only for the convenience of describing the present application and simplifying the description. Unless otherwise specified, these directional words do not indicate or imply that the device or element referred to must have a specific direction or be constructed and operated in a specific direction, and therefore cannot be understood as limiting the scope of protection of the present application; the directional words "inside and outside" refer to the inside and outside relative to the contours of each component itself.

[0025] For ease of description, spatially relative terms such as "above", "above", "on the upper surface of", "above", etc. may be used here to describe the spatial positional relationship between a device or feature and other devices or features as shown in the figure. It should be understood that spatially relative terms are intended to include different orientations of the device in use or operation in addition to the orientation described in the figure. For example, if the device in the accompanying drawings is inverted, the device described as "above other devices or structures" or "above other devices or structures" will be positioned as "below other devices or structures" or "below other devices or structures". Thus, the exemplary term "above" can include both "above" and "below". The device can also be positioned in other different ways (rotated 90 degrees or in other orientations), and the spatially relative descriptions used here are interpreted accordingly.

[0026] In addition, it should be noted that the use of words such as "first" and "second" to define components is only for the convenience of distinguishing the corresponding components. If not otherwise stated, the above words have no special meaning and cannot be understood as limiting the scope of protection of this application. In addition, although the terms used in this application are selected from well-known and commonly used terms, some terms mentioned in the specification of this application may be selected by the applicant at his or her discretion, and their detailed meanings are explained in the relevant parts of the description of this article. In addition, it is required to understand this application not only by the actual terms used, but also by the meaning implied by each term.

[0027] This application refers to Figure 1 A rendering system 10 is proposed, and the rendering system 10 mainly includes a display layer and an internal rendering layer. Specifically, the display layer includes metadata and identifiers of multiple template projects, wherein the metadata includes the applicable scenarios and component composition of each template project, and the identifier of the template project includes a specific name attribute identifier. Furthermore, the display layer also includes rendering data required for rendering the project to be rendered, wherein the rendering data includes any type of user information, product price, product amount, and product SKU. In other embodiments of the present application, the rendering data is not limited to the above data, and the present application does not limit this.

[0028] On the other hand, the rendering system 10 also includes an internal rendering layer, the internal rendering layer can obtain the identification of the project to be rendered, and the internal rendering layer is configured to render the project to be rendered according to the identification, wherein the internal rendering layer is configured to determine whether rendering data is required for rendering the project to be rendered, and if so, the internal rendering layer requests rendering data from the presentation layer. In this embodiment, the presentation layer includes a mobile terminal, and the internal rendering layer includes a front end, a micro front end, and a server, wherein the front end includes an H5 web page.

[0029] Furthermore, by placing the display template project and the rendering template project in different layers for operation, it is possible to uniformly schedule external public requests, remove duplicate data requests, and further reasonably allocate network resources. Decoupling the display and rendering functions of the template project, allowing the display layer to focus on content display, and placing the rendering operation in the internal rendering layer, allows developers to divide the work and collaborate more clearly, focus on their respective responsibilities, and modify the display effect without worrying about affecting other functional logic, and can remove duplicate data requests and reasonably allocate network resources.

[0030] Furthermore, the display layer also includes a user interaction interface. In this embodiment, the user interaction interface will be configured with a visual configuration template project. The visual configuration template project can accurately divide user types based on rich user portrait information (such as region, interest, consumption habits, etc.), and customize exclusive experimental templates for each type of user. For example, local specialty product recommendations are displayed to users in different cities, or related theme content is pushed based on user interests, so that users can see pages that suit their preferences when they open the application.

[0031] On the other hand, the display layer also includes a scheduling center, where operators classify and configure template projects through an intuitive visual interface. In this embodiment, template projects can be divided into basic templates and experimental templates, where the basic templates cover common graphic display, list presentation and other general layout templates, while the experimental templates are subdivided according to multi-dimensional user portraits, such as by region, age, and consumption level, including multiple general user portrait templates. The rendering data of the basic templates and experimental templates are stored in the above-mentioned scheduling center.

[0032] Furthermore, when the internal rendering layer determines that rendering data is required for rendering the item to be rendered, the rendering system 10 will further correspond to the required rendering data. If the rendering data of a specific basic template is required, the rendering system 10 will request the required rendering data of the basic template from the dispatch center. If the rendering data of a specific experimental template is required, the rendering system 10 will request the required rendering data of the experimental template from the dispatch center. If there is rendering data that is not stored in the dispatch center, the rendering system 10 can also request rendering data from the outside through the network interface, and this application does not limit this.

[0033] Each template item is associated with a specific name attribute as a unique identifier. When a user behavior triggers a template switch (such as a change in user login status, a browser page switch, etc.), the rendering system 10 will obtain the user portrait information in real time, accurately locate and dynamically load the appropriate template from the corresponding template library. Therefore, the rendering system 10 can accurately meet the personalized needs of different users and improve page rendering performance and user experience.

[0034] On the other hand, the present application also refers to Figure 2 A rendering method 20 is proposed, which is applicable to the rendering system proposed in any embodiment of the present application, such as the above-mentioned rendering system 10. Flowcharts are used in the present application to illustrate the operations performed by the system according to the embodiment of the present application. It should be understood that the previous or following operations are not necessarily performed precisely in order. Instead, various steps can be processed in reverse order or simultaneously. At the same time, other operations may be added to these processes, or one or more operations may be removed from these processes.

[0035] The rendering method 20 includes steps S1 to S3, wherein step S1 includes obtaining metadata and identifiers of multiple items; step S2 includes rendering the items to be rendered according to the identifiers; step S3 includes determining whether rendering data is required for rendering the items to be rendered, and if so, requesting rendering data from the presentation layer.

[0036] In addition, the present application also proposes a computer-readable medium storing computer program codes, and the computer program codes implement the above-mentioned rendering method when executed by a processor.

[0037] The basic concepts have been described above. Obviously, for those skilled in the art, the above application disclosure is only an example and does not constitute a limitation of the present application. Although not explicitly stated herein, those skilled in the art may make various modifications, improvements and amendments to the present application. Such modifications, improvements and amendments are suggested in the present application, so such modifications, improvements and amendments still belong to the spirit and scope of the exemplary embodiments of the present application.

[0038] At the same time, the present application uses specific words to describe the embodiments of the present application. For example, "one embodiment", "an embodiment", and / or "some embodiments" refer to a certain feature, structure or characteristic related to at least one embodiment of the present application. Therefore, it should be emphasized and noted that "one embodiment" or "an embodiment" or "an alternative embodiment" mentioned twice or more in different positions in this specification does not necessarily refer to the same embodiment. In addition, some features, structures or characteristics in one or more embodiments of the present application can be appropriately combined.

[0039] Some aspects of the present application may be performed entirely by hardware, entirely by software (including firmware, resident software, microcode, etc.), or by a combination of hardware and software. The above hardware or software may be referred to as "data blocks", "modules", "engines", "units", "components" or "systems". The processor may be one or more application specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DAPDs), programmable logic devices (PLDs), field programmable gate arrays (FPGAs), processors, controllers, microcontrollers, microprocessors, or combinations thereof. In addition, various aspects of the present application may be expressed as computer products located in one or more computer-readable media, which include computer-readable program codes. For example, computer-readable media may include, but are not limited to, magnetic storage devices (e.g., hard disks, floppy disks, tapes ...), optical disks (e.g., compact disks CDs, digital versatile disks DVDs ...), smart cards, and flash memory devices (e.g., cards, sticks, key drives ...).

[0040] A computer-readable medium may include a propagated data signal containing computer program code, such as in baseband or as part of a carrier wave. The propagated signal may have a variety of manifestations, including electromagnetic, optical, etc., or a suitable combination. A computer-readable medium may be any computer-readable medium other than a computer-readable storage medium, which may be connected to an instruction execution system, device or apparatus to communicate, propagate or transmit a program for use. The program code on the computer-readable medium may be propagated via any suitable medium, including radio, cable, fiber optic cable, radio frequency signal, or similar medium, or any combination of the above mediums.

[0041] Similarly, it should be noted that in order to simplify the description of the disclosure of this application and thus help understand one or more application embodiments, in the above description of the embodiments of this application, multiple features are sometimes merged into one embodiment, figure or description thereof. However, this disclosure method does not mean that the features required by the object of this application are more than the features mentioned in the claims. In fact, the features of the embodiments are less than all the features of the single embodiment disclosed above.

[0042] In some embodiments, numbers describing the number of components and attributes are used. It should be understood that such numbers used in the description of the embodiments are modified by the modifiers "about", "approximately" or "substantially" in some examples. Unless otherwise specified, "about", "approximately" or "substantially" indicate that the numbers are allowed to vary by ±20%. Accordingly, in some embodiments, the numerical parameters used in the specification and claims are approximate values, which may change according to the required features of individual embodiments. In some embodiments, the numerical parameters should take into account the specified significant digits and adopt the general method of retaining digits. Although the numerical domains and parameters used to confirm the breadth of their range in some embodiments of the present application are approximate values, in specific embodiments, the setting of such numerical values ​​is as accurate as possible within the feasible range.

[0043] Although the present application has been described with reference to the current specific embodiments, ordinary technicians in this technical field should recognize that the above embodiments are only used to illustrate the present application, and various equivalent changes or substitutions may be made without departing from the spirit of the present application. Therefore, as long as the changes and modifications to the above embodiments are within the essential spirit of the present application, they will fall within the scope of the claims of the present application.

Claims

1. A rendering system, characterized in that: include: A presentation layer, the presentation layer including metadata and identifiers of a plurality of template items, the presentation layer also including rendering data required for rendering the items to be rendered; The internal rendering layer obtains the identifier of the item to be rendered, and the internal rendering layer is configured to render the item to be rendered according to the identifier, wherein The internal rendering layer is configured to determine whether the rendering data is required for rendering the item to be rendered, and if so, the internal rendering layer requests the rendering data from the presentation layer.

2. The rendering system according to claim 1, characterized in that The metadata includes the applicable scenarios and component composition of each template item.

3. The rendering system according to claim 1, characterized in that: The identifier of the template item includes a specific name attribute identifier.

4. The rendering system according to claim 1, characterized in that: The rendering data includes any of user information, product price, product amount, and product SKU.

5. The rendering system according to claim 1, wherein: The presentation layer also includes a user interaction interface.

6. The rendering system according to claim 1, characterized in that: The presentation layer further comprises a scheduling center, which is suitable for storing the rendering data.

7. The rendering system according to claim 1, characterized in that: The presentation layer includes a mobile terminal, and the internal rendering layer includes a front end, a micro front end, and a server end.

8. The rendering system as claimed in claim 7, wherein the front end comprises an H5 web page.

9. A rendering method, applicable to the rendering system according to any one of claims 1 to 7, characterized in that: The steps include: Get metadata and identifiers for multiple template projects; Rendering the item to be rendered according to the identifier; Determine whether rendering data is required for rendering the item to be rendered, and if so, request the rendering data from the presentation layer.

10. A computer readable medium storing a computer program code, which, when executed by a processor, implements the method of claim 9.

Images