DOM tree generation method and electronic device

Abstract

The present application relates to the technical field of electronics, and discloses a DOM tree generation method and an electronic device. The method is applied to an electronic device. When a Web application loads a webpage comprising a Web component, the Web component is a file in a target format, the file in the target format is a file recognizable by the electronic device, and thus, when a rendering engine invokes the Web component, the file in the target format can run directly in the rendering engine. In addition, the rendering engine comprises a function set used for creating a DOM tree of the Web component, the rendering engine can generate a rendering context used for indicating an entry of the function set, and thus, the rendering engine can invoke a function in the function set via the Web component and the entry of the function set, thereby directly acquiring, within the rendering engine, the function used for creating the DOM tree, and then completing the creation of the DOM tree within the rendering engine. Thus, interaction between the rendering engine and a node on the DOM tree of the Web component no longer needs to be performed via an execution engine, thereby significantly saving data binding overhead and conversion overhead.

Description

DOM tree generation methods and electronic devices

[0001] This application claims priority to Chinese patent application filed on November 19, 2024, with application number 202411659066.1 and entitled "DOM Tree Generation Method and Electronic Device", the entire contents of which are incorporated herein by reference. Technical Field

[0002] This application relates to the field of electronic technology, and in particular to a method for generating a DOM tree and an electronic device. Background Technology

[0003] To improve web development efficiency, web pages use numerous web components in their Hypertext Markup Language (HTML) files. Therefore, during the process of generating the Document Object Model (DOM) tree for the HTML document of a web page, the rendering engine of a web application needs to construct the DOM tree for the web components.

[0004] In related technologies, Web components are defined through JavaScript (JS) files. When the rendering engine creates the DOM tree of a Web component, it needs to perform a large number of binding and transformation operations with the execution engine of the Web application. This results in a large amount of binding and transformation overhead when the rendering engine creates the DOM tree of the Web component, which seriously affects the performance of the rendering engine in creating the DOM tree of the Web component. Summary of the Invention

[0005] This application provides a DOM tree generation method and an electronic device. When the rendering engine creates the DOM tree of a Web component, it does not need to perform binding and transformation operations with the execution engine, which can significantly improve the performance of the rendering engine in creating the DOM tree of a Web component.

[0006] In a first aspect, a DOM tree generation method is provided for use on electronic devices. The method includes: a web application loading a first webpage containing a web component, the web component being a file in a target format that is recognizable by the electronic device; a rendering engine responding to a creation instruction to generate a rendering context for the web component; the rendering engine including a set of functions for creating the DOM tree of the web component, the creation instruction for creating the DOM tree for the web component, and the rendering context for indicating the entry point of the function set; during the execution of the file in the target format within the rendering engine, the rendering engine calls functions in the function set through the entry point of the web component and the function set to create the DOM tree of the web component.

[0007] In the above scheme, during the process of loading the first webpage including the web component in the web application, the rendering engine detects the rendering context of the web component generated when the creation instruction is executed. This rendering context can be used to indicate the entry points of the function set needed to create the DOM tree of the web component. Based on this, during the process of running the target format file in the rendering engine, the rendering engine can call functions in the function set through the entry points of the web component and the function set, thereby creating the DOM tree of the web component through the functions in the function set.

[0008] In this scheme, because the rendering engine obtains the target format file of the Web component—that is, a file recognizable by the electronic device—the target format file of the Web component can be directly executed within the rendering engine when the rendering engine calls the Web component. Based on this, the rendering engine also generates a rendering context based on the function set to indicate the entry point of the function set. This allows the functions used to create the DOM tree of the Web component to be directly obtained within the rendering engine when constructing the DOM tree. In other words, the capabilities required to create the DOM tree of the Web component can be directly obtained from the rendering engine, thus enabling the construction of the Web component's DOM tree to be completed within the rendering engine. This eliminates the need for the execution engine to interact with nodes on the DOM tree of the Web component, saving significant data binding and transformation overhead. In other words, the rendering engine does not need to interact with the execution engine when constructing the DOM tree of the Web component, significantly improving the efficiency of the rendering engine in constructing the DOM tree and thus significantly improving the performance of the rendering engine in constructing the DOM tree.

[0009] Optionally, the first webpage includes multiple web components, some of which are files in target format and others are files in source code format.

[0010] In one possible implementation, the rendering engine of the web application obtains the web component of the first webpage, including: the rendering engine obtaining the web component of the first webpage; the web component of the first webpage being a file in a target format from the server; and the rendering engine loading the target format file of the web component into the rendering engine's registry.

[0011] In this implementation, the rendering engine directly obtains the target format file of the Web component provided by the server. This improves the efficiency of obtaining the target format file, thereby improving the efficiency of generating the Web component's DOM tree. Furthermore, after obtaining the target format file of the Web component, it is loaded into the rendering engine's registry. This allows the rendering engine to directly load the target format file when the DOM tree of the Web component needs to be created, further improving the efficiency of generating the Web component's DOM tree.

[0012] In another possible implementation, the Web component includes the structural relationships between multiple child tags and lifecycle functions; the Web component's DOM tree is created by calling functions in the function set through the entry point of the Web component and the function set, including: the rendering engine calls functions in the function set through the Web component's lifecycle functions and the entry point of the function set, and creates the Web component's DOM tree according to the structural relationships between multiple child tags; there is a one-to-one correspondence between the multiple child nodes of the Web component's DOM tree and the multiple child tags.

[0013] In this implementation, when the rendering engine creates the DOM tree of the Web component, it calls functions in the function set through the Web component's lifecycle functions and the entry point of the function set, and creates the DOM tree of the Web component based on the structural relationships between multiple tags of the Web component. This ensures that there is a one-to-one correspondence between multiple nodes and multiple tags in the DOM tree of the Web component, which helps to ensure the accuracy of the DOM tree of the Web component.

[0014] In another possible implementation, the function set is also used to mount the DOM tree of the Web component, and the rendering context is also used to indicate the parent node of the Web component; the method also includes: the rendering engine creating the DOM tree of the first web page based on the obtained HTML document of the first web page; the DOM tree of the first web page includes the parent node of the Web component; the rendering engine responds to the mounting instruction of the Web component, calls the function in the function set through the entry point of the Web component and the function set, mounts the DOM tree of the Web component onto the parent node of the Web component, and obtains the mounted DOM tree of the first web page.

[0015] In this implementation, since the functions in the function set can be used to mount the DOM tree of the Web component, after the rendering engine detects the mount instruction, it obtains the rendering context through the Web component and calls the functions in the function set through the entry point of the function set. This mounts the DOM tree of the Web component onto the parent node of the Web component indicated by the rendering up and down directions. In other words, the rendering engine does not need to interact with the execution engine when mounting the DOM tree of the Web component. This significantly improves the efficiency of the rendering engine in mounting the DOM tree of the Web component, thereby significantly improving the performance of the rendering engine in mounting the DOM tree of the Web component.

[0016] In another possible implementation, the method also includes: the rendering engine rendering the first webpage based on the DOM tree of the first webpage after mounting.

[0017] In another possible implementation, generating the rendering context of the Web component includes: the rendering engine creating an extended DOM node for the Web component; the rendering engine mounting the extended DOM node of the Web component onto the DOM tree of the first webpage; the extended DOM node of the Web component being the parent node of the Web component; and the rendering engine generating the rendering context of the Web component through the extended DOM node of the Web component.

[0018] In this implementation, on the one hand, the extended DOM node can serve as the node for exchange between the Web component and the execution engine, separating the child nodes of the Web component's DOM tree from the nodes outside the Web component's DOM tree.

[0019] On the other hand, since the extended DOM nodes of the Web component are mounted on the DOM tree of the first web page, the rendering engine can obtain relevant information about the DOM tree of the first web page through the extended DOM nodes of the Web component. Based on this, the rendering engine can generate the rendering context of the Web component through the extended DOM nodes of the Web component, and can use this relevant information as the content of the rendering context, thereby helping to provide richness of the rendering context.

[0020] In another possible implementation, generating the rendering context of the Web component includes: the rendering engine setting the entry point of the function set; and the rendering engine generating the rendering context of the Web component based on the entry point of the function set.

[0021] In another possible implementation, the method further includes: the web application's execution engine creating a JS interface for the web component; the web component's JS interface being used to obtain the user's actions performed on the web component on the first webpage; and the execution engine binding the web component's JS interface to the web component's extended DOM nodes.

[0022] In this implementation, the execution engine constructs a JavaScript interface for the Web component to obtain user actions performed on the Web component on the first webpage. By binding the Web component's JavaScript interface to its extended DOM nodes, the JavaScript interface can interact with these nodes. Once the Web component's JavaScript interface receives the action, it can transmit it to the extended DOM nodes, thus relaying the user's actions to the rendering engine. The rendering engine can then load the Web component's DOM tree based on the user's actions, ensuring that the Web component displayed on the first webpage corresponds to the user's actions.

[0023] In another possible implementation, the function set is also used to unload the DOM tree of the Web component. The method further includes: the execution engine obtaining a first operation through the JS interface of the Web component, the first operation being used to instruct the unloading of the Web component; and the rendering engine calling functions in the function set through the extended DOM node of the Web component and the entry point of the function set to unload the DOM tree of the Web component.

[0024] In this implementation, after the execution engine obtains the first operation through the Web component's JS interface, it can pass the content of the first operation instruction to the Web component's extended DOM node. This allows the rendering engine to obtain the user's unloading operation performed on the Web component on the first webpage through the Web component's extended DOM node. Consequently, the rendering engine can load the user's unloading operation into the Web component's DOM tree, ensuring that the Web component presented on the first webpage corresponds to the user's operation. Furthermore, since the Web component's extended DOM node can call functions in the function set through the function set's entry point to unload the Web component's DOM tree, the rendering engine does not need to interact with the execution engine when unloading the Web component's DOM tree. This significantly improves the efficiency of the rendering engine in unloading the Web component's DOM tree, thereby significantly improving the performance of the rendering engine in unloading the Web component's DOM tree.

[0025] In another possible implementation, the function set is also used to transfer the DOM tree of the Web component. The method further includes: the execution engine obtaining a second operation through the JS interface of the Web component, the second operation being used to instruct the DOM tree of the Web component to be transferred to the DOM tree of the second webpage; and the rendering engine calling functions in the function set through the extended DOM node of the Web component and the entry point of the function set to mount the DOM tree of the Web component onto the DOM tree of the second webpage.

[0026] In this implementation, after the execution engine obtains the second operation through the JS interface of the Web component, it can pass the content of the second operation instruction to the extended DOM node of the Web component. This allows the rendering engine to obtain the transfer operation performed by the user on the Web component on the first webpage through the extended DOM node. The rendering engine can then load the user's transfer operation into the DOM tree of the Web component, ensuring that the Web component presented on the first webpage corresponds to the user's operation. Furthermore, since the extended DOM node of the Web component can call functions in the function set through the function set's entry point to transfer the Web component's DOM tree, the rendering engine does not need to interact with the execution engine when transferring the Web component's DOM tree. This significantly improves the efficiency of the rendering engine in transferring the Web component's DOM tree, thereby significantly improving the performance of the rendering engine in transferring the Web component's DOM tree.

[0027] In another possible implementation, the function set is also used to change the attribute values ​​of the Web component's DOM tree. This method further includes: the execution engine obtaining a third operation through the Web component's JS interface, the third operation being used to instruct the value of the Web component's first attribute to be changed to the first value; and the rendering engine calling the function in the function set through the Web component's extended DOM node and the entry point of the function set to change the attribute value of the first attribute on the Web component's DOM tree to the first value.

[0028] In this implementation, after the execution engine obtains the third operation through the JS interface of the Web component, it can pass the content of the third operation instruction to the extended DOM node of the Web component. This allows the rendering engine to obtain the attribute value change operation performed by the user on the Web component on the first webpage through the extended DOM node of the Web component. Consequently, the rendering engine can load the attribute value operation performed by the user on the Web component into the DOM tree of the Web component, ensuring that the Web component presented on the first webpage corresponds to the operation performed by the user. Furthermore, since the extended DOM node of the Web component can call functions in the function set through the entry point of the function set to change the attribute value of the first attribute of the Web component's DOM tree, the rendering engine does not need to interact with the execution engine when changing the attribute value of the first attribute of the Web component's DOM tree. This significantly improves the efficiency of the rendering engine in changing the attribute value of the first attribute of the Web component's DOM tree, thus significantly improving the performance of the rendering engine in changing the attribute value of the first attribute of the Web component's DOM tree.

[0029] In another possible implementation, the third operation is also used to instruct the value of the first attribute of the Web component on the first webpage before the change to the second value; changing the value of the first attribute of the Web component's DOM tree to the first value includes: if the value of the first attribute in the Web component's DOM tree before the change is the same as the second value, the rendering engine changes the value of the first attribute in the Web component's DOM tree to the first value through the extended DOM node of the Web component.

[0030] In another possible implementation, the creation instruction includes a target identifier; the rendering engine responds to the creation instruction by generating a rendering context for the Web component, including: if the target identifier meets the component identifier format, the rendering engine responds to the creation instruction by generating a rendering context for the Web component; the component identifier format is used to characterize the format of the identifier of the Web component.

[0031] In this implementation, after the rendering engine receives the creation instruction, it first determines whether the target identifier indicated by the creation instruction meets the component identifier format, thereby determining whether the target identifier is the identifier of the Web component, which helps to ensure the accuracy and reliability of subsequent operations.

[0032] In another possible implementation, if the target identifier meets the component identifier format, the rendering engine responds to the creation instruction and generates the rendering context of the Web component, including: if the target identifier meets the component identifier format and the rendering engine's registry includes a file of the target format corresponding to the target identifier, the rendering engine generates the rendering context of the Web component.

[0033] In this implementation, after the rendering engine obtains the creation instruction of the Web component, it first determines whether the target identifier indicated by the creation instruction meets the component identifier format. If the target identifier indicated by the creation instruction meets the component identifier format, that is, if the target identifier is the identifier of the Web component, it then determines whether the registry contains a file in the target format corresponding to the target identifier, that is, whether the registry contains a file in the target format of the Web component. Only if the registry contains a file in the target format of the Web component will the rendering context of the Web component be generated. This helps to ensure that the DOM tree of the Web component can be created through the target format file of the Web component, thereby helping to ensure the necessity of generating the rendering context of the Web component.

[0034] In another possible implementation, the rendering engine obtains the Web component of the first webpage, including: the rendering engine obtains the Web component of the first webpage, where the Web component of the first webpage is a source code file from the server; the execution engine of the web application converts the source code file into a target format file; and the rendering engine loads the target format file of the Web component into the rendering engine's registry.

[0035] In this implementation, the rendering engine obtains the source code file of the Web component provided by the server. Then, the execution engine converts the source code file into the target format file to obtain the target format file of the Web component. This helps to improve the diversity of ways to obtain the target format file of the Web component.

[0036] In another possible implementation, the lifecycle functions include a creation function, which is used to create the DOM tree of the Web component; by calling functions in the function set through the Web component's lifecycle functions and the entry point of the function set, and creating the DOM tree of the Web component according to the structural relationship between multiple child tags, including: calling functions in the function set through the Web component's creation function and the entry point of the function set, and creating the DOM tree of the Web component according to the structural relationship between multiple child tags.

[0037] In another possible implementation, the rendering engine responds to the mounting instruction of the Web component by calling functions in the function set through the entry point of the Web component and the function set, thereby mounting the DOM tree of the Web component onto the parent node of the Web component. This includes: the rendering engine responds to the mounting instruction of the Web component by calling functions in the function set through the lifecycle functions of the Web component and the entry point of the function set, thereby mounting the DOM tree of the Web component onto the parent node of the Web component.

