CN112905279A - Page component rendering method and device, electronic equipment and storage medium - Google Patents
Page component rendering method and device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN112905279A CN112905279A CN202110152442.8A CN202110152442A CN112905279A CN 112905279 A CN112905279 A CN 112905279A CN 202110152442 A CN202110152442 A CN 202110152442A CN 112905279 A CN112905279 A CN 112905279A
- Authority
- CN
- China
- Prior art keywords
- rendering
- component
- page
- child
- control component
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention provides a page component rendering method, a page component rendering device, electronic equipment and a storage medium, wherein the page component rendering method comprises the following steps: starting a running rendering control component; the rendering control component corresponds to a parent rendering component and at least one child rendering component, and the page size corresponding to the parent rendering component is the size of the viewport; the viewport dimensions characterize the size of the user viewable area; the sub-rendering component is used for rendering at least one page component on the page; the sub-rendering component is configured with a fixed positioning attribute; the rendering control component and the child rendering component have a parent-child relationship; and controlling a child rendering component of the rendering control component to render the page component according to the fixed positioning attribute and the viewport size corresponding to the parent rendering component. The invention enables the rendering component to realize the effect of positioning according to the layout of the viewport according to the viewport size and the fixed positioning attribute of the parent rendering component corresponding to the ancestor node of the rendering component, thereby reducing the risk that the page only occupies a small part of a half occupied screen in the prior art frame.
Description
Technical Field
The invention relates to the technical field of client pages, in particular to a page component rendering method, a page component rendering device, electronic equipment and a storage medium.
Background
With the rise of web page componentization, pages developed based on componentization ideas are more and more popular, and at present, pages of a plurality of clients are completed through componentization.
At present, in the process of rendering components on a page in the related technology, for some components needing to be positioned according to a viewport, such as a popup window and a suspension button, the components are difficult to be arranged according to the viewport, the rendered page components can also scroll along with the page, and the size of the page is not matched with the size of a screen.
Therefore, how to provide a rendering method for positioning a layout component according to a viewport is a technical problem to be solved.
Disclosure of Invention
In view of the above, an object of the present invention is to provide a method and an apparatus for rendering a page component, an electronic device and a storage medium, so as to provide a method for rendering a layout component according to a viewport, which solves the problems that it is difficult to implement the layout component according to the viewport, the rendered page component will also scroll along with the page, and the page size is not matched with the screen size.
In order to achieve the above purpose, the embodiment of the present invention adopts the following technical solutions:
in a first aspect, the present invention provides a method for rendering a page component, where the method includes: starting a running rendering control component; the rendering control component corresponds to a parent rendering component and at least one child rendering component; the page size corresponding to the parent rendering component is a viewport size; the viewport dimension characterizes a size of a user viewable area; the sub-rendering component is used for rendering at least one page component on a page; the sub-rendering component is configured with a fixed positioning attribute; the rendering control component has a parent-child relationship with the child rendering components; and controlling a child rendering component of the rendering control component to render a page component according to the fixed positioning attribute and the viewport size corresponding to the parent rendering component.
Optionally, before starting to run the rendering control component, the method further includes: configuring the rendering control component and the parent rendering components of the rendering control component and the business component according to the business component; wherein the business component corresponds to the page; the service component and the rendering control component are brother components; configuring a deep level rendering component queue corresponding to the business component to the rendering control component so that the rendering control component and the rendering component in the deep level rendering component queue have a parent-child relationship; the deep level rendering component queue includes the child rendering components therein.
Optionally, the method further comprises: and updating a child node queue corresponding to the rendering control component according to an interface provided by the rendering control component, wherein at least one child rendering component and a child rendering control component are arranged in the child node queue.
Optionally, updating the child node queue corresponding to the rendering control component according to the interface provided by the rendering control component, including: and inserting a new child rendering control component and/or a new child rendering component into the child node queue through the first interface of the rendering control component, and returning the newly inserted child rendering control component or the component identifier corresponding to the child rendering component.
Optionally, updating the child node queue corresponding to the rendering control component according to the interface provided by the rendering control component, including: and replacing the child rendering control component and/or the child rendering component corresponding to the rendering control component in the child node queue through a second interface of the rendering control component.
Optionally, updating the child node queue corresponding to the rendering control component according to the interface provided by the rendering control component, including: and removing at least one sub-rendering control component and/or sub-rendering component corresponding to the rendering control component in the sub-node queue through a third interface of the rendering control component.
In a second aspect, the present invention provides a page component rendering apparatus, including: the starting module is used for starting and running the rendering control assembly; the rendering control component corresponds to a parent rendering component and at least one child rendering component; the page size corresponding to the parent rendering component is a viewport size; the viewport dimension characterizes a size of a user viewable area; the sub-rendering component is used for rendering at least one page component on a page; the sub-rendering component is configured with a fixed positioning attribute; the rendering control component has a parent-child relationship with the child rendering components; and the control module is used for controlling the child rendering components of the rendering control component to render the page components according to the fixed positioning attributes and the viewport sizes corresponding to the parent rendering components.
Optionally, the page component rendering apparatus further includes: a configuration module to: configuring the rendering control component and the parent rendering components of the rendering control component and the business component according to the business component; wherein the business component corresponds to the page; the service component and the rendering control component are brother components; configuring a deep level rendering component queue corresponding to the business component to the rendering control component so that the rendering control component and the rendering component in the deep level rendering component queue have a parent-child relationship; the deep level rendering component queue includes the child rendering components therein.
Optionally, the page component rendering apparatus further includes: an update module to: and updating a child node queue corresponding to the rendering control component according to an interface provided by the rendering control component, wherein at least one child rendering component and a child rendering control component are arranged in the child node queue.
Optionally, the updating module is configured to insert a new child rendering control component and/or a new child rendering component in the child node queue specifically through the first interface of the rendering control component, and return to the newly inserted child rendering control component or a component identifier corresponding to the child rendering component.
Optionally, the updating module is further configured to replace, in the child node queue, the child rendering control component and/or the child rendering component corresponding to the rendering control component through the second interface of the rendering control component.
Optionally, the updating module is further configured to remove, in the child node queue, at least one child rendering control component and/or child rendering component corresponding to the rendering control component, specifically through a third interface of the rendering control component.
In a third aspect, the present invention provides an electronic device comprising a processor and a memory, the memory storing machine executable instructions executable by the processor for implementing the page component rendering method of the first aspect.
In a fourth aspect, the present invention provides a storage medium having stored thereon machine executable instructions which, when executed by a processor, implement the page component rendering method of the first aspect.
The invention provides a page component rendering method, a page component rendering device, electronic equipment and a storage medium, wherein the page component rendering method comprises the following steps: starting a running rendering control component; the rendering control component corresponds to a parent rendering component and at least one rendering component; the page size corresponding to the parent rendering component is the viewport size; the viewport dimensions characterize the size of the user viewable area; the sub-rendering component is used for rendering at least one page component on the page; the sub-rendering component is configured with a fixed positioning attribute; the rendering control component and the child rendering component have a parent-child relationship; and controlling a child rendering component of the rendering control component to render the page component according to the fixed positioning attribute and the viewport size corresponding to the parent rendering component. The difference from the prior art is that: in the prior art, when some deep rendering components corresponding to a business component are rendered, the size of a viewport can only be determined according to the size of a page corresponding to only a root node of the business component, and the rendered page may only occupy a half screen or a small part of the screen, which affects the viewing of a user. According to the invention, by adjusting the internal structure of the DOM model, the rendering component can realize the effect of positioning according to the layout of the viewport according to the viewport size and the fixed positioning attribute of the rendering component of the parent level corresponding to the ancestor node of the rendering component, so that the risk that a page only occupies a small part of a half occupied screen in the prior art is reduced.
In order to make the aforementioned and other objects, features and advantages of the present invention comprehensible, preferred embodiments accompanied with figures are described in detail below.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings needed to be used in the embodiments will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present invention and therefore should not be considered as limiting the scope, and for those skilled in the art, other related drawings can be obtained according to the drawings without inventive efforts.
Fig. 1 is an implementation schematic diagram of a page component rendering method according to an embodiment of the present invention;
FIG. 2 is a schematic flow chart of a page component rendering method according to an embodiment of the present invention;
FIG. 3 is a schematic diagram of a tree structure of a document object model corresponding to a page according to an embodiment of the present invention;
FIG. 4 is a schematic flow chart of another page component rendering method according to an embodiment of the present invention;
FIG. 5 is a second schematic flowchart of another page component rendering method according to an embodiment of the present invention;
FIG. 6 is a diagram illustrating an updated rendering control component configuration according to an embodiment of the present invention;
FIG. 7 is a functional block diagram of a page component rendering apparatus according to an embodiment of the present invention;
fig. 8 is a block diagram of an electronic device according to an embodiment of the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. The components of embodiments of the present invention generally described and illustrated in the figures herein may be arranged and designed in a wide variety of different configurations.
Thus, the following detailed description of the embodiments of the present invention, presented in the figures, is not intended to limit the scope of the invention, as claimed, but is merely representative of selected embodiments of the invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments of the present invention without making any creative effort, shall fall within the protection scope of the present invention.
It is noted that relational terms such as "first" and "second," and the like, may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in a process, method, article, or apparatus that comprises the element.
With the rise of web page componentization, pages developed based on componentization ideas are more and more popular, and at present, pages of a plurality of clients are completed through componentization. At present, in the process of rendering components on a page in the related technology, for some components needing to be positioned according to a viewport, such as a popup window and a suspension button, the components are difficult to be arranged according to the viewport, the rendered components can roll along with the page, and the size of the page is not matched with the size of a screen.
Therefore, in order to solve the above technical problem, an embodiment of the present invention provides a rendering method for positioning a layout page component according to a viewport, which specifically includes: a plurality of components corresponding to the page form a Document Object Model (DOM), which is a tree structure model. Each node of the tree represents an HTML tag or text item within a tag. In the embodiment of the invention, the internal structure of the DOM tree corresponding to the original page is changed, so that the page components with deeper layers in the tree structure can be rendered according to the viewport layout.
Based on the above, the implementation idea of the rendering method for positioning a layout component according to a viewport provided by the embodiment of the present invention is as follows: before a service component (page) runs, a sibling node and a parent node, namely a virtual DOM node and a new root node, are registered for the service component (root node) by rewriting a registration component (register component), and the internal structure of a DOM tree after rewriting can be as shown in fig. 1, where fig. 1 is an implementation schematic diagram of a page component rendering method provided by an embodiment of the present invention, where a new root node is used as a rendering component, and the corresponding page size is exactly the size of a viewport, and then a rendering component (hostcompent) responsible for rendering some deep-level page components, namely some relatively deep-level child nodes corresponding to the service component (root node), is inserted into a virtual DOM node through an interface of the virtual DOM node to be used as child nodes of the virtual DOM node, and then the child nodes controlling the virtual DOM node can implement rendering according to the layout of the viewport.
The registration component is an interface provided by an application registration module of the real-Native and is responsible for registering an entry component required by the start rendering of the real-Native, and the entry component is a business component determined by a developer.
Based on the above thought, please refer to fig. 2, and fig. 2 is a schematic flowchart of a page component rendering method according to an embodiment of the present invention, where the method may include:
and S23, starting the rendering control component.
The rendering control component may correspond to a parent rendering component, based on the DOM tree structure, the rendering control component and the parent rendering component may correspond to the virtual DOM node and the new root node, respectively, the parent rendering component may be a service rendering component configured in advance, and is used for rendering a user layer interface, a page size corresponding to the parent rendering component may be a viewport size, and the viewport size refers to a size of a user visible area on the device.
The rendering control component may maintain a child node queue, where the child node queue has a plurality of child rendering components, and the child rendering components are all deep rendering components corresponding to the business components, where a deep rendering component may be a rendering component having a hierarchical relationship with the business components that exceeds 3 layers. These child rendering components can be laid out relative to the viewport through fixed positioning properties supported by the react-native. Based on the DOM tree structure, the rendering control component and the child rendering component have parent-child relationship and can respectively correspond to child nodes and grandchild nodes, the child rendering component can be used for rendering at least one page component on a page, namely the child node of the service root node with a deeper level, the page component can be in the forms of a popup window, a suspension button and the like, and the child rendering component can be configured with fixed positioning attributes, so that the rendered page component cannot have position drift phenomenon caused by the fact that a user slides the page.
And S25, controlling the child rendering component of the rendering control component to render the page component according to the viewport size corresponding to the parent component with the fixed positioning attribute.
It can be understood that the child rendering component can render the page component according to the viewport layout logic, where the viewport layout logic means that the current node can be laid out relative to the size of the parent node or ancestor node closest to the current node, and based on this, when the child rendering component is to render a page component, it can be laid out according to the viewport size of the rendering control component (the parent node of the child rendering component) or the parent component (the ancestor node of the child rendering component), and it can be seen that the page size corresponding to the parent component is exactly the viewport size, and therefore, the child rendering component can implement rendering the page component according to the viewport.
In order to facilitate understanding of the above implementation process, the following will be described in detail in conjunction with DOM technology.
Referring to fig. 3, fig. 3 is a schematic diagram of a tree structure of a document object model corresponding to a page according to an embodiment of the present invention, where a DOM model corresponding to a page in the prior art is shown in a dashed box in fig. 3, and a DOM model of a page in the present invention is shown in a solid box in fig. 3.
It can be seen that, before the internal structure of the DOM model corresponding to the page is not changed, the DOM model may be as shown by the dashed box shown in fig. 3, under such a model structure, assuming that a deep-level rendering component (for example, nth layer) of the business component is to be rendered, then according to the viewport layout logic, the nth layer rendering component may be laid out relative to the size of the parent node or ancestor node closest to the current node, it is known that the size of the parent node or ancestor node of the nth layer rendering component is not the viewport size, but in the current structure, only the page size corresponding to the root node of the business component is the viewport size, and at this time, the rendered page may occupy only half of the screen or a small portion of the screen, which affects the user's view. The internal structure of the DOM model is adjusted to be shown in a solid line frame in fig. 3, so that the size corresponding to the parent rendering component is the size of the viewport, and meanwhile, the parent rendering component is also the ancestor node of the nth layer rendering component.
The difference between the page component rendering method provided by the embodiment of the invention and the prior art is that: in the prior art, when some deep rendering components corresponding to a business component are rendered, the size of a viewport can only be determined according to the size of a page corresponding to only a root node of the business component, and the rendered page may only occupy a half screen or a small part of the screen, which affects the viewing of a user. According to the invention, by adjusting the internal structure of the DOM model, the rendering component can realize the effect of positioning according to the layout of the viewport according to the viewport size and the fixed positioning attribute of the rendering component of the parent level corresponding to the ancestor node of the rendering component, so that the risk that a page only occupies a small part of a half occupied screen in the prior art is reduced.
Optionally, for the purpose of positioning rendering according to the viewport layout, before executing the implementation process, the method may further include a process, referring to fig. 4, where fig. 4 is a schematic flowchart of another page component rendering method provided by an embodiment of the present invention;
s20, according to the business components, configuring the rendering control components and the parent rendering components of the rendering control components and the business components.
The service components correspond to pages, and the service components and the rendering control components are brother components.
S22, configuring the deep level rendering component queue corresponding to the business component to the rendering control component, so that the rendering control component and the rendering component in the deep level rendering component queue have a parent-child relationship.
It is understood that a deep level rendering component is a rendering component having a hierarchical relationship with a business component of more than 3 levels. For some deep rendering components corresponding to the business components, because the page sizes corresponding to parent components or ancestor components corresponding to the business components are not the viewport sizes, the layout according to the viewport can not be realized during rendering, but the deep rendering components are configured to the rendering control components, so that the rendering control components and the rendering components have parent-child relations, and during rendering, the deep rendering components can realize the effect of layout according to the viewport sizes according to the parent components of the rendering control components.
Optionally, in order to adapt to rendering of more types of page components, on the basis of the above-mentioned rendering control component, another implementation manner for updating the configuration of the rendering control component is further provided in the embodiment of the present invention, referring to fig. 5, fig. 5 is a second schematic flow chart of another page component rendering method provided in the embodiment of the present invention, and the page component rendering method provided in the embodiment of the present invention may further include the following flow:
and S16, updating a child node queue corresponding to the rendering control assembly through an interface provided by the rendering control assembly, wherein the child node queue is internally provided with at least one child rendering assembly and a child rendering control assembly.
In some possible implementations, the developer may obtain the rendering control component instance through a static method topview.
For example, referring to fig. 6, fig. 6 is a schematic diagram of an updated rendering control component configuration according to an embodiment of the present invention, where the rendering control component in the embodiment of the present invention provides an add interface, a replace interface, and a remove interface, where a child node may be inserted into a child node queue of the rendering control component by calling the add interface, one child node in the child node queue may be replaced with another child node by calling the replace interface, and one child node in the child node queue may be removed by removing the interface.
It should be noted that the added or replaced or removed child node may be a child rendering control component with a rendering component or a child rendering component node.
Based on the above example, one possible implementation manner of the step S16 is:
s16a, inserting a new child rendering control component and/or a new rendering component in the child node queue through the first interface of the rendering control component, and returning the component identification corresponding to the newly inserted child rendering control component or the rendering component.
It will be appreciated that the first interface described above may be an add-on interface as shown in figure 6.
In a possible implementation manner, one possible implementation manner of the step S16 is:
and S16b, replacing the child rendering control component and/or the child rendering component corresponding to the rendering control component in the child node queue through the second interface of the rendering control component.
It will be appreciated that the second interface described above may be an alternative interface as shown in figure 6.
In one possible implementation manner, another possible implementation manner of the step S16 is:
and S16c, removing at least one sub-rendering control component and/or sub-rendering component corresponding to the rendering control component in the sub-node queue through the third interface of the rendering control component.
It will be appreciated that the third interface described above may be a removal interface as shown in figure 6.
It is understood that the above-mentioned S16a, S16b and S16c may be executed simultaneously, or any one or two of them may be executed according to actual requirements, which is not limited herein.
In order to execute the corresponding steps in the foregoing embodiments and various possible manners, an implementation manner of a page component rendering apparatus is provided below, please refer to fig. 7, and fig. 7 is a functional block diagram of a page component rendering apparatus according to an embodiment of the present invention. It should be noted that the basic principle and the generated technical effect of the page assembly rendering device 70 provided in the present embodiment are the same as those of the above embodiments, and for the sake of brief description, no part of the present embodiment is mentioned, and reference may be made to the corresponding contents in the above embodiments. The page component rendering apparatus 70 includes:
a starting module 701, configured to start and run a rendering control component; the rendering control component corresponds to a parent rendering component and at least one child rendering component; the page size corresponding to the parent level assembly is a viewport size; the viewport dimension characterizes a size of a user viewable area; the sub-rendering component is used for rendering at least one page component on a page; the sub-rendering component is configured with a fixed positioning attribute; the rendering control component has a parent-child relationship with the child rendering components;
and the control module 702 is configured to control the child rendering component of the rendering control component to perform rendering of the page component according to the fixed positioning attribute and the viewport size corresponding to the parent rendering component.
Optionally, the page component rendering device 70 further includes: the configuration module is used for configuring the rendering control component and the parent rendering component of the rendering control component and the business component according to the business component; wherein the business component corresponds to the page; the service component and the rendering control component are brother components; configuring a deep level rendering component queue corresponding to the business component to the rendering control component so that the rendering control component and the rendering component in the deep level rendering component queue have a parent-child relationship; the deep level rendering component queue includes the child rendering components therein.
Optionally, the page component rendering device 70 further includes: an update module to: and updating a child node queue corresponding to the rendering control component according to an interface provided by the rendering control component, wherein at least one child rendering component and a child rendering control component are arranged in the child node queue.
Optionally, the update module is specifically configured to: and inserting a new child rendering control component and/or a new child rendering component into the child node queue through the first interface of the rendering control component, and returning the newly inserted child rendering control component or the component identifier corresponding to the child rendering component.
Optionally, the update module is further specifically configured to: and replacing the child rendering control component and/or the child rendering component corresponding to the rendering control component in the child node queue through a second interface of the rendering control component.
Optionally, the update module is further specifically configured to: and removing at least one sub-rendering control component and/or sub-rendering component corresponding to the rendering control component in the sub-node queue through a third interface of the rendering control component.
An embodiment of the present invention further provides an electronic device, as shown in fig. 8, and fig. 8 is a block diagram of a structure of an electronic device according to an embodiment of the present invention. The electronic device 80 includes a communication interface 801, a processor 802, and a memory 803. The processor 802, memory 803, and communication interface 801 are electrically connected to one another, directly or indirectly, to enable the transfer or interaction of data. For example, the components may be electrically connected to each other via one or more communication buses or signal lines. The memory 803 may be used for storing software programs and modules, such as program instructions/modules corresponding to the page component rendering method provided by the embodiment of the present invention, and the processor 802 executes various functional applications and data processing by executing the software programs and modules stored in the memory 803. The communication interface 801 may be used for communicating signaling or data with other node devices. The electronic device 80 may have a plurality of communication interfaces 801 in the present invention.
The memory 803 may be, but is not limited to, a Random Access Memory (RAM), a Read Only Memory (ROM), a programmable read-only memory (PROM), an erasable read-only memory (EPROM), an electrically erasable read-only memory (EEPROM), and the like.
The processor 802 may be an integrated circuit chip having signal processing capabilities. The processor may be a general-purpose processor including a Central Processing Unit (CPU), a Network Processor (NP), and the like; but may also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field Programmable Gate Array (FPGA) or other programmable logic device, discrete gate or transistor logic, discrete hardware components, etc.
In some possible embodiments, the page component rendering device 70 may include at least one software functional module which may be stored in the memory 803 in the form of software or firmware (firmware) or solidified in an Operating System (OS) of the electronic device 80. The processor 802 is used for executing executable modules stored in the memory 803, such as software functional modules and computer programs included in the page component rendering apparatus 70.
An embodiment of the present invention provides a storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the computer program implements the page component rendering method according to any one of the foregoing embodiments. The computer readable storage medium may be, but is not limited to, various media that can store program codes, such as a U disk, a removable hard disk, a ROM, a RAM, a PROM, an EPROM, an EEPROM, a magnetic or optical disk, etc.
The above description is only for the specific embodiment of the present invention, but the scope of the present invention is not limited thereto, and any changes or substitutions that can be easily conceived by those skilled in the art within the technical scope of the present invention are included in the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the appended claims.
Claims (10)
1. A method for rendering a page component, the method comprising:
starting a running rendering control component;
the rendering control component corresponds to a parent rendering component and at least one child rendering component; the page size corresponding to the parent rendering component is a viewport size; the viewport dimension characterizes a size of a user viewable area; the sub-rendering component is used for rendering at least one page component on a page; the sub-rendering component is configured with a fixed positioning attribute; the rendering control component has a parent-child relationship with the child rendering components;
and controlling the child rendering component of the rendering control component to render the page component according to the fixed positioning attribute and the viewport size corresponding to the parent rendering component.
2. The page component rendering method according to claim 1, before starting execution of the rendering control component, further comprising:
configuring the rendering control component and the parent rendering components of the rendering control component and the business component according to the business component; wherein the business component corresponds to the page; the service component and the rendering control component are brother components;
configuring a deep level rendering component queue corresponding to the business component to the rendering control component so that the rendering control component and the rendering component in the deep level rendering component queue have a parent-child relationship; the deep level rendering component queue includes the child rendering components therein.
3. The page component rendering method of claim 1, further comprising:
and updating a child node queue corresponding to the rendering control component according to an interface provided by the rendering control component, wherein the child node queue is internally provided with at least one child rendering component and a child rendering control component.
4. The page component rendering method according to claim 3, wherein updating the child node queue corresponding to the rendering control component according to the interface provided by the rendering control component comprises:
and inserting a new child rendering control component and/or a new child rendering component into the child node queue through the first interface of the rendering control component, and returning the newly inserted child rendering control component or the component identifier corresponding to the child rendering component.
5. The page component rendering method according to claim 3 or 4, wherein updating the child node queue corresponding to the rendering control component according to the interface provided by the rendering control component comprises:
and replacing the sub-rendering control assembly and/or the sub-rendering assembly corresponding to the rendering control assembly in the sub-node queue through a second interface of the rendering control assembly.
6. The page component rendering method according to claim 4, wherein updating the child node queue corresponding to the rendering control component according to the interface provided by the rendering control component comprises:
and removing at least one sub-rendering control component and/or sub-rendering component corresponding to the rendering control component in the sub-node queue through a third interface of the rendering control component.
7. A page component rendering apparatus, comprising:
the starting module is used for starting and running the rendering control assembly;
the rendering control component corresponds to a parent rendering component and at least one child rendering component; the page size corresponding to the parent rendering component is a viewport size; the viewport dimension characterizes a size of a user viewable area; the sub-rendering component is used for rendering at least one page component on a page; the sub-rendering component is configured with a fixed positioning attribute; the rendering control component has a parent-child relationship with the child rendering components;
and the control module is used for controlling the child rendering component of the rendering control component to render the page component according to the fixed positioning attribute and the viewport size corresponding to the parent rendering component.
8. The page component rendering apparatus according to claim 7, further comprising: a configuration module to:
configuring the rendering control component and the parent rendering components of the rendering control component and the business component according to the business component; wherein the business component corresponds to the page; the service component and the rendering control component are brother components;
configuring a deep level rendering component queue corresponding to the business component to the rendering control component so that the rendering control component and the rendering component in the deep level rendering component queue have a parent-child relationship; the deep level rendering component queue includes the child rendering components therein.
9. An electronic device comprising a processor and a memory, the memory storing machine executable instructions executable by the processor to implement the page assembly rendering method of any of claims 1 to 6.
10. A storage medium having stored thereon machine executable instructions which when executed by a processor implement the page component rendering method of any of claims 1-6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110152442.8A CN112905279B (en) | 2021-02-03 | 2021-02-03 | Page component rendering method and device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110152442.8A CN112905279B (en) | 2021-02-03 | 2021-02-03 | Page component rendering method and device, electronic equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112905279A true CN112905279A (en) | 2021-06-04 |
| CN112905279B CN112905279B (en) | 2023-05-12 |
Family
ID=76122015
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110152442.8A Active CN112905279B (en) | 2021-02-03 | 2021-02-03 | Page component rendering method and device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112905279B (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113419726A (en) * | 2021-06-22 | 2021-09-21 | 康键信息技术（深圳）有限公司 | Method, device and equipment for generating commodity detail page and storage medium |
| CN113885960A (en) * | 2021-10-08 | 2022-01-04 | 百度在线网络技术（北京）有限公司 | Method and device for processing applet pages, electronic equipment and storage medium |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP2605129A2 (en) * | 2011-12-16 | 2013-06-19 | Research In Motion Limited | Method of rendering a user interface |
| US20150370439A1 (en) * | 2014-06-24 | 2015-12-24 | Salesforce.Com, Inc. | Gpu-optimized scrolling systems and methods |
| CN106126645A (en) * | 2016-06-24 | 2016-11-16 | 浪潮软件股份有限公司 | A kind of web page that improves renders the device of performance |
| CN109542417A (en) * | 2018-11-20 | 2019-03-29 | 北京小米移动软件有限公司 | A kind of method, apparatus, terminal and the storage medium of DOM rendering webpage |
| CN110689600A (en) * | 2019-09-16 | 2020-01-14 | 贝壳技术有限公司 | Rendering method and device of tree component, readable storage medium and electronic equipment |
| CN111026490A (en) * | 2019-12-09 | 2020-04-17 | 北京小米移动软件有限公司 | Page rendering method and device, electronic equipment and storage medium |
| CN111290754A (en) * | 2020-01-23 | 2020-06-16 | 湖南快乐阳光互动娱乐传媒有限公司 | Component rendering method and device |
| CN111639287A (en) * | 2020-04-29 | 2020-09-08 | 深圳壹账通智能科技有限公司 | Page processing method and device, terminal equipment and readable storage medium |
-
2021
- 2021-02-03 CN CN202110152442.8A patent/CN112905279B/en active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP2605129A2 (en) * | 2011-12-16 | 2013-06-19 | Research In Motion Limited | Method of rendering a user interface |
| US20150370439A1 (en) * | 2014-06-24 | 2015-12-24 | Salesforce.Com, Inc. | Gpu-optimized scrolling systems and methods |
| CN106126645A (en) * | 2016-06-24 | 2016-11-16 | 浪潮软件股份有限公司 | A kind of web page that improves renders the device of performance |
| CN109542417A (en) * | 2018-11-20 | 2019-03-29 | 北京小米移动软件有限公司 | A kind of method, apparatus, terminal and the storage medium of DOM rendering webpage |
| CN110689600A (en) * | 2019-09-16 | 2020-01-14 | 贝壳技术有限公司 | Rendering method and device of tree component, readable storage medium and electronic equipment |
| CN111026490A (en) * | 2019-12-09 | 2020-04-17 | 北京小米移动软件有限公司 | Page rendering method and device, electronic equipment and storage medium |
| CN111290754A (en) * | 2020-01-23 | 2020-06-16 | 湖南快乐阳光互动娱乐传媒有限公司 | Component rendering method and device |
| CN111639287A (en) * | 2020-04-29 | 2020-09-08 | 深圳壹账通智能科技有限公司 | Page processing method and device, terminal equipment and readable storage medium |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113419726A (en) * | 2021-06-22 | 2021-09-21 | 康键信息技术（深圳）有限公司 | Method, device and equipment for generating commodity detail page and storage medium |
| CN113419726B (en) * | 2021-06-22 | 2023-10-24 | 康键信息技术（深圳）有限公司 | Commodity detail page generation method, device, equipment and storage medium |
| CN113885960A (en) * | 2021-10-08 | 2022-01-04 | 百度在线网络技术（北京）有限公司 | Method and device for processing applet pages, electronic equipment and storage medium |
| CN113885960B (en) * | 2021-10-08 | 2024-04-26 | 百度在线网络技术（北京）有限公司 | Method and device for processing applet page, electronic equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112905279B (en) | 2023-05-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10726195B2 (en) | Filtered stylesheets | |
| US8799353B2 (en) | Scope-based extensibility for control surfaces | |
| US8775923B1 (en) | Web page restoration | |
| US20160283499A1 (en) | Webpage advertisement interception method, device and browser | |
| CN107463418B (en) | Configuration file generation method and device for server middleware | |
| CN112905279B (en) | Page component rendering method and device, electronic equipment and storage medium | |
| CN104820589B (en) | A kind of method and its device of dynamic adaptation webpage | |
| CN110032409B (en) | Client screen adapting method and device and electronic equipment | |
| US20070266039A1 (en) | Simplifying A Visual Depiction of A Graph | |
| EP2458499A1 (en) | Method and equipment for generating widget | |
| CN106470360B (en) | Video player calling method and device | |
| US20120236004A1 (en) | Information output apparatus and information output method and recording medium | |
| CN104375812A (en) | Webpage content modifying template construction method and webpage content modifying method and system | |
| CN111736884A (en) | Componentization method and system | |
| US8704852B2 (en) | Methods for generating one or more composite image maps and systems thereof | |
| WO2003105027A1 (en) | Improved web browser | |
| US9275023B2 (en) | Methods for further adapting XSL to HTML document transformations and devices thereof | |
| CN109190069A (en) | A kind of web page element modality management method, apparatus and electronic equipment | |
| CN111078219B (en) | Page display method, device and system, electronic equipment and storage medium | |
| CN109558549B (en) | Method for eliminating CSS style redundancy and related product | |
| CN113721909A (en) | Element scaling monitoring method and device and electronic equipment | |
| CN112966481A (en) | Data table display method and device | |
| CN112068828A (en) | Title control generation method, device, system, equipment and medium | |
| CN110944047A (en) | Distributed application monitoring method and device | |
| CN101676905A (en) | Layout for modifying resource contents based on customized rules |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |