Page rendering method and device, equipment, storage medium and computer program product

Abstract

The invention discloses a page rendering method and device, equipment, a storage medium and a computer program product.The method comprises the steps that in response to a first operation on a to-be-displayed component, component associated data of the to-be-displayed component is obtained; and based on the component associated data, rendering the to-be-displayed component through a renderer in an instant mode. According to the page rendering method and device, page rendering is carried out in the mode that the component associated data and the renderer in the instant mode are combined, a document object model tree corresponding to the page content does not need to be maintained in a browser memory, occupation of memory resources is reduced, and improvement of the page drawing efficiency and the use experience of a user is facilitated.

Description

Technical Field

[0001] This application relates to, but is not limited to, the field of computer technology, and particularly relates to a page rendering method, apparatus, device, storage medium, and computer program product. Background Art

[0002] When a user accesses a web page through a browser, the page rendering method can be used to present the page requested by the user to the user.

[0003] In the related art, page rendering is implemented through the retained mode of the browser. In the retained mode, a web application constructs and stores a document object model (DOM) tree corresponding to the page content in the memory of the browser, and then the graphics library converts the DOM tree into drawing commands to complete the page drawing. Since the elements included in the DOM tree involve detailed processing and require memory to support its functions. Therefore, the more elements in the DOM tree, the greater the memory required to build the DOM tree in memory. When the page presentation content needs to be changed, the browser needs to calculate first, update the DOM tree in memory, and then the graphics library can draw a new page based on the updated DOM tree. In this way, the page drawing efficiency is low, which may cause page stuttering and affect the page display and user experience. Summary of the Invention

[0004] In view of this, this application provides a page rendering method, apparatus, device, storage medium, and computer program product, which can reduce the occupation of memory resources, is beneficial to improving the page drawing efficiency and enhancing the user experience.

[0005] The technical solution of the embodiment of this application is implemented as follows:

[0006] In a first aspect, this application provides a page rendering method, including: in response to a first operation on a component to be displayed, obtaining component association data of the component to be displayed; and based on the component association data, rendering the component to be displayed through a renderer in immediate mode.

[0007] In some embodiments, the component association data includes component attribute data and component logical structure data; based on the component association data, rendering the component to be displayed through a renderer in immediate mode includes: based on the component logical structure data, verifying the logical structure relationship of the component to be displayed to obtain a verification result; and in the case where the verification result passes, rendering the component to be displayed through a renderer in immediate mode based on the component attribute data.

[0008] In some embodiments, when the verification result is passed, based on the component attribute data, the component to be displayed is rendered by a renderer in immediate mode, including: when the verification result is passed, determining, based on the renderer in immediate mode, a first drawing command corresponding to the component attribute data in immediate mode; and generating the component to be displayed according to the first drawing command.

[0009] In some embodiments, the above method further includes: when it is determined that the component association data has been updated, determining target data through a renderer in immediate mode; where the target data is the data that has been updated in the updated component association data compared to the component association data before the update; and rendering the component to be displayed through the renderer in immediate mode based on the target data.

[0010] In some embodiments, before determining the target data through the renderer in immediate mode when it is determined that the component association data has been updated, the above method further includes: detecting the component association data through a preset difference algorithm to obtain a detection result; and determining that the component association data has been updated according to the detection result.

[0011] In some embodiments, rendering the component to be displayed through the renderer in immediate mode based on the target data includes: determining, based on the renderer in immediate mode, a second drawing command corresponding to the target data in immediate mode; and generating the updated component to be displayed according to the second drawing command.

[0012] In some embodiments, after generating the updated component to be displayed according to the second drawing command, the above method further includes: displaying the updated component to be displayed.

[0013] In a second aspect, the present application provides a page rendering device, including: an acquisition module, configured to acquire component association data of a component to be displayed in response to a first operation on the component to be displayed; and a first rendering module, configured to render the component to be displayed through a renderer in immediate mode based on the component association data.

[0014] In some embodiments, the component association data includes component attribute data and component logical structure data; the first rendering module includes: a verification sub-module, configured to verify the logical structure relationship of the component to be displayed based on the component logical structure data to obtain a verification result; and a rendering sub-module, configured to render the component to be displayed through a renderer in immediate mode based on the component attribute data when the verification result is passed.

[0015] In some embodiments, the rendering sub-module is further configured to: when the verification result is passed, determine, based on the renderer in immediate mode, a first drawing command corresponding to the component attribute data in immediate mode; and generate the component to be displayed according to the first drawing command.

[0016] In some embodiments, the above device further includes: a first determination module, configured to determine target data through a renderer in immediate mode when it is determined that the component association data has been updated; wherein, the target data is the data that has been updated in the updated component association data compared to the component association data before the update; a second rendering module, configured to render the component to be displayed through a renderer in immediate mode based on the target data.

[0017] In some embodiments, the above device further includes: a detection module, configured to detect the component association data through a preset difference algorithm to obtain a detection result; a second determination module, configured to determine that the component association data has been updated according to the detection result.

[0018] In some embodiments, the second rendering module is further configured to: determine a second drawing command corresponding to the target data in immediate mode based on the renderer in immediate mode; generate the updated component to be displayed according to the second drawing command.

[0019] In some embodiments, the above device further includes: a display module, configured to display the updated component to be displayed.

[0020] In a third aspect, the present application provides an electronic device, including a memory and a processor, where the memory stores a computer program that can be run on the processor, and when the processor executes the computer program, some or all of the steps in the above method are implemented.

[0021] In a fourth aspect, the present application provides a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, some or all of the steps in the above method are implemented.

[0022] In a fifth aspect, the present application provides a computer program, including computer-readable code, and when the computer-readable code runs in an electronic device, a processor in the electronic device executes to implement some or all of the steps in the above method.

[0023] In a sixth aspect, the present application provides a computer program product, which includes a computer-readable storage medium storing a computer program, and when the computer program is read and executed by a computer, some or all of the steps in the above method are implemented.