[0038] In another possible implementation, the lifecycle functions include a mounting function, which is used to mount the DOM tree of the Web component; by calling functions in the function set through the Web component's lifecycle functions and the entry point of the function set, the DOM tree of the Web component is mounted on the Web component as the parent node, including: by calling functions in the function set through the Web component's mounting function and the entry point of the function set, the DOM tree of the Web component is mounted on the Web component's parent node.

[0039] In another possible implementation, the DOM tree of the Web component is unloaded by calling functions in the function set through the entry point of the Web component's extended DOM node and the function set. This includes: the execution engine sending an unloading instruction for the Web component to the extended DOM node of the Web component through the JS interface of the Web component; the rendering engine obtaining the unloading instruction for the Web component through the extended DOM node of the Web component; and the rendering engine responding to the unloading instruction of the Web component by calling functions in the function set through the entry point of the Web component and the function set to unload the DOM tree of the Web component.

[0040] Another possible implementation involves unloading the DOM tree of the Web component by calling functions in the function set through the entry point of the Web component and the function set. This includes unloading the DOM tree of the Web component by calling functions in the function set through the lifecycle functions of the Web component and the entry point of the function set.

[0041] In another possible implementation, the lifecycle functions also include an unload function, which is used to unload the DOM tree of the Web component; the DOM tree of the Web component is unloaded by calling functions in the function set through the entry point of the Web component's lifecycle functions and the function set, including: unloading the DOM tree of the Web component by calling functions in the function set through the entry point of the Web component's unload function and the function set.

[0042] Another possible implementation involves unloading the DOM tree of the Web component, including unloading the extended DOM nodes of the Web component and the DOM tree of the Web component.

[0043] Another possible implementation involves mounting the Web component's DOM tree onto the second webpage's DOM tree by calling functions in the function set through the Web component's extended DOM node and the function set's entry point. This includes: the execution engine sending a transfer instruction from the Web component to the Web component's extended DOM node through the Web component's JS interface; the rendering engine obtaining the Web component's transfer instruction through the Web component's extended DOM node; and the rendering engine responding to the Web component's transfer instruction by calling functions in the function set through the Web component and the function set's entry point, thereby mounting the Web component's DOM tree onto the second webpage's DOM tree.

[0044] Another possible implementation involves calling functions in the function set through the entry point of the Web component and the function set, thereby mounting the DOM tree of the Web component onto the DOM tree of the second webpage. This includes: calling functions in the function set through the lifecycle functions of the Web component and the entry point of the function set, thereby mounting the DOM tree of the Web component onto the DOM tree of the second webpage.

[0045] In another possible implementation, the lifecycle functions include transfer functions, which are used to transfer the DOM tree of the Web component from the DOM tree of one webpage to the DOM tree of another webpage; by calling functions in the function set through the Web component's lifecycle functions and the entry point of the function set, the DOM tree of the Web component is mounted onto the DOM tree of the second webpage, including: by calling functions in the function set through the Web component's transfer functions and the entry point of the function set, the DOM tree of the Web component is mounted onto the DOM tree of the second webpage.

[0046] In another possible implementation, the second operation is also used to indicate the first parent node of the Web component, and the DOM tree of the second webpage includes the first parent node of the Web component; mounting the DOM tree of the Web component onto the DOM tree of the second webpage includes: mounting the DOM tree of the Web component onto the first parent node of the Web component.

[0047] Another possible implementation involves mounting the DOM tree of the Web component onto the DOM tree of the second webpage, including mounting the extended DOM nodes of the Web component and the DOM tree of the Web component onto the DOM tree of the second webpage.

[0048] Another possible implementation involves mounting the extended DOM node and DOM tree of the Web component onto the DOM tree of the second webpage, including mounting the extended DOM node and DOM tree of the Web component onto the first parent node of the Web component.

[0049] In another possible implementation, the value of the first attribute on the DOM tree of the Web component is changed to the first value by calling a function in the function set through the entry point of the Web component's extended DOM node and the function set. This includes: the execution engine sending the Web component's attribute change instruction to the Web component's extended DOM node through the Web component's JS interface; the rendering engine obtaining the Web component's attribute change instruction through the Web component's extended DOM node; and the rendering engine responding to the Web component's attribute change instruction by calling a function in the function set through the entry point of the Web component and the function set to change the value of the first attribute on the DOM tree of the Web component to the first value.

[0050] Another possible implementation involves calling a function in the function set through the entry point of the Web component and the function set to change the value of the first attribute on the DOM tree of the Web component to the first value. This includes calling a function in the function set through the lifecycle function of the Web component and the entry point of the function set to change the value of the first attribute on the DOM tree of the Web component to the first value.

[0051] In another possible implementation, the lifecycle functions include property change functions, which are used to change the property value of the first property in the DOM tree of the Web component; by calling functions in the function set through the entry point of the Web component's lifecycle functions and function set, the property value of the first property in the DOM tree of the Web component is changed to the first value, including: by calling functions in the function set through the entry point of the Web component's property change functions and function set, the property value of the first property in the DOM tree of the Web component is changed to the first value.

[0052] Secondly, a DOM tree generation apparatus is provided, comprising: functional units for executing any of the methods provided in the first aspect, wherein the actions performed by each functional unit are implemented by hardware or by hardware executing corresponding software. For example, the DOM tree generation apparatus may include: a loading module, a generation module, and a creation module; the loading module is used to load a first webpage including a Web component, wherein the Web component is a file in a target format, and the target format file is a file recognizable by an electronic device; the generation module is used to generate a rendering context for the Web component in response to a creation instruction; the rendering engine includes a function set for creating the DOM tree of the Web component, the creation instruction is used to create the DOM tree for the Web component, and the rendering context is used to indicate the entry point of the function set; the creation module is used to create the DOM tree of the Web component by calling functions in the function set through the Web component and the entry point of the function set during the execution of the target format file in the rendering engine.

[0053] Thirdly, a web application is provided, the rendering engine of which includes a set of functions for creating a DOM tree of web components, the web application being installed on an electronic device such that the electronic device performs any of the methods provided in the first aspect above.

[0054] Fourthly, a web application is provided, the rendering engine of which includes an extension module and a rendering module; the rendering engine also includes a function set for creating a DOM tree for web components; the web application loads a first webpage including web components, the web components being a target format file that is recognizable by an electronic device; the extension module is used to generate a rendering context for the web components in response to creation instructions; the creation instructions are used to create a DOM tree for the web components, and the rendering context is used to indicate the entry point of the function set; the rendering module is used to create the DOM tree for the web components by calling functions in the function set through the entry point of the web components and the function set during the execution of the target format file in the rendering engine.

[0055] Fifthly, an electronic device is provided as a source device for screen projection. The electronic device includes: a display screen, one or more processors, one or more memories, and one or more programs; wherein the processor is coupled to the display screen and the memory, and the one or more programs are stored in the memory. When the electronic device is running, the processor executes the one or more programs stored in the memory to cause the electronic device to perform any of the methods provided in the first aspect.

[0056] Optionally, the electronic device may also include a communication interface for communicating with other electronic devices. The communication interface may be a transceiver, input / output interface, interface circuit, output circuit, input circuit, pins, or related circuits. The communication interface, display screen, and memory may be coupled to the processor, or they may be independent of the processor.

[0057] Sixthly, an electronic device is provided, which has the function of implementing any of the methods provided in the first aspect above. This function can be implemented by hardware, or by hardware executing corresponding software. The hardware or software includes one or more modules corresponding to the functions described above.

[0058] In a seventh aspect, a computer program product is provided, comprising: a computer program or instructions that, when executed on an electronic device, cause the electronic device to perform any of the methods provided in the first aspect above.

[0059] Eighthly, a computer-readable storage medium is provided, comprising a computer program that, when executed on an electronic device, causes the electronic device to perform any of the methods provided in the first aspect above.

[0060] A ninth aspect provides a chip system including at least one processor and at least one interface circuit, the at least one interface circuit being used to perform transceiver functions and send instructions to at least one processor, wherein when at least one processor executes instructions, at least one processor performs any of the methods provided in the first aspect above.

[0061] The technical effects of any of the implementation methods in aspects two through nine can be found in the technical effects of different designs in aspect one, and will not be repeated here. Attached Figure Description

[0062] Figure 1 is a schematic diagram of one of the related technologies for constructing a DOM tree;

[0063] Figure 2 is a schematic diagram of the architecture of a communication system provided in an embodiment of this application;

[0064] Figure 3 is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of this application;

[0065] Figure 4 is a schematic diagram of the software architecture of an electronic device provided in an embodiment of this application;

[0066] Figure 5 is a flowchart of a DOM tree generation method provided in an embodiment of this application;

[0067] Figure 6 is one of the schematic diagrams of constructing a webpage DOM tree according to an embodiment of this application;

[0068] Figure 7 is a second schematic diagram of constructing a webpage DOM tree according to an embodiment of this application;

[0069] Figure 8 is one of the schematic diagrams for the development of a Web component provided in an embodiment of this application;

[0070] Figure 9 is a second schematic diagram of the development of a Web component provided in an embodiment of this application;

[0071] Figure 10 is a schematic diagram of importing a Web component according to an embodiment of this application;

[0072] Figure 11 is a schematic diagram of constructing a component DOM tree according to an embodiment of this application;

[0073] Figure 12 is a schematic diagram of a management component DOM tree provided in an embodiment of this application;

[0074] Figure 13 is a schematic diagram of a DOM tree generation device provided in an embodiment of this application;

[0075] Figure 14 is a schematic diagram of an electronic device provided in an embodiment of this application;

[0076] Figure 15 is a schematic diagram of a chip system provided in an embodiment of this application. Detailed Implementation

[0077] To facilitate understanding, the interpretation of some terms involved in the embodiments of this application will be explained first.

[0078] In the embodiments of this application, the terminology used is for the purpose of describing particular embodiments only and is not intended to be limiting of the application. As used in the specification and appended claims of this application, the singular expressions “a,” “an,” “the,” “the,” “the,” and “this” are intended to include expressions such as “one or more” unless the context clearly indicates otherwise. It should also be understood that in the following embodiments of this application, “at least one” and “one or more” refer to one or more (including two).

[0079] References to "one embodiment" or "some embodiments" in this specification mean that one or more embodiments of this application include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized. The term "connection" includes direct connections and indirect connections, unless otherwise stated. "First" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated.

[0080] In the embodiments of this application, the words "exemplarily" or "for example" are used to indicate examples, illustrations, or explanations. Any embodiment or design described as "exemplarily" or "for example" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or design solutions. Specifically, the use of the words "exemplarily" or "for example" is intended to present the relevant concepts in a specific manner.

[0081] The technical solutions provided in the embodiments of this application will now be described in detail with reference to the accompanying drawings.

[0082] To address issues such as component reuse and encapsulation in web applications, the World Wide Web Consortium (W3C) proposed Web Components and the Web Component standard. The Web Component standard specifies custom elements, the Shadow DOM, and HTML templates. Custom elements can be used to define HTML tags (hereinafter referred to as custom HTML tags) and their behavior and styles.

[0083] When component developers create web components based on the Web Components standard, the resulting web components can include component templates, component attributes, and component behaviors. Component templates are defined using HTML templates as specified in the Web Components standard. Component templates indicate the structure and style of the web component; for example, they indicate the multiple tags included in the web component, the parent-child relationships between tags, and the Cascading Style Sheets (CSS) used by the web component. Component behaviors are defined through lifecycle functions in custom elements defined in the web component. Component behaviors indicate the operations that need to be performed during specific lifecycle stages, such as the operations that need to be performed when a user opens a webpage or when a user clicks on a web component on a webpage. Component attributes are defined through the `observedAttributes` field in custom elements defined in the web component. Component attributes indicate special properties on the web component; modifying the value of a special attribute triggers a component behavior.

[0084] For example, because Web components enable modularity and reusability, in order to improve the development efficiency of Web applications, front-end developers use a large number of Web components A in the HTML document A of Web page A when developing Web page A.

[0085] When webpage A needs to be displayed, the rendering engine of the web application uses web component A, where web component A is a JS file. Since the rendering engine cannot recognize JS files, after obtaining the JS file of web component A, it sends it to the execution engine of the web application. Upon receiving the JS file, the execution engine runs it, obtains the DOM tree creation operation indicated by the JS file, and acquires the JS interface of web component A. Then, the execution engine passes the data needed to create the DOM tree to the rendering engine, such as the relevant data and functions used for DOM tree creation from the JS file of web component A. After receiving the data, the rendering engine executes the DOM tree creation operation for web component A, obtaining the DOM of web component A. The DOM tree of web component A includes multiple child nodes A, such as A1, ..., An as shown in Figure 1. This transforms the DOM tree creation operation executed by the execution engine into the DOM tree creation operation executed by the rendering engine, thus obtaining the DOM tree of web component A.

[0086] Building upon this, the execution engine also binds the JavaScript interfaces of Web component A to the DOM tree of those interfaces. The JavaScript interfaces of Web component A include the JavaScript interfaces of each child node A in the DOM tree of Web component A. For example, the JavaScript interfaces of Web component A include the JavaScript interface of A1 (i.e., A1'), ..., the JavaScript interface of An (i.e., An'). Based on this, the execution engine binds A1 to A1', ..., and An to An', thus obtaining the correspondence between A1 and A1', ..., and An and An'.

[0087] This shows that in related technologies, when the rendering engine creates the DOM tree of a Web component, it needs to perform a large number of binding and transformation operations with the execution engine. This results in a large amount of binding and transformation overhead when the rendering engine creates the DOM tree of the Web component, which seriously affects the performance of the rendering engine in creating the DOM tree of the Web component.

[0088] In view of this, embodiments of this application provide a DOM tree generation method. During the process of a web application loading a webpage including web components, when the rendering engine detects a creation instruction, it generates a rendering context for the web component. This rendering context can be used to indicate the entry points of the function set required to create the DOM tree of the web component. Based on this, during the process of running a target format file in the rendering engine, the rendering engine can call functions in the function set through the entry points of the web component and the function set, thereby creating the DOM tree of the web component through the functions in the function set.

[0089] In this scheme, because the rendering engine obtains the target format file of the Web component, and the target format file is a file that electronic devices can recognize, the target format file of the Web component can be directly executed within the rendering engine when the rendering engine calls the Web component. Furthermore, the rendering engine generates a rendering context based on the function set to indicate the entry point of the function set. This allows the functions used to create the DOM tree of the Web component to be directly obtained within the rendering engine when building the DOM tree. In other words, the capabilities required to create the DOM tree of the Web component can be directly obtained from the rendering engine, thus enabling the construction of the Web component's DOM tree to be completed within the rendering engine. This eliminates the need for the execution engine to interact with the nodes on the DOM tree of the Web component, saving significant data binding and transformation overhead. In other words, the rendering engine does not need to interact with the execution engine when building the DOM tree of the Web component, which significantly improves the efficiency of the rendering engine in constructing the DOM tree of the Web component, thereby significantly improving the performance of the rendering engine in constructing the DOM tree.

[0090] It should be noted that the various implementations of the above DOM tree generation method will be introduced in the embodiments shown in Figures 5 to 12, and will not be detailed here.

[0091] Next, the system architecture involved in the technical solution provided by the embodiments of this application will be further described in conjunction with the accompanying drawings.

[0092] Figure 2 is a schematic diagram of the architecture of a communication system for applying the DOM tree generation method provided in this application. As shown in Figure 2, the communication system includes an electronic device 201 and a server 202, wherein the electronic device 201 and the server 202 can communicate over a network. The electronic device can obtain the HTML document of the webpage and the target format file of the Web component from the server, and generate the DOM tree of the Web component and the DOM tree of the webpage using the DOM tree generation method provided in this application.

[0093] For ease of distinction, the "DOM tree of the Web component" in this application embodiment can be called the component DOM tree, and the "DOM tree of the webpage" can be called the webpage DOM tree, which will not be repeated hereafter.

