Page rendering method and device, electronic equipment and storage medium
By instantiating self-closing tags and pseudo tags by retrieving the component constructor from the registry, the garbled text problem during rendering is solved, accurate page rendering and efficient expansion of the component constructor are achieved, and the applicability of rendering is improved.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- SHENZHEN TENCENT COMP SYST CO LTD
- Filing Date
- 2026-03-10
- Publication Date
- 2026-07-21
AI Technical Summary
Existing technologies struggle to accurately handle self-closing tags and pseudo-tags in document rendering, leading to garbled text or error messages on the page.
The unit is instantiated by retrieving the component constructor from the registry, including self-closing tags and pseudo tags, to achieve accurate rendering of page components.
It reduces garbled characters and error messages in page rendering, improves rendering accuracy, supports rapid and efficient expansion of component constructors, and enhances the applicability and versatility of rendering scenarios.
Smart Images

Figure CN122431766A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of electronic information technology, and more specifically, to a page rendering method, apparatus, electronic device, and storage medium. Background Technology
[0002] In a visual page rendering scenario, the document is first instantiated to obtain page component instances for each element in the document, and then the page is rendered based on the page component instances for each element in the document.
[0003] However, this approach has the problem of rendering self-closing tags in the document, which can lead to garbled characters or error messages on the rendered page, resulting in an inaccurate rendering. Summary of the Invention
[0004] In view of this, embodiments of this application propose a page rendering method, apparatus, electronic device, and storage medium.
[0005] In a first aspect, embodiments of this application provide a page rendering method, the method comprising: obtaining a document to be processed for rendering a page and a registry; the document to be processed includes multiple units, each unit being a first unit or a second unit in the document to be processed; the registry includes a component constructor for each unit; the first unit is an element indicated by a start tag and a close tag, and the second unit is a self-closing tag or a pseudo tag; obtaining the component constructor for each unit from the registry; instantiating the unit using the component constructor for each unit to obtain a page component instance for each unit; and performing page rendering processing based on the page component instances of multiple units.
[0006] Secondly, embodiments of this application provide a page rendering apparatus, comprising: a first acquisition module, configured to acquire a document to be processed for rendering a page and a registry; the document to be processed includes multiple units, each unit being a first unit or a second unit in the document to be processed; the registry includes a component constructor for each unit; the first unit is an element indicated by a start tag and a close tag, and the second unit is a self-closing tag or a pseudo tag; a second acquisition module, configured to acquire the component constructor for each unit from the registry; an instantiation module, configured to instantiate the unit using the component constructor of each unit to obtain a page component instance for each unit; and a rendering module, configured to perform page rendering processing based on the page component instances of multiple units.
[0007] Optionally, the instantiation module is also used to instantiate the unit based on itself through the unit's component constructor for each unit, if the unit is the second unit, so as to obtain the unit's page component instance.
[0008] Optionally, the instantiation module is also used to obtain the element metadata of each unit and the sub-content included in the unit for each unit, if the unit is the first unit; and to instantiate the unit based on the element metadata of the unit and the sub-content included in the unit through the component builder of the unit to obtain the page component instance of the unit.
[0009] Optionally, the instantiation module is further configured to: if the registry includes a data processor corresponding to the component constructor of the unit, obtain the data processor corresponding to the component constructor of the unit from the registry and use it as the data processor of the unit; the registry includes a data processor corresponding to a component constructor that meets the target conditions; process the element metadata of the unit and the sub-content included in the unit through the data processor of the unit to obtain the preprocessed data of the unit; and instantiate the unit based on the preprocessed data of the unit through the component constructor of the unit to obtain the page component instance of the unit.
[0010] Optionally, the document to be processed includes multiple objects, which are tags or text; the instantiation module is also used to traverse each object according to the order of their positions in the document to be processed; if the unit is the first unit and the traversal reaches the closing tag of the unit, the latest tag stack and the latest content stack are obtained; the latest tag stack includes at least one tag array, which includes the element metadata of the first unit to which the traversed start tag object belongs, the start tag object is the object belonging to the start tag, and the tag array is pushed into the tag stack according to the order in which the start tags of the first unit to which they belong are traversed; the latest content stack includes the content array corresponding to each tag array, which includes the sub-content included in the first unit to which the corresponding tag array belongs, and the content array is pushed into the content stack according to the order in which the corresponding tag array is pushed into the tag stack; the latest tag stack is popped from the tag array, and the element metadata of the unit is obtained from the popped tag array; the latest content stack is popped from the content array, and the sub-content included in the unit is obtained from the popped content array.
[0011] Optionally, the instantiation module is also used to match the top tag array of the latest tag stack with the closing tag of the cell; if the top tag array of the latest tag stack matches the closing tag of the cell, the latest tag stack is popped from the tag array, and the element metadata of the cell is obtained from the popped tag array.
[0012] Optionally, the instantiation module is also used to create a tag stack and a content stack. For each object traversed, if the object is a start tag, a tag array is constructed based on the element metadata of the first unit to which the object belongs, and the latest tag stack is pushed onto the stack based on the tag array, and the content stack is pushed onto the stack based on the preset content array; if the object is text, the object is appended to the top content array of the latest content stack; if the object is a second unit, the page component instance of the object is appended to the top content array of the latest content stack.
[0013] Optionally, multiple units have a parent-child relationship; the instantiation module is also used to append the page component instance of the unit to the top content array of the latest content stack; correspondingly, the rendering module is also used to perform page rendering processing based on the page component instance of the root unit among the multiple units.
[0014] Optionally, the instantiation module is also used to push the created content stack onto the stack based on a preset root content array; correspondingly, the rendering module is also used to obtain the page component instance of the root unit from the root content array of the latest content stack.
[0015] Optionally, the instantiation module is also used to, after completing the traversal of all objects, if the depth of the latest content stack is greater than 1, process the content array in the latest content stack excluding the root content array through a preset fallback component to obtain a page fallback component instance; and append the page fallback component instance to the root content array in the latest content stack; correspondingly, the rendering module is also used to perform page rendering processing based on the page component instance of the root unit obtained from the root content array in the latest content stack and the page fallback component instance.
[0016] Optionally, the instantiation module is also used to obtain the tag name and tag attributes of the object as element metadata of the first unit to which the object belongs, if the object is a start tag.
[0017] Optionally, the instantiation module is also used to perform matching processing on the document to be processed using a set of regular expressions to match multiple objects; the set of regular expressions includes regular expressions corresponding to start tags, regular expressions corresponding to closing tags, regular expressions corresponding to self-closing tags, regular expressions corresponding to pseudo tags, and regular expressions corresponding to text.
[0018] Optionally, the first acquisition module is further configured to acquire an initial registry; the initial registry includes an initial component constructor for each of at least one initial unit; acquire adjustment information for the initial registry; the adjustment information is used to instruct the component constructors for each of the multiple units; update the initial registry based on the adjustment information, and acquire the updated initial registry as the registry.
[0019] Thirdly, embodiments of this application provide an electronic device, including: a processor and a memory; the memory stores computer-readable instructions, which, when executed by the processor, implement the above-described method.
[0020] Fourthly, embodiments of this application provide a computer-readable storage medium storing computer-readable instructions that, when executed by a processor, implement the above-described method.
[0021] Fifthly, embodiments of this application provide a computer program product including computer-readable instructions that, when executed by a processor, implement the method described above.
[0022] This application provides a page rendering method, apparatus, electronic device, and storage medium. First, when rendering a page based on a document to be processed, a registry is also retrieved. Regardless of whether the unit is an element, a self-closing tag, or a pseudo-tag, the registry includes the unit's component constructor. Therefore, when instantiating a unit, the pseudo-tag is instantiated using the component constructor corresponding to the pseudo-tag. This allows each unit to create a corresponding page component instance, reducing the difficulty of instantiating pseudo-tags when the system or application's source code library does not have a pre-built component constructor for the pseudo-tags in the document to be processed, which could lead to garbled characters or error messages in the rendered page. This significantly reduces the likelihood of garbled characters or error messages in the rendered page when page rendering is based on multiple unit page component instances, resulting in a more accurate rendered page. Furthermore, the registry includes component constructors for each element or pseudo-tag in the document to be processed. Different registry entries can be built based on different documents to be processed, thereby enabling rapid and efficient expansion of component constructors. This avoids the situation where component constructors are difficult to expand and have low expansion efficiency when they are built into the source code library of the system or application. As a result, component constructors can be accurately adapted to different page rendering scenarios, improving the applicability and breadth of page rendering scenarios. Attached Figure Description
[0023] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0024] Figure 1 A schematic diagram illustrating an application scenario applicable to embodiments of this application is shown; Figure 2 A flowchart of a page rendering method according to an embodiment of this application is shown; Figure 3 A flowchart of a page rendering method according to yet another embodiment of this application is shown; Figure 4 A schematic diagram of the page rendering process in one embodiment of this application is shown; Figure 5 A schematic diagram illustrating the processing procedure for closing a label in one embodiment of this application is shown; Figure 6 A schematic diagram of a news page according to one embodiment of this application is shown; Figure 7 A schematic diagram of an editing page in one embodiment of this application is shown; Figure 8 This illustration shows a schematic diagram of multiple logical layers implementing page rendering in one embodiment of this application; Figure 9 A schematic diagram of the registry query and registration process in one embodiment of this application is shown; Figure 10 A schematic diagram illustrating the registry access process in one embodiment of this application is shown; Figure 11 A block diagram of a page rendering apparatus according to an embodiment of this application is shown; Figure 12 A structural block diagram of an electronic device for performing the methods provided in this application is shown. Detailed Implementation
[0025] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. All other embodiments obtained by those skilled in the art based on the embodiments of this application without creative effort are within the scope of protection of this application.
[0026] In the following description, the terms "first" and "second" are used merely to distinguish similar objects and do not represent a specific ordering of objects. It is understood that "first" and "second" may be interchanged in a specific order or sequence where permitted, so that the embodiments of this application described herein can be implemented in an order other than that illustrated or described herein.
[0027] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terms used herein are for the purpose of describing embodiments of this application only and are not intended to limit this application. It should be noted that: "multiple" as mentioned herein refers to two or more. "And / or" describes the association relationship of associated objects and indicates that three relationships may exist. For example, A and / or B may represent: A exists alone, A and B exist simultaneously, and B exists alone. The character " / " generally represents an "or" relationship between the associated objects before and after.
[0028] The following will explain the nouns in the embodiments of this application: HTML (Hypertext Markup Language, Hypertext Markup Reason) standard tags refer to tags that conform to the HTML specification, including opening tags (such as " (e.g., closing tags) ") and self-closing tags (such as " "). These tags are natively supported by browsers and can be directly parsed and rendered.
[0029] Comment Tag refers to special tags in the form of HTML comments, with the format of "<!--tag name-->". Comment Tags are not standard HTML tags and cannot be natively parsed by browsers. They need to be identified and processed through a custom parser. Comment Tags include ordinary comment tags (such as "<!--H1-->Title<!-- / H1-->") and counting comment tags (such as "<!--IMG_0-->"), etc.
[0030] An Element in HTML refers to all the content between the start tag and the end tag, or the content included in a self-closing tag. An element generally includes the tag itself, attributes, and the included content (if any). Different elements may have a nested relationship, and elements with a nested relationship are elements with a parent-child relationship. For example, if the a element nests the b element, then the a element is the parent element of the b element, and the b element is the child element of the a element.
[0031] A component registration mechanism (or component registry) refers to a singleton-patterned tag-to-renderable component mapping management system. This mechanism stores the mapping relationship between tag names and components through a registry, supporting dynamic registration, querying, and management. The registration mechanism includes: a tag component mapping table, a component processor mapping table, and fallback component settings. Components in the registry can be adapted to any component-based rendering engine (such as Web / native / mini-programs). In this embodiment, the component registration mechanism refers to storing the component constructors of each unit in the registry. Then, the component constructors and data processors can be obtained through the registry, and the component instantiation of the unit—instantiating the unit as a page component instance—can be achieved using the component constructors and data processors.
[0032] A tag-component map is a key-value data structure that stores the mapping between tag identifiers and renderable components. The key is the tag identifier (string type), and the value is the corresponding component constructor or renderer handle (function, class, or platform rendering description). In this embodiment, the tag-component map refers to one implementation of the aforementioned registry.
[0033] A component handler is a data preprocessing function associated with a component. In this embodiment, before rendering the component, the handler can perform operations such as transformation, validation, and enhancement on the content included in the unit, returning the processed content for the component constructor to use to obtain the corresponding page component. The data handler is independent of the specific framework and is only responsible for the input and output data.
[0034] A component builder is a tool or function used to instantiate elements into page components. In this embodiment, if the content included in a unit needs to be processed by a data processor, the component builder is used to instantiate the unit based on the content processed by the data processor to obtain a page component instance of the unit. If the content included in a unit does not need to be processed by a data processor, the component builder can directly instantiate the unit based on the content included in the unit to obtain a page component instance of the unit.
[0035] A fallback component is the default component used when a tag does not have a corresponding component in the registry. Fallback components ensure the system does not crash when processing unknown or unregistered tags, providing fault tolerance.
[0036] A content stack is an array structure used to store the content of each tag level. A content array in the content stack indicates the sub-content included by the elements indicated by start and close tags. In this embodiment, the content stack is used to manage various elements and pseudo-tags.
[0037] A tag stack is an array structure used to store information about open tags. Each tag in the tag stack includes the element metadata of the element indicated by the tag. The element metadata includes the tag name and tag attribute object. The element metadata is used to ensure that tags are correctly matched and closed.
[0038] See Figure 1 , Figure 1 A schematic diagram of an application scenario applicable to an embodiment of this application is shown. The application scenario includes a terminal device 400 and a server 200. The terminal device 400 is connected to the server 200 through a network 300, wherein the network 300 can be a wide area network or a local area network, or a combination of both.
[0039] In some embodiments, taking the electronic device as a server as an example, the page rendering method provided in this application embodiment can be implemented by the server. For example, in response to obtaining the document to be processed for rendering the page and the registry, the server 200 can then obtain the component constructor of each unit from the registry; instantiate the unit through the component constructor of each unit to obtain the page component instance of each unit; finally, the server 200 performs page rendering processing based on the page component instances of multiple units to obtain the page after rendering the document to be processed.
[0040] In some embodiments, taking the electronic device as a terminal device as an example, the page rendering method provided in this application embodiment can be implemented by the terminal device. For example, the terminal device 400 can respond to obtaining the document to be processed for rendering the page and the registry, and then the terminal device 400 obtains the component constructor of each unit from the registry; instantiate the unit through the component constructor of each unit to obtain the page component instance of each unit; finally, the terminal device 400 performs page rendering processing based on the page component instances of multiple units to obtain the page after rendering the document to be processed.
[0041] In other embodiments, the page rendering method provided in this application can be implemented by a server and a terminal device. For example, the terminal device 400 can obtain the document to be processed and the registry for rendering the page from the server 200. Then, the terminal device 400 obtains the component constructor of each unit from the registry. The unit is instantiated using the component constructor of each unit to obtain a page component instance of each unit. Finally, the terminal device 400 performs page rendering processing based on the page component instances of multiple units to obtain the page after rendering the document to be processed.
[0042] In some embodiments, the terminal device 400 or server 200 can implement the page rendering method provided in this application embodiment by running a computer program. For example, the computer program can be a native program or software module in an operating system; it can be a native application (APP), i.e., a program that needs to be installed in the operating system to run; it can also be a mini-program, i.e., a program that only needs to be downloaded to the browser environment to run; or it can be a mini-program that can be embedded in any APP, and the mini-program can be controlled by the user to run or close. In short, the above-mentioned computer program can be any form of application, module or plugin.
[0043] In some embodiments, server 200 may be an independent physical server, a server cluster or 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 communication, middleware services, domain name services, security services, content delivery networks (CDN), and big data and artificial intelligence platforms.
[0044] The terminal device 400 can be a smartphone, tablet computer, laptop computer, desktop computer, intelligent voice interaction device, smart home appliance, vehicle terminal, aircraft, etc., but is not limited to these. The terminal device and the server can be directly or indirectly connected through wired or wireless communication methods, which is not limited in this embodiment.
[0045] For ease of description, this embodiment uses an electronic device as the execution subject for page rendering.
[0046] Please see Figure 2 , Figure 2 This application illustrates a flowchart of a page rendering method according to an embodiment of the present application. The method can be used for... Figure 1 The method may include: (as shown in the example of server 200 or terminal device 400) S110. Obtain the document to be processed for rendering the page and the registry.
[0047] The document to be processed includes multiple units, which are either the first unit or the second unit in the document to be processed; the registry includes a component constructor for each unit; the first unit is an element indicated by a start tag and a closing tag, and the second unit is a self-closing tag or a pseudo tag.
[0048] In this application, the document to be processed can refer to an HTML document used to render a visual page. Examples of such documents include those rendered as news pages, product pages, science popularization web pages, or online document pages. Of course, the page used for rendering can be a webpage, a mini-program page, or an application page, etc., and this application does not impose any limitations.
[0049] Typically, the document to be rendered as a page includes elements indicated by start and close tags, elements consisting of independent self-closing tags, and pseudo tags. Elements indicated by start and close tags can include start tags, close tags, and child content located between start and close tags. This child content can be text, child elements nested within elements, or pseudo tags, etc.
[0050] For example, a string in the document to be processed is " <!--IMG_0--> The string "" indicates an element whose sub-content is the pseudo-tag "".<!--IMG_0--> For example, a string in the document to be processed is " 123 456 789 910 The string indicates a set of multiple elements, indicated by the start tag "". "and closing tags" The `` tag indicates the highest-level element (grandparent element), indicated by the `` tag. "and closing tags" The `` tag indicates a middle-level element (the parent element), defined by the start tag `` and the closing tag ``. "Indicates the lowest level element (the child element)."
[0051] As mentioned above, although pseudo tags are not independent elements, they are similar to self-closing tags: both are indicated by an independent tag. Therefore, in this application, the elements in the document to be processed indicated by the start tag and the closing tag are taken as the first unit, and the self-closing tags or pseudo tags in the document to be processed are taken as the second unit. Thus, the strings in the document to be processed are grouped into units with two structures.
[0052] The registry includes the component constructors for each unit in each document to be processed. That is, if the document to be processed includes start tags, closing tags, self-closing tags, and pseudo tags, the registry includes the component constructors for the first unit and the component constructors for the second unit (the second unit includes closing tags and pseudo tags).
[0053] The registry includes at least the component constructors for each unit in the document to be processed. It can also include component constructors for units not in the document; that is, the registry can be shared by multiple documents. Generally, the same type of component is instantiated using different component constructors in different documents. Therefore, a separate registry can be registered for each document to be processed.
[0054] Units of the same tag category refer to elements indicated by the same start tag and closing tag, the same self-closing tag, or the same pseudo-tag. For example, element a1 is indicated by the start tag " "and closing tags" The instruction indicates that element a2 is indicated by the start tag " "and closing tags" If the label indicates that element a1 and element a2 are units of the same label category, then the label indicates that ... the label indicates that the label indicates that the label indicates
[0055] Typically, units within the same tag category have similar structures. Therefore, page components can be instantiated using the same component constructor. In this case, units within the same tag category of the document to be processed can be instantiated using the same component constructor. Thus, the registry includes the component constructor for each tag category. Consequently, for each unit, the corresponding component constructor is retrieved from the registry based on the tag category to which the unit belongs.
[0056] In some implementations, the method of obtaining the registry may include: obtaining an initial registry; the initial registry includes an initial component constructor for each of at least one initial unit; obtaining adjustment information for the initial registry; the adjustment information is used to instruct the component constructors for each of the multiple units; updating the initial registry based on the adjustment information, and obtaining the updated initial registry as the registry.
[0057] Before processing the document to be processed, a registry or an initialized registry for other documents can be obtained as the initial registry. The initial registry may include an initial constructor for at least one initial unit. The initial unit may be a unit that belongs to the same tag category as a unit in the document to be processed, or the category of the initial unit may be different from the categories of all units in the document to be processed.
[0058] The component constructors for each unit in the initial registry adjustment information can be based on the component constructors used by each unit in the document to be processed. The registry is updated based on this adjustment information. This update process can include: if the tag category of the initial unit is different from the tag categories of all units in the document to be processed, the component constructors for each unit can be directly added to the initial registry; the initial component constructors of the initial unit can be retained or deleted to update the initial registry. If the tag category of the initial unit is the same as the tag category of a unit in the document to be processed, the component constructor of the unit with the same tag category as the initial unit in the adjustment information can be used to overwrite the component constructor of the initial unit, thus updating the component constructor of the initial unit and consequently updating the initial registry. Therefore, by updating the initial registry, the goal of registering the corresponding component constructors for units is achieved.
[0059] It is worth mentioning that in this embodiment, the registry is configured as a singleton registry. The registry is globally unique. There can be multiple documents to be processed for rendering, but each time a document is processed, the registry is updated to the registry specific to that document. When the next document is retrieved, the registry is updated to the registry specific to that document. This ensures the uniqueness of the registry, facilitates fast registry retrieval, and saves memory.
[0060] In some implementations, the registry may include tag identifiers for units and component constructors corresponding to those tag identifiers. That is, the registry indicates units through tag identifiers, which can be tag names, numbers, or sequence numbers. For example, the registry may be in the form of a hash table, where the key is the tag name and the value is the component constructor referenced by the unit to which the tag name belongs.
[0061] S120. Obtain the component constructor for each unit from the registry.
[0062] As mentioned earlier, the registry includes the component constructor for each unit, and the component constructor for each unit can be obtained from the registry. The process of obtaining the component constructor for a unit is also the process of querying the component constructor for a unit from the registry.
[0063] For example, the registry is in the form of a hash table. The component constructor corresponding to the tag name of the unit is retrieved from the registry based on the tag name of the unit, and used as the component constructor of the unit.
[0064] S130. Instantiate the unit through the component constructor of each unit to obtain the page component instance of each unit.
[0065] The unit is instantiated directly through the unit's component constructor to instantiate the unit as a page component instance. By traversing all units, the page component instance of each unit can be obtained.
[0066] For example, the first unit is instantiated into a corresponding page component instance through the component constructor of the first unit, the self-closing tag is instantiated into a corresponding page component instance through the component constructor of the self-closing tag, and the pseudo tag is instantiated into a corresponding page component instance through the component constructor of the pseudo tag.
[0067] As mentioned above, the unit can be either the first unit or the second unit. For the second unit, whether it is a self-closing tag or a pseudo tag, the tag itself constitutes a unit. Therefore, if the unit is the second unit, the unit is instantiated based on the unit itself through the unit's component constructor to obtain the page component instance of the unit.
[0068] However, the first unit is indicated by a start tag and a close tag, and there is sub-content between the start tag and the close tag. Therefore, if the unit is the first unit, the sub-content included in the unit is obtained; through the component constructor of the unit, the unit is instantiated based on the sub-content included in the unit to obtain the page component instance of the unit.
[0069] As mentioned earlier, for a unit that is the first unit, the sub-content refers to the content between the start tag and the closing tag, and does not involve data indicating the unit itself. Therefore, for each unit, if it is the first unit, the unit's element metadata and the sub-content it includes are obtained. Through the unit's component constructor, based on the unit's element metadata and the sub-content it includes, the unit is instantiated to obtain the unit's page component instance. That is, the unit itself is indicated through the unit's element metadata.
[0070] As mentioned earlier, the first unit includes a start tag, a closing tag, and the sub-content between the start and closing tags. Therefore, the element metadata of the first unit can be determined based on the start tag or the closing tag. Different first units of the same tag category have similar structures. Therefore, the element metadata that distinguishes different units is actually used to distinguish different tag categories. Thus, the tag name and tag attributes of the start tag of the first unit can be obtained as the element metadata of the first unit. Tag attributes refer to additional information or configuration options of the tag, etc. In this case, the obtained element metadata can clearly distinguish different tag categories.
[0071] In some implementations, for a unit designated as the first unit, the aforementioned instantiation of the unit using the unit's component constructor, based on the unit's element metadata and the sub-content included in the unit, to obtain a page component instance of the unit includes: if the registry includes a data processor corresponding to the unit's component constructor, obtaining the data processor corresponding to the unit's component constructor from the registry as the unit's data processor; if the registry includes a data processor corresponding to a component constructor that meets the target conditions; processing the unit's element metadata and the sub-content included in the unit using the unit's data processor to obtain preprocessed data of the unit; and instantiating the unit based on the preprocessed data of the unit using the unit's component constructor to obtain a page component instance of the unit.
[0072] Generally, the first unit can be instantiated into a page component instance through the corresponding component constructor. However, some component constructors may not be able to directly process the element metadata or sub-content of the corresponding first unit, causing the component constructor to be unable to directly instantiate based on the element metadata and sub-content of the corresponding first unit. Alternatively, the page component instance obtained when directly instantiating based on the element metadata and sub-content of the corresponding first unit may be abnormal. Therefore, before instantiating directly based on the element metadata and sub-content of the corresponding first unit through the component constructor, a data processor for the component constructor of the first unit is obtained as the data processor for the first unit. The data processor processes the element metadata and sub-content of the first unit into pre-processed data that the component constructor can process. After this, the component constructor of the first unit instantiates the first unit based on the pre-processed data to obtain the page component instance of the first unit.
[0073] However, for component builders that cannot directly process the element metadata of the corresponding first unit or the sub-content included in the corresponding first unit, a corresponding data processor can be configured in the registry to obtain the corresponding data processor. Correspondingly, if the registry does not include the data processor corresponding to the component builder, it means that the component builder can directly process the element metadata of the corresponding first unit and the sub-content included in the corresponding first unit. In this case, the page component is instantiated directly through the component builder based on the element metadata of the corresponding first unit and the sub-content included in the corresponding first unit.
[0074] Similarly, some component constructors may not be able to directly process the corresponding second unit, causing the component constructor to be unable to directly instantiate based on the corresponding second unit. Alternatively, the page component instance obtained when directly instantiating based on the corresponding second unit may be abnormal. Therefore, before directly instantiating based on the corresponding second unit through the component constructor, the data processor of the component constructor for the second unit is obtained as the data processor of the second unit. The data processor processes the second unit into preprocessed data that the component constructor can process. After that, the component constructor of the second unit instantiates the second unit based on the preprocessed data of the second unit to obtain the page component instance of the second unit.
[0075] However, for component constructors that cannot directly process the corresponding second unit, a corresponding data processor can be configured in the registry to obtain the corresponding data processor. If the registry does not include the data processor corresponding to the component constructor, it means that the component constructor can directly process the corresponding second unit. In this case, the page component is instantiated directly through the component constructor based on the corresponding second unit itself.
[0076] Similarly, the registry acquisition process including the data processor may include: acquiring an initial registry; the initial registry includes an initial component constructor for each of at least one initial unit and an initial data processor corresponding to a first component constructor, wherein the first component constructor is included in at least one initial component constructor; acquiring adjustment information for the initial registry; the adjustment information is used to instruct the component constructors for multiple units and the data processor corresponding to a second component constructor, wherein the second component constructor is included in multiple unit component constructors; updating the initial registry based on the adjustment information; and acquiring the updated initial registry as the registry.
[0077] The update process for the initial registry, particularly the component constructor update, will not be elaborated upon here. For the first component constructor, if a second component constructor identical to the first component constructor exists in the adjustment information, the data processor of the second component constructor will overwrite the initial data processor of the first component constructor, thus updating the data processor of the first component constructor and the initial registry. If no second component constructor identical to the first component constructor exists in the adjustment information, the data processor of the second component constructor will be directly added to the initial registry. Simultaneously, the initial data processor of the first component constructor can be deleted or retained, thus updating the initial registry. Therefore, by updating the initial registry, the corresponding component constructor for the unit and the corresponding data processor for the component constructor are registered.
[0078] It is easy to understand that, in some implementations, the registry may include a first registry and a second registry. The first registry includes the component constructor of each unit, and the second registry includes the data processor corresponding to some of the component constructors of the multiple units in the document to be processed. Thus, the component constructors of the multiple units are obtained through the first registry, and the data processors corresponding to the component constructors are obtained through the second registry.
[0079] In other words, the first registry, which is also the first-level registry, is used to indicate the component constructor of each unit. The second registry is actually the second-level registry, used to indicate the data processor corresponding to some component constructors among the component constructors of multiple units.
[0080] S140. Perform page rendering based on multiple unit page component instances.
[0081] After obtaining the page component instances of each unit, the page component instances of each unit can be rendered to obtain a visual page.
[0082] First, when rendering a page based on the document to be processed, the registry is also retrieved. Regardless of whether the unit is an element, a self-closing tag, or a pseudo-tag, the registry includes the component constructor of the unit. Therefore, when instantiating a unit, the pseudo-tag is instantiated through the component constructor corresponding to the pseudo-tag. This allows each unit to create a corresponding page component instance, reducing the difficulty of instantiating pseudo-tags when the system or application's source code library does not have a pre-built component constructor for the pseudo-tags in the document to be processed. This reduces the occurrence of garbled characters or error messages in the rendered page. As a result, the rendering of pages based on page component instances of multiple units is greatly reduced, and the rendered page is more accurate. Furthermore, the registry includes component constructors for each element or pseudo-tag in the document to be processed. Different registry entries can be built based on different documents to be processed, thereby enabling rapid and efficient expansion of component constructors. This avoids the situation where component constructors are difficult to expand and have low expansion efficiency when they are built into the source code library of the system or application. As a result, component constructors can be accurately adapted to different page rendering scenarios, improving the applicability and breadth of page rendering scenarios.
[0083] Please see Figure 3 , Figure 3 This invention illustrates a flowchart of a page rendering method according to another embodiment of the present application, the method being used for... Figure 1 The server 200 or terminal device 400 shown, prior to S130, may include: S150. Traverse each object according to its position in the document to be processed.
[0084] The document to be processed includes multiple objects, which are tags or text. In the aforementioned embodiments, a unit refers to a unit determined according to a content category classification method: elements indicated by start and end tags are considered the first unit, and pseudo-tags or self-closing tags constitute the second unit. An object refers to an object classified according to the type of strings in the document to be processed. That is, in the document to be processed, strings are classified into two types: tags and text. Tags include standard tags and pseudo-tags. Standard tags include start tags indicating the first unit, closing tags indicating the first unit, and self-closing tags.
[0085] One approach is to first segment the document into strings, dividing it into tags and content. Specifically, this can be done by using a set of regular expressions to match multiple objects; the set includes regular expressions for start tags, closing tags, self-closing tags, pseudo-tags, and text.
[0086] In other words, in this embodiment, regular expressions are used to perform string matching on the document to be processed, in order to obtain objects belonging to start tags, closing tags, self-closing tags, pseudo tags, and text. Then, each object can be traversed sequentially according to its position in the text to be processed.
[0087] Accordingly, S130 includes S131-S133, as follows: S131. If the cell is the first cell and the cell's closing label is reached, obtain the latest label stack and the latest content stack.
[0088] The latest tag stack includes at least one tag array, which includes the element metadata of the first unit to which the traversed start tag object belongs. The start tag object is an object belonging to the start tag. The tag array is pushed into the tag stack in the order in which the start tags of the first unit to which it belongs are traversed. The latest content stack includes a content array corresponding to each tag array, which includes the sub-content included in the first unit to which the corresponding tag array belongs. The content array is pushed into the content stack in the order in which the corresponding tag array is pushed into the tag stack.
[0089] Typically, before traversing each object in the document to be processed, a content array and a tag array can be created. When traversing to a start tag object that is a start tag, the element metadata of the first unit to which the start tag object belongs is obtained, and an array is constructed based on the element metadata of the first unit to which the start tag object belongs, which serves as the tag array. Then, the tag array is pushed onto the stack, and the sub-content included in the first unit indicated by the start tag is obtained. The sub-content included in the first unit indicated by the start tag is used as the content array, and the content array is also pushed onto the stack. At this point, the content array corresponds one-to-one with the tag array of the start tag. In this way, each time a tag array is pushed onto the stack, the corresponding content array is also pushed onto the stack.
[0090] In this embodiment, if the object is a start tag, the tag name and tag attributes of the object are obtained as the element metadata of the first unit to which the object belongs. That is, for a first unit with a start tag and a closing tag, when the start tag of the first unit is traversed, the tag name and tag attributes of the start tag can be obtained as the element metadata of the first unit.
[0091] When traversing to the start tag, after obtaining the element metadata of the first unit to which the start tag belongs, you can obtain the element metadata of the first unit and use it as a tag array. Alternatively, you can construct a tag data group based on the element metadata of the first unit, the timestamp, and the order number of the current element metadata pushed onto the tag stack.
[0092] Similarly, after pushing the tag array onto the stack, the corresponding content array also needs to be pushed onto the stack. At this time, we can obtain the sub-contents included in the first unit to which the metadata of the pushed element belongs, and construct a content array based on the sub-contents included in the first unit to which the metadata of the pushed element belongs, the timestamp, and the sequence number of the current content array pushed onto the content stack, and then push the content array onto the content stack.
[0093] Typically, the sub-contents of the first unit can be text or pseudo-tags. Therefore, after S150, and after creating the tag stack and content stack, the methods for updating the content stack and tag stack can include: A1. For each object that is traversed, if the object is the start tag, construct a tag array based on the element metadata of the first unit to which the object belongs, and push the latest tag stack based on the tag array, and push the content stack based on the preset content array. A2. If the object is text, append the object to the top of the latest content stack array; A3. If the object is the second unit, append the object's page component instance to the top content array of the latest content stack.
[0094] Based on the layout of the document to be processed, after traversing each object according to its position in the document, the first element will be traversed first, and then the closing element will be traversed. The content traversed between the first and closing elements of the first element is the sub-content of the first element.
[0095] When traversing to the start tag, a tag array is directly constructed based on the element metadata of the first unit to which the start tag belongs, and the constructed tag array is pushed onto the tag stack. At the same time, a preset content array is pushed onto the content stack. The preset content array serves as a placeholder and corresponds one-to-one with the latest pushed tag array. The preset content array can be an empty array—a content array that does not contain any content—so that the content included in the content array can be used as the sub-content included in the first unit. Alternatively, the preset content array can contain specified data, such as a timestamp indicating the creation time of the content array and the sequence number of the corresponding tag array pushed onto the tag stack.
[0096] Then, if the object being iterated over is text, the text being iterated over is actually the text contained in the first unit of the starting tag of the latest tag array that has been pushed onto the stack. In this case, it is directly appended to the top content array of the latest content stack. If the object being iterated is the second unit (pseudo tag or closing tag), the second unit is "self-contained" and can be directly componentized into the corresponding page component instance. In this case, the page component instance of the second unit is directly obtained and appended to the top content array of the latest content stack.
[0097] For example, the string is " <!--IMG_0--> The system identified three objects: the start tag " "Pseudo-labels"<!--IMG_0--> "and closing tags" First, iterate to the start tag " ", tag stack push: [{tagName:"DIV"}], synchronous, content stack push: [[]], then, traversing to pseudo tag "<!--IMG_0--> , query the registry: IMG → IMG Component Constructor, then continue querying the registry: IMG Component Constructor → Data Processor, and process the pseudo-tags through the data processor.<!--IMG_0--> "Process the data to obtain the corresponding preprocessed data. Then, instantiate the data based on the preprocessed data using the MG component constructor to obtain the IMG component instance. Append the IMG component instance to the top content array of the content stack: [[IMG component]].
[0098] In other words, although a self-closing tag is a standalone element, it is usually a child element of an element indicated by a start tag and a close tag. Therefore, it is added to the corresponding content array as a child content of the element indicated by the start tag and a close tag.
[0099] Therefore, by traversing the object, each time the first unit indicated by the start label is reached, the label array is pushed onto the content stack. At the same time, the sub-content included in the first unit is also pushed onto the label stack. The labels and content are managed separately through the dual stack.
[0100] Following the aforementioned process, the tag stack and content stack are updated. However, each time a closed tag is traversed, the latest tag stack and the latest content stack are obtained.
[0101] S132. Perform a pop operation on the latest tag stack, popping the tag array and retrieving the element metadata of the cell from the popped tag array; perform a pop operation on the latest content stack, popping the content array and retrieving the sub-content included in the cell from the popped content array.
[0102] Based on the characteristics of the stack and the parent-child relationships between different units in the document to be processed, it can be determined that the later the start tag is traversed, the earlier the corresponding closing tag is traversed. Therefore, when a closing tag is traversed, the element metadata of the first unit indicated by the corresponding start tag must be located in the top tag array of the stack. Thus, the latest tag stack can be popped directly, and the element metadata of the first unit can be obtained from the popped tag array. Of course, if the tag array only includes the element metadata of the first unit during the aforementioned tag stack update process, the content of the popped tag array can be directly obtained as the element metadata of the first unit. If the tag array also includes other data such as timestamps other than the element metadata of the first unit, the other data can be discarded.
[0103] Similarly, pop the content array from the latest content stack, and retrieve the sub-contents included in the first unit from the popped content array. If the content array only includes the sub-contents included in the first unit, then retrieve the content included in the popped content array as the sub-contents included in the first unit. If the content array also includes other data such as timestamps other than the sub-contents included in the first unit, then discard the other data.
[0104] In some implementations, S131 further includes: matching the top tag array of the latest tag stack with the closing tag of the cell; if the top tag array of the latest tag stack matches the closing tag of the cell, popping the tag array from the latest tag stack, obtaining the element metadata of the cell from the popped tag array, popping the content array from the latest content stack, and obtaining the sub-content included in the cell from the popped content array.
[0105] The matching process here can be to match whether the metadata of the elements in the stack top label array is consistent with the metadata of the elements in the cell to which the closing label belongs. If they are consistent, it proves that the closing label and the starting label from which the metadata of the elements in the stack top label array originate are corresponding, and they just point to a complete first cell. At this time, the content number combination label array can be popped directly.
[0106] Correspondingly, if they are inconsistent, it proves that the closing label does not correspond to the starting label from which the element metadata in the stack top label array originates. They actually indicate a complete first unit. At this point, a fault may have occurred, and a prompt message may be output to suggest repair.
[0107] S133. The unit is instantiated using the unit's component constructor, based on the unit's element metadata and the sub-contents included in the unit, to obtain the unit's page component instance.
[0108] The steps in S133 are described in the same way as those in S130 above, and will not be repeated here.
[0109] For example, the string in the document to be processed is " <!--IMG_0--> The system identified three objects: the start tag. "Pseudo-labels"<!--IMG_0--> "and closing tags" First, iterate to the start tag. ", tag stack push: [{tagName:"DIV"}], synchronous, content stack push: [[]], then, traversing to pseudo tag "<!--IMG_0--> , query the registry: IMG → IMG Component Constructor, then continue querying the registry: IMG Component Constructor → Data Processor, and process the pseudo-tags through the data processor.<!--IMG_0--> "Process the data to obtain the corresponding preprocessed data. Then, instantiate the data based on the preprocessed data using the IMG component constructor to obtain an IMG component instance, or simply IMG component. Append the IMG component instance to the top content array of the content stack: [[IMG component]].
[0110] Then iterate through the closing tag. "、Pop from tag stack: Get {tagName:"DIV"}、Pop from content stack: Get [IMG component]、Query registry: DIV→DIV component constructor、Create a DIV component instance through the DIV component constructor, which is simply called DIV component.
[0111] In some implementations, multiple units have a parent-child relationship; after S133, the method further includes: appending the page component instance of the unit to the top content array of the latest content stack; correspondingly, S140 includes: performing page rendering processing based on the page component instance of the root unit among the multiple units.
[0112] In other words, there is a phenomenon where the first unit is nested within the first unit. For example, if the string in the document to be processed is " 123 456 910 "Start tag" "and closing tags" "Indicates the first nested start tag" "and closing tags" "The first unit indicated, namely, the start label" "and closing tags" "The first unit indicated is the start label." "and closing tags" "The parent unit of the first unit indicated."
[0113] In other words, for the first unit that is a child unit, the page component instance of the first unit is treated as part of the child content of the parent unit. Thus, the page component instance of the parent first unit includes its own text, pseudo-tag page component instances, self-closing tag page component instances, and the page component instance of the child first unit.
[0114] For example, the string in the document to be processed is " 123 456 910 The system identified five objects: the start tag of the first element of the parent element. ", content "123", the start tag of the first unit of the child level" The closing tag of the first element of the child element, the content "456", the closing tag of the first element of the child element, the content "910", and the closing tag of the first element of the parent element. ”; First, iterate through the start tag " ", tag stack push: [{tagName:"DIV"}], synchronously, content stack push: [[]], then, traverse to the text "123", append to the top content array: [
[123] ], then traverse to the start tag " ", tag stack push: [{tagName:"DIV"}, {tagName:"P"}], synchronously, content stack push: [
[123] , []], then, traverse to the text "456", append to the content array at the top of the stack: [
[123] ,
[456] ]; Continue iterating until you reach the closing label. ", Tag stack pop: Get {tagName:"P"}, content stack pop:
[456] , get registry query for tag P → P component constructor, instantiate P component instance from P component constructor, abbreviated as P component, P component instance is appended to the top content array [[123, P component]]; continue traversing, traversing to the text "910", append to the top content array: [[123, P component, 910]], and then traversing to the closing tag " ", Tag stack pop: Get [{tagName:"DIV"}], Content stack pop: [123, P component, 910], Get registry query DIV tag → DIV component constructor, DIV component constructor instantiates to get DIV component instance, simply called DIV component, at this time, DIV component includes the string " 123 456 910 All the content indicated is then rendered on the page based on the DIV component.
[0115] Therefore, it is no longer necessary to traverse all page component instances in all units to render the page; only the page component instance of the last root unit needs to be obtained to render the page. This reduces the difficulty of data acquisition and the amount of data that needs to be acquired, and improves the page rendering efficiency.
[0116] Furthermore, prior to S150, the method also includes: pushing the created content stack onto the stack based on a preset root content array; correspondingly, prior to S140, the method also includes: obtaining the page component instance of the root unit from the root content array of the latest content stack. The preset root content array can be an empty content array, an array containing preset content, or an array containing data such as the identifier, name, or sequence number of the document to be processed.
[0117] For example, the string in the document to be processed is " 123 456 910 The system identified five objects: the start tag of the first element of the parent element. ", content "123", the start tag of the first unit of the child level" The closing tag of the first element of the child element, the content "456", the closing tag of the first element of the child element, the content "910", and the closing tag of the first element of the parent element. ”; First, create a tag stack [] and a content stack [], and insert an empty root content array into the content stack to obtain the latest content stack [[]]. Traverse to the start tag" ", tag stack push: [{tagName:"DIV"}], synchronously, content stack push: [[], []], then, traverse to the text "123", append to the top content array: [
[123] ], then traverse to the start tag " ", Tag stack push: [{tagName:"DIV"}, {tagName:"P"}], synchronously, content stack push: [[],
[123] , []], then, traverse to the text "456", append to the content array at the top of the stack: [[],
[123] ,
[456] ]; Continue iterating until you reach the closing label. ", Tag stack pop: Get {tagName:"P"}, Content stack pop:
[456] , Get registry query for tag P → P component constructor, P component constructor instantiates to get P component instance, abbreviated as P component, P component instance is appended to the top content array [[] , [123, P component]]; Continue traversing, traversing to the text "910", appended to the top content array: [[] , [123, P component, 910]], and then traversing to the closing tag " ", Tag stack pop: Get [{tagName:"DIV"}], Content stack pop: [123, P component, 910], Get registry query DIV tag → DIV component constructor, DIV component constructor instantiates to get DIV component instance, simply called DIV component, at this time, the DIV component instance includes the string " 123 456 910 All content indicated is appended to the top of the content stack: [[DIV component], and finally, the DIV component is retrieved from the root content array of the latest content stack to render the page.
[0118] Therefore, by pushing the root unit's page component instance onto the root content array of the content stack, it is no longer necessary to configure an additional cache to cache the root unit's page component instance. This eliminates the step of configuring an additional cache for the root unit's page component instance, improves the caching efficiency of the root unit's page component instance, and facilitates quick and easy retrieval of the root unit's page component instance, thereby improving page rendering efficiency.
[0119] In some implementations, prior to S140, the method further includes: after completing the traversal of all objects, if the depth of the latest content stack is greater than 1, processing the content array in the latest content stack excluding the root content array using a preset fallback component to obtain a page fallback component instance; appending the page fallback component instance to the root content array in the latest content stack; correspondingly, S140 includes: performing page rendering processing based on the page component instance of the root unit obtained from the root content array in the latest content stack and the page fallback component instance. The preset fallback component can be a component configured to implement a fault tolerance mechanism based on requirements, and this application does not limit it.
[0120] In other words, during the page rendering process, some faults may occur that prevent other units besides the root unit from being rendered as corresponding page component instances. In this case, the fault tolerance mechanism is triggered: the content array except the root content array is processed through the preset fallback component to obtain the page fallback component instance. Finally, the page fallback component instance is appended to the root content array in the latest content stack. After that, the page component instance of the root unit and the page fallback component instance in the root content array are obtained. Then, based on the page component instance of the root unit and the page fallback component instance, page rendering is performed to obtain the page corresponding to the document to be processed.
[0121] In this embodiment, the page rendering process is as follows: Figure 4 As shown, it includes the following steps: S1: Receive the document to be processed (HTML document).
[0122] S2: Regular expression scanning, matching all tags and text; that is, matching start tags, closing tags, self-closing tags, pseudo tags, and text using a set of regular expressions.
[0123] S3: Initialize the dual stacks: tag stack [], content stack = [[]]. Before traversing each object in each document to be processed (objects include the aforementioned start tag, closing tag, self-closing tag, pseudo tag, and text), push the preset root content array onto the content stack, where the root content array is empty.
[0124] S4: Iterate through the matching results. This involves iterating through each matched object. Different objects are processed using different methods. Specifically: Branch A: Enable tags, specifically including the following three steps: 1. Extract tag name and attributes, 2. Push tag stack (metadata), 3. Push content stack (empty array). Furthermore, no registry queries or component creation are performed when enabling tags; Branch B: Text. The text is appended to the top of the content stack array. For text, it is directly appended to the top of the content stack array. Branch C: Closing Tag. After processing the closing tag, it is appended to the latest top-of-stack content array. The resulting page component instance is then appended to the latest top-of-stack content array.
[0125] Branch D: Self-closing tag or pseudo-tag, specifically including the following two steps: 1. Query the registry and create the component; 2. Append to the latest content stack top of the content array.
[0126] The specific steps for processing branch C are as follows: Figure 5 As shown, it includes: SC1: Pop element metadata from the tag stack.
[0127] SC2: Tag Match Verification. Verifies whether the closed tag encountered matches the starting tag indicated by the top tag array of the latest tag stack. If a match is found, SC3 is executed; otherwise, a message is output to indicate a failure.
[0128] SC3: Pop from the content stack to obtain complete child content. Pop from the top content array of the content stack to obtain all child content up to the element indicated by the closing label.
[0129] SC4: Query the registry at the first level: Tag Identifier -- Component Constructor. Retrieve the component constructor corresponding to the tag identifier of the closing tag from the registry.
[0130] SC5: Query the registry at the second level: Component Constructor -- Data Processor. Check if the data processor corresponding to the component constructor obtained in SC4 exists in the registry.
[0131] SC6: Execute the data processor (if it exists). If the corresponding data processor is found, the element metadata of the element (i.e., the first unit) and the sub-contents included in the element can be processed through the data processor.
[0132] SC7: Calls the component constructor to create a page component instance. The component constructor instantiates the component based on the data preprocessed in SC6 to obtain the page component instance.
[0133] SC8: Appends to the array of contents at the top of the stack.
[0134] After traversing all objects, determine if there are any unprocessed elements. If the depth of the content stack is greater than 1, there are unprocessed elements; if the depth of the content stack is 1, there are no unprocessed elements. If there are unprocessed elements, execute S5; otherwise, execute S6.
[0135] S5: Fault tolerance checks the stack depth of the content and uses a fallback component; S6: Output Component Tree: Root Content Array of the Content Stack. The root content array contains the page component instances of the root unit, which constitute a component tree. Page rendering is performed based on this component tree.
[0136] In this embodiment, page rendering is achieved through a dual-stack collaborative mechanism. When a tag is opened, information is pushed onto the stack to temporarily store information. When a tag is closed, the stack is popped to obtain complete tag metadata and sub-content. This mechanism acts as the system's "information collector," ensuring that components can obtain complete input when they are created. It supports arbitrary depth nesting and fault tolerance, guaranteeing the accuracy and stability of page rendering.
[0137] Furthermore, the combination of dual stacks and the registry completely decouples the business layer (component definition) from the underlying layer (parsing logic). By querying the external registry instead of hard-coding internally, component mappings are obtained, enabling runtime configurability, overridability, and extensibility of the tag-component mapping relationship. Component definitions no longer need to be modified at the code level, reducing the difficulty of page rendering and improving page rendering efficiency.
[0138] To better understand the solution of this application, the page rendering method of this application will be explained below with an example.
[0139] The page rendering solution in this application can be used in page rendering scenarios or page editing preview scenarios.
[0140] For example, in a page rendering scenario, the page to be rendered from the document is a news page, such as... Figure 6 As shown, the main body of the news displayed on the news page 60 typically includes standard HTML tags and pseudo tags. Pseudo tags can also include regular pseudo tags (referred to as pseudo tags) and paired pseudo tags, etc.
[0141] For example, in a preview scenario for page editing, such as Figure 7 As shown, the editing page 70 includes an editing area 71 and a preview area 72. The editing area 71 is used to edit the document to be processed, and the preview area 72 is used to preview the page obtained after the document to be processed has been parsed and rendered.
[0142] In this example, to achieve page rendering, such as Figure 8 As shown, it can typically be configured with an output layer, a rendering layer, a registration layer, a parsing layer, and an input layer.
[0143] The input layer is used to parse the HTML content of the document to be processed in order to obtain pseudo tags, context information, and configuration parameters. The context information refers to the context of standard HTML tags, and the configuration parameters refer to the parameters configured for the document to be processed. The parsing layer uses regular expression matching to parse tags, identify pseudo tags, and process attributes. Attribute processing refers to identifying tags as pseudo tags, start tags, self-closing tags, or closing tags.
[0144] The registration layer maintains the registry, which stores tag component mappings that indicate the mapping between tag identifiers and component constructors, component processor mappings that indicate the mapping between component constructors and data processors, and preset fallback components.
[0145] The rendering layer employs a dual-stack management mechanism to handle text styles, instantiate components, and decode data, ultimately resulting in page component instances.
[0146] The output layer outputs a content stack including a root content array. The root content array contains root unit page component instances that form a component tree, which is used to render the page. Furthermore, the output layer is configured with validation and fault tolerance to check for anomalies in the component tree.
[0147] In this example, the registry registration and query process is as follows: Figure 9 As shown, the registry adopts the singleton pattern—a globally unique singleton registry. Business module A, business module B, ... and business module N share the same registry.
[0148] The global singleton registry is retrieved from the unique instance storage area through the instance retrieval interface. This global singleton registry is a static private member, ensuring global uniqueness.
[0149] The registry is a two-layer mapping registry. The first layer maps tag identifiers to component constructors, and the second layer maps component constructors to data processors. Typically, the first layer mapping is implemented using a string hash table, retrieving the latest registered first-layer mapping through constant-time queries. Similarly, the second layer mapping is implemented using an object reference hash table (object references refer to the pattern of component constructors referencing data processors), retrieving the latest registered second-layer mapping through constant-time queries.
[0150] The registry registration process registers the first-level mapping through the component registration interface and the second-level mapping through the processor registration interface. Similarly, it queries the first-level mapping through the component query interface to obtain the component constructor and the second-level mapping through the processor query interface to obtain the data processor.
[0151] Of course, the registry also includes a fallback component store, so that in the event of unprocessed data, the page fallback component instance can be rendered using the stored fallback components. Typically, fallback components refer to default components that are not registered, ensuring system fault tolerance.
[0152] The registry call process is as follows Figure 10 As shown.
[0153] The business application layer includes the initialization phase, the runtime query phase, and the runtime reconfiguration phase.
[0154] During the initialization phase, a globally unique instance is obtained, and then tag mappings (the mapping between tag identifiers and component constructors) and processor mappings (the mapping between component constructors and data processors) are registered in batches to obtain the registry—the global singleton registry.
[0155] Specifically, the component registration interface receives (the mapping between the tag identifier and the component constructor) -- stores it in the first-level mapping table -- overwrites the old mapping, and supports dynamic overwriting at runtime; correspondingly, the processor registration interface receives (the mapping between the component constructor and the processor function) -- stores it in the second-level mapping -- overwrites the old mapping, and supports registering different data processors for the same component in different scenarios.
[0156] During the runtime query phase, the system implements querying the component corresponding to the tag, querying the processor corresponding to the component, and triggering the fallback fault tolerance mechanism. Specifically, the component query interface receives the tag identifier, performs a first-level mapping query—if found, it returns the component constructor; if not found, it returns the fallback component (triggering the fallback fault tolerance mechanism); the output after the query is: a reference to the component constructor (guaranteed to be non-null). The processor query interface receives the queried component constructor -- second-level mapping query -- returns the data processor if found / returns empty if not found. The query output is: processor function reference or empty (empty indicates no preprocessing is required).
[0157] During the runtime reconfiguration phase, which is each time the page rendering process is run, existing tag mappings (the original mapping between tag identifiers and component constructors) and existing processor mappings (the original mapping between component constructors and data processors) can be overridden.
[0158] For the query results layer, the singleton retrieval interface retrieves a globally unique instance, the component registration interface obtains a mapping of tag identifier to component constructor in the registry, the component query interface obtains a component constructor reference, the processor registration interface obtains a mapping of component constructor to data processor in the registry, and the processor query interface is a data processor reference or null.
[0159] For example, to parse the string " <!--IMG_0--> Let's take an example to explain the page rendering method of this application: Phase 1: Application Launch - Register via registry interface: The DIV component corresponding to the tag "DIV". - Register via the registry interface: The tag "IMG" corresponds to the IMG component and its corresponding data processor. Phase Two: Analysis Process 1. Lexical analysis identified three tags: ”、" <!--IMG_0-->”、" ", and iterate through them in turn; 2. Iterate to the opening tag. ` - Tag stack push: [{tagName:"DIV"} - Content is pushed onto the stack: [[], []] (two levels, with the top of the stack being a pre-defined empty array) - No registry lookup, no component creation 3. Traverse to pseudo-tags"<!--IMG_0--> " - Query the registry at the first level: IMG → IMG component - Query the second level of the registry: IMG component → Data processor - The execution data processor processes the pseudo-label data. - Create an IMG component instance - Added to the top of the content stack: [[], [IMG component]] 4. Traverse to the closing tag " " - Tag stack pop: Retrieve {tagName:"DIV"} - Popping from the content stack: Retrieving the [IMG component] - Query the registry: DIV → DIV components - Create a DIV component instance, passing in its child content [IMG component]. - Append to the root array: [[DIV components]] 5. Parsing complete, output: [DIV component (including IMG component)], which is the page component instance of the root unit.
[0160] This example combines three mechanisms—a dual mapping mechanism of the singleton registry, a dual-stack collaboration mechanism, and a query-driven decoupled parsing mechanism—to build a complete closed loop of tag parsing and component instantiation technology.
[0161] 1. The registry provides query capabilities: the parser retrieves components through queries, without relying on hard-coding; a global component registry is built using a singleton pattern, internally maintaining a two-level hash mapping from tags to components and from components to handlers. This mechanism serves as the system's "configuration hub," supporting runtime dynamic registration and overriding, and providing a mapping data source for the entire system; 2. Dual stacks provide temporary storage capabilities: information is temporarily stored when a tag is opened and fully retrieved when a tag is closed, creating conditions for querying; information is pushed onto the stack synchronously when a tag is opened and popped from the stack synchronously when a tag is closed to retrieve the complete tag metadata and sub-content sequence. This mechanism acts as the system's "information collector," ensuring that components receive complete input when created, supporting arbitrary depth of nesting and fault tolerance.
[0162] 3. Query-Driven Decoupled Parsing Mechanism: The parser's responsibilities are limited to four general operations: lexical analysis, dual-stack management, registry query, and component instantiation, without containing any business logic. This mechanism acts as the system's "process scheduler," coordinating registry queries and dual-stack operations to achieve zero coupling between business components and parsing logic.
[0163] All three mechanisms are indispensable: without the registry, external configuration is impossible; without dual stacks, information cannot be fully collected; and without query drivers, the registry and dual stacks cannot work together.
[0164] The method described in this embodiment can achieve the following effects: 1. Enhanced Scalability: A component registration mechanism supports dynamic registration of tag components, allowing for the addition of new tags without modifying the core code. Compared to existing solutions, scalability is significantly improved, reducing the time to add new tags from hours to minutes.
[0165] 2. Enhanced Flexibility: The mapping between tags and components can be dynamically adjusted, supporting the use of different components for different business scenarios. Compared to hard-coding solutions, flexibility is improved by over 80%.
[0166] 3. Reduced maintenance costs: Unified component registry management avoids the problem of mapping relationships being scattered throughout the code, resulting in low maintenance costs.
[0167] 4. Improved code reusability: Components can be reused across projects, and the processor mechanism enables independent encapsulation of data processing logic, improving code reusability by approximately 50%.
[0168] 5. Performance optimization: The singleton pattern reduces memory usage and has lower time complexity for mapping table lookups.
[0169] 6. Improved robustness: The rollback mechanism ensures that unknown tags can be handled correctly, improving system robustness.
[0170] 7. Improved development efficiency: Developers do not need to worry about the underlying parsing logic; they only need to register the component to use it.
[0171] 8. Faster product iteration speed: New features can be quickly launched by registering new components, shortening the product iteration cycle.
[0172] 9. Reduced cross-platform adaptation costs: The same content can be implemented by registering different components on different platforms, thus reducing cross-platform adaptation costs.
[0173] 10. Ecosystem Development: Third-party developers can develop component plugins and extend system functionality through a registration mechanism, forming a healthy technological ecosystem.
[0174] 11. Richer content rendering: Supports pseudo tags and custom components, making content rendering richer and more flexible.
[0175] 12. More error-friendly: The fallback mechanism ensures that the page will not crash due to unknown tags, making error handling more user-friendly.
[0176] 13. Consistent experience across multiple platforms: Achieve consistent experience across multiple platforms by registering the same components on different platforms.
[0177] Please see Figure 11 , Figure 11 This illustration shows a block diagram of a page rendering apparatus according to an embodiment of the present application. The page rendering apparatus 1100 includes: The first acquisition module 1110 is used to acquire the document to be processed and the registry for rendering the page; the document to be processed includes multiple units, which are either the first unit or the second unit in the document to be processed; the registry includes a component constructor for each unit; the first unit is an element indicated by a start tag and a closing tag, and the second unit is a self-closing tag or a pseudo tag. The second acquisition module 1120 is used to acquire the component constructor of each unit from the registry; Instantiation module 1130 is used to instantiate the unit through the component constructor of each unit to obtain the page component instance of each unit; Rendering module 1140 is used to perform page rendering processing based on multiple unit page component instances.
[0178] Optionally, the instantiation module is also used to instantiate the unit based on itself through the unit's component constructor for each unit, if the unit is the second unit, so as to obtain the unit's page component instance.
[0179] Optionally, the instantiation module is also used to obtain the element metadata of each unit and the sub-content included in the unit for each unit, if the unit is the first unit; and to instantiate the unit based on the element metadata of the unit and the sub-content included in the unit through the component builder of the unit to obtain the page component instance of the unit.
[0180] Optionally, the instantiation module is further configured to: if the registry includes a data processor corresponding to the component constructor of the unit, obtain the data processor corresponding to the component constructor of the unit from the registry and use it as the data processor of the unit; the registry includes a data processor corresponding to a component constructor that meets the target conditions; process the element metadata of the unit and the sub-content included in the unit through the data processor of the unit to obtain the preprocessed data of the unit; and instantiate the unit based on the preprocessed data of the unit through the component constructor of the unit to obtain the page component instance of the unit.
[0181] Optionally, the document to be processed includes multiple objects, which are tags or text; the instantiation module is also used to traverse each object according to the order of their positions in the document to be processed; if the unit is the first unit and the traversal reaches the closing tag of the unit, the latest tag stack and the latest content stack are obtained; the latest tag stack includes at least one tag array, which includes the element metadata of the first unit to which the traversed start tag object belongs, the start tag object is the object belonging to the start tag, and the tag array is pushed into the tag stack according to the order in which the start tags of the first unit to which they belong are traversed; the latest content stack includes the content array corresponding to each tag array, which includes the sub-content included in the first unit to which the corresponding tag array belongs, and the content array is pushed into the content stack according to the order in which the corresponding tag array is pushed into the tag stack; the latest tag stack is popped from the tag array, and the element metadata of the unit is obtained from the popped tag array; the latest content stack is popped from the content array, and the sub-content included in the unit is obtained from the popped content array.
[0182] Optionally, the instantiation module is also used to match the top tag array of the latest tag stack with the closing tag of the cell; if the top tag array of the latest tag stack matches the closing tag of the cell, the latest tag stack is popped from the tag array, and the element metadata of the cell is obtained from the popped tag array.
[0183] Optionally, the instantiation module is also used to create a tag stack and a content stack. For each object traversed, if the object is a start tag, a tag array is constructed based on the element metadata of the first unit to which the object belongs, and the latest tag stack is pushed onto the stack based on the tag array, and the content stack is pushed onto the stack based on the preset content array; if the object is text, the object is appended to the top content array of the latest content stack; if the object is a second unit, the page component instance of the object is appended to the top content array of the latest content stack.
[0184] Optionally, multiple units have a parent-child relationship; the instantiation module is also used to append the page component instance of the unit to the top content array of the latest content stack; correspondingly, the rendering module is also used to perform page rendering processing based on the page component instance of the root unit among the multiple units.
[0185] Optionally, the instantiation module is also used to push the created content stack onto the stack based on a preset root content array; correspondingly, the rendering module is also used to obtain the page component instance of the root unit from the root content array of the latest content stack.
[0186] Optionally, the instantiation module is also used to, after completing the traversal of all objects, if the depth of the latest content stack is greater than 1, process the content array in the latest content stack excluding the root content array through a preset fallback component to obtain a page fallback component instance; and append the page fallback component instance to the root content array in the latest content stack; correspondingly, the rendering module is also used to perform page rendering processing based on the page component instance of the root unit obtained from the root content array in the latest content stack and the page fallback component instance.
[0187] Optionally, the instantiation module is also used to obtain the tag name and tag attributes of the object as element metadata of the first unit to which the object belongs, if the object is a start tag.
[0188] Optionally, the instantiation module is also used to perform matching processing on the document to be processed using a set of regular expressions to match multiple objects; the set of regular expressions includes regular expressions corresponding to start tags, regular expressions corresponding to closing tags, regular expressions corresponding to self-closing tags, regular expressions corresponding to pseudo tags, and regular expressions corresponding to text.
[0189] Optionally, the first acquisition module is further configured to acquire an initial registry; the initial registry includes an initial component constructor for each of at least one initial unit; acquire adjustment information for the initial registry; the adjustment information is used to instruct the component constructors for each of the multiple units; update the initial registry based on the adjustment information, and acquire the updated initial registry as the registry.
[0190] It should be noted that the device embodiments in this application correspond to the aforementioned method embodiments. The specific principles in the device embodiments can be found in the content of the aforementioned method embodiments, and will not be repeated here.
[0191] Please see Figure 12 This diagram illustrates a structural block diagram of an electronic device for performing the methods provided in this application. The electronic device may be... Figure 1 The terminal device 400 or server 200 mentioned should be noted. Figure 12 The computer system 1200 of the electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of this application.
[0192] like Figure 12 As shown, the computer system 1200 includes a Central Processing Unit (CPU) 1201, which can perform various appropriate actions and processes, such as executing the methods described in the above embodiments, based on programs stored in Read-Only Memory (ROM) 1202 or programs loaded from storage portion 1208 into Random Access Memory (RAM) 1203. The RAM 1203 also stores various programs and data required for system operation. The CPU 1201, ROM 1202, and RAM 1203 are interconnected via a bus 1204. An Input / Output (I / O) interface 1205 is also connected to the bus 1204.
[0193] The following components are connected to I / O interface 1205: an input section 1206 including a keyboard, mouse, etc.; an output section 1207 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, etc.; a storage section 1208 including a hard disk, etc.; and a communication section 1209 including a network interface card such as a LAN (Local Area Network) card, modem, etc. The communication section 1209 performs communication processing via a network such as the Internet. A drive 1210 is also connected to I / O interface 1205 as needed. Removable media 1211, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., are installed on drive 1210 as needed so that computer program products read from them can be installed into storage section 1208 as needed.
[0194] It should be noted that, in this application, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this application, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable group thereof.
[0195] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this application. Each block in a flowchart or block diagram may represent a module, segment, or portion of code, which contains one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram or flowchart, and groups of blocks in a block diagram or flowchart, may be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a group of dedicated hardware and computer-readable instructions.
[0196] The units described in the embodiments of this application can be implemented in software or hardware, and the described units can also be located in a processor. The names of these units do not necessarily limit the specific unit itself.
[0197] In another aspect, this application also provides a computer-readable storage medium, which may be included in the electronic device described in the above embodiments; or it may exist independently and not assembled into the electronic device. The aforementioned computer-readable storage medium carries computer-readable instructions that, when executed by a processor, implement the methods in any of the above embodiments.
[0198] According to one aspect of the embodiments of this application, a computer program product is provided, the computer program product including computer-readable instructions stored in a computer-readable storage medium. A processor of an electronic device reads the computer-readable instructions from the computer-readable storage medium, and the processor executes the computer-readable instructions, causing the electronic device to perform the methods of any of the above embodiments.
[0199] In the embodiments of this application, the terms "module" or "unit" refer to a computer program product or a part of a computer program product that has a predetermined function and works together with other related parts to achieve a predetermined goal. It can be implemented wholly or partially using software, hardware (e.g., processing circuitry or memory), or a combination thereof. Similarly, a processor (or multiple processors or memory) can be used to implement one or more modules or units. Furthermore, each module or unit can be part of an overall module or unit that functions as a whole.
[0200] It should be noted that although several modules or units for the device used to perform actions have been mentioned in the detailed description above, this division is not mandatory. In fact, according to the embodiments of this application, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided and embodied by multiple modules or units.
[0201] Through the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein can be implemented by software or by combining software with necessary hardware. Therefore, the technical solutions according to the embodiments of this application can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (such as a CD-ROM, USB flash drive, external hard drive, etc.) or on a network, including several instructions to cause an electronic device (such as a personal computer, server, touch terminal, or network device, etc.) to execute the methods according to the embodiments of this application.
[0202] Other embodiments of this application will readily conceive of by those skilled in the art upon consideration of the specification and practice of the embodiments disclosed herein. This application is intended to cover any variations, uses, or adaptations of this application that follow the general principles of this application and include common knowledge or customary techniques in the art not disclosed herein. It should be understood that this application is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this application is limited only by the appended claims.
[0203] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit them. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application.
Claims
1. A page rendering method, characterized in that, The method includes: Obtain the document to be processed and the registry for rendering the page; the document to be processed includes multiple units, each unit being either a first unit or a second unit in the document to be processed; the registry includes a component constructor for each unit; the first unit is an element indicated by a start tag and a close tag, and the second unit is a self-closing tag or a pseudo tag; Retrieve the component builder for each of the aforementioned units from the registry; The unit is instantiated using the component constructor of each unit to obtain a page component instance for each unit; Page rendering is performed based on page component instances from the multiple units.
2. The method according to claim 1, characterized in that, The instantiation of the unit through the component constructor of each unit to obtain a page component instance of each unit includes: For each of the units, if the unit is the second unit, the unit is instantiated based on itself by the component constructor of the unit to obtain the page component instance of the unit.
3. The method according to claim 1, characterized in that, The instantiation of the unit through the component constructor of each unit to obtain a page component instance of each unit includes: For each of the units, if the unit is the first unit, obtain the element metadata of the unit and the sub-content included in the unit; The unit is instantiated using its component constructor, based on the unit's element metadata and the sub-content it includes, to obtain a page component instance of the unit.
4. The method according to claim 3, characterized in that, The step of instantiating the unit using the unit's component constructor, based on the unit's element metadata and the sub-content it includes, to obtain a page component instance of the unit, includes: If the registry includes the data processor corresponding to the component constructor of the unit, the data processor corresponding to the component constructor of the unit is obtained from the registry and used as the data processor of the unit; the registry includes the data processor corresponding to the component constructor that meets the target conditions; The data processor of the unit processes the element metadata of the unit and the sub-contents included in the unit to obtain the preprocessed data of the unit. The unit is instantiated using its component constructor based on its preprocessed data to obtain a page component instance of the unit.
5. The method according to claim 3, characterized in that, The document to be processed includes multiple objects, which are tags or text; if the unit is a first unit, before obtaining the element metadata of the unit and the sub-content included in the unit, the method includes: The objects are traversed according to their position in the document to be processed. If the unit is a first unit, obtaining the element metadata of the unit and the sub-content included in the unit includes: If the unit is the first unit, and the closing tag of the unit is traversed, the latest tag stack and the latest content stack are obtained; the latest tag stack includes at least one tag array, the tag array includes element metadata of the first unit to which the traversed start tag object belongs, the start tag object is an object belonging to the start tag, and the tag array is pushed into the tag stack in the order in which the start tags of the first unit to which it belongs are traversed; the latest content stack includes a content array corresponding to each tag array, the content array includes the sub-content included in the first unit to which the corresponding tag array belongs, and the content array is pushed into the content stack in the order in which the corresponding tag array is pushed into the tag stack; Perform a pop operation on the latest tag stack, and retrieve the element metadata of the unit from the popped tag array; The latest content stack is popped from the content array, and the sub-contents included in the unit are obtained from the popped content array.
6. The method according to claim 5, characterized in that, The step of popping the tag array from the latest tag stack and retrieving the element metadata of the unit from the popped tag array includes: Match the top tag array of the latest tag stack with the closed tag of the cell; If the top tag array of the latest tag stack matches the closing tag of the unit, the latest tag stack is popped, and the element metadata of the unit is obtained from the popped tag array.
7. Prior to the method according to claim 5, the characteristic is that, Before traversing the objects according to their position order in the document to be processed, the method further includes: Create a tag stack and a content stack; After traversing the objects according to their position order in the document to be processed, the method further includes: For each of the traversed objects, if the object is a start tag, a tag array is constructed based on the element metadata of the first unit to which the object belongs, and the latest tag stack is pushed onto the stack based on the tag array, and the content stack is pushed onto the stack based on the preset content array. If the object is text, append the object to the top content array of the latest content stack; If the object is the second unit, the page component instance of the object is appended to the top content array of the latest content stack.
8. The method according to claim 7, characterized in that, The multiple units have a parent-child relationship; After instantiating the unit based on its element metadata and the sub-content it includes using the unit's component constructor to obtain a page component instance of the unit, the method further includes: The page component instance of the unit is appended to the top content array of the latest content stack; The page rendering process based on the page component instances of the multiple units includes: Page rendering is performed based on the page component instance of the root unit among the multiple units.
9. The method according to claim 8, characterized in that, Before traversing the objects according to their position order in the document to be processed, the method further includes: The content stack is pushed onto the pre-defined root content array; Before performing page rendering processing based on the page component instance of the root unit among the plurality of units, the method further includes: Retrieve the page component instance of the root cell from the root content array of the latest content stack.
10. The method according to claim 9, characterized in that, Before performing page rendering processing based on the page component instance of the root unit among the plurality of units, the method further includes: After traversing all objects, if the depth of the latest content stack is greater than 1, the content array in the latest content stack excluding the root content array is processed by the preset back component to obtain the page back component instance. The page back component instance is appended to the root content array in the latest content stack; The page rendering process based on the page component instance of the root unit among the plurality of units includes: Page rendering is performed based on the page component instance of the root unit obtained from the root content array in the latest content stack and the page back component instance.
11. The method according to claim 5, characterized in that, The method further includes: If the object is a start tag, obtain the tag name and tag attributes of the object as the element metadata of the first unit to which the object belongs.
12. The method according to any one of claims 5-11, characterized in that, Before traversing the objects according to their position order in the document to be processed, the method further includes: The document to be processed is matched using a set of regular expressions to match the multiple objects; the set of regular expressions includes regular expressions corresponding to start tags, closing tags, self-closing tags, pseudo tags, and text.
13. The method according to any one of claims 1-11, characterized in that, Before obtaining the document to be processed for rendering the page and the registry, the method further includes: Obtain an initial registry; the initial registry includes an initial component constructor for each of at least one initial unit; Obtain adjustment information for the initial registry; the adjustment information is used to instruct the component constructors of the plurality of units respectively; The initial registry is updated based on the adjustment information, and the updated initial registry is obtained as the registry.
14. The method according to any one of claims 1-11, characterized in that, The registry is configured as a singleton registry.
15. A page rendering apparatus, characterized in that, The device includes: The first acquisition module is used to acquire a document to be processed for rendering a page and a registry; the document to be processed includes multiple units, and each unit is either a first unit or a second unit in the document to be processed; the registry includes a component constructor for each unit; the first unit is an element indicated by a start tag and a close tag, and the second unit is a self-closing tag or a pseudo tag; The second acquisition module is used to acquire the component builder for each of the units from the registry; An instantiation module is used to instantiate the unit through the component constructor of each unit to obtain a page component instance of each unit; The rendering module is used to perform page rendering processing based on the page component instances of the multiple units.
16. An electronic device, characterized in that, include: processor; A memory storing computer-readable instructions that, when executed by the processor, implement the method as described in any one of claims 1-14.
17. A computer-readable storage medium, characterized in that, It stores computer-readable instructions that, when executed by a processor, implement the method as described in any one of claims 1-14.
18. A computer program product, characterized in that, It includes computer-readable instructions that, when executed by a processor, implement the method of any one of claims 1-14.