[0024] In the present application, since the component association data is relevant data required in the process of rendering and drawing components, therefore, in response to a first operation on the component to be displayed, the component association data of the component to be displayed is obtained, and based on the component association data, the component to be displayed is rendered through a renderer in immediate mode, thus realizing page rendering in immediate mode.

[0025] Compared with the prior art, implementing page rendering through the retention mode of the browser requires constructing and storing a DOM tree, which occupies a relatively large amount of memory, resulting in low page drawing efficiency. The solution in this embodiment does not require constructing and storing a DOM tree, eliminates multiple layers of abstractions that slow down the operation speed, can improve page drawing efficiency, and reduce the occupation of memory resources. The solution of this embodiment is particularly applicable to the case where there are many components to be displayed. In this case, compared with the retention mode, this solution can improve the speed and flexibility of page rendering, reduce page stuttering, and enhance the user experience.

[0026] It should be understood that the above general description and the following detailed description are only exemplary and explanatory, and do not limit the technical solutions of the present disclosure. Brief Description of the Drawings

[0027] The drawings herein are incorporated into the specification and constitute a part of this specification. These drawings illustrate embodiments consistent with the present application and, together with the specification, are used to explain the technical solutions of the present application.

[0028] Figure 1 It is a schematic diagram of a page rendering process in the retention mode provided by an embodiment of the present application;

[0029] Figure 2 It is a schematic diagram of the structure of an electronic device provided by an embodiment of the present application;

[0030] Figure 3 It is a schematic diagram of the structure of a page rendering device provided by an embodiment of the present application;

[0031] Figure 4 It is a schematic diagram of a page rendering system provided by an embodiment of the present application;

[0032] Figure 5 It is a schematic diagram of an implementation process of a page rendering method provided by an embodiment of the present application;

[0033] Figure 6 It is a schematic diagram of a page rendering process in the immediate mode provided by an embodiment of the present application;

[0034] Figure 7 It is a schematic diagram of the working principle of a rendering function provided by an embodiment of the present application;

[0035] Figure 8 It is a schematic diagram of a page rendering process when the component association data provided by an embodiment of the present application is updated;

[0036] Figure 9 It is a schematic diagram of page display before and after the component association data provided by an embodiment of the present application is updated. Detailed implementation manners

[0037] The embodiments of the present application will be described below with reference to the accompanying drawings in the embodiments of the present application. In the following description, reference is made to the accompanying drawings that form a part of the present application and illustrate specific aspects of the embodiments of the present application or aspects in which the embodiments of the present application can be used. It should be understood that the embodiments of the present application can be used in other aspects and may include structural or logical changes not depicted in the drawings. Therefore, the following detailed description should not be construed in a limiting sense, and the scope of the present application is defined by the appended claims. For example, it should be understood that the disclosure of the described method can be equally applicable to the corresponding device or system for performing the method, and vice versa. For example, if one or more specific method steps are described, the corresponding device may include one or more units, such as functional units, to perform the one or more described method steps (e.g., one unit performs one or more steps, or multiple units, where each performs one or more of the multiple steps), even if such one or more units are not explicitly described or illustrated in the drawings. On the other hand, for example, if a specific device is described based on one or more units such as functional units, the corresponding method may include a step to perform the functionality of the one or more units (e.g., one step performs the functionality of the one or more units, or multiple steps, where each performs the functionality of one or more of the multiple units), even if such one or more steps are not explicitly described or illustrated in the drawings. Further, it should be understood that, unless otherwise explicitly stated, the features of the various exemplary embodiments and / or aspects described herein can be combined with each other.

[0038] The page rendering technology can parse and calculate web page-related documents and then generate visible images to achieve visual display.

[0039] Web page-related documents can be: hyper text Markup language (HTML) documents, extensible markup language (XML) documents, cascading style sheets (CSS) documents, etc., which are not limited herein.

[0040] Here, CSS is a computer language used to add styles (such as fonts, spacing, and colors) to structured documents (such as HTML documents or XML applications).

[0041] In the related art, page rendering is achieved through the retention mode of the browser. Figure 1 is a schematic diagram of a page rendering process in the retention mode provided by the embodiments of the present application. The following will be described in conjunction with Figure 1 the page rendering process in the retention mode.

[0042] Based on the scene architecture corresponding to the page content, the Web application calls the graphical application programming interface (API) in the retained mode, constructs a DOM tree corresponding to the scene architecture in memory, and stores the DOM tree. The graphics library will convert the DOM tree into a set of drawing commands and complete the drawing of the page (i.e., page rendering) based on the drawing commands. When it is necessary to change the content presented on the page, the Web application issues a command to update the DOM tree in memory, such as dynamically adding or deleting elements in the DOM tree. In this way, the graphics library draws the new page content according to the updated DOM tree, thus realizing the change of the content presented on the page.

[0043] It can be understood that the retained mode is a page rendering API and it is declarative. The scene architecture corresponding to the page content can be a scene architecture built by the user (such as an operation and maintenance personnel) according to the page content and consistent with the page content.

[0044] Here, the DOM is an API used to present and interact with any HTML or XML document. The DOM tree can be constructed starting from graphical primitives (such as shapes and lines). It is a data structure used to store and update the state of a web page, such as user input, selections, clicks, etc. For example, an HTML document can be parsed into a tree-like structure composed of nodes, and then elements in the actual DOM tree are created according to the attributes and styles of the nodes. The drawing commands can be understood as commands notifying the browser how to draw web page elements, such as color, size, position, etc., which are not limited here.