[0094] In this embodiment of the application, the electronic device 201 can be a device with web page rendering capabilities and a screen. For example, the electronic device 201 can be a mobile phone, tablet computer, wearable device (such as a smartwatch), smart home device, in-vehicle device (such as an in-vehicle computer), smart screen, smart cockpit, handheld computer, PC, game console, smart city device, augmented reality (AR) device, virtual reality (VR) device, ultra-mobile personal computer (UMPC), netbook, personal digital assistant (PDA), television, smart large screen, laptop computer, desktop computer or projector, etc.

[0095] For example, an electronic device 201 has a web application installed on it, and the electronic device 201 renders web pages through the web application.

[0096] For example, the operating system installed on the electronic device 201 in this application embodiment may include, but is not limited to: Or other operating systems.

[0097] It should be noted that this embodiment does not impose any special restrictions on the device form of electronic device 201 or the operating system installed on electronic device 201; the above is merely an illustrative example.

[0098] In this embodiment of the application, server 202 may be blade server 202, high-density server 202, rack server 202 or tower server 202, etc.

[0099] It should be noted that this application does not limit the device form of server 202; the above is merely an illustrative example.

[0100] The hardware structure of the electronic device 201 in the communication system shown in Figure 2 is described below as an example. Figure 3 shows a schematic diagram of the hardware structure of the electronic device 201 provided in an embodiment of this application.

[0101] As shown in Figure 3, the electronic device 201 may include a processor 301, an external memory interface 302, an internal memory 303, a universal serial bus (USB) interface 304, a charging management module 305, a power management module 306, a battery 307, a mobile communication module 308, a wireless communication module 309, an audio module 310, a sensor module 311, a button 312, a motor 313, an indicator 314, a camera 315, a display screen 316, a subscriber identification module (SIM) card interface 317, an antenna 1, and an antenna 2, etc.

[0102] In this embodiment, the processor 301 may include one or more processing units. These different processing units may be independent devices, or they may be integrated into one or more processors.

[0103] For example, processor 301 may include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural network processing unit (NPU), etc.

[0104] For example, processor 301 may include one or more interfaces. These interfaces may be used to connect other components, such as external memory interface 302, internal memory 303, universal serial bus interface 304, etc.

[0105] In this embodiment, the processor 301 may also include a memory for storing instructions and data. For example, the memory in the processor 301 may be a cache memory. This memory can store instructions or data that the processor 301 has just used or is recurring. If the processor 301 needs to use the instruction or data again, it can directly retrieve it from this memory. This avoids repeated accesses, thereby reducing the processor 301's waiting time and improving system efficiency.

[0106] In some embodiments, the processor 301 can be used to implement web page rendering operations. These operations may include constructing the DOM tree of the web page, constructing a rendering tree, layout, and drawing the rendering tree. Specifically, during the DOM tree construction stage, the electronic device can construct a component DOM tree based on the DOM generation method provided in this application, whereby the component DOM tree is a subtree of the web page DOM tree.

[0107] In this embodiment, the power management module 306 is connected to the battery 307, and the charging management module 305 and processor 301 are connected. The power management module 306 receives input from the battery 307 and / or the charging management module 305 to power the processor 301, internal memory 303, display screen 316, camera 315, and wireless communication module 309, etc. The charging management module 305 receives charging input from a charger. The charger can be a wireless charger or a wired charger.

[0108] In this embodiment, the wireless communication function of the electronic device 201 can be implemented through antenna 1, antenna 2, mobile communication module 308, wireless communication module 309, modem processor, and baseband processor. Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals.

[0109] The mobile communication module 308 can provide solutions for wireless communication, including 2G / 3G / 4G / 5G, applied to the electronic device 201. The mobile communication module 308 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc. Exemplarily, at least some functional modules of the mobile communication module 308 may be housed in the processor 301. For example, at least some functional modules of the mobile communication module 308 and at least some modules of the processor 301 may be housed in the same device.

[0110] The wireless communication module 309 can provide solutions for wireless communication applications on the electronic device 201, including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), and infrared (IR) technologies. The wireless communication module 309 can be one or more devices integrating at least one communication processing module.

[0111] For example, antenna 1 of electronic device 201 is coupled to mobile communication module 308, and antenna 2 is coupled to wireless communication module 309, enabling electronic device 201 to communicate with networks and other devices via wireless communication technology. This wireless communication technology may include Global System for Mobile Communications (GSM), General Packet Radio Service (GPRS), Code Division Multiple Access (CDMA), Wideband Code Division Multiple Access (WCDMA), Time-Division Code Division Multiple Access (TD-CDMA), Long Term Evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technologies, etc.

[0112] In this embodiment, the mobile communication module 308 and / or wireless communication module 309 can be used to transmit data. Specifically, the mobile communication module 308 and / or wireless communication module 309 of the electronic device can be used to transmit a request to the server, the request being for retrieving the HTML document of a specified webpage. Furthermore, the mobile communication module 308 and / or wireless communication module 309 of the electronic device can also be used to receive the HTML document of the specified webpage returned by the server.

[0113] In this embodiment, the electronic device 201 can implement display functions through a GPU, a display screen 316, and an application processor. The display screen 316 is used to display web pages, images, videos, etc. The display screen 316 includes a display panel. For example, the electronic device 201 may include one or N display screens 316, where N is a positive integer greater than 1.

[0114] In this embodiment, the internal memory 303 can be used to store computer executable program code, which includes instructions. The internal memory 303 may include a program storage area and a data storage area. The program storage area may store the operating system, at least one application program required for a function (such as sound playback, image playback, etc.), etc. The data storage area may store data created during the use of the electronic device 201. Furthermore, the internal memory 303 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc. The processor 301 executes various functional applications and data processing of the electronic device 201 by running instructions stored in the internal memory 303 and / or instructions stored in memory disposed in the processor.

[0115] Optionally, the sensor module 311 may include one or more of the following: pressure sensor, gyroscope sensor, barometric pressure sensor, magnetic sensor, accelerometer, distance sensor, proximity sensor, fingerprint sensor, temperature sensor, touch sensor, ambient light sensor, bone conduction sensor, etc.

[0116] In this embodiment, the external memory interface 302 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 201.

[0117] Buttons 312 include a power button, volume buttons, etc. Buttons 312 can be mechanical buttons or touch buttons. A motor 313 can generate vibration feedback. An indicator 314 can be an indicator light, used to indicate charging status, battery level changes, messages, missed calls, notifications, etc. A SIM card interface 317 is used to connect a SIM card.

[0118] In this embodiment, the electronic device 201 can implement shooting functions through an ISP, camera 315, video codec, GPU, display screen 316, and application processor. The video codec is used to compress or decompress digital video. The electronic device 201 can support one or more video codecs. Thus, the electronic device 201 can play or record videos in various encoding formats.

[0119] In this embodiment, the electronic device 201 can implement audio functions through an audio module 310 and an application processor, such as music playback and recording. The audio module 310 can be used to convert digital audio information into analog audio signals for output, or to convert analog audio input into digital audio signals. The audio module 310 can also be used to encode and decode audio signals. In some embodiments, the audio module 310 can be located in the processor 301, or some functional modules of the audio module 310 can be located in the processor 301.

[0120] It is understood that the structure of the electronic device 201 illustrated in the embodiments of this application, such as the structure shown in FIG3, does not constitute a specific limitation on the electronic device 201. In other embodiments of this application, the electronic device 201 may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0121] In this embodiment, the software architecture of the electronic device 201 can adopt a layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture. This embodiment uses a layered architecture as an example to illustrate the software architecture of the electronic device 201.

[0122] Optionally, a layered architecture can divide the software into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. For example, electronic device 201 may include an application layer.

[0123] Figure 4 shows a schematic diagram of a software architecture of an electronic device 201 provided in an embodiment of this application.

[0124] In this embodiment, the application layer may include a series of application packages. As shown in Figure 4, the application packages may include applications such as video applications, WLAN, and web applications.

[0125] For example, when a web application runs on electronic device 201, electronic device 201 can display the web page corresponding to the web application. Users can perform operations on the web page, and electronic device 201 responds to the user's operations by rendering the web page to present a display effect that matches the user's operations.

[0126] In this embodiment, the web application may include a web kernel, which includes a rendering engine and an execution engine. For example, the execution engine may be a JavaScript engine. The rendering engine can be used to execute the DOM tree generation method provided in this application to generate a component DOM tree, and subsequently, a webpage DOM tree.

[0127] In some embodiments, the rendering engine includes a set of functions that load the component's DOM tree; that is, the set of functions includes functions for loading the component's DOM tree. For example, the set of functions could be used to create new nodes in the web component's DOM tree, set styles for the web component's DOM tree, set timers for the web component's DOM tree, etc.

[0128] For example, loading a component DOM tree includes creating a component DOM tree, mounting a component DOM tree, unmounting a component DOM tree, moving a component DOM tree, and changing the attribute values ​​of a component DOM tree.

[0129] For example, the function set includes a first function, which is used to create the component DOM tree.

[0130] It should be noted that, in the embodiments of this application, the first function refers to a class of functions in the function set, which are functions used in the process of creating the component DOM tree. Furthermore, the embodiments of this application do not limit the specific number of functions included in the first function.

[0131] For example, the function set includes a second function, which is used to mount the component's DOM tree. For a description of the second function, please refer to the description of the first function mentioned above; it will not be repeated here.

[0132] For example, the function set includes a third function, which is used to unload the component's DOM tree. For a description of the third function, please refer to the description of the first function mentioned above; it will not be repeated here.

[0133] For example, the function set includes a fourth function, which is used to transfer the component DOM tree. Transferring the component DOM tree includes moving the component DOM tree from the DOM tree of one webpage to the DOM tree of another webpage. For a description of the fourth function, please refer to the description of the first function mentioned above; it will not be repeated here.

[0134] For example, the function set includes a fifth function, which is used to change attribute values ​​on the component's DOM tree. For a description of the fifth function, please refer to the description of the first function mentioned above; it will not be repeated here.

[0135] It should be noted that the names of function sets in this application are not limited; the above are merely illustrative examples. For instance, a function set can also be called a capability set, a rendering engine capability set, etc.

[0136] Optionally, the rendering engine also includes extension modules that can be used to generate extended DOM nodes for web components.

[0137] It should be noted that the names of extended DOM nodes are not limited in this application embodiment. For example, extended DOM nodes can also be called pseudo nodes.

[0138] In some embodiments, extended DOM nodes can be mounted on the web page DOM, serving as the parent node of the component DOM tree. Furthermore, extended DOM nodes can also be used to generate the rendering context of a web component and pass the rendering context to the web component, allowing the web component to call functions within the function set indicated by the rendering context. Additionally, extended DOM nodes can be bound to the web component's JavaScript interface. This way, after the web component's JavaScript interface receives user actions performed on the web component, it can pass the action instructions to the extended DOM node, enabling the extended DOM node to load the user action into the component DOM tree, thereby presenting a web page display effect that matches the user's actions.

[0139] For example, the entry point of a function set can be a function pointer. Here, a function pointer is a variable that points to the memory address of a function within the function set.

[0140] It should be noted that the embodiments of this application do not limit the type of the function set entry point; the above is merely an illustrative example.

[0141] It should be noted that this application does not restrict the name of the extension module. For example, the extension module can also be called a rendering extension module, rendering engine extension module, etc.

[0142] In some embodiments, the rendering engine may also include a parser, a layout engine, a drawing engine, a docking layer, etc.

[0143] The parser is used to parse HTML documents. The layout engine calculates the position and size of elements on the webpage and determines their layout on the screen. The rendering engine renders the images of the webpage to display it to the user. The rendering engine's interface layer interacts with the execution engine.

[0144] In some embodiments, the execution engine includes an interface layer, etc. The interface layer of the execution engine is used to interact with the rendering engine.

[0145] The technical solutions involved in the following embodiments can all be implemented in electronic devices as shown in Figures 3 and 4, and in the system architecture shown in Figure 2.

[0146] It is understood that in the embodiments of this application, the electronic device performs some or all of the steps in the embodiments of this application. These steps or operations are merely examples, and the embodiments of this application may also perform other operations or variations thereof. Furthermore, the various steps may be performed in different orders as presented in the embodiments of this application, and it is not necessarily necessary to perform all the operations in the embodiments of this application.

[0147] It should be noted that the system architecture and application scenarios described in this application are for the purpose of more clearly illustrating the technical solutions of this application, and do not constitute a limitation on the technical solutions provided in this application. As those skilled in the art will know, with the evolution of system architecture and the emergence of new application scenarios, the technical solutions provided in this application are also applicable to similar technical problems.

[0148] For ease of understanding, the DOM tree generation method provided in this application embodiment will be described exemplarily below with reference to the above system architecture and accompanying drawings.

[0149] Figure 5 illustrates a DOM tree generation method provided in an embodiment of this application. Exemplarily, this DOM tree generation may include the following steps 501-503. In this embodiment, "step" can be abbreviated as "S," and will not be described further hereafter.

[0150] The development process of the Web component in the embodiments of this application will be described below with reference to Figures 6 to 9.

[0151] In some embodiments, as shown in Figure 6, in the component development state, component developers develop Web components according to the custom component development specifications defined by the Web component standard, thereby obtaining the component declaration of the Web component in this embodiment. The component declaration includes component templates, component attributes, and component behaviors, etc.

[0152] The component template indicates the component structure and style. The component structure includes the structural relationships between the multiple child tags included in the web component. The component style indicates the font, font size, color, etc. of the web component. Component properties include special properties (also known as custom properties) of the web component. Changes to the values ​​of special properties will trigger property change operations for the web component.

[0153] Among them, component behavior includes the lifecycle functions of Web components. The lifecycle functions of Web components include the first lifecycle function, the second lifecycle function, etc. The first lifecycle function is used to perform general operations of Web components (such as construction, mounting, unmounting, and moving). Therefore, the first lifecycle function can also be called the general lifecycle function. The second lifecycle function is used to perform special operations of Web components (such as changing the property value of special attributes). Therefore, the second lifecycle function can also be called the special lifecycle function.

[0154] For example, component developers can develop web components using languages ​​such as C, C++, and Go.

[0155] It should be noted that the embodiments of this application do not limit the development language of the Web components; the above is merely an illustrative example.

[0156] For example, as shown in Figure 7, during the development of a Web component, component developers can define common lifecycle functions for the Web component. These common lifecycle functions include constructors, mount functions, unmount functions, and transfer functions, which are automatically triggered when the Web component is in a certain state. Specifically, the constructor is used to create the component's DOM tree. The mount function is used to mount the component's DOM tree onto the webpage's DOM tree. The unmount function is used to unmount the component's DOM tree from the webpage's DOM tree. The transfer function is used to transfer the component's DOM tree from one webpage's DOM tree to another webpage's DOM tree; for example, transferring the component's DOM tree mounted on the first webpage's DOM tree to the second webpage's DOM tree—in other words, mounting the component's DOM tree onto a node in the second webpage's DOM tree.

[0157] During the development of Web components, component developers can also define special properties exposed by the Web component. When the value of a special property changes, the lifecycle function callback of the Web component will be triggered.

[0158] For example, a Web component exposes a first property, which is its display state property. This display state property includes collapsed display and expanded display. When the web application displays webpage 1, the Web component's display state property is collapsed. If the user expands the Web component on webpage 1, the Web component's lifecycle function callback is triggered, changing the Web component's display state property from collapsed to expanded, thus displaying the webpage corresponding to the expanded operation to the user. The Web component's lifecycle function callback refers to the Web component's lifecycle function calling functions within the function set through the function set's entry point.

[0159] After defining special properties, component developers also need to define corresponding lifecycle functions for those properties, also known as special lifecycle functions. These special lifecycle functions can also be called property change functions, and they are used to change the values ​​of the special properties in the component's DOM tree. Therefore, when a user's action on a Web component triggers a change in the value of a special property, the Web component's property change function callback will be triggered, thus changing the value of the special property.

[0160] In some embodiments, as shown in Figure 8, after obtaining the component declaration of the Web component, the component developer compiles the component declaration of the Web component into a target format file. The target format file is a file that the electronic device can recognize; in other words, a file that the electronic device can run directly.

[0161] For example, the target format file can be a binary file, a library file, an executable file, etc.

[0162] It should be noted that the embodiments of this application do not limit the type of target format file, as long as it is a file that the electronic device can recognize. The above is only an illustrative example.

[0163] For example, as shown in Figure 9, the kernel of a web application includes function type declarations. For instance, the rendering engine of a web kernel includes function declarations. These function type declarations include function interfaces and data structure types. The function interfaces indicate the interfaces of the functions used during the compilation of the target format file, and the data structure types indicate the structure of the compiled target format file.

[0164] For example, component developers can input the path of the component declaration and function type declaration of the Web component into the toolchain. During the process of compiling the component declaration of the Web component, the toolchain calls the function type declaration provided by the Web application through the path of the function type declaration, compiling the component declaration of the Web component into a target format file, thereby obtaining the target format file of the Web component.

[0165] For example, web components developed using the JS language can also be automatically compiled into a target format file using a toolchain, thereby obtaining the target format file of the web component provided in this application embodiment.

[0166] When front-end developers are developing web applications, they can add target JavaScript interfaces to the HTML document of the webpage. These target JavaScript interfaces specify a target format file, which can include the target format file of at least one web component. The web application can then send the HTML document and the target format file to the server. The server receives and stores both the HTML document and the target format file.

[0167] S501: The web application loads the first webpage, which includes a web component. The web component is a file in a target format that is recognizable by the electronic device.

[0168] In some embodiments, as shown in Figure 2, a web application is installed on the electronic device. The user performs operation 1 on the web application on the electronic device, which instructs the display of a first webpage. In response to operation 1, the electronic device sends a retrieval request 1 to the server to request relevant data for the first webpage. For example, the relevant data for the first webpage includes the HTML document of the first webpage. After receiving retrieval request 1, the server returns the relevant data for the first webpage to the electronic device in response to the retrieval request. After obtaining the relevant data for the first webpage, the web application creates the DOM data (hereinafter referred to as the webpage DOM tree) of the first webpage based on its HTML.

[0169] For example, the retrieval request includes an identifier of a first webpage, and the retrieval request uses the identifier of the first webpage to indicate the retrieval of relevant data from the first webpage.

[0170] On the software side, a web service is installed on the server. This web service interacts with web applications installed on electronic devices. For example, after detecting operation 1, the web application sends a retrieval request 1 to the web service. Upon receiving retrieval request 1, the web service returns the relevant data for the first webpage to the web application.

[0171] It should be noted that this application does not limit the number of web components included in the HTML document of a webpage. Hereinafter, the application will be described exemplarily using one web component included in the HTML document of the first webpage as an example.

[0172] For example, if the HTML document of the first webpage includes multiple web components, then "one web component" can be any one of the multiple web components included in the HTML document of the first webpage.

[0173] The following is an example of how to create a webpage DOM tree.

[0174] In some embodiments, the HTML document of the first webpage includes the structural relationships between multiple basic tags and web components, the stylesheet of the first webpage, etc. After the web application obtains the HTML document of the first webpage, the parser of the rendering engine parses the HTML file of the first webpage and constructs the webpage DOM tree based on the content obtained from the parsed HTML document. The webpage DOM tree includes a root node, multiple basic DOM nodes, and component nodes, etc. The multiple basic DOM nodes correspond one-to-one with multiple basic tags, and the component nodes correspond to web components. For example, the multiple basic tags include basic tag 1 and basic tag 2. As shown in Figure 8, node 0 in the webpage DOM tree can be the root node, node 1 is the DOM node of basic tag 1, and node 2 is the DOM node of basic tag 2.

[0175] During the rendering engine's construction of the webpage DOM tree, the execution engine builds JS interfaces for the root node and each basic tag of the webpage DOM tree. For example, as shown in Figure 8, the execution engine builds interface 0' for node 0 (i.e., the root node), interface 1' for node 1, and interface 2' for node 2. Furthermore, the execution engine establishes binding relationships between node 0 and interface 0', node 1 and interface 1', and node 2 and interface 2'. Based on this, interface 0' sends the user's operations on node 0 to node 0, interface 1' sends the user's operations on node 1 to node 1, and interface 2' sends the user's operations on node 2 to node 2.

[0176] The following is an exemplary description of the process of creating a component DOM tree.

[0177] In some embodiments, when the rendering engine creates component nodes on a webpage, it can first create a component DOM tree, and then the rendering engine mounts the component DOM tree onto the webpage DOM tree to obtain the component nodes on the webpage DOM tree.

[0178] In this embodiment of the application, the rendering engine can also obtain the Web component before creating the component DOM tree. Then, the rendering engine creates the component DOM tree based on the Web component.

[0179] Alternatively, there are multiple ways to obtain Web components. The following examples illustrate methods 1 and 2.

[0180] The following describes Method 1 by way of example through S1-S2.

[0181] S1: The rendering engine obtains the Web component of the first webpage; the Web component of the first webpage is a file in the target format from the server.

[0182] In Example 1a, after the rendering engine obtains the HTML document of the first webpage, its parser parses the HTML document. During this parsing process, the rendering engine sends a retrieval request 2 to the web service on the server. This request requests the web components of the first webpage. Upon receiving retrieval request 2, the web service on the server returns the target format file of the web component to the rendering engine. The rendering engine then receives this target format file, thus retrieving the web components of the first webpage.

[0183] For example, Request 2 includes the identifier of the Web component, and Request 2 indicates the retrieval of the Web component through the identifier of the Web component.

[0184] It should be noted that the embodiments of this application do not impose restrictions on the triggering conditions for the rendering engine to send the retrieval request 2. For example, it could be that the parser parses a statement indicating that the Web component should be retrieved.

[0185] In some embodiments, after the rendering engine obtains the target format file of the Web component, it can store the target format file of the Web component on the disk of the electronic device for use when the component DOM tree needs to be created later.

[0186] For example, when the web service returns the target format file of the web component to the rendering engine, it also returns a first path, which indicates the storage path of the target format file of the web component on the electronic device. Based on this, after receiving the target format file of the web component and the first path, the rendering engine stores the target format file of the web component in the first storage space indicated by the first path.

[0187] In Example 1b, after the rendering engine obtains the HTML document of the first webpage, its parser parses the HTML document. During this parsing process, the rendering engine sends retrieval request 3 to the web service on the server, requesting the retrieval of the target file. Upon receiving retrieval request 3, the web service on the server returns the target file to the rendering engine. This target file includes files in the target format for multiple web components and the identifier of each web component. The web component in S501 can be any one of the multiple web components.

[0188] For example, request 3 includes the identifier of the target file, and request 3 indicates the target file to be retrieved through the identifier of the target file.

[0189] For further explanation of other relevant details in Example 1b, please refer to the explanation in Example 1a. These details will not be repeated here.

[0190] S2: The rendering engine loads the target format file of the Web component into the rendering engine's registry.

[0191] Example 2a, combined with Example 1a above, after the rendering engine obtains the target format file of the Web component, it uses the Web component's identifier as a key to load the target format file into the rendering engine's registry, thereby enabling the rendering engine to obtain the complete content of the Web component. For example, it could load the content (i.e., binary data) of the target format file into the registry.

[0192] In some embodiments, the HTML document of the first webpage includes a first JS interface, which indicates the identifier of the Web component and its first path. This first JS interface can also be referred to as a loading interface. During the process of parsing the HTML document of the first webpage, the rendering engine obtains the first JS interface. Then, the rendering engine sends the first JS interface to the execution engine. Upon receiving the first JS interface, the execution engine parses it to obtain the identifier of the Web component and its first path. Next, the execution engine sends the identifier of the Web component and its first path to the rendering engine. Upon receiving the identifier of the Web component and its first path, the rendering engine retrieves the target format file from the first storage space indicated by the first path, thus obtaining the target format file of the Web component. Finally, using the identifier of the Web component as a key, the rendering engine loads the content of the target format file of the Web component into the rendering engine's registry.

[0193] For example, the registry is stored in the memory of an electronic device. Based on this, the content of the target format file of the Web component is loaded into the registry of the rendering engine, that is, the content of the target format file of the Web component is loaded into memory. Thus, when the component DOM tree needs to be loaded, the processor of the electronic device can directly run the target format file of the Web component, allowing the target format file of the Web component to run in the rendering engine, thereby helping to improve the efficiency of the rendering engine in loading the component DOM tree.

[0194] Example 2b, combined with Example 1b above, after the rendering engine obtains the target file, it loads the content of the target format file of the Web component into the rendering engine's registry using the Web component's identifier as the key.

[0195] In some embodiments, the HTML document of the first webpage includes a loading interface for a web component. After obtaining the identifier of the loading interface and the first path, the rendering engine loads the content of the loading interface of the web component in the target file into the rendering engine's registry. That is, after the rendering engine detects a loading interface for a web component, the binary data of that web component is loaded into the rendering engine's registry.

[0196] For further explanation of other relevant details in Example 2b, please refer to the explanation in Example 2a; these will not be repeated here.

[0197] Example 2c, combined with Example 1b above, as shown in Figure 10, after the rendering engine obtains the loading interface in the HTML file of the first webpage, it loads the target format files of multiple web components into the rendering engine's registry.

[0198] For example, after loading the target format file of a web component into the registry, the rendering engine can determine whether the target format files of multiple web components have all been loaded into the registry. If the result is that not all web components have been loaded into the registry, the rendering engine continues to load the target format file of the next web component into the registry. If the result is that all web components have been loaded into the registry, the process ends.

[0199] For further explanation of other relevant information in Example 2c, please refer to the explanations of Examples 2a and 2c above, which will not be repeated here.

[0200] In Method 1, the rendering engine directly obtains the target format file from the server. This helps improve the efficiency of the rendering engine in obtaining the target format file, thereby helping to improve the efficiency of component DOM tree generation.

[0201] The following describes method 2 by way of example through steps S3-S5.

[0202] S3: The rendering engine retrieves the Web component of the first webpage; the Web component of the first webpage is a source code file from the server.

[0203] In some embodiments, the rendering engine sends a retrieval request 2 to the web service on the server. In response to the received retrieval request 2, the web service returns a file in the first format to the rendering engine. This source code format file is the file of the web component.

[0204] For example, the source code format can be JS format.

[0205] It should be noted that the specific format type of the source code is not limited in the embodiments of this application; the above is merely an illustrative example.

[0206] It should be noted that other related explanations for S3 can be found in the explanations for S1 above, and will not be repeated here.

[0207] S4: The execution engine converts source code files into target format files.

[0208] In some embodiments, after the rendering engine obtains the source code file, it sends the source code file to the execution engine. After receiving the source code file, the execution engine converts it into the target format file, thereby obtaining the target format file of the Web component.

[0209] S5: The rendering engine loads the target format file of the Web component into the rendering engine's registry.

[0210] For example, after the execution engine obtains the target format file of the Web component, it sends the target format file of the Web component to the rendering engine. After receiving the target format file of the Web component, the rendering engine loads the target format file of the Web component into the rendering engine's registry.

[0211] It should be noted that other related explanations for S4-S5 can be found in the explanation of S2 above, and will not be repeated here.

[0212] In Method 2, after the rendering engine obtains the source code file from the server, the execution engine converts the source code file into the target format file, thereby obtaining the target format file of the Web component. This helps to improve the diversity of ways to obtain the target format file.

[0213] S502: The rendering engine responds to the creation command and generates a rendering context for the Web component; the rendering context is used to indicate the entry point of the function set.

[0214] In one example, a web component is used to create a component instance. The rendering engine responds to the creation instruction by creating a rendering context for that component instance.

[0215] In another example, where a web component is used to create multiple component instances, the rendering engine responds to the creation instruction, determines the target component instance and its identifier, and generates the rendering context for that target component instance. The target component instance can be any one of the multiple component instances.

[0216] It should be noted that the following uses an example of the target component to illustrate the embodiments of this application.

[0217] In this application embodiment, generating the rendering context includes multiple implementation methods. Hereinafter, methods 3 and 4 will be used as examples.

[0218] The following describes method 3 by way of example through steps S6-S8.

[0219] S6: The rendering engine responds to creation instructions and creates extended DOM sections for the Web component.

[0220] In Example 6a, during the parsing of the HTML document of the first webpage, the rendering engine obtains a second JavaScript interface. This second JavaScript interface is used to instruct the creation of a DOM tree; it can also be called a creation interface. The rendering engine then sends this second JavaScript interface to the execution engine. Upon receiving the second JavaScript interface, the execution engine parses it and identifies that it instructs the creation of a DOM tree. Based on this, the execution engine sends a creation instruction to the rendering engine. This creation instruction is used to create the DOM tree for the web component. As shown in Figure 6, in response to the received creation instruction, the rendering engine creates extended DOM nodes for the web component.

[0221] For example, a creation instruction includes a target identifier, which is the identifier of the web component. The creation instruction can use the target identifier to instruct the creation of the web component's DOM tree.

[0222] In some embodiments, the rendering engine includes an extension module. The rendering engine invokes the extension module in response to a creation instruction, and the extension module creates an extended DOM node for the web component.