[0045] However, the elements in the DOM tree involve a large amount of detailed processing. It is a complex structure and requires more memory to support its functions. Therefore, the more elements of the DOM tree are used, the more memory is required to construct the DOM tree in memory. Then when it is necessary to change the content presented on the page (i.e., the scene architecture corresponding to the page content changes), the browser needs to calculate first and update the DOM tree in memory, and then the graphics library can draw the new page content according to the updated DOM tree. The above process results in low page drawing efficiency, which may cause page freezing and affect page display and user experience. Especially when the change of the element attributes in the DOM affects the geometric information of the element (such as the position and size of the element), the browser needs to recalculate the collective attributes of the elements and place them in the correct position in the interface. At this time, it is necessary to regenerate the layout and rearrange the elements, which will cause a large amount of calculation and update of the DOM tree and consume unnecessary resources.

[0046] In view of this, embodiments of the present application provide a page rendering method, apparatus, device, storage medium, and computer program product to reduce the occupation of memory resources, improve page drawing efficiency, and enhance the user experience.

[0047] In some embodiments, the method described in the embodiments of the present application can be applied to the page rendering scenario of a browser. In some embodiments, the method described in the embodiments of the present application can also be applied to the component display scenario of an electronic device with a display screen. In some embodiments, the method described in the embodiments of the present application can also be applied to scenarios such as online editing of visual screens in software development.

[0048] The following describes an exemplary application of the electronic device provided in the embodiments of the present application. The electronic device provided in the embodiments of the present application can be a laptop computer, a tablet computer, a desktop computer, a mobile device (e.g., a mobile phone, a wearable smart watch, a dedicated messaging device), an electric vehicle, an electric bicycle, or other rechargeable devices, but is not limited thereto. Alternatively, the electronic device can also be implemented as a server.

[0049] In some embodiments, the server can be an independent physical server, a server cluster or a distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, and big data and artificial intelligence platforms, but is not limited thereto. In some embodiments, the server and the electronic device can be directly or indirectly connected through a wired communication method or a wireless communication method, and no specific limitation is made in the embodiments of the present application.

[0050] See Figure 2 , Figure 2 which is a schematic structural diagram of the electronic device provided in the embodiments of the present application. Figure 2 The illustrated electronic device 100 includes: at least one processor 110, a memory 150, at least one network interface 120, and a user interface 130. Each component in the electronic device 100 is coupled together through a bus system 140. It can be understood that the bus system 140 is used to realize the connection and communication between these components. In addition to the data bus, the bus system 140 also includes a power bus, a control bus, and a status signal bus. However, for the sake of clear illustration, in Figure 2 all kinds of buses are labeled as the bus system 140.

[0051] The processor 110 can be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc., where the general-purpose processor can be a microprocessor or any conventional processor, etc.

[0052] The user interface 130 includes one or more output devices 131 that enable presentation of media content, including one or more speakers and / or one or more visual display screens. The user interface 130 also includes one or more input devices 132, including user interface components that facilitate user input, such as a keyboard, mouse, microphone, touch screen display, camera, other input buttons and controls.

[0053] The memory 150 may be removable, non-removable, or a combination thereof. Exemplary hardware devices include solid-state memory, hard disk drives, optical disk drives, etc. The memory 150 may optionally include one or more storage devices that are physically remote from the processor 110.

[0054] The memory 150 includes a volatile memory or a nonvolatile memory, and may also include both volatile and nonvolatile memories. The nonvolatile memory may be a read-only memory (ROM), and the volatile memory may be a random access memory (RAM). The memory 150 described in the embodiments of the present application is intended to include any suitable type of memory.

[0055] In some embodiments, the memory 150 can store data to support various operations, examples of which include programs, modules, and data structures, or a subset or superset thereof, as exemplarily described below.

[0056] The operating system 151 includes system programs for processing various basic system services and performing hardware-related tasks, such as a framework layer, a core library layer, a driver layer, etc., which are used to implement various basic businesses and process hardware-based tasks.

[0057] The network communication module 152 is used to reach other computing devices via one or more (wired or wireless) network interfaces 120. Exemplary network interfaces 120 include: Bluetooth, WiFi, and universal serial bus (USB).

[0058] A presentation module 153 for enabling the presentation of information (e.g., a user interface for operating a peripheral device and displaying content and information) via one or more output devices 131 associated with the user interface 130 (e.g., a display screen, a speaker, etc.).

[0059] An input processing module 154 for detecting one or more user inputs or interactions from one of one or more input devices 132 and translating the detected inputs or interactions.

[0060] In some embodiments, the page rendering method provided by the embodiments of the present application may be implemented in software and stored in the memory 150. Refer to Figure 3 , Figure 3 is a schematic structural diagram of a page rendering device provided by the embodiments of the present application, which may be software in the form of a program and a plug-in, etc. The page rendering device 155 includes the following software modules: an acquisition module 1551 and a first rendering module 1552. These modules are logical, so they can be combined arbitrarily or further split according to the functions to be implemented. The functions of each module will be described below.

[0061] In other embodiments, the page rendering device 155 provided by the embodiments of the present application may be implemented in hardware. As an example, the page rendering device 155 provided by the embodiments of the present application may be a processor in the form of a hardware decoding processor, which is programmed to execute the page rendering method provided by the embodiments of the present application. For example, a processor in the form of a hardware decoding processor may employ one or more application specific integrated circuits (ASICs), DSPs, programmable logic devices (PLDs), complex programmable logic devices (CPLDs), field-programmable gate arrays (FPGAs), or other electronic components.

[0062] The page rendering method provided by the embodiments of the present application will be described below in conjunction with the exemplary applications and implementations of the electronic device provided by the embodiments of the present application.

[0063] In some embodiments, the page rendering method provided by the embodiments of the present application may be applied to a page rendering system, which may be used in industries such as culture and tourism, healthcare, etc. to achieve visual display of pages.

[0064] Refer to Figure 4 , Figure 4It is a schematic diagram of a page rendering system provided by an embodiment of the present application. The page rendering system 400 may include four modules, namely: a tool center, a component center, a view center, and a configuration center. The following will separately describe the four modules of the page rendering system 400.

[0065] 1. Tool Center

[0066] This module mainly provides some editable functions for user operations to improve the usability, operation efficiency, and user experience of the page rendering system. For example, the undo and redo functions, through which previous operations can be withdrawn or restored; another example is the canvas scaling function, which can scale the size of the canvas to adapt to different monitor resolutions and different types of electronic devices.

[0067] 2. Component Center

[0068] First of all, in order to design robust and general components, a set of standard component structures and property protocols need to be designed to ensure that each component can operate normally in different scenarios. These standard component structures and property protocols can be called the "design specifications" of the components to ensure the reusability and scalability of the components.

[0069] Exemplarily, the data structure of the component can be as follows:

[0070]

[0071] Among them, "export default" exports the default value; "name" refers to the name of the component; "type" refers to the type of the component; "attributes" refers to the attributes of the component; "slots" refers to insertion; "dataSource" refers to the data source of the component.

[0072] Secondly, in order to facilitate component management and query, the components can be classified. This classification can include visual components, decorative components, text components, etc. Through the above component classification, it is convenient for users to quickly find and use the required components, and it can reduce the situation of duplicate development and resource waste.

[0073] Here, a component can be understood as an element or object that can be visually displayed in the view center, such as: chart components, button controls, and picture elements, etc. Users can select one or more required components from the component center and place them in the view center in a drag-and-drop or other manner for subsequent display.

[0074] As Figure 4 shown, the component center may include multiple components, such as: Component 1, Component 2, etc.

[0075] 3. View Center

[0076] When there are many components included in a page, it will affect the overall loading speed of the page because when the browser renders the page, it needs to consume central processing unit (CPU) resources and / or graphics processing unit (GPU) resources. Each visualization component needs to render a large number of information elements, which will affect the page performance.

[0077] In view of this, in this embodiment, a renderer in the immediate mode of the browser, such as an async immediate mode rendering, is adopted to render and draw the components that need to be displayed in the view center. The process is as follows:

[0078] When a component needs to be added to the view center for display, the user can select the component to be displayed from the component center. For example, select a line chart component, and then drag or double-click the line chart component to trigger adding the line chart component to the view center for display. At this time, the view center calls the renderer in the immediate mode to render the line chart component, and then the selected line chart component can be presented in the view center.

[0079] 4. Configuration Center

[0080] The configuration center supports the management of the property values of the components rendered in the view center, and the configuration center can present the component association data of the components in the view center in the form of a form or the like.

[0081] The view center can re-render the corresponding components as the form content in the configuration center is updated. For example, for a certain component displayed in the view center, when the user wants to modify the size of the component, the user can directly modify the numerical value of the status data of the "size property" in the component form of the component in the configuration center. For example, the numerical value of the size status data can be changed from "2" to "3". Correspondingly, the renderer in the immediate mode will re-render the "size property" of the component according to the modification of the numerical value of the component status data, and the view center will display the re-rendered component.

[0082] It can be understood that a core element of the configuration center is the form renderer. The role of the form renderer is to dynamically render the corresponding form items based on the properties included in the property configuration list of the component, and then set the display content and behavior of the form controls according to the properties of each element. Through the form renderer, the dynamic generation and update of the form can be realized, without manually writing complex HTML code, which improves the development efficiency and maintainability.

[0083] Here, the form renderer can be understood as a rendering tool that can generate a form corresponding to the component. The property configuration list can be understood as a constraint file used to constrain the values, types, etc. of different properties.

[0084] By implementing page rendering through the above page rendering system, it is possible to view and edit the layout, style, etc. of the page, which can be achieved without writing software code and installing other software, being efficient and fast.

[0085] Next, in combination with the above page rendering system, the page rendering method provided by the embodiments of the present application will be described.

[0086] Figure 5 is a schematic flowchart of an implementation process of the page rendering method provided by the embodiments of the present application. As Figure 5 shown, the page rendering method of the embodiments of the present application may include step 501 to step 502.

[0087] In step 501, in response to a first operation on the component to be displayed, obtain the component association data of the component to be displayed.

[0088] It can be understood that the component to be displayed can be a component in the scene architecture corresponding to the page content that wants to be displayed on the page, such as: chart component, picture element, etc., which is not limited here. The first operation can be operations such as clicking, dragging, and data modification on the component to be displayed, which is not limited in this embodiment.

[0089] Here, the component association data can be relevant data required during the rendering and drawing of the component. The component association data can be used to describe the status information of each component (such as buttons, bar charts, and cards, etc.) in the page and the hierarchical structure relationship between each component. Among them, the hierarchical structure relationship can be the nesting, subordination, and combination methods between these components, for example, parent-child relationship, nesting relationship, etc., and through these relationships, the structure of the rendered page is jointly formed.

[0090] Here, the component association data can be used to represent various different types of components, and it can nest the component association data of other components, thus constituting a complex web page.

[0091] Since in the immediate mode, each frame of the page is immediately drawn, developers need to manage information such as the lifecycle, position, size, and appearance of the components by themselves, and the management overhead is relatively large. At this time, the component association data can be virtually represented in memory, and this representation method can be synchronized with the actual component (such as, graphics) structure. At the same time, this representation method can also describe information such as the lifecycle, position, size, and appearance of the components.

[0092] In some embodiments, the data structure of the component association data for each component can be generated in advance by creating a function template or other means. The data structure can be a JavaScript Object Notation Schema (JSON schema) with various information such as tags, identity document numbers (id), values, and colors.

[0093] Among them, JavaScript (JS) is a lightweight, interpreted or just-in-time compiled programming language with function priority. JSON schema can be a specification for defining JSON data structures based on the JSON format, which is used to: stipulate the fields contained in JSON data, the types of field values, and even dependencies, and is a specification for describing the relationships of these constraints.

[0094] It can be understood that after the operation and maintenance personnel select the component to be displayed, in response to the first operation on the component to be displayed, the view center can obtain the component association data corresponding to the component to be displayed created in advance.

[0095] In some embodiments, if the component association data of the component to be displayed is not obtained, the component association data corresponding to the component to be displayed can be temporarily generated through the create function.