[0223] For example, extended DOM nodes carry the semantics of a web component. That is, a web component can provide its functionality to the outside world through extended DOM nodes; therefore, extended DOM nodes can also be called semantic nodes. Semantic nodes are the interface for external communication of the web component, handling interaction with other parts of the execution engine. Therefore, the entire internal logic of a semantic node is implemented within the rendering engine, and externally it only includes a single JS object (i.e., the web component's JS interface). This significantly reduces the overhead of JS object conversion during the creation of the DOM tree, mounting the web component's DOM tree, and updating the web component's DOM tree, thereby effectively improving rendering engine performance. Updating the web component's DOM tree includes unloading the web component's DOM tree, moving the web component's DOM tree, and changing the attribute values ​​of the web component's DOM tree.

[0224] For example, in response to a received creation instruction, the rendering engine creates an extended DOM node for the target component instance. This extended DOM node carries the semantics of the target component instance.

[0225] Example 6b: The HTML file of the first webpage includes basic tags, which are JS files. These JS files contain a second JS interface. During the execution of the JS file within the basic tags, the execution engine obtains the second JS interface. Then, the execution engine parses the second JS interface and identifies that it instructs the creation of the DOM tree. Based on this, the execution engine sends a creation command to the rendering engine.

[0226] It should be noted that other related explanations for Example 6b can be found in the explanations for Example 6a above, and will not be repeated here.

[0227] S7: The rendering engine mounts the extended DOM nodes of the Web component onto the DOM tree of the first webpage.

[0228] In this context, the extended DOM node of the Web component is the parent node of the Web component.

[0229] In some embodiments, the rendering engine determines the parent node of the Web component as the first DOM node on the webpage's DOM based on the HTML document of the first webpage. Based on this, after creating an extended DOM node, the rendering engine mounts the extended DOM node onto the first DOM node in the webpage's DOM tree. For example, if the extended DOM node is node 3 as shown in Figure 8, the rendering engine mounts node 3 onto node 1.

[0230] For example, after the extension module creates the extended DOM node of the web component, the extension module mounts the extended DOM node onto the first DOM node of the web page DOM tree.

[0231] S8: The rendering engine generates the rendering context of the Web component through the extended DOM nodes of the Web component.

[0232] In some embodiments, as shown in Figure 6, after the rendering engine mounts the extended DOM node onto the web page DOM tree, the extended DOM node generates the rendering context of the web component, thereby realizing the generation of the rendering context of the web component through the extended DOM node of the web component.

[0233] For example, the rendering context of a web component can be the rendering context of the target component instance.

[0234] In Method 3, on the one hand, the extended DOM node can serve as the interface for the interaction between the DOM tree of the Web component and the execution engine, thereby providing functionality to the outside world as a whole for the DOM tree of the Web component, and isolating the child nodes of the DOM tree of the Web component from the nodes outside the DOM tree of the Web component, thus providing stronger encapsulation during the rendering process of the Web component.

[0235] On the other hand, since extended DOM nodes are mounted on the webpage's DOM tree, they can obtain relevant information from the webpage's DOM, such as information about the root node of the DOM tree and the parent node of the web component. Therefore, when generating a rendering context using extended DOM nodes, the richness of the web component's rendering context can be improved. For example, information related to the webpage's DOM tree can be added to the rendering context of the web component.

[0236] Method 4 allows the rendering engine to generate the rendering context for the web component. In other words, the rendering engine does not generate the rendering context for the web component by extending the DOM nodes.

[0237] For example, after receiving the creation instruction, the rendering engine can generate the rendering context of the Web component through its extension module.

[0238] It should be noted that other relevant explanations for Method 4 can be found in the explanations for Method 3 above, and will not be repeated here.

[0239] In Method 4, the rendering engine generates the rendering context directly, which helps improve the efficiency of generating the rendering context.

[0240] In this application embodiment, generating the rendering context includes multiple implementation methods. Hereinafter, methods 5 and 6 will be used as examples.

[0241] Hereinafter, in conjunction with the above method 3, method 5 will be described by way of example through S9-S10.

[0242] S9: The rendering engine sets the entry point for the function set through the extended DOM nodes of the Web component.

[0243] In some embodiments, the rendering engine includes a set of functions for loading the DOM tree of the web component. Based on this, after the rendering engine mounts an extended DOM node onto the web page's DOM tree, it calls the extended DOM node, which loads the function set into runtime memory, obtaining the entry point for the function set, thereby enabling the setting of the function set's entry point through the extended DOM node.

[0244] For example, the rendering engine sets the entry point for the function set through the extended DOM node of the target component instance.

[0245] S10: The rendering engine generates the rendering context of the Web component through the entry points of the Web component's extended DOM nodes and function sets.

[0246] For example, the rendering engine generates the rendering context of the target component instance through the extended DOM nodes and function set entries of the target component instance.

[0247] Example 10a: The rendering context of a Web component is used to indicate the entry point for a set of functions.

[0248] In some embodiments, after obtaining the entry point of the function set from the extended DOM node, the extended DOM node encapsulates the entry point of the function set into a context, thereby obtaining the rendering context of the Web component. This allows the generation of the Web component's rendering context through the extended DOM node and the entry point of the function set. The rendering context of the Web component indicates the entry point of the function set. Then, the extended DOM node sends the rendering context of the Web component to the Web component.

[0249] For example, extending the DOM node passes the Web component's rendering context to the Web component as a set of function pointers, thereby enabling the Web component to obtain the Web component's rendering context.

[0250] It should be noted that the embodiments of this application do not limit the way the rendering context of the Web component is passed to the Web component; the above is merely an illustrative example.

[0251] Example 10b shows that the rendering context of a Web component is used to indicate the entry point of the function set and the parent node of the Web component. The parent node of the Web component is the extended DOM node of the Web component.

[0252] In some embodiments, when a rendering context for a Web component needs to be generated, the extended DOM node can obtain the identifier of the Web component's parent node, i.e., the identifier of the extended DOM node. Then, the extended DOM node encapsulates the function set's entry point and the extended DOM node's identifier into a context, thereby obtaining the Web component's rendering context. This enables the generation of the Web component's rendering context through the extended DOM node and the function set's entry point. The Web component's rendering context is used to indicate the function set's entry point and the Web component's parent node (i.e., the extended DOM node of the first component).

[0253] For example, the rendering context of the target component instance can be used to indicate the entry point of the function set and the parent node of the target component instance.

[0254] For further explanation of other relevant details in Example 10b, please refer to the explanation in Example 10a. These details will not be repeated here.

[0255] Hereinafter, in conjunction with the above method 4, method 6 will be described by way of example through S11-S12.

[0256] S11: The entry point for the rendering engine settings function set.

[0257] S12: The rendering engine generates the rendering context for the Web component based on the entry point of the function set.

[0258] It should be noted that the relevant explanations for S11-S12 can be found in the explanations for S9-S10, and will not be repeated here.

[0259] Optionally, the DOM tree generation method may also include the following steps S13-S14. Through S13-S14, the web application can create external interfaces for extended DOM nodes on the webpage DOM tree. These external interfaces can be used to obtain operations performed by the user on web components on the first webpage. For example, they can be used to obtain operations performed by the user on target component instances of web components on the first webpage.

[0260] S13: The execution engine of a web application creates the JS interface for web components.

[0261] The JS interface of the Web component is used to obtain the operations performed by the user on the Web component on the first webpage.

[0262] In some embodiments, after the rendering engine creates the extended DOM node of the Web component, it sends a creation instruction 1 to the execution engine. Creation instruction 1 instructs the creation of the Web component's JS interface. Upon receiving creation instruction 1, the execution engine creates the Web component's JS interface. This Web component's JS interface can serve as the external JS interface of the extended DOM node, used to obtain user operations performed on the Web component on the first webpage. For example, the Web component's JS interface is interface 3' shown in Figure 8. For instance, creation interface 1 includes the Web component's identifier, and creation instruction 1 instructs the creation of the Web component's JS interface through this identifier.

[0263] S14: The execution engine binds the JS interface of the Web component to the extended DOM node of the Web component.

[0264] In some embodiments, after the execution engine creates the JS interface of the Web component, it binds the JS interface of the Web component to the extended DOM node of the Web component, thereby establishing a first correspondence between the JS interface and the extended DOM node. This allows the JS interface of the first component to, upon receiving user actions performed on the Web component on the first webpage, pass the content of the user's operation instructions to the extended DOM node of the Web component based on the first correspondence. For example, creation instruction 1 includes the identifier of the extended DOM node of the Web component. The execution engine binds the JS interface of the Web component to the extended DOM node based on the identifier of the extended DOM node. For example, creation interface 1 includes the identifier of the extended DOM node of the Web component, and the execution engine binds the JS interface of the Web component to the extended DOM node based on the identifier of the extended DOM node.

[0265] It should be noted that the embodiments of this application do not limit the way the JS interface of the Web component is bound to the extended DOM node of the Web component; the above is only an illustrative example.

[0266] For example, the execution engine creates a JavaScript interface for the target component instance. For instance, creation instruction 1 includes an identifier for the target component instance. Creation instruction 1 can instruct the creation of the JavaScript interface for the target component instance using the identifier. Then, the execution engine binds the JavaScript interface of the target component instance to the extended DOM node of the target component instance. For instance, creation instruction 1 includes an identifier for the extended DOM node of the target component instance. The execution engine binds the JavaScript interface of the target component instance to the extended DOM node of the target component instance based on the identifier of the extended DOM node.

[0267] In the above embodiments, the execution engine constructs a JS interface for the Web component to obtain the user's operations on the Web component on the first webpage. By binding the Web component's JS interface to its extended DOM nodes, the JS interface can interact with these nodes. Once the Web component's JS interface obtains the operation, it can transmit it to the extended DOM nodes, thus relaying the user's operations to the rendering engine. The rendering engine can then load the Web component's DOM tree based on the user's operations, ensuring that the Web component presented on the first webpage corresponds to the user's operations, thereby providing the user with the corresponding webpage.

[0268] Optionally, the creation instruction includes a target identifier. Based on this, S502 includes various implementations, which are exemplified below using methods 7 and 8.

[0269] The following example node is provided for method 7 via S15.

[0270] S15: If the target identifier meets the component identifier format, the rendering engine responds to the creation instruction and generates the rendering context of the Web component.

[0271] In some embodiments, after receiving the creation instruction, the rendering engine determines whether the target identifier indicated by the creation instruction conforms to the component identifier format. If the result is that the target identifier does not conform to the component identifier format, it means that the target identifier is the identifier of a basic tag in the HTML document of the first webpage, that is, the target identifier is not the identifier of a Web component, and the rendering engine constructs the DOM node of the basic tag (i.e., the basic DOM node). If the result is that the target identifier conforms to the component identifier format, it means that the target identifier is not the identifier of a basic tag, that is, the target identifier is the identifier of a Web component, and the rendering engine generates the context of the Web component.

[0272] For example, the component identifier format is that the identifier includes a first character, where the first character can be a character that the identifier of the Web component has but not the identifier of the base tag. For example, the first character can be "-".

[0273] It should be noted that the content of the first character is not limited in the embodiments of this application; the above is merely an illustrative description.

[0274] It should be noted that the embodiments of this application do not limit the method of determining whether the target identifier indicated by the creation instruction is the identifier of a Web component; the above is merely an illustrative example.

[0275] In other embodiments, if the result is determined to be that the target identifier meets the component identifier format, the rendering engine can respond to the creation instruction, create an extended DOM node of the Web component, and generate the rendering context of the Web component through the extended DOM node of the Web component.

[0276] It should be noted that other relevant explanations for Method 7 can be found in the explanations of Methods 3-7 above, and will not be repeated here.

[0277] In method 7, after the rendering engine obtains the creation instruction, it first determines whether the target identifier indicated by the creation instruction meets the component identifier format, thereby determining whether the target identifier is the identifier of the Web component, which helps to ensure the accuracy and reliability of subsequent operations.

[0278] Hereinafter, method 8 will be described by way of example via S16.

[0279] S16: If the target identifier meets the component identifier format and the registry contains a file of the target format corresponding to the target identifier, the rendering engine responds to the creation instruction and generates the rendering context of the Web component.

[0280] In some embodiments, after receiving the creation instruction, the rendering engine determines whether the target identifier indicated by the creation instruction conforms to the component identifier format. If the result is that the target identifier conforms to the component identifier format, the rendering engine determines whether the registry contains a file in the target format of the Web component corresponding to the target identifier; that is, it determines whether a file in the registry with the target identifier as the key exists in the target format. If the result is that the registry contains a file in the target format corresponding to the target identifier, it means that the registry contains a file in the target format of the Web component, and the rendering engine generates the rendering context for the Web component. Conversely, if the result is that the registry does not contain a file in the target format of the Web component, the process ends. Here, the file in the target format corresponding to the target identifier refers to a file in the target format with the target identifier as the key value.

[0281] In other embodiments, as shown in Figure 11, if the result is determined to be a file in the registry that includes the target format corresponding to the target identifier, the rendering engine can respond to the creation instruction, create an extended DOM node for the Web component, and generate the rendering context for the Web component from the extended DOM node of the Web component.

[0282] For example, the rendering engine can determine whether the registry contains a target identifier, and consequently, whether the registry contains a file in the target format corresponding to that target identifier. If the registry contains the target identifier, then the registry contains the file in the target format corresponding to that target identifier. Conversely, if the registry does not contain the target identifier, then the registry does not contain the file in the target format corresponding to that target identifier.

[0283] It should be noted that other related explanations for Method 8 can be found in the explanations for Methods 3-7 above, and will not be repeated here.

[0284] In method 8, after the rendering engine obtains the creation instruction, it first determines whether the target identifier indicated by the creation instruction meets the component identifier format. If the target identifier indicated by the creation instruction meets the component identifier format, that is, if the target identifier is the identifier of the Web component, it then determines whether the registry contains the target format file corresponding to the target identifier, that is, whether the registry contains the target format file of the Web component. Only if the registry contains the target format file of the Web component will the rendering context of the Web component be generated. This helps to ensure that the DOM tree of the Web component can be created through the target format file of the Web component, thereby helping to ensure the necessity of generating the rendering context of the Web component.

[0285] Optionally, after receiving the creation instructions, the rendering engine can directly generate the rendering context for the web component. In other words, after receiving the creation instructions, the rendering engine can skip the steps of determining whether the target identifier meets the component identifier format and whether the registry contains a file in the target format corresponding to the target identifier. This helps improve the efficiency of generating the DOM tree for the web component.

[0286] S503: During the process of running a target format file in the rendering engine, the rendering engine calls functions in the function set through the entry point of the Web component and function set to create the DOM tree of the Web component.

[0287] In some embodiments, as shown in Figure 6, the target format file for the Web component is a script file. After the rendering engine generates the rendering context for the Web component, it passes the rendering context to the Web component. Then, the rendering engine calls the Web component, causing the target format file to run within the rendering engine. During the execution of the target format file in the rendering engine, the Web component calls functions in the function set indicated by the rendering context through the entry point of the function set. The functions in the function set create the DOM tree of the Web component, thereby achieving the creation of the Web component's DOM tree through the Web component and the entry point of the function set calling functions in the function set.

[0288] For example, a Web component rendering context can be used to instruct the execution of business logic that creates the Web component's DOM tree. Based on this, a Web component can create its DOM tree through the business logic instructed by its rendering context.

[0289] For example, during the process of running a target format file in the rendering engine, the rendering engine calls functions in the function set through the entry point of the web component and function set to create the DOM tree of the target component instance.

[0290] Optionally, the target format file includes the structural relationships between multiple child tags of the Web component and its lifecycle functions. "Creating the DOM tree of the Web component by calling functions in the function set through the entry point of the Web component and the function set" includes the following S17.

[0291] S17: The rendering engine calls functions in the function set through the lifecycle functions and function set entry points of the Web component, and creates the DOM tree of the Web component based on the structural relationship between multiple child tags; there is a one-to-one correspondence between multiple child nodes and multiple child tags in the DOM tree of the Web component.

[0292] In some embodiments, during the execution of a target format file in the rendering engine, the Web component can obtain the structural relationships between multiple child tags. The Web component's lifecycle functions can call functions in the function set through the function set's entry point. The functions in the function set construct the Web component's DOM tree based on the structural relationships between the multiple child tags, thereby realizing the creation of the Web component's DOM tree through lifecycle functions and the function set's entry point calling functions in the function set. The Web component's DOM tree includes multiple child nodes, with a one-to-one correspondence between the multiple child nodes and the multiple child tags. The structural relationships between the multiple nodes in the DOM tree are the same as the structural relationships between the multiple child tags.

[0293] For example, as shown in Figure 8, multiple child tags can include child tags a, ..., and child tag f. Based on this, multiple child nodes in the DOM tree of a Web component can include child nodes a, ..., and child node f. Here, child node a corresponds to child tag a, ..., and child tag f corresponds to child node f.

[0294] In some embodiments, the lifecycle function includes a constructor function used to create the component's DOM tree. Based on this, S17 may include: the rendering engine calling functions in the function set through the Web component's constructor function and the entry point of the function set, and creating the Web component's DOM tree according to the structural relationships between multiple child tags.

[0295] For example, the constructor of a Web component calls the first function in the function set through the entry point of the function set. The first function constructs the DOM tree of the Web component based on the structural relationship between multiple child tags. Thus, the DOM tree of the Web component is created by calling functions in the function set through the constructor of the Web component and the entry point of the function set.

[0296] For example, the rendering engine calls functions in the function set through the lifecycle functions of the web component and the entry point of the function set, and creates the DOM tree of the target component instance according to the structural relationship between multiple child tags; there is a one-to-one correspondence between the multiple child nodes of the DOM tree of the target component instance and the multiple child tags.

[0297] In the above scheme, during the loading of the first webpage, the rendering engine obtains the web component of the first webpage. Subsequently, the rendering engine detects the rendering context of the web component generated during the creation instruction. This rendering context can be used to indicate the entry points of the function set needed to create the DOM tree of the web component. Based on this, during the execution of the target format file in the rendering engine, the web component can call functions in the function set through the entry points, thereby creating the DOM tree of the web component through the functions in the function set.

[0298] Because the rendering engine obtains the target format file of the web component, the target format file of the web component can be directly executed within the rendering engine when the rendering engine calls the web component. Based on this, the rendering engine also generates a rendering context based on the function set to indicate the entry point of the function set. This allows the functions used to create the DOM tree of the web component to be directly obtained within the rendering engine when building the DOM tree. In other words, the capabilities required to create the DOM tree of the web component can be directly obtained from the rendering engine, thus enabling the construction of the DOM tree of the web component to be completed within the rendering engine. This eliminates the need for the rendering engine to interact with nodes on the DOM tree of the web component, saving significant data binding and transformation overhead. In other words, the rendering engine does not need to interact with the execution engine when building the DOM tree of the web component, which significantly improves the efficiency of the rendering engine in constructing the DOM tree of the web component, thereby significantly improving the performance of the rendering engine in constructing the DOM tree.

[0299] The following is an exemplary description of the process by which the rendering engine mounts the component DOM tree.

[0300] Optionally, the DOM tree generation method also includes the following S18-S19.

[0301] In this embodiment of the application, through S18-S19, the rendering engine can mount the DOM tree of the Web component onto the DOM tree of the web page.

[0302] S18: The rendering engine creates the DOM tree of the first webpage based on the HTML document of the first webpage.

[0303] In some embodiments, after obtaining the HTML document of the first webpage, the rendering engine parses the HTML document using its parser. During the parsing process, the rendering engine obtains the structural relationships between multiple basic tags. Based on this, the rendering engine can construct the root node of the DOM tree of the first webpage, and according to the structural relationships between the basic tags, construct multiple basic DOM nodes under the root node of the DOM tree. Each basic DOM node corresponds one-to-one with a basic tag, and the structural relationships between the basic DOM nodes are the same as those between the basic tags.

[0304] S19: The rendering engine responds to the mounting instruction of the Web component, calls the function in the function set through the entry point of the Web component and the function set, mounts the DOM tree of the Web component to the parent node of the Web component, and obtains the DOM tree of the first webpage after mounting.

[0305] In some embodiments, as shown in Figure 12, after the rendering engine obtains the mounting instruction of the Web component, it responds by passing the mounting instruction to the Web component. Then, the Web component obtains its rendering context, its parent node, and the entry point of the function set. Next, as shown in Figure 6, the Web component calls functions in the function set through the entry point, mounting the Web component's DOM tree (i.e., the component DOM tree) onto the Web component's parent node (i.e., onto the node in the webpage DOM tree).

[0306] For example, the rendering context of a web component can be used to instruct the execution of business logic for mounting the DOM tree. Based on this, a web component can mount its DOM tree through the business logic instructed by its rendering context.

[0307] In Example 19a, during the parsing of the HTML document of the first webpage, the rendering engine obtains a third JS interface. The second JS interface is used to indicate the DOM tree for mounting the web component; this third JS interface can also be called the mounting interface. The rendering engine then sends the third JS interface to the execution engine. Upon receiving the third JS interface, the execution engine parses it and identifies that it indicates the DOM tree for mounting the web component. Based on this, the execution engine sends mounting instruction 1 to the rendering engine, which instructs the mounting of the web component's DOM tree. Subsequently, in response to the received mounting instruction 1, the rendering engine forwards the web component's mounting instruction to the web component. The web component, in response to the mounting instruction, calls a function in the function set through its entry point to mount its DOM tree onto the first webpage's DOM tree, resulting in the mounted DOM tree of the first webpage.

[0308] For example, the mount interface includes a target identifier, which indicates the DOM tree of the mounted web component. Mount instruction 1 also includes a target identifier, which indicates the DOM tree of the mounted web component.

[0309] In one example, combining method 3 above, the rendering context of the Web component is also used to indicate the parent node of the Web component, which is the extended DOM node of the Web component. Based on this, the Web component responds to the mounting instruction by retrieving its parent node (i.e., the extended DOM node) from its rendering context. Then, after calling a function in the function set through its entry point, the Web component mounts its DOM tree onto the extended DOM node. For example, as shown in Figure 8, child node 'a' can be mounted onto node 3, thus mounting the Web component's DOM onto the DOM tree of the first webpage.

[0310] In another example, combining with method 4 above, the rendering context of the Web component is also used to indicate the parent node of the Web component. The DOM tree of the first webpage includes the first DOM node, which is the parent node of the Web component. Based on this, the Web component responds to the mounting instruction of the Web component and obtains the parent node (i.e., the first DOM node) of the Web component from the rendering context of the Web component. After the Web component calls the function in the function set through the entry point of the function set, it mounts the DOM tree of the Web component onto the first DOM node. For example, as shown in Figure 8, child node 'a' can be mounted onto node 1, thereby mounting the DOM of the Web component onto the DOM tree of the first webpage.

[0311] For example, in response to the mount command of the target component instance, the rendering engine calls the function in the function set through the entry point of the Web component and the function set, mounts the DOM tree of the target component instance to the parent node of the target component instance, and obtains the DOM tree of the first webpage after mounting.

[0312] For example, in response to mount instruction 1, the rendering engine determines the identifier of the currently unmounted component instance corresponding to the target identifier in the web component, i.e., the identifier of the target component instance. Then, the rendering engine sends a mount instruction for the target component instance to the web component. In response to the mount instruction, the web component mounts the DOM tree of the target component instance onto the DOM tree of the first webpage. For instance, the mount instruction for the target component instance may include the identifier of the target component instance, and this mount instruction uses the identifier of the target component instance to indicate the mounting of the DOM tree of the target component instance.

[0313] Example 19b: The HTML file of the first webpage includes basic tags, which are JS files. These JS files contain a third-party JS interface. During the execution of the JS file within the basic tags, the execution engine obtains the mounted JS interface. The execution engine parses the mounted JS interface and identifies how it is used to instruct the DOM tree where the web component is mounted.

[0314] For example, the mount interface includes a target identifier, which indicates the DOM tree on which the web component is mounted.

[0315] For example, the execution engine determines the identifier of the currently unmounted component instance corresponding to the target identifier in the Web component, i.e., the identifier of the target component instance. Based on this, the execution engine sends creation instruction 2 to the rendering engine, which instructs the DOM tree where the target component instance is mounted. After receiving mounting instruction 2, the rendering engine sends a mounting instruction for the target component instance to the Web component.

[0316] It should be noted that other related explanations for Example 19b can be found in the explanations for Example 19a above, and will not be repeated here.

[0317] In the above embodiments, since the functions in the function set can be used to mount the DOM tree of the Web component, after the rendering engine detects the mounting instruction, it obtains the rendering context of the Web component and calls the functions in the function set through the entry point of the function set to mount the DOM tree of the Web component onto the parent node of the Web component indicated by the rendering up and down directions. In other words, when the rendering engine mounts the DOM tree of the Web component, it does not need to interact with the execution engine. This can significantly improve the efficiency of the rendering engine in mounting the DOM tree of the Web component, thereby significantly improving the performance of the rendering engine in mounting the DOM tree of the Web component.

[0318] In some embodiments, S19 includes: the rendering engine responding to the mounting instruction of the Web component, calling functions in the function set through the lifecycle functions of the Web component and the entry point of the function set, mounting the DOM tree of the Web component onto the parent node of the Web component, and obtaining the DOM tree of the first webpage after mounting.

[0319] For example, the rendering engine responds to the mounting directive of the Web component by passing the Web component's mounting directive to the Web component. The Web component, in turn, responds to the mounting directive of the first component by obtaining the Web component's rendering context, thereby obtaining the Web component's parent node and the entry point of the function set. Subsequently, the Web component's lifecycle functions call functions in the function set through the entry point of the function set, mounting the Web component's DOM tree onto the Web component's parent node.

[0320] In some embodiments, lifecycle functions include mounting functions, which are used to mount the component's DOM tree. Based on this, calling functions in the function set through the entry point of the Web component's lifecycle functions and function set includes: the rendering engine calling functions in the function set through the mounting functions and function set entry point to mount the Web component's DOM tree onto the Web component's parent node.

[0321] For example, during the process of running a target format file in the rendering engine, the mounting function of the Web component calls the second function in the function set through the entry point of the function set, thereby mounting the DOM tree of the Web component onto the parent node of the Web component through the second function.

[0322] For example, in response to the mounting instruction of the target component instance, the rendering engine calls functions in the function set through the lifecycle functions of the Web component and the entry point of the function set, and mounts the DOM tree of the target component instance onto the parent node of the target component instance, thus obtaining the DOM tree of the first webpage after mounting.

[0323] Optionally, the DOM tree generation method also includes the following S20. Through the following S20, the rendering engine can obtain the rendering tree of the webpage.

[0324] S20: The rendering engine renders the first webpage based on the DOM tree of the first webpage after it has been mounted.

[0325] In some embodiments, after the rendering engine mounts the DOM tree of the Web component onto the DOM tree of the first web page, the rendering engine renders the first web page based on the mounted DOM tree of the first web page, thereby obtaining the first web page, and then displaying the first web page to the user.

[0326] For example, the rendering engine can use the layout engine shown in Figure 6 to perform the layout operation shown in Figure 8. Based on this, the rendering engine can also use the drawing engine shown in Figure 6 to perform the drawing operation shown in Figure 8. Afterwards, the rendering engine can also perform a compositing operation to obtain the first webpage.

[0327] Optionally, the DOM tree for loading a Web component also includes the DOM tree for unloading a Web component. Based on this, the DOM tree creation method may also include the following steps S21-S22.

[0328] By using the following steps S21-S22, the DOM tree of the Web component can be unloaded from the DOM tree of the first web page when the user instructs the user to unload the DOM tree of the Web component.

[0329] S21: The rendering engine obtains the first operation through the JS interface of the Web component. The first operation is used to instruct the Web component to be unloaded.

[0330] In some embodiments, when a user performs a first operation on a first webpage, the JS interface of the Web component, upon receiving the first operation, determines the first JS operation through the function corresponding to the first operation included in the Web application. This first JS operation instructs the unloading of the Web component's DOM tree. Based on this, the JS interface of the Web component, according to the first correspondence, sends a first instruction to the extended DOM node of the Web component. This first instruction instructs the unloading of the Web component's DOM tree, thereby passing the user's first operation on the Web component to the extended node of the Web component, enabling the rendering engine to receive the event indicating unloading. For example, after receiving the first JS operation, interface 3' shown in Figure 8 sends the first instruction to node 3 on the webpage's DOM tree.

[0331] For example, the first operation includes an identifier for the Web component, which indicates the unloading of the Web component from the DOM tree. The first operation may also include an identifier for a first webpage, which indicates that the Web component is a component instance on the first webpage.

[0332] It should be noted that the relevant explanations for the first instruction can be found in the explanations for the first operation, and will not be repeated here.

[0333] For example, the rendering engine obtains a first operation through the JS interface of the target component instance. This first operation instructs the unloading of the target component instance. For instance, the first operation includes an identifier of the target component instance, which instructs the unloading of the target component instance's DOM tree. The first operation may also include an identifier of the first webpage, which instructs the target component instance to be a component instance on the first webpage.

[0334] S22: The rendering engine calls functions in the function set through the entry point of the Web component's extended DOM node and function set, unloading the Web component's DOM tree.

[0335] In one embodiment, as shown in Figure 12, after receiving the first instruction, the extended DOM node of the Web component sends an uninstallation instruction to the Web component. The uninstallation instruction instructs the Web component to uninstall its DOM tree. In response to the uninstallation instruction, the Web component calls functions within the function set through its entry point to uninstall its DOM tree. This achieves the uninstallation of the Web component's DOM tree through the extended DOM node and the function set's entry point.

[0336] For example, the rendering context of a web component can be used to instruct the execution of business logic that unloads the DOM tree. Based on this, a web component can unload its DOM tree through the business logic instructed by its rendering context.

[0337] It should be noted that the relevant instructions for the uninstallation command can be found in the instructions for the first operation, and will not be repeated here.

[0338] In some embodiments, unloading the DOM tree of a Web component by calling functions in the function set through the entry point of the function set includes: unloading the DOM tree of a Web component by calling functions in the function set through the lifecycle functions of the Web component and the entry point of the function set.

[0339] For example, in response to the Web component's unload command, the Web component obtains its rendering context, its parent node, and the entry point of the function set. Then, the Web component's lifecycle functions call functions within the function set through the entry point, unloading the Web component's DOM tree from the first webpage's DOM tree.

[0340] For example, if the DOM tree of a web component is mounted on an extension node of the web component, both the extension node and the DOM tree of the web component can be unmounted simultaneously. This helps to ensure the integrity of the unmounting operation.

[0341] In some embodiments, lifecycle functions include an unload function, which is used to unload the component's DOM tree. Based on this, calling functions in the function set through the entry point of the Web component's lifecycle functions and the function set includes: the Web component unloading its DOM tree by calling functions in the function set through the unload function and the entry point of the function set.

[0342] For example, the unload function of a Web component calls the third function in the function set through the entry point of the function set, thereby unloading the Web component from the DOM tree.

[0343] For example, the rendering engine unloads the DOM tree of the target component instance by calling functions in the function set through the extended DOM node and the entry point of the function set of the target component instance.

[0344] In this implementation, after the JS interface of the Web component obtains the first operation, it can pass the content of the first operation instruction to the extended DOM node of the Web component. This allows the extended DOM node of the Web component to obtain the unloading operation performed by the user on the Web component on the first webpage. As a result, the rendering engine can load the unloading operation performed by the user on the Web component into the DOM tree of the Web component, thereby making the Web component presented on the first webpage correspond to the operation performed by the user.

[0345] Furthermore, since the extended DOM nodes of a Web component can call functions in the function set through the entry point of the function set to unload the DOM tree of the Web component, the rendering engine does not need to interact with the execution engine when unloading the DOM tree of the Web component. This can significantly improve the efficiency of the rendering engine in unloading the DOM tree of the Web component, thereby significantly improving the performance of the rendering engine in unloading the DOM tree of the Web component.

[0346] Optionally, loading the DOM tree of a Web component includes transferring the DOM tree of the Web component. Based on this, the DOM tree generation method also includes the following steps S23-S24.

[0347] The following steps S23-S24 can be used to transfer the DOM of a web component from the DOM tree of one webpage to the DOM tree of another webpage, thereby enabling the web component to be transferred from one webpage to another.

[0348] S23: The rendering engine obtains a second operation through the JS interface of the Web component, which is used to instruct the Web component on the first web page to be transferred to the second web page.

[0349] In some embodiments, when a user performs a second operation on a first webpage, the JS interface of the Web component, upon receiving the second operation, determines the second JS operation through the function corresponding to the second operation included in the Web application. The second JS operation instructs the transfer of the DOM tree of the first component from the DOM tree of the first webpage to the DOM tree of the second webpage. Based on this, the JS interface of the Web component, based on the first correspondence, sends a second instruction to the extended DOM node of the Web component. This second instruction instructs the transfer of the DOM tree of the Web component from the DOM tree of the first webpage to the DOM tree of the second webpage, thereby transmitting the second operation performed by the user on the Web component to the extended node of the Web component, enabling the rendering engine to receive the event indicating the transfer. For example, after receiving the second JS operation, interface 3' shown in Figure 8 sends the second instruction to node 3 on the webpage DOM tree.

[0350] For example, the second operation includes an identifier for the web component, through which the first operation instructs the unloading of the web component's DOM tree. The second operation also includes an identifier for a first webpage, through which the second operation instructs the transfer of the web component's DOM tree to a second webpage. The second operation may also include an identifier for the first webpage, through which the second operation instructs the transfer of the web component from the first webpage.

[0351] It should be noted that the relevant explanations for the first instruction can be found in the explanations for the first operation, and will not be repeated here.

[0352] For example, the rendering engine obtains a second operation through the JS interface of the target component instance, which is used to instruct the target component instance on the first webpage to be transferred to the second webpage.

[0353] S24: The rendering engine calls functions in the function set through the extended DOM nodes and function set entry points of the Web component, transferring the DOM tree of the Web component from the DOM tree of the first webpage to the DOM tree of the second webpage.

[0354] In one embodiment, as shown in Figure 12, after receiving the second instruction, the extended DOM node of the Web component sends a transfer instruction to the Web component. The transfer instruction instructs the first component's DOM tree to be transferred from the first webpage's DOM tree to the second webpage's DOM tree. In response to the unload instruction, the Web component calls a function in the function set through the function set's entry point, and according to the identifier of the second webpage indicated by the unload instruction, transfers the Web component's DOM tree from the first webpage's DOM tree to the second webpage's DOM tree; that is, unloads the Web component's DOM tree from the first webpage's DOM tree and mounts it onto the second webpage's DOM tree.

[0355] For example, the function corresponding to the second JS operation also instructs the web component's DOM tree to move to a second DOM node on the second webpage's DOM tree. The second instruction may include an identifier for the second DOM node, and the second webpage's DOM tree includes the second DOM node. The second instruction, through the identifier of the second DOM node, indicates the mounting node of the web component's DOM tree on the second webpage's DOM. Based on this, the web component, according to the second instruction indicating the identifier of the second DOM node, mounts the web component's DOM tree onto the second DOM node.

[0356] For example, the rendering context of a web component can be used to instruct business logic to move the DOM tree. Based on this, a web component can use its rendering context to instruct business logic to move the web component's DOM tree.

[0357] It should be noted that the relevant explanations of the transfer instructions can be found in the instructions for the second operation, and will not be repeated here.

[0358] In some embodiments, mounting the DOM tree of a Web component onto the DOM tree of a second webpage by calling functions in the function set through the entry point of the function set includes: mounting the DOM tree of the Web component onto the DOM tree of the second webpage by calling functions in the function set through the lifecycle functions of the Web component and the entry point of the function set.

[0359] For example, in response to a Web component's transfer instruction, the Web component obtains its rendering context, its parent node, and the entry point of its function set. Then, the Web component's lifecycle functions call functions within the function set through the entry point, and based on the identifier of the second webpage indicated by the unloading instruction, mount the Web component's DOM tree onto the second webpage's DOM tree.

[0360] For example, if the DOM tree of a web component is mounted on the web component's extension node, both the web component's extension node and DOM tree can be moved to the DOM tree of the second webpage simultaneously. That is, the web component's extension DOM node and DOM tree are unmounted from the first webpage's DOM tree, and then mounted onto the second webpage's DOM tree. This helps ensure the integrity of the unmounting operation.

[0361] In some embodiments, lifecycle functions include transfer functions, which are used to transfer the component's DOM tree from the DOM tree of one webpage to the DOM tree of another webpage. Based on this, calling functions in the function set through the entry point of the web component's lifecycle functions and the function set includes: the web component calling functions in the function set through the transfer functions and the entry point of the function set to transfer the web component's DOM tree from the DOM tree of the first webpage to the DOM tree of the second webpage.

[0362] For example, the transfer function of the Web component calls the fourth function in the function set through the entry point of the function set, thereby transferring the DOM tree of the Web component from the DOM tree of the first webpage to the DOM tree of the second webpage.

[0363] For example, the rendering engine moves the DOM tree of the target component instance from the DOM tree of the first webpage to the DOM tree of the second webpage by calling functions in the function set through the extended DOM node and the entry point of the function set of the target component instance.

[0364] In this implementation, after the Web component's JS interface obtains the second operation, it can pass the content of the second operation instruction to the Web component's extended DOM node. This allows the extended DOM node to obtain the transfer operation performed by the user on the Web component on the first webpage. Consequently, the rendering engine can load the user's transfer operation into the Web component's DOM tree, ensuring that the Web component presented on the first webpage corresponds to the user's operation. Furthermore, since the Web component's extended DOM node can call functions in the function set through the function set's entry point to transfer the Web component's DOM tree, the rendering engine does not need to interact with the execution engine when transferring the Web component's DOM tree. This significantly improves the efficiency of the rendering engine in transferring the Web component's DOM tree, thereby significantly improving the performance of the rendering engine in transferring the Web component's DOM tree.

[0365] Optionally, loading the DOM tree of the Web component includes changing the attribute values ​​of the DOM tree of the Web component. Based on this, the DOM tree generation method may also include the following steps S25-S26.

[0366] S25: The rendering engine obtains a third operation through the JS interface of the Web component. The third operation is used to instruct the value of the first property of the Web component to be changed to the first value.

[0367] In some embodiments, when a user performs a third operation on a first webpage, the JS interface of the Web component receives the third operation and determines the third JS operation through the function corresponding to the third operation included in the Web application. The third JS operation is used to indicate a change in the attribute value of the first property of the Web component's DOM tree. Based on this, the JS interface of the Web component sends a third instruction to the extended DOM node of the Web component based on the first correspondence. The first instruction is used to indicate a change in the attribute value of the first property of the Web component's DOM tree to a first value, thereby passing the third operation performed by the user on the Web component to the extended node of the Web component, so that the rendering engine receives the event indicating the attribute change.

[0368] For example, as shown in Figure 8, after interface 3' receives the third JS operation, it sends the third instruction to node 3 on the webpage DOM tree.

[0369] For example, the third operation includes an identifier for the Web component, which indicates a change to the attribute value of the Web component's DOM tree. The third operation also includes an identifier for a first attribute, which indicates a change to the attribute value of the first attribute. The first operation may further include an identifier for a first webpage, which indicates that the Web component is a component instance on the first webpage.

[0370] For example, the third operation includes a first value, which is the attribute value after the first attribute has been changed. The third operation may also include a second value, which indicates the attribute value of the web component on the first webpage before the change.

[0371] It should be noted that the relevant explanations for the third instruction can be found in the explanation of the third operation, and will not be repeated here.

[0372] For example, the rendering engine obtains a third operation through the JS interface of the target component instance, which is used to instruct the value of the first property of the target component instance to be changed to the first value.

[0373] S26: The rendering engine calls functions in the function set through the extended DOM node and function set entry point of the Web component to change the attribute value of the first property on the DOM tree of the Web component to the first value.

[0374] In one embodiment, as shown in Figure 12, after receiving the third instruction, the extended DOM node of the Web component sends a property change instruction to the Web component. The property change instruction is used to instruct the value of the first property of the Web component's DOM tree to be changed to a first value. In response to the property change instruction, the Web component calls a function in the function set through the entry point of the function set to change the value of the first property of the Web component's DOM tree to the first value.

[0375] For example, the rendering context of a web component can be used to instruct business logic to change the attribute values ​​of the DOM tree. Based on this, a web component can use its rendering context to instruct business logic to change the attribute values ​​of its DOM tree.

[0376] It should be noted that the relevant instructions for the uninstallation command can be found in the instructions for the first operation, and will not be repeated here.

[0377] In some embodiments, calling a function in the function set through the entry point of the function set to change the attribute value of the first property on the DOM tree of the Web component to the first value includes: calling a function in the function set through the lifecycle function of the Web component and the entry point of the function set to change the attribute value of the first property on the DOM tree of the Web component to the first value.

[0378] For example, in response to a property change instruction, the Web component obtains its rendering context and the entry point of the function set. Then, the Web component's lifecycle functions call functions within the function set through the entry point, changing the value of the first property in the Web component's DOM tree to its original value.

[0379] In some embodiments, lifecycle functions include property modification functions, which are used to change the property values ​​in the component's DOM tree. Based on this, calling functions in the function set through the entry point of the Web component's lifecycle functions and function set includes: the Web component calling functions in the function set through the property modification functions and function set entry point to change the property value of the first property in the Web component's DOM tree to a first value.

[0380] For example, the property modification function of a Web component calls the fifth function in the function set through the entry point of the function set, thereby changing the property value of the first property in the DOM tree of the Web component to the first value.

[0381] For example, the rendering engine calls a function in the function set through the extended DOM node of the target component instance and the entry point of the function set, changing the attribute value of the first property on the DOM tree of the target component instance to the first value.

[0382] In this implementation, after the JS interface of the Web component obtains the third operation, it can pass the content of the third operation instruction to the extended DOM node of the Web component. This allows the extended DOM node of the Web component to obtain the attribute value change operation performed by the user on the Web component on the first webpage. As a result, the rendering engine can load the attribute value operation performed by the user on the Web component into the DOM tree of the Web component, so that the Web component presented on the first webpage corresponds to the operation performed by the user.

[0383] Furthermore, since the extended DOM nodes of a Web component can call functions in the function set through the entry point of the function set to change the attribute value of the first attribute of the Web component's DOM tree, the rendering engine does not need to interact with the execution engine when changing the attribute value of the first attribute of the Web component's DOM tree. This significantly improves the efficiency of the rendering engine in changing the attribute value of the first attribute of the Web component's DOM tree, thereby significantly improving the performance of the rendering engine in changing the attribute value of the first attribute of the Web component's DOM tree.

[0384] Optionally, the DOM tree generation method also includes the following S27-S28.

[0385] S27: The rendering engine obtains a third operation through the JS interface of the Web component. The third operation is used to instruct the property value of the first property of the Web component to be changed to the first value.

[0386] S28: If the value of the first attribute in the DOM tree of the Web component before the change is the same as the value of the second attribute, the rendering engine changes the value of the first attribute in the DOM tree of the Web component to the first value through the extended DOM node of the Web component.

[0387] In some embodiments, the attribute change instruction includes a second value, that is, the attribute value of the first attribute of the Web component on the first webpage before the change. Based on this, after receiving the attribute change instruction, the Web component obtains the attribute value of the first attribute on the Web component's DOM. If the attribute value of the first attribute before the change is the same as the second value, then the attribute value of the first attribute on the Web component's DOM tree is changed to the first value. This helps ensure the accuracy of the attribute change operation, thereby helping to improve the accuracy of the webpage content provided to the user.

[0388] It should be noted that other related explanations in S27-S28 can be found in the explanations in S25-S26 above, and will not be repeated here.

[0389] The foregoing primarily describes the solution provided in this application from a methodological perspective. To achieve the aforementioned functions, the DOM tree generation apparatus includes hardware structures and / or software modules corresponding to the execution of each function. Those skilled in the art should readily recognize that, based on the units and algorithm steps of the examples described in conjunction with the embodiments disclosed herein, this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed in hardware or by computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0390] Based on the above method, this application exemplarily divides the DOM tree generation device into functional modules. For example, the DOM tree generation device may include functional modules corresponding to each functional division, or two or more functions may be integrated into one processing module. The integrated module can be implemented in hardware or as a software functional module. It should be noted that the module division in this application is illustrative and only represents one logical functional division; other division methods may be used in actual implementation.