[0096] In step 502, based on the component association data, the component to be displayed is rendered by an immediate-mode renderer.

[0097] It can be understood that the immediate-mode renderer can be a dynamic immediate-mode renderer, which corresponds to the immediate mode of the browser and can call the immediate mode of the browser for page rendering.

[0098] Reference Figure 6 , Figure 6 is a schematic diagram of a page rendering process in the immediate mode provided by the embodiments of the present application. The page rendering process in the immediate mode is as follows:

[0099] The Web application generates drawing commands according to its own program status information and sends the drawing commands to the graphics library; after receiving the drawing commands, the graphics library performs page rendering according to the drawing commands.

[0100] Among them, the own program status information can be the scene architecture corresponding to the page content. When the scene architecture is updated, the Web application will update the drawing commands.

[0101] Here, the page rendering in immediate mode is managed and maintained by the web application. What the web application transmits to the graphics library is the content to be rendered for each frame. Therefore, the web application in immediate mode not only needs to manage the properties of components, add or remove components, but also determine whether to modify the state of the rendered components according to the state of the scene (such as user interaction events), and finally generate draw commands to send to the graphics library.

[0102] Among them, compared with the retained mode, the immediate mode has the following advantages:

[0103] 1. Higher interface rendering performance: The immediate mode is a pixel-based rendering method, which can be hardware-accelerated on the GPU. It can maintain a smooth animation effect while drawing a large number of graphics in real time without causing page lag. In contrast, the retained mode requires frequent repainting and reflow, which will reduce the page performance.

[0104] 2. Less resource consumption: The immediate mode can render components through the canvas element. In contrast, the number of nodes in the retained mode is often larger. Therefore, when rendering large-scale application programs, the immediate mode will consume less resources and have a faster loading speed.

[0105] 3. Better image processing ability: In the immediate mode, a large amount of image data can be processed, including pixel-level image processing such as cropping, rotating, scaling, and filtering, and various image processing effects can be achieved. The retained mode has relatively limited image operation capabilities and needs to rely on other technologies or frameworks to achieve. For example, it is necessary to convert the image into an object for processing, which is relatively complex and inefficient.

[0106] 4. Better dynamic special effect performance: When using the immediate mode to render dynamic special effects (such as particle effects, smoke effects, and fluid effects, etc.), more detailed and realistic effects can be achieved. When using the retained mode to render the same special effects, a large number of CSS animations and complex layout methods may be required, which will have a certain impact on performance and development efficiency.

[0107] 5. Stronger business expansion: In the immediate mode, drawing APIs such as the Web Graphics Library (WEBGL) and Web Graphics Processing Unit (WEBGPU) can be directly used to draw three-dimensional (3D) graphics without the need to convert data and instructions through an intermediate layer, and the drawing and rendering of 3D models can be completed without relying on a third-party framework. In this way, the performance of the hardware can be fully utilized to achieve higher rendering efficiency and quality. In the retained mode, drawing APIs such as WEBGL are not supported, and other frameworks need to be relied on to complete the rendering of 3D graphics.

[0108] In this embodiment, after obtaining the component association data of the component to be displayed, according to the component association data, through a renderer in immediate mode, the component to be displayed is rendered in immediate mode. In this way, the component to be displayed can be presented in the view center, and the user can see the result of page rendering.

[0109] In some embodiments, the code in retained mode can be compiled into machine language recognizable by immediate mode through a compiler function, so as to render the component to be displayed in immediate mode.

[0110] Exemplarily, the following is the code in retained mode:

[0111]

[0112]

[0113] Among them, div can be a pair of closing tags, that is, " ” as the start," " is the end; span refers to the tag in HTML; @click can be a directive for listening to the element click event.

[0114] Through the compiler function, the above code can be compiled into machine language recognizable by immediate mode, as shown below:

[0115]

[0116] Among them, const is a keyword used to declare constants; Rect refers to the rectangle class; rect refers to the rectangle instance; children refers to the children; onClick refers to the click; Text refers to the text field.

[0117] In the embodiment of the present application, since the component association data is the relevant data required in the process of rendering and drawing components, therefore, in response to the first operation on the component to be displayed, the component association data of the component to be displayed is obtained, and based on the component association data, the component to be displayed is rendered through a renderer in immediate mode, thus realizing page rendering in immediate mode.

[0118] Compared with the prior art, where page rendering is achieved through the retained mode of the browser, it is necessary to construct and store the DOM tree, which occupies more memory and results in low page drawing efficiency. The solution in this embodiment does not need to construct and store the DOM tree, eliminates multiple layers of abstractions that slow down the operation speed, can improve the page drawing efficiency, and reduce the occupation of memory resources. The solution in this embodiment is especially suitable for the case where there are many components to be displayed added. In this case, compared with the retained mode, this solution can improve the speed and flexibility of page rendering, reduce page lags, and enhance the user experience.

[0119] Meanwhile, representing component association data virtually in memory can effectively manage and maintain the logical structure state and property changes of components, reduce the complexity of manual management operations, improve performance and development efficiency, and lower rendering costs. Combining with the advantages of the immediate mode in real-time interaction can make the process of creating components more fluent.

[0120] In some embodiments, component association data includes component attribute data and component logical structure data; based on the component association data, rendering the component to be displayed through a renderer in the immediate mode includes: verifying the logical structure relationship of the component to be displayed based on the component logical structure data to obtain a verification result; when the verification result passes, rendering the component to be displayed through the renderer in the immediate mode based on the component attribute data.

[0121] Here, the component attribute data can be used to describe the relevant state of the component to be displayed, including information on component attributes such as life cycle, position, size, and appearance. The component logical structure data (also referred to as component tree data) can be used to describe the logical structure relationship between the component to be displayed and other components, such as nesting, subordination, and other relationships.

[0122] Among them, the life cycle of a component can be the process of a component from creation to operation and then to destruction.