[0391] For example, Figure 13 shows a possible structural schematic diagram of the DOM tree generation device (denoted as DOM tree generation device 1300) involved in the above embodiments. The actions performed by the DOM tree generation device 1300 are implemented through an electronic device or through corresponding software executed by the electronic device. A web application is installed on the electronic device, and the rendering engine of the web application includes a function set for creating the DOM tree of the web component. The DOM tree generation device 1300 may include: a loading module 1301, a generation module 1302, and a creation module 1303; the loading module 1301 is used to load a first webpage including a web component, the web component being a file in a target format that is recognizable by the electronic device; the generation module 1302 is used to generate a rendering context for the web component in response to a creation instruction; the creation instruction is used to create a DOM tree for the web component, and the rendering context is used to indicate the entry point of the function set; the creation module 1303 is used to create the DOM tree of the web component by calling functions in the function set through the web component and the function set entry point during the execution of the target format file in the rendering engine.

[0392] Optionally, the loading module 1301 is specifically used to: obtain the Web component of the first webpage; the Web component of the first webpage is a file in the target format from the server; and load the target format file of the Web component into the registry of the rendering engine.

[0393] Optionally, the Web component includes the structural relationships between multiple child tags and lifecycle functions; the creation module 1303 is specifically used to: call functions in the function set through the lifecycle functions and function set entry points of the Web component, and create the DOM tree of the Web component according to the structural relationships between multiple child tags; the multiple nodes of the DOM tree of the Web component correspond one-to-one with the multiple child tags.