[0123] It can be understood that since the component logical structure data describes the logical structure relationship between the currently displayed component and other components, when rendering, it is necessary to verify the logical structure relationship of the component to be displayed based on the component logical structure data to obtain a verification result.

[0124] Here, the logical structure relationship can be verified through a verification tool in the immediate mode, and can also be verified through other methods. This embodiment does not limit this.

[0125] When the verification result passes, it indicates that the logical structure relationship of the component to be displayed is correct. In this way, rendering the component to be displayed through the renderer in the immediate mode based on the component attribute data can be successfully rendered. Otherwise, when the verification result fails, an error may be reported and the component to be displayed cannot be rendered.

[0126] Exemplarily, if according to a component to be displayed, such as the component logical structure data of component 1, it is determined that component 1 is a sub-component of component 2, then during rendering, it is necessary to first check whether this subordination relationship is correct. When the subordination relationship is correct, it can be normally rendered, otherwise an error may be reported.

[0127] In this embodiment, by verifying the logical structural relationship of the component to be displayed and performing component rendering when the verification result passes, the success rate of rendering can be improved and resource waste can be avoided.

[0128] In some embodiments, the above method further includes:

[0129] When the verification result fails, output a prompt message; wherein, the prompt message is used to remind the user to reconstruct the component to be displayed.

[0130] In this embodiment, the user can be reminded through the above prompt message to avoid the component to be displayed from failing to be rendered successfully.

[0131] In some embodiment modes, when the verification result passes, based on the component attribute data, the component to be displayed is rendered by an immediate-mode renderer, including: when the verification result passes, determining the first drawing command corresponding to the component attribute data in the immediate mode based on the immediate-mode renderer; generating the component to be displayed according to the first drawing command.

[0132] Here, the first drawing command can be determined through the render function.

[0133] It can be understood that when the verification result passes, through the immediate-mode renderer, the component association data is passed into the render function as an input value. The render function determines the first drawing command corresponding to the component attribute data according to the component attribute data in the passed-in component association data, so as to obtain the first drawing command corresponding to the component attribute data in the immediate mode.

[0134] After obtaining the first drawing command, send the first drawing command to the graphics library. The graphics library calls the immediate-mode API according to the first drawing command to generate the graphic elements of the component to be displayed corresponding to the first drawing command, and sends the graphic elements to the graphics processor, thereby realizing the rendering of the page.

[0135] Exemplarily, when the tag value in the component attribute data is Rect (rectangle), the render function is used to call the drawing method corresponding to drawing Rect, that is: ctx.fillRect, and this method is placed in the drawing queue. After all the attributes in the component attribute data are traversed, the drawing queue is uniformly called to complete the drawing and presentation of the component to be displayed on the page.

[0136] Reference Figure 7 , Figure 7It is a schematic diagram of the working principle of a rendering function provided by an embodiment of the present application. Among them, the input of the rendering function is component - associated data, which is represented by a tree - like structure and includes 4 nodes. The value in each node is label 1. After inputting it into the rendering function, an output result is obtained through the rendering function. The output result is a structure corresponding to the component - associated data, as well as a drawing command 1 corresponding to each label 1.

[0137] It should be noted that: Figure 7 The structural relationship and their number between label 1 and drawing command 1 in are only for illustrative purposes and are not used to limit it.

[0138] Exemplarily, assume that according to the component logic structure data of the component to be displayed, it is determined that component 1 is a nested component of component 3. Then, when rendering component 1, component 1 needs to be nested within component 3. In this way, the accuracy and effectiveness of component rendering can be improved.

[0139] In this embodiment, when the verification result is passed, rendering the component to be displayed through the above - mentioned process is beneficial to improving the accuracy and effectiveness of component rendering.

[0140] In some embodiment modes, the above - mentioned method further includes: when it is determined that the component - associated data has been updated, determining target data through an immediate - mode renderer; where the target data is the data that has been updated in the updated component - associated data compared to the component - associated data before the update; based on the target data, rendering the component to be displayed through the immediate - mode renderer.

[0141] It can be understood that the component - associated data can be modified through a configuration center. Therefore, when it is determined that the component - associated data has been updated, the immediate - mode renderer compares the differences between the component - associated data before the update and the component - associated data after the update, so as to determine the data that has been updated in the updated component - associated data compared to the component - associated data before the update, that is: the target data. And based on the target data, the immediate - mode renderer uses the immediate mode to render the component to be displayed.

[0142] In this embodiment, when the component - associated data has been updated, rendering the component to be displayed through the updated data (i.e., the target data) is beneficial to improving the component drawing efficiency.

[0143] In some embodiment modes, before determining the target data through the immediate - mode renderer when it is determined that the component - associated data has been updated, the above - mentioned method further includes: detecting the component - associated data through a preset difference algorithm to obtain a detection result; according to the detection result, determining that the component - associated data has been updated.

[0144] Understandably, the preset difference algorithm can be the Diff algorithm (Difference algorithm). The Diff algorithm can decompose the tree structure level by level, only compare elements at the same level, and has high efficiency.

[0145] Here, the component association data is detected for attributes and logical structure through the preset difference algorithm to determine whether the component attributes and / or the component logical structure have changed, so as to obtain the detection result. According to the change of the component attributes and / or the component logical structure in the detection result, it can be determined that the component association data has been updated.

[0146] In this embodiment, it is simple and fast to determine that the component association data has been updated through the above process, which is convenient for subsequent re-rendering of the components to be displayed when it is determined that the component association data has been updated.

[0147] In some embodiment modes, based on the target data, the components to be displayed are rendered through an immediate-mode renderer, including: determining the second drawing command corresponding to the target data in the immediate mode based on the immediate-mode renderer; generating the updated components to be displayed according to the second drawing command.

[0148] Understandably, when it is determined that the component association data has been updated, through the immediate-mode renderer, the target data is passed into the render function as an input value. The render function determines the second drawing command corresponding to the target data according to the passed-in target data, so as to obtain the second drawing command corresponding to the target data in the immediate mode.

[0149] After obtaining the second drawing command, the second drawing command is sent to the graphics library. The graphics library calls the immediate-mode API to generate the graphic elements corresponding to the second drawing command according to the second drawing command, and sends the graphic elements to the graphics processor, thereby realizing the rendering of the page.

[0150] Exemplarily, when two component association data of child components are newly added to the children (sub-nodes) attribute of the component association data of a certain component to be displayed, at this time, the immediate-mode renderer can determine the updated part of the data, that is: the target data. Therefore, when rendering the page, only the drawing command of the target data needs to be updated, that is: only the component attributes corresponding to the target data need to be redrawn, thereby realizing the view update in the immediate mode.

[0151] Refer to Figure 8 , Figure 8It is a schematic diagram of a page rendering process when the component association data provided by an embodiment of the present application is updated. The page rendering process when the component association data is updated is as follows: The component association data is updated through the configuration center, and then the component to be displayed is rendered based on the updated component association data, and the new component obtained after rendering is displayed in the view center.

[0152] In this embodiment, when the component association data is updated, through the above process, the updated component association data can be used to draw the page in the next frame, achieving the effect of automatic incremental drawing update, and can reduce the amount of data for update drawing, improving the page rendering efficiency.

[0153] In some implementation manners, after generating the updated component to be displayed according to the second drawing command, the above method further includes: displaying the updated component to be displayed.

[0154] It can be understood that after generating the updated component to be displayed according to the second drawing command, the updated component to be displayed is displayed through a display carrier (such as a display), so that the user can see the updated page, thereby enhancing the user experience.

[0155] Here, when displaying the updated component to be displayed, the updated component can be prominently displayed. For example, it can be highlighted, or the updated component can be drawn with a color different from the color corresponding to the component before update and / or a line width different from the line width corresponding to the component before update. In this way, it is beneficial to distinguish the component before update and the updated component.

[0156] Reference Figure 9 , Figure 9 is a schematic diagram of page display before the component association data provided by an embodiment of the present application is updated and after the component association data is updated. Among them, the first page is the display page before the component association data is updated, including three components: A, B, and C. The second page is the display page after the component association data is updated, including five components: A, B, C, D, and E. D and E are the components corresponding to the updated component association data compared with the component association data before update.

[0157] It should be noted that: Figure 9 A, B, C, D, and E included in

[0158] Based on the same inventive concept, an embodiment of the present application also provides a page rendering device, such as the page rendering device 155 in the above embodiment. Still as Figure 3As shown, the page rendering device 155 includes: an acquisition module 1551, configured to acquire component association data of a component to be displayed in response to a first operation on the component to be displayed; a first rendering module 1552, configured to render the component to be displayed through a renderer in immediate mode based on the component association data.

[0159] In some embodiments, the component association data includes component attribute data and component logical structure data; the first rendering module 1552 includes: a verification sub-module, configured to verify the logical structure relationship of the component to be displayed based on the component logical structure data to obtain a verification result; a rendering sub-module, configured to, when the verification result is passed, render the component to be displayed through the renderer in immediate mode based on the component attribute data.

[0160] In some embodiments, the rendering sub-module is further configured to: when the verification result is passed, determine a first drawing command corresponding to the component attribute data in immediate mode based on the renderer in immediate mode; generate the component to be displayed according to the first drawing command.

[0161] In some embodiments, the above device further includes: a first determination module, configured to determine target data through the renderer in immediate mode when it is determined that the component association data has been updated; where the target data is the data that has been updated in the updated component association data compared to the component association data before the update; a second rendering module, configured to render the component to be displayed through the renderer in immediate mode based on the target data.

[0162] In some embodiments, the above device further includes: a detection module, configured to detect the component association data through a preset difference algorithm to obtain a detection result; a second determination module, configured to determine that the component association data has been updated according to the detection result.

[0163] In some embodiments, the second rendering module is further configured to: based on the renderer in immediate mode, determine a second drawing command corresponding to the target data in immediate mode; generate the updated component to be displayed according to the second drawing command.

[0164] In some embodiments, the above device further includes: a display module, configured to display the updated component to be displayed.

[0165] The description of the above device embodiments is similar to that of the above method embodiments and has similar beneficial effects to the method embodiments. In some embodiments, the functions or modules included in the device provided in the embodiments of the present application can be used to execute the methods described in the above method embodiments. For the technical details not disclosed in the device embodiments of the present application, please refer to the description of the method embodiments of the present application for understanding.

[0166] It should be noted that in the embodiments of the present application, if the above-mentioned page rendering method is implemented in the form of software functional modules and sold or used as an independent product, it can also be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of the embodiments of the present application, in essence or the part that contributes to the related technology, can be embodied in the form of a software product. The software product is stored in a storage medium and includes several instructions for causing an electronic device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the methods described in the various embodiments of the present application. The aforementioned storage medium includes: various media such as USB flash drives, mobile hard disks, read-only memories (ROMs), magnetic disks, or optical discs that can store program codes. In this way, the embodiments of the present application are not limited to any specific hardware, software, or firmware, or any combination among hardware, software, and firmware.

[0167] The embodiments of the present application provide an electronic device, including a memory and a processor. The memory stores a computer program that can run on the processor, and when the processor executes the program, it implements some or all of the steps in the above method.

[0168] The embodiments of the present application provide a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, it implements some or all of the steps in the above method. The computer-readable storage medium can be transient or non-transient.

[0169] The embodiments of the present application provide a computer program, including computer-readable code. When the computer-readable code runs in an electronic device, the processor in the electronic device executes to implement some or all of the steps in the above method.

[0170] The embodiments of the present application provide a computer program product. The computer program product includes a computer-readable storage medium storing a computer program. When the computer program is read and executed by a computer, it implements some or all of the steps in the above method. The computer program product can be specifically implemented in the form of hardware, software, or a combination thereof. In some embodiments, the computer program product is specifically embodied as a computer storage medium. In other embodiments, the computer program product is specifically embodied as a software product, such as a software development kit (SDK), etc.