[0394] Optionally, the function set is also used to mount the DOM tree of the Web component, and the rendering context is also used to indicate the parent node of the Web component; the DOM tree generation device 1300 also includes a mounting module 1304; the creation module 1303 is specifically used to: create the DOM tree of the first web page based on the obtained Hypertext Markup Language (HTML) document of the first web page; the DOM tree of the first web page includes the parent node of the Web component; the mounting module 1304 is used to respond to the mounting instruction of the Web component, call the function in the function set through the entry point of the Web component and the function set, mount the DOM tree of the Web component on the parent node of the Web component, and obtain the mounted DOM tree of the first web page.

[0395] Optionally, the DOM tree generation device 1300 further includes a rendering module 1305; the rendering module 1305 is used to render the first webpage based on the DOM tree of the mounted first webpage.

[0396] Optionally, the generation module 1302 is specifically used for: creating an extended DOM node of the Web component; mounting the extended DOM node of the Web component on the DOM tree of the first web page; the extended DOM node of the Web component being the parent node of the Web component; and generating the rendering context of the Web component through the extended DOM node of the Web component.

[0397] Optionally, the generation module 1302 is specifically used to: set the entry point of the function set; and generate the rendering context of the Web component based on the entry point of the function set.

[0398] Optionally, the creation module 1303 is also used to: create a JS interface for the Web component, the JS interface of the Web component being used to obtain the operations performed by the user on the Web component on the first webpage; and bind the JS interface of the Web component to the extended DOM node of the Web component.

[0399] Optionally, the DOM tree generation device 1300 further includes an unloading module 1306; the unloading module 1306 is used to: obtain a first operation through the JS interface of the Web component, the first operation being used to instruct the unloading of the Web component; and unload the DOM tree of the Web component by calling functions in the function set through the entry point of the extended DOM node and function set of the Web component.

[0400] Optionally, the DOM tree generation device 1300 further includes a transfer module 1307; the transfer module 1307 is used to: obtain a second operation through the JS interface of the Web component, the second operation being used to instruct the DOM tree of the Web component to be transferred to the DOM tree of the second web page; and to mount the DOM tree of the Web component onto the DOM tree of the second web page by calling functions in the function set through the entry point of the extended DOM node and function set of the Web component.

[0401] Optionally, the DOM tree generation device 1300 further includes an attribute change module 1308; the attribute change module 1308 is used to: obtain a third operation through the JS interface of the Web component, the third operation being used to instruct the attribute value of the first attribute of the Web component to be changed to a first value; and call a function in the function set through the entry point of the extended DOM node and function set of the Web component to change the attribute value of the first attribute on the DOM tree of the Web component to a first value.

[0402] Optionally, the third operation is also used to indicate that the value of the first attribute of the Web component on the first webpage before the change is the second value; the attribute change module 1308 is specifically used to: if the value of the first attribute in the DOM tree of the Web component before the change is the same as the second value, change the value of the first attribute in the DOM tree of the Web component to the first value through the extended DOM node of the Web component.

[0403] Optionally, the creation instruction includes a target identifier; the generation module 1302 is specifically used to: if the target identifier meets the component identifier format, in response to the creation instruction, generate a rendering context for the Web component; the component identifier format is used to characterize the format of the Web component's identifier.

[0404] Optionally, the generation module 1302 is specifically used to: generate the rendering context of the Web component if the target identifier meets the component identifier format and the rendering engine's registry includes a file of the target format of the Web component.