[0171] It should be noted here that: the descriptions of the above embodiments tend to emphasize the differences between the embodiments, and the same or similar parts can be referred to each other. The descriptions of the above embodiments of the device, storage medium, computer program and computer program product are similar to the descriptions of the above method embodiments, and have beneficial effects similar to those of the method embodiments. For the technical details not disclosed in the embodiments of the device, storage medium, computer program and computer program product of the present application, please refer to the descriptions of the method embodiments of the present application for understanding.

[0172] It should be understood that the "one embodiment" or "an embodiment" mentioned throughout the specification means that the specific features, structures or characteristics related to the embodiment are included in at least one embodiment of the present application. Therefore, the appearances of "in one embodiment" or "in an embodiment" throughout the specification do not necessarily refer to the same embodiment. In addition, these specific features, structures or characteristics can be combined in one or more embodiments in any suitable manner. It should be understood that in various embodiments of the present application, the magnitudes of the serial numbers of the above steps / processes do not mean the order of execution, and the order of execution of each step / process should be determined by its function and internal logic, and should not constitute any limitation to the implementation process of the embodiments of the present application. The serial numbers of the embodiments of the present application above are only for description and do not represent the advantages or disadvantages of the embodiments.

[0173] It should be noted that in this article, the term "comprising", "including" or any other variant thereof is intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements not only includes those elements, but also includes other elements not expressly listed, or also includes elements inherent to such process, method, article or device. Without further limitation, an element defined by the phrase "including a..." does not exclude the existence of additional identical elements in the process, method, article or device including the element.

[0174] In several embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. The above-described device embodiments are merely illustrative. For example, the division of the units is only a logical function division, and there can be other division methods in actual implementation. For example, multiple units or components can be combined, or can be integrated into another system, or some features can be ignored, or not executed. In addition, the couplings, direct couplings or communication connections between the components shown or discussed with each other can be through some interfaces, and the indirect couplings or communication connections of the devices or units can be electrical, mechanical or other forms.

[0175] The units described above as separate components may or may not be physically separated, and the components shown as units may or may not be physical units; they may be located in one place or distributed over multiple network units; some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0176] In addition, each functional unit in the embodiments of the present application may be fully integrated into a processing unit, or each unit may be separately regarded as a unit, or two or more units may be integrated into one unit; the above-mentioned integrated unit may be implemented in the form of hardware or in the form of a combination of hardware and software functional units.

[0177] Those of ordinary skill in the art can understand that all or part of the steps of implementing the above method embodiments can be completed by hardware related to program instructions. The foregoing program can be stored in a computer-readable storage medium. When the program is executed, it performs the steps including the above method embodiments; and the foregoing storage medium includes: removable storage devices, read-only memory (ROM), magnetic disks or optical disks and other various media that can store program codes.

[0178] Alternatively, if the above-mentioned integrated unit of the present application is implemented in the form of a software functional module and sold or used as an independent product, it may also be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, in essence or the part that contributes to the related technology, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for causing an electronic device (which may be a personal computer, a server, or a network device, etc.) to execute all or part of the methods described in the embodiments of the present application. And the foregoing storage medium includes: removable storage devices, ROM, magnetic disks or optical disks and other various media that can store program codes.

[0179] The above is only the implementation manner of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art can easily think of changes or substitutions within the technical scope disclosed by the present application, and all of them should be covered by the protection scope of the present application.

Claims

1. A page rendering method, characterized in that, It includes: In response to a first operation on a component to be displayed, obtain the component association data of the component to be displayed; Based on the component association data, render the component to be displayed through an immediate-mode renderer.

2. The method according to claim 1, wherein The component association data includes component attribute data and component logical structure data; The rendering of the component to be displayed through the immediate-mode renderer based on the component association data includes: Based on the component logical structure data, verify the logical structure relationship of the component to be displayed to obtain a verification result; When the verification result is passed, based on the component attribute data, render the component to be displayed through the immediate-mode renderer.

3. The method according to claim 2, wherein The rendering of the component to be displayed through the immediate-mode renderer based on the component attribute data when the verification result is passed includes: When the verification result is passed, determine the first drawing command corresponding to the component attribute data in the immediate mode based on the immediate-mode renderer; Generate the component to be displayed according to the first drawing command.

4. The method according to claim 1, wherein The method further includes: When it is determined that the component association data has been updated, determine target data through the immediate-mode renderer; wherein, the target data is the data that has been updated in the updated component association data compared with the component association data before the update; Based on the target data, render the component to be displayed through the immediate-mode renderer.

5. The method according to claim 4, wherein Before determining the target data through the immediate-mode renderer when it is determined that the component association data has been updated, the method further includes: Detect the component association data through a preset difference algorithm to obtain a detection result; Determine that the component association data has been updated according to the detection result.

6. The method according to claim 4, wherein The rendering of the component to be displayed through the immediate-mode renderer based on the target data includes: Based on the immediate-mode renderer, determine the second drawing command corresponding to the target data in the immediate mode; Generate the updated component to be displayed according to the second drawing command.

7. The method according to claim 6, wherein After generating the updated component to be displayed according to the second drawing command, the method further includes: Display the updated component to be displayed.

8. A page rendering device, characterized in that It includes: An acquisition module, configured to obtain the component association data of the component to be displayed in response to a first operation on the component to be displayed; A first rendering module, configured to render the component to be displayed through an immediate-mode renderer based on the component association data.

9. An electronic device, comprising a memory and a processor, the memory storing a computer program that can run on the processor, characterized in that, When the processor executes the program, it implements the steps in the method according to any one of claims 1 to 7.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps in the method according to any one of claims 1 to 7.

11. A computer program product, which includes a computer-readable storage medium storing a computer program. When the computer program is read and executed by a computer, it implements the steps in the method according to any one of claims 1 to 7.

Images