[0405] Optionally, the loading module 1301 is specifically used to: obtain the Web component of the first webpage, wherein the Web component of the first webpage is a source code file from the server; convert the source code file into a target format file; and load the target format file of the Web component into the registry of the rendering engine.

[0406] Optionally, the lifecycle functions include a creation function, which is used to create the DOM tree of the Web component; the creation module 1303 is specifically used to: call functions in the function set through the creation function of the Web component and the entry point of the function set, and create the DOM tree of the Web component according to the structural relationship between multiple child tags.

[0407] Optionally, the function set is also used to mount the DOM tree of the Web component. The mounting module 1304 specifically includes: responding to the mounting instruction of the Web component, calling the functions in the function set through the lifecycle functions of the Web component and the entry point of the function set, and mounting the DOM tree of the Web component onto the parent node of the Web component.

[0408] Optionally, the lifecycle functions include mounting functions, which are used to mount the DOM tree of the Web component; the mounting module 1304 specifically includes: calling functions in the function set through the mounting function of the Web component and the entry point of the function set to mount the DOM tree of the Web component onto the parent node of the Web component.

[0409] Optionally, the function set is also used to unload the DOM tree of the Web component. The unloading module 1306 is specifically used to: send the Web component's unloading instruction to the Web component's extended DOM node through the Web component's JS interface; obtain the Web component's unloading instruction through the Web component's extended DOM node; and, in response to the Web component's unloading instruction, call the function in the function set through the entry point of the Web component and the function set to unload the Web component's DOM tree.

[0410] Optionally, the DOM tree of the Web component can be unloaded by calling functions in the function set through the entry point of the function set, including: unloading the DOM tree of the Web component by calling functions in the function set through the lifecycle functions of the Web component and the entry point of the function set.

[0411] Optionally, the lifecycle functions also include an unload function, which is used to unload the DOM tree of the Web component; unloading the DOM tree of the Web component by calling functions in the function set through the Web component's lifecycle functions and the entry point of the function set, including: unloading the DOM tree of the Web component by calling functions in the function set through the Web component's unload function and the entry point of the function set.

[0412] Optionally, unloading the DOM tree of the Web component includes unloading the extended DOM nodes of the Web component and the DOM tree of the Web component.

[0413] Optionally, the function set is also used to transfer the DOM tree of the Web component. The transfer module 1307 is specifically used to: send the transfer instruction of the Web component to the extended DOM node of the Web component through the JS interface of the Web component; obtain the transfer instruction of the Web component through the extended DOM node of the Web component; and, in response to the transfer instruction of the Web component, call the function in the function set through the entry point of the Web component and the function set to mount the DOM tree of the Web component onto the DOM tree of the second web page.

[0414] Optionally, by calling functions in the function set through the entry point of the Web component and the function set, the DOM tree of the Web component is mounted on the DOM tree of the second web page. This includes: by calling functions in the function set through the lifecycle functions of the Web component and the entry point of the function set, the DOM tree of the Web component is mounted on the DOM tree of the second web page.

[0415] Optionally, the lifecycle functions include transfer functions, which are used to transfer the DOM tree of the Web component from the DOM tree of one webpage to the DOM tree of another webpage; by calling functions in the function set through the lifecycle functions of the Web component and the entry point of the function set, the DOM tree of the Web component is mounted on the DOM tree of the second webpage, including: by calling functions in the function set through the transfer functions of the Web component and the entry point of the function set, the DOM tree of the Web component is mounted on the DOM tree of the second webpage.

[0416] Optionally, the second operation is also used to indicate the first parent node of the Web component, and the DOM tree of the second webpage includes the first parent node of the Web component; mounting the DOM tree of the Web component onto the DOM tree of the second webpage includes: mounting the DOM tree of the Web component onto the first parent node of the Web component.

[0417] Optionally, mounting the DOM tree of the Web component onto the DOM tree of the second webpage includes: mounting the extended DOM node of the Web component and the DOM tree of the Web component onto the DOM tree of the second webpage.

[0418] Optionally, mounting the extended DOM node and the DOM tree of the Web component onto the DOM tree of the second webpage includes mounting the extended DOM node and the DOM tree of the Web component onto the first parent node of the Web component.

[0419] Optionally, the function set is also used to change the attribute values ​​of the DOM tree of the Web component. The attribute change module 1308 is specifically used to: send the attribute change instruction of the Web component to the extended DOM node of the Web component through the JS interface of the Web component; obtain the attribute change instruction of the Web component through the extended DOM node of the Web component; and, in response to the attribute change instruction of the Web component, call the function in the function set through the entry point of the Web component and the function set to change the attribute value of the first attribute on the DOM tree of the Web component to the first value.

[0420] Optionally, calling a function in the function set through the entry point of the Web component and the function set to change the attribute value of the first property on the DOM tree of the Web component to the first value includes: calling a function in the function set through the lifecycle function of the Web component and the entry point of the function set to change the attribute value of the first property on the DOM tree of the Web component to the first value.

[0421] Optionally, the lifecycle functions include property change functions, which are used to change the property value of the first property in the DOM tree of the Web component; by calling functions in the function set through the entry point of the Web component's lifecycle functions and function set, the property value of the first property in the DOM tree of the Web component is changed to the first value, including: by calling functions in the function set through the entry point of the Web component's property change functions and function set, the property value of the first property in the DOM tree of the Web component is changed to the first value.

[0422] For a detailed description of the above-mentioned optional methods, please refer to the foregoing method embodiments, which will not be repeated here. Furthermore, the explanation of any of the DOM tree generation devices 1300 provided above, as well as the description of their beneficial effects, can be found in the corresponding method embodiments described above, and will not be repeated here.

[0423] This application also provides an electronic device, as shown in FIG14, including: a display screen (or screen) 1401, one or more processors 1402, a memory 1403, and one or more computer programs 1404. The above-mentioned devices can be connected via one or more communication buses. The one or more computer programs 1404 are stored in the memory 1403 and configured to be executed by the one or more processors 1402. The one or more computer programs 1404 include instructions that can be used to perform the various steps in the above embodiments. All relevant content of the steps involved in the above method embodiments can be referenced to the functional description of the corresponding physical device, and will not be repeated here.

[0424] For example, the processor 1402 can be the processor 301 shown in FIG3, the memory 1403 can be the internal memory 303 shown in FIG3, and the display screen 1401 can be the display screen 316 shown in FIG3.

[0425] This application also provides an electronic device, including one or more processors and one or more memories. The one or more memories are coupled to the one or more processors, and the one or more memories are used to store computer program code, including computer instructions. When the one or more processors execute the computer instructions, the electronic device performs the aforementioned method steps to implement the DOM tree generation method in the above embodiments.

[0426] This application also provides a computer-readable storage medium storing computer instructions. When the computer instructions are executed on an electronic device, the electronic device performs the aforementioned method steps to implement the DOM tree generation method in the above embodiments.

[0427] Embodiments of this application also provide a computer program product that, when run on a computer, causes the computer to perform the aforementioned related steps to implement the DOM tree generation method executed by the electronic device in the above embodiments.

[0428] In addition, embodiments of this application also provide a screen projection control device, which may specifically be a chip, component, or module. The device may include a connected processor and a memory; wherein the memory is used to store computer execution instructions. When the device is running, the processor can execute the computer execution instructions stored in the memory to cause the device to execute the DOM tree generation method executed by the electronic device in the above-described method embodiments. The electronic device, computer-readable storage medium, computer program product, or device provided in this embodiment are all used to execute the corresponding methods provided above. Therefore, the beneficial effects they can achieve can be referred to in the beneficial effects of the corresponding methods provided above, and will not be repeated here.

[0429] This application also provides a communication system, which may include: a first device and a second device, wherein the first device is used to execute the method executed by the first device in the above method embodiments, and the second device is used to execute the method executed by the second device in the above method embodiments.

[0430] This application also provides a chip system, as shown in FIG15. The chip system 1500 includes at least one processor 1501 and at least one interface circuit 1502. The processor 1501 and the interface circuit 1502 are interconnected via lines. For example, the interface circuit 1502 can be used to receive signals from other devices. As another example, the interface circuit 1502 can be used to send signals to other devices (e.g., the processor 1501). Exemplarily, the interface circuit 1502 can read instructions stored in a memory and send the instructions to the processor 1501. When the instructions are executed by the processor 1501, the electronic device can perform the steps performed by the first or second electronic device in the above embodiments. Of course, the chip system may also include other discrete devices, which are not specifically limited in this application.

[0431] Optionally, the chip system may contain one or more processors. These processors can be implemented in hardware or software. When implemented in hardware, the processor can be a logic circuit, an integrated circuit, etc. When implemented in software, the processor can be a general-purpose processor, implemented by reading software code stored in memory.

[0432] For example, the chip system may be a field programmable gate array (FPGA), an application specific integrated circuit (ASIC), a system on chip (SoC), a central processor unit (CPU), a network processor (NP), a digital signal processor (DSP), a micro controller unit (MCU), a programmable logic device (PLD), or other integrated chips.

[0433] It should be understood that each step in the above method embodiments can be completed by integrated logic circuits in the processor hardware or by instructions in software form. The method steps disclosed in the embodiments of this application can be directly manifested as being executed by a hardware processor, or being executed by a combination of hardware and software modules in the processor.

[0434] Through the above description of the embodiments, those skilled in the art will understand that, for the sake of convenience and brevity, only the division of the above functional modules is used as an example. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above.

[0435] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. The embodiments can be combined with or referenced to each other without conflict. The apparatus embodiments described above are merely illustrative; for example, the division of modules or units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another device, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between devices or units may be electrical, mechanical, or other forms.

[0436] The units described as separate components may or may not be physically separate. A component shown as a unit can be one or more physical units; that is, it can be located in one place or distributed in multiple different locations. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs. Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated units described above can be implemented in hardware or as software functional units.

[0437] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a readable storage medium. Based on this understanding, the technical solutions of the embodiments of this application, in essence, or the parts that contribute to the prior art, or all or part of the technical solutions, can be embodied in the form of a software product. This software product is stored in a storage medium and includes several instructions to cause a device (which may be a microcontroller, chip, etc.) or processor to execute all or part of the steps of the methods of the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0438] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A method for generating a Document Object Model (DOM) tree, characterized in that, Applied to electronic devices; the method includes: The web application loads a first webpage including web components, wherein the web components are files in a target format that are recognizable by the electronic device. The rendering engine responds to a creation instruction to generate a rendering context for the Web component; the rendering engine includes a set of functions for creating a DOM tree for the Web component, the creation instruction for creating a DOM tree for the Web component, and the rendering context for indicating the entry point of the set of functions; During the process of running the target format file in the rendering engine, the rendering engine calls functions in the function set through the entry point of the Web component and the function set to create the DOM tree of the Web component.

2. The method according to claim 1, characterized in that, The rendering engine of the web application obtains the web components of the first webpage, including: The rendering engine obtains the Web component of the first webpage; the Web component of the first webpage is a file of a target format from the server; The rendering engine loads the target format file of the Web component into the rendering engine's registry.

3. The method according to claim 1 or 2, characterized in that, The Web component includes structural relationships between multiple child tags and lifecycle functions; creating the DOM tree of the Web component includes: The rendering engine calls functions in the function set through the lifecycle functions of the Web component and the entry point of the function set, and creates the DOM tree of the Web component according to the structural relationship between the multiple child tags; the multiple child nodes of the DOM tree of the Web component correspond one-to-one with the multiple child tags.

4. The method according to any one of claims 1-3, characterized in that, The function set is also used to mount the DOM tree of the Web component, and the rendering context is also used to indicate the parent node of the Web component; the method further includes: The rendering engine creates a DOM tree for the first webpage based on the obtained Hypertext Markup Language (HTML) document of the first webpage; the DOM tree of the first webpage includes the parent node of the Web component. The rendering engine responds to the mounting instruction of the Web component by calling the functions in the function set through the entry point of the Web component and the function set, and mounts the DOM tree of the Web component onto the parent node of the Web component to obtain the DOM tree of the first web page after mounting.

5. The method according to claim 4, characterized in that, The method further includes: The rendering engine renders the first webpage based on the DOM tree of the mounted first webpage.

6. The method according to claim 4 or 5, characterized in that, The rendering context for generating the Web component includes: The rendering engine creates extended DOM nodes for the Web component; The rendering engine mounts the extended DOM node of the Web component onto the DOM tree of the first webpage; the extended DOM node of the Web component is the parent node of the Web component; The rendering engine generates the rendering context of the Web component through the extended DOM nodes of the Web component.

7. The method according to claim 6, characterized in that, The rendering context for generating the Web component includes: The rendering engine sets the entry point for the function set; The rendering engine generates the rendering context of the Web component based on the entry point of the function set.

8. The method according to claim 6 or 7, characterized in that, The method further includes: The execution engine of the web application creates the JS interface of the web component; the JS interface of the web component is used to obtain the operation performed by the user on the web component on the first web page; The execution engine binds the JS interface of the Web component to the extended DOM node of the Web component.

9. The method according to claim 8, characterized in that, The function set is also used to unload the DOM tree of the Web component, and the method further includes: The execution engine obtains a first operation through the JS interface of the Web component, and the first operation is used to instruct the uninstallation of the Web component; The rendering engine calls functions in the function set through the entry point of the extended DOM node and function set of the Web component to unload the DOM tree of the Web component.

10. The method according to claim 8, characterized in that, The function set is also used to transfer the DOM tree of the Web component, and the method further includes: The execution engine obtains a second operation through the JS interface of the Web component, the second operation being used to instruct the Web component on the first webpage to be transferred to the second webpage; The rendering engine calls functions in the function set through the entry point of the extended DOM node and function set of the Web component, thereby transferring the DOM tree of the Web component from the DOM tree of the first webpage to the DOM tree of the second webpage.

11. The method according to any one of claims 8-10, characterized in that, The function set is also used to change the attribute values ​​of the DOM tree of the Web component, and the method further includes: The execution engine obtains a third operation through the JS interface of the Web component. The third operation is used to instruct the attribute value of the first property of the Web component to be changed to the first value. The rendering engine calls functions in the function set through the entry point of the extended DOM node and function set of the Web component to change the attribute value of the first attribute on the DOM tree of the Web component to the first value.

12. The method according to claim 11, characterized in that, The third operation is further used to instruct the value of the first attribute of the Web component before the change to be the second value; changing the value of the first attribute of the Web component's DOM tree to the first value includes: If the value of the first attribute in the DOM tree of the Web component before the change is the same as the second value, the rendering engine changes the value of the first attribute in the DOM tree of the Web component to the first value.

13. The method according to claim 12, characterized in that, The creation instruction includes a target identifier; the rendering engine, in response to the creation instruction, generates a rendering context for the Web component, including: If the target identifier meets the component identifier format, the rendering engine responds to the creation instruction and generates the rendering context of the Web component; the component identifier format is used to characterize the format of the identifier of the Web component.

14. The method according to claim 13, characterized in that, If the target identifier meets the component identifier format, the rendering engine responds to the creation instruction and generates the rendering context of the Web component, including: If the target identifier satisfies the component identifier format and the rendering engine's registry includes a file in the target format corresponding to the target identifier, the rendering engine generates the rendering context for the Web component.

15. An electronic device, characterized in that, The electronic device includes: One or more processors; One or more memory units; and one or more programs; wherein the one or more programs are stored in the one or more memories, and the one or more programs include instructions that, when executed by the electronic device, cause the electronic device to perform the method as described in any one of claims 1-14.

16. A web application, characterized in that, The rendering engine of the web application includes a set of functions for creating the DOM tree of the web components, and the web application is installed on an electronic device such that the electronic device performs the method as described in any one of claims 1-14.

17. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program / instruction, which, when executed by a computing device, enables the electronic device to implement the method as described in any one of claims 1-14.

Images