A method, device and storage medium for rendering a hypertext page

Abstract

The application discloses a hypertext page rendering method and device, electronic equipment and storage medium, the method comprises the following steps: in response to the cross-platform application starting instruction, generating the hypertext page rendering request of the target application, and obtaining the web page code information of the target application corresponding to the hypertext page rendering request from the management server, the web page code information is analyzed, and the second hypertext object structure corresponding to the preset rendering frame is generated based on the first hypertext object structure in the code analysis result, the rendering is carried out based on the second hypertext object structure, and the hypertext page is obtained. The method can improve the consistency and smoothness of the hypertext page rendering on multiple platforms, so that the user can obtain the same experience when opening the hypertext page and opening the native page, and the user has no perception.

Description

Technical Field

[0001] This application relates to the field of page rendering technology, and in particular to a method, apparatus, device and storage medium for rendering hypertext pages. Background Technology

[0002] Hypertext pages have long been a widely used business development method due to their ease of development, inherent cross-platform compatibility, and large existing user base. However, in current technology, the differences in native controls across different systems make it difficult to describe them using a unified hypertext language. Consequently, on mobile devices, hypertext applications exhibit inconsistent page control behavior across different systems, resulting in poor page rendering smoothness and consistency. Summary of the Invention

[0003] This application provides a method, apparatus, device, and storage medium for rendering hypertext pages, achieving the technical effect of improving the consistency and smoothness of hypertext page rendering.

[0004] On the one hand, this application provides a method for rendering a hypertext page, the method comprising:

[0005] In response to a cross-platform application launch command, a hypertext page rendering request for the target application is generated, and the web page code information of the target application corresponding to the hypertext page rendering request is obtained from the management server. The web page code information is obtained by converting general hypertext page code information based on a code conversion tool.

[0006] The webpage code information is parsed to obtain the code parsing results;

[0007] Based on the first hypertext object structure in the code parsing result, a second hypertext object structure corresponding to the preset rendering framework is generated. The first hypertext object structure represents the association between hypertext objects corresponding to the hypertext page, and the second hypertext object structure represents the association between hypertext objects in the target format. The target format is a format compatible with the rendering framework.

[0008] The hypertext page is obtained by rendering the page based on the second hypertext object structure.

[0009] On the other hand, a hypertext page rendering apparatus is provided, the apparatus comprising:

[0010] The rendering request generation module is used to respond to the cross-platform application launch command, generate a hypertext page rendering request for the target application, and obtain the web page code information of the target application corresponding to the hypertext page rendering request from the management server. The web page code information is obtained by converting general hypertext page code information based on a code conversion tool.

[0011] The code parsing module is used to parse the webpage code information and obtain the code parsing results;

[0012] The rendering configuration information generation module is used to generate a second hypertext object structure corresponding to a preset rendering framework based on the first hypertext object structure in the code parsing result. The first hypertext object structure represents the association between hypertext objects corresponding to the hypertext page, and the second hypertext object structure is the association between hypertext objects in the target format. The target format is a format compatible with the rendering framework.

[0013] The hypertext page rendering module is used to render the page based on the second hypertext object structure to obtain the hypertext page.

[0014] On the other hand, an electronic device is provided, comprising a processor and a memory, wherein the memory stores at least one instruction or at least one program, the at least one instruction or the at least one program being loaded and executed by the processor to implement the hypertext page rendering method as described above.

[0015] On the other hand, a computer-readable storage medium is provided, the storage medium including a processor and a memory, the memory storing at least one instruction or at least one program, the at least one instruction or the at least one program being loaded and executed by the processor to implement the hypertext page rendering method as described above.

[0016] On the other hand, a computer program product or computer program is provided, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the methods provided in the various alternative implementations of the above-described hypertext page rendering.

[0017] This application provides a method, apparatus, device, and storage medium for rendering hypertext pages. The method may include: an application responding to a cross-platform application launch command, generating a hypertext page rendering request for the target application, obtaining webpage code information of the target application corresponding to the hypertext page rendering request from a management server, parsing the webpage code information, and generating a second hypertext object structure corresponding to a preset rendering framework based on a first hypertext object structure in the code parsing result, and rendering the page based on the second hypertext object structure to obtain a hypertext page. This method uses the second hypertext object structure as a bridge between hypertext code and the rendering framework, mapping the first hypertext object structure corresponding to the hypertext object's code to the rendering framework to obtain the second hypertext object structure. This allows the hypertext object to be rendered to be passed to the rendering framework, improving the consistency and smoothness of hypertext page rendering across multiple platforms, thus providing users with the same experience when opening a hypertext page as when opening a native page, achieving a seamless user experience. Attached Figure Description

[0018] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0019] Figure 1 This is a schematic diagram illustrating an application scenario of a hypertext page rendering method provided in an embodiment of this application.

[0020] Figure 2 A flowchart illustrating a hypertext page rendering method provided in this application embodiment;

[0021] Figure 3 A schematic diagram illustrating data transmission based on an abstraction layer in a hypertext page rendering method provided in this application embodiment;

[0022] Figure 4 A flowchart illustrating the page rendering process in a hypertext page rendering method provided in this application embodiment;

[0023] Figure 5 A flowchart of a page update method in a hypertext page rendering method provided in this application embodiment;

[0024] Figure 6 A flowchart illustrating the insertion of native objects in a hypertext page rendering method provided in this application embodiment;

[0025] Figure 7A flowchart illustrating the mapping of a first hypertext object structure and a native object to a rendering framework in a hypertext page rendering method provided in this application embodiment;

[0026] Figure 8 This is a schematic diagram illustrating the interaction between the development server, management server, and client in a hypertext page rendering method provided in an embodiment of this application.

[0027] Figure 9 A schematic diagram of a hypertext page rendering apparatus provided in an embodiment of this application;

[0028] Figure 10 This is a schematic diagram of the hardware structure of a device for implementing the method provided in the embodiments of this application. Detailed Implementation

[0029] To make the objectives, technical solutions, and advantages of this application clearer, the application will be further described in detail below with reference to the accompanying drawings. Obviously, the described embodiments are merely some embodiments of this application, and not all embodiments. All other embodiments obtained by those skilled in the art based on the embodiments of this application without creative effort are within the scope of protection of this application.

[0030] In the description of this application, it should be understood that the terms "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. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. Furthermore, the terms "first," "second," etc., are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein.

[0031] First, the terms used in this application are defined:

[0032] HTML5 (H5 for short) is a language for describing web page content. HTML5 is the next-generation standard for the internet, a language for building and presenting internet content, and is considered one of the core technologies of the internet.

[0033] JavaScript (JS for short) is a lightweight, interpreted or just-in-time (JIT) programming language that prioritizes functions and is widely used in web application development.

[0034] Flutter is a cross-platform mobile user interface framework launched by Google in recent years.

[0035] Please see Figure 1 This illustration shows an application scenario diagram of a hypertext page rendering method provided in this application embodiment. The application scenario includes a client 110 and a server 120. The server 120 includes a management server 1201 and a development server 1202. The development server 1202 converts the original hypertext code information to obtain webpage code information and sends the webpage code information to the management server 1201. In response to a cross-platform application launch command, the client 110 generates a hypertext page rendering request for the target application and sends the hypertext page rendering request to the management server 1201. The management server 1201 obtains the webpage code information of the target application corresponding to the hypertext page rendering request and sends this network code information to the client 110. The client 110 parses the webpage code information and, based on the first hypertext object structure in the code parsing result, generates a second hypertext object structure corresponding to a preset rendering framework. Page rendering is then performed based on the second hypertext object structure to obtain a hypertext page.

[0036] In this embodiment, client 110 includes physical devices such as smartphones, desktop computers, tablets, laptops, digital assistants, and smart wearable devices, and may also include software running on the physical device, such as applications. The operating system running on the physical device in this embodiment may include, but is not limited to, Android, iOS, Linux, Unix, and Windows. Client 110 includes a UI (User Interface) layer, through which it provides the display of hypertext pages. Additionally, it sends hypertext page rendering requests to server 120 based on API (Application Programming Interface).

[0037] In this embodiment, server 120 may include a standalone server, a distributed server, or a server cluster consisting of multiple servers. Server 120 may include a network communication unit, a processor, and memory, etc. Specifically, server 120 can manage page code information and send page code information corresponding to hypertext page rendering requests to clients.

[0038] Please see Figure 2 It demonstrates a hypertext page rendering method that can be applied on the client side, and the method includes:

[0039] S210. In response to the cross-platform application launch command, generate a hypertext page rendering request for the target application, and obtain the web page code information of the target application corresponding to the hypertext page rendering request from the management server. The web page code information is obtained by converting general hypertext page code information based on a code conversion tool.

[0040] In some embodiments, in response to a cross-platform application launch command triggered by a target object, the client can generate a hypertext page rendering request for the target application. The target object can be a user; for example, a user opening a shared page of another application within a client application, or a user opening a page of an application within a webpage on the client. In this case, the other application or the application opened within the webpage is the original target application. The client generates the hypertext page rendering request for the target application and sends it to the management server. Upon receiving the hypertext page rendering request, the management server obtains the webpage code information of the target application corresponding to the hypertext page rendering request. This webpage code information is code information programmed using JavaScript. This webpage code information is obtained by the development server converting general hypertext page code information using a code conversion tool. The general hypertext page code can be encoded based on a preset hypertext framework, such as an H5 framework like Vue or React.

[0041] S220. Parse the webpage code information to obtain the code parsing results;

[0042] In some embodiments, parsing the webpage code information can yield code parsing results. The code parsing results may include one or more pieces of information such as a first hypertext object structure, hypertext events, native objects, and static resources, wherein the code parsing results include at least the first hypertext object structure.

[0043] S230. Based on the first hypertext object structure in the code parsing result, generate a second hypertext object structure corresponding to the preset rendering framework. The first hypertext object structure represents the relationship between hypertext objects corresponding to the hypertext page, and the second hypertext object structure represents the relationship between hypertext objects in the target format. The target format is a format compatible with the rendering framework.

[0044] In some embodiments, the first hypertext object structure is a tree structure constructed from the relationships between hypertext objects corresponding to the hypertext page. The first hypertext object structure can be a tree structure constructed based on the Document Object Model (DOM), with hypertext objects as nodes and relationships between hypertext objects as edges. These relationships can be hierarchical relationships between hypertext objects, and a v-dom node tree can be obtained based on these hierarchical relationships. The nodes in the v-dom node tree are the hypertext objects. The second hypertext object structure is used to associate the first hypertext object structure with the rendering framework, passing the hypertext object to be rendered to the rendering framework for rendering. The second hypertext object structure is a tree structure constructed based on a target format, with hypertext objects as nodes and relationships between hypertext objects as edges. This target format is the format corresponding to the rendering framework. The second hypertext object structure is used to configure the rendering process. This rendering framework can be the Flutter framework, and the second hypertext object structure can be a widget tree under the Flutter framework. The target format is the format of the widget node, and the widget node can represent various different objects such as interface design components and functional components. By mapping the nodes in the v-dom node tree to the rendering framework, we can obtain the widget tree.

[0045] The hypertext objects in the first and second hypertext object structures can include hypertext object components and their corresponding hypertext attribute information. Hypertext attribute information describes the hypertext object components and can include layout properties, color, shadow, border, font size, font, etc. Layout properties can be the alignment between nodes, fixed width and height, and other attributes relevant to page layout.

[0046] In some embodiments, generating a second hypertext object structure corresponding to a preset rendering framework based on the first hypertext object structure in the code parsing result includes:

[0047] Determine the first transmission relay information corresponding to the first hypertext object structure;

[0048] Based on the first transmission relay information, the first hypertext object structure is mapped into the rendering framework to obtain the second hypertext object structure.

[0049] In some embodiments, a first transmission relay information can be set between the first hypertext object structure and the rendering framework. Based on the first transmission relay information, the first hypertext object structure is mapped to the rendering framework to obtain a second hypertext object structure. This first transmission relay information can be an abstract node tree, which is a tree structure constructed from abstract nodes that have a mapping relationship with the hypertext objects in the first hypertext object structure. When the first hypertext object structure and the rendering framework communicate directly via nodes, there may be a problem with low transmission speed. The first transmission relay information is information where the node communication speed between the first hypertext object structure and the rendering framework is greater than a preset threshold, and the node communication speed between the first transmission relay information and the rendering framework is also greater than a preset threshold. This preset threshold can be the speed of direct node communication between the first hypertext object structure and the rendering framework; that is, both the communication speed between the first transmission relay information and the first hypertext object structure, and the communication speed between the first transmission relay information and the rendering framework, are greater than the speed of direct node transmission between the first hypertext object structure and the rendering framework.

[0050] In some embodiments, see Figure 3 ,like Figure 3 As shown, the client includes a JS layer, an abstraction layer, and a Flutter layer. In the JS layer, the JS code and stylesheet (CSS) descriptions corresponding to the page code information are parsed, and a v-dom node tree is generated. The abstraction layer can be implemented in C++. The abstraction layer communicates with the JS layer, generating an abstract node tree corresponding to the v-dom node tree. This abstract node tree serves as the first transmission relay information. The v-dom node tree is mapped to the rendering framework through the abstract node tree, resulting in the widget tree in the Flutter layer. Direct node communication between the JS layer and the Flutter layer is slow, while communication between the JS layer and the C++ layer is fast, and communication between the C++ layer and Flutter is also fast. Therefore, the abstraction layer can be coded in C++ to relay the v-dom node tree as an abstract node tree within the abstraction layer, thus obtaining the widget tree.

[0051] By using an abstract node tree based on the abstraction layer as a transmission relay, the first hypertext object structure is mapped to the rendering framework to obtain the second hypertext object structure. The transmission speed between the transmission relay information and the first hypertext object structure, as well as the transmission speed between the transmission relay information and the rendering framework, are both greater than the transmission speed of direct communication between the first hypertext object structure and the rendering framework. Therefore, the transmission speed between the first hypertext object structure and the rendering framework can be improved, thereby improving the efficiency of hypertext object mapping.

[0052] S240. Render the page based on the second hypertext object structure to obtain a hypertext page;

[0053] In some embodiments, page element information corresponding to the rendering framework can be generated based on the second hypertext object structure. The page element information represents the association relationship with the page elements corresponding to the hypertext object, and can be a tree structure constructed from the association relationships with the page elements corresponding to the hypertext object. Rendering execution information is determined based on the page element information, and rendering operations are performed according to the rendering execution information to render the page elements and obtain the hypertext page.

[0054] In some embodiments, see Figure 4 Based on the second hypertext object structure, page rendering is performed to obtain a hypertext page including:

[0055] S410. Based on the second hypertext object structure, generate page element information corresponding to the rendering framework. The page element information represents the association relationship between the page elements in the hypertext page and the page elements corresponding to the hypertext object.

[0056] S420. Based on page element information, create rendering execution information corresponding to the rendering framework. The rendering execution information is the tree structure information of page elements based on the rendering order between page elements.

[0057] S430. Render the hypertext page based on the rendering execution information.

[0058] In some embodiments, the second hypertext object structure is a lightweight structure, easy to construct, and can be reconstructed when the page is updated. The page element information, however, is not a lightweight structure and can be updated based on the reconstructed second hypertext object structure. The page element information can be a tree structure constructed from the relationships between page elements corresponding to the hypertext objects in the hypertext page. The page elements in the page element information correspond to the hypertext objects in the second hypertext object structure. The tree structure corresponding to the page element information is a tree structure with element components as nodes and the relationships between element components as edges. Based on the edges in the tree structure, i.e., the relationships between element components, the rendering execution order of each page element during the rendering process can be determined. Each node also includes element attribute information corresponding to the element component. This element attribute information describes the element component and can be used to draw the element component. The page element information can be an element tree in Flutter, where the nodes in the element tree correspond to the nodes in the widget.

[0059] By traversing the page elements in the page element information and determining the rendering order for each element, rendering execution information corresponding to the rendering framework can be created. The rendering execution information is a tree structure built with page element information as nodes and the corresponding rendering execution order as edges. This rendering execution order is based on relationships, which can be hierarchical. Traversal can be performed from child nodes to parent nodes based on the hierarchical relationships between page elements, or from parent nodes to child nodes based on the hierarchical relationships between page elements. Since the rendering execution information contains the rendering order between page elements, it is used to perform rendering operations. Although the page element information contains page element components and their element attributes, it is not used for rendering. The page element information is used to coordinate between the second hypertext object structure and the rendering execution information. Based on the page element information, the page elements that need to be rendered in the rendering execution information and the relationships between page elements can be determined. When the client responds to the start command to render, the page elements that need to be rendered in the rendering execution information are all the elements in the page element information. When the client responds to the page update command to render, the page elements that need to be rendered in the rendering execution information are the newly added page elements after the page element information is updated.

[0060] In some embodiments, the rendering execution information can be the render tree in the Flutter framework. Based on the element tree, the page elements that the render tree needs to render can be determined, thereby creating the render tree. The render tree performs rendering operations, drawing the page elements based on the page element attribute information to obtain the hypertext page.

[0061] By associating the structure of the second hypertext object with rendering execution information through page element information, and coordinating rendering configuration and execution, the accuracy and efficiency of hypertext page rendering can be improved.

[0062] In some embodiments, see Figure 5 After rendering page elements based on page element information to obtain a hypertext page, the method also includes:

[0063] S510. In response to the page update instruction, update the first hypertext object structure to obtain the first updated object structure;

[0064] S520. Compare the structure of the first hypertext object and the structure of the first updated object to obtain the first difference information;

[0065] S530. Based on the first difference information, update the structure of the second hypertext object to obtain the second updated object structure;

[0066] S540. Compare the second hypertext object structure and the second updated object structure to obtain the second difference information;

[0067] S550. Based on the second difference information, update the page element information to obtain updated page element information;

[0068] S560. Based on the newly added page elements in the updated page element information, create target rendering execution information. The target rendering execution information is the tree structure information of the newly added page elements based on the rendering order among the newly added page elements.

[0069] S570. Based on the target rendering execution information, render the updated hypertext page.

[0070] In some embodiments, in response to a page update instruction, such as a page turning or click instruction, the first hypertext object structure is updated to obtain a first updated object structure. Comparing the first hypertext object structure and the first updated object structure yields first difference information, which represents the updated content of the hypertext object corresponding to the page update instruction. Based on the first difference information, the second hypertext object structure is updated to obtain a second updated object structure. When updating the second hypertext object structure, the corresponding second updated object structure can be directly generated based on the first updated object structure, that is, the updated second hypertext object structure is directly reconstructed. Comparing the second hypertext object structure and the second updated object structure yields second difference information.

[0071] Based on the second difference information, the page element information is updated to obtain the updated page element information. When updating the page element information, based on the hypertext object corresponding to the second difference information, the page elements in the page element information corresponding to the second difference information are determined. The nodes in the updated page element information can be traversed. If a node with a structure inconsistent with the second update object is detected, i.e., a node belonging to the second difference information, the node is deleted, and a new node is generated based on the second difference information, completing the update of the page element information. The new node corresponding to the second difference information is the newly added page element in the page element information. Based on the newly added page elements, target rendering execution information is created. The target rendering execution information is a tree structure information of the newly added page elements based on the rendering order among them. When rendering, the target rendering execution information only renders the newly added page elements with differences, resulting in the updated hypertext page.

[0072] When a page is updated, the newly added page elements are determined by comparing the first hypertext object structure and the rendering framework, thereby generating the corresponding target rendering execution information. This can improve the accuracy of incremental rendering and reduce the number of nodes in each update. Only the newly added page elements determined by the second difference information are updated, which can improve the efficiency of page updates.

[0073] In some embodiments, the page update instruction includes an event-triggered instruction, which represents an instruction triggered based on a hypertext event in the code parsing result. In response to the page update instruction, the first hypertext object structure is updated to obtain the first updated object structure, which includes:

[0074] In response to an event trigger command, retrieve the target update object of the hypertext event corresponding to the event trigger command;

[0075] Based on the target update object, the structure of the first hypertext object is updated to obtain the first update object structure.

[0076] In some embodiments, the code parsing results contain preset hypertext events, such as page navigation events, which can be directly set to open the target page associated with the current page through the rendering framework and re-execute the rendering process of the target page. There is a correspondence between the hypertext events and the target update object in the first hypertext object structure; the target update object is the hypertext object that needs to be rendered when the hypertext event is triggered. Based on the target update object, the first hypertext object structure can be updated to obtain the first update object structure.

[0077] Hypertext events allow for the direct implementation of the behavior of the target update object corresponding to the hypertext event, enabling the client to respond quickly to user commands and thus improving the interactivity between the user and the client.

[0078] In some embodiments, the page update instruction also includes an object update instruction. For example, when a user clicks a button on the page, the button changes from a light color to a dark color, indicating that the hypertext object component corresponding to the button on the page has been updated. This can be directly mapped to the first hypertext object structure, modifying the hypertext attribute information of the corresponding hypertext object component within the hypertext object, such as switching the color from a preset first color to a second color, thus updating the first hypertext object structure and obtaining the first updated object structure.

[0079] In some embodiments, see Figure 6 After parsing the webpage code information and obtaining the code parsing results, the method includes:

[0080] S610. Based on the native object and the first hypertext object structure corresponding to the target application in the code parsing results, generate the third hypertext object structure corresponding to the rendering framework. The third hypertext object structure is the association relationship between hypertext objects in the target format and the association relationship between hypertext objects and native objects.

[0081] S620. Based on the third hypertext object structure, generate page element information and native page element information corresponding to the rendering framework. The native page element information represents the native page element in the hypertext page that corresponds to the native object.

[0082] S630. Render page elements based on page element information to obtain a hypertext page, and perform rendering operations on native page elements based on the corresponding rendering component on the client to obtain a hypertext page.

[0083] In some embodiments, if the code parsing result includes native objects, a third hypertext object structure corresponding to the rendering framework is generated based on the native objects in the code parsing result and the first hypertext object structure. The native object includes native object components and their corresponding native attribute information. The native object can be an object in the target application corresponding to a scenario where performance or experience requirements exceed a preset threshold, such as a map, video, or a very long list. Maps or videos have high requirements for accuracy or resolution. The third hypertext object structure is a tree structure constructed based on the relationship between hypertext objects and native objects in the target format. Nodes in this tree structure are either hypertext objects or native objects. Hypertext objects in this tree structure also have relationships with each other. Native objects are information inserted between hypertext objects; therefore, native objects may or may not have relationships with each other. Native objects only have relationships with adjacent hypertext objects.

[0084] Based on the third hypertext object structure, page element information and native page element information corresponding to the rendering framework are generated separately. Different rendering methods are then used to render these two types of information. The native page element information represents the native page elements corresponding to the native object within the hypertext page. This can be rendered using the client's local rendering components, such as the rendering engine built into the client system. The page elements in the page element information correspond to the hypertext object, and corresponding rendering execution information can be created based on this information to complete the rendering process. After both the page elements and native page elements have been rendered, the hypertext page is obtained.

[0085] For objects with high performance or user experience requirements, the native object can be directly added to the page code information. After obtaining the page element information and the native page element information, different rendering methods can be used to render the native object, thereby ensuring the rendering quality of the native object.

[0086] In some embodiments, see Figure 7 Based on the native object and the first hypertext object structure corresponding to the target application in the code parsing results, the third hypertext object structure corresponding to the rendering framework is generated, including:

[0087] S710. Determine the second transmission relay information corresponding to the first hypertext object structure and the third transmission relay information corresponding to the native object;

[0088] S720. Based on the second transmission relay information, the first hypertext object structure is mapped into the rendering frame to obtain the second hypertext object structure;

[0089] S730. Based on the third transmission relay information, the native object is mapped into the rendering framework to obtain the fourth hypertext object structure. The fourth hypertext object structure is the association between the native object and the hypertext object of the target format.

[0090] S740. Based on the second hypertext object structure and the fourth hypertext object structure, the third hypertext object structure is obtained.

[0091] In some embodiments, the hypertext object structure corresponds to the second transmission relay information, and the native object corresponds to the third transmission relay information. The second and third transmission relay information are abstract node trees. The first hypertext object structure is mapped to the rendering framework through the abstract node tree to obtain the second hypertext object structure. The second hypertext object structure represents the association between hypertext objects in the target format. The native object is mapped to the rendering framework through the abstract node tree to generate the non-hypertext nodes supported by the rendering framework and the corresponding subordinate relationships between the non-hypertext nodes, thus obtaining the fourth hypertext object structure. The fourth hypertext object structure represents the association between the target format hypertext object and the native object. Based on the second and fourth hypertext object structures, the third hypertext object structure is obtained. For example, the native object can be inserted as a Flutter-supported platform-view widget node into the initial widegt tree corresponding to the hypertext object to generate the target widget tree, thereby obtaining the third hypertext object structure.

[0092] Using an abstract node tree based on the abstraction layer as a transmission relay, the first hypertext object structure and the native object are mapped to the rendering framework. This can improve the transmission speed between the first hypertext object structure and the rendering framework, thereby improving the efficiency of hypertext object mapping, and also improve the transmission speed between the native object and the rendering framework, thereby improving the efficiency of native object mapping.

[0093] In some embodiments, see Figure 8 ,like Figure 8 The illustration shows an application scenario for this hypertext page rendering method. This scenario includes a development server, a management server, and a client. The hypertext language can be HyperText Markup Language 5 (H5). The development server performs format conversion on the first hypertext object structure, transforming it from a DOM node format into data represented by code. The first hypertext object structure includes hypertext object components and corresponding hypertext attribute information. If native objects exist, the development server performs format conversion on the native objects, transforming them into data identified by code, which can be JavaScript code. The development server can preserve preset hypertext events in the page code information as is. It then packages the converted first hypertext object structure, the converted native objects, and the hypertext events and sends them to the management server, storing them according to version and identification information. The page code information uploaded by the development server includes at least the converted first hypertext object structure and hypertext events. This page code information may also include built-in static images or static resources.

[0094] The development server can be developed based on the standard HTML5 development framework, which facilitates the parsing of page code information into a first hypertext object structure on the client side. The development server can use a preset code conversion tool to convert HTML5 code into a code package, i.e., page code information, and then upload the code package to the management server.

[0095] The client includes a built-in Flutter rendering framework and a JavaScript runtime. The JavaScript runtime is used to run JavaScript code and retrieve the results. After receiving the page code information from the management server in response to the startup command, the client decompresses the page code information and loads the corresponding page code information according to the path information of the hypertext page specified in the startup command. Based on this page code information, a first hypertext object structure and an abstract node tree are generated. This first hypertext object structure is the v-dom node tree in the JavaScript layer. This v-dom node tree is mapped to the Flutter rendering framework through the abstract node tree in the abstract layer to obtain the widget tree, which is the second hypertext object structure. Page element information, i.e., the element tree, is generated based on the second hypertext object structure. Then, rendering execution information, i.e., the render tree, is generated based on the page element information. Rendering is then completed using the render tree to obtain the hypertext page. The JavaScript runtime can handle hypertext events or object update events, executing the code corresponding to either event. When executing code for an object update event, the event can be mapped to the v-dom node tree in the JS layer, modified, and then re-rendered through the rendering process. The client-side processes the page code information, using the rendering framework to draw the page element information, ensuring that the page elements in the hypertext page correspond to the hypertext objects in the page code information. Therefore, when the client opens the target application's hypertext page and its native page, the hypertext page can draw the corresponding page elements as in the native page, making the interface design and interaction methods in the hypertext page consistent with those in the native page.

[0096] This application discloses a hypertext page rendering method. The method includes: responding to a cross-platform application launch command, generating a hypertext page rendering request for the target application; obtaining webpage code information of the target application corresponding to the hypertext page rendering request from a management server; parsing the webpage code information; generating a second hypertext object structure corresponding to a preset rendering framework based on a first hypertext object structure in the code parsing result; generating page element information corresponding to the rendering framework based on the second hypertext object structure; and rendering page elements based on the page element information to obtain a hypertext page. This method uses the second hypertext object structure as a bridge between the hypertext code and the rendering framework, mapping the first hypertext object structure corresponding to the hypertext object's code to the rendering framework to obtain the second hypertext object structure. This allows the hypertext object to be rendered to be passed to the rendering framework, improving the consistency and smoothness of hypertext page rendering across multiple platforms. This ensures that users experience the same way when opening a hypertext page as when opening a native page, achieving a seamless user experience.

[0097] This application also provides a hypertext page rendering device; please refer to [link to relevant documentation]. Figure 9 The device includes:

[0098] The rendering request generation module 910 is used to respond to the cross-platform application startup command, generate the hypertext page rendering request of the target application, and obtain the web page code information of the target application corresponding to the hypertext page rendering request from the management server. The web page code information is obtained by converting the general hypertext page code information based on the code conversion tool.

[0099] The code parsing module 920 is used to parse the webpage code information and obtain the code parsing results;

[0100] The rendering configuration information generation module 930 is used to generate a second hypertext object structure corresponding to a preset rendering framework based on the first hypertext object structure in the code parsing result. The first hypertext object structure represents the relationship between hypertext objects corresponding to the hypertext page, and the second hypertext object structure is the relationship between hypertext objects in the target format. The target format is a format compatible with the rendering framework.

[0101] The hypertext page rendering module 940 is used to render the page based on the second hypertext object structure to obtain the hypertext page.

[0102] In some embodiments, the rendering configuration information generation module 930 includes:

[0103] The first relay determining unit is used to determine the first transmission relay information corresponding to the first hypertext object structure;

[0104] The first relay unit is used to map the first hypertext object structure into the rendering framework based on the first relay information to obtain the second hypertext object structure.

[0105] In some embodiments, the hypertext page rendering module 940 includes:

[0106] The page element information generation unit is used to generate page element information corresponding to the rendering framework based on the second hypertext object structure. The page element information represents the association relationship between the page elements in the hypertext page and the page elements corresponding to the hypertext object.

[0107] The rendering execution information creation unit is used to create rendering execution information corresponding to the rendering framework based on page element information. The rendering execution information is the tree structure information of page elements based on the rendering order between page elements.

[0108] The execution unit is used to render a hypertext page based on the rendering execution information.

[0109] In some embodiments, the device further includes:

[0110] The first update module is used to update the first hypertext object structure in response to the page update command, so as to obtain the first updated object structure;

[0111] The first comparison module is used to compare the structure of the first hypertext object and the structure of the first updated object to obtain the first difference information.

[0112] The second update module is used to update the structure of the second hypertext object based on the first difference information to obtain the second updated object structure;

[0113] The second comparison module is used to compare the structure of the second hypertext object and the structure of the second updated object to obtain the second difference information.

[0114] The page element update module is used to update the page element information based on the second difference information to obtain the updated page element information;

[0115] The target execution information generation module is used to create target rendering execution information based on the newly added page elements in the updated page element information. The target rendering execution information is a tree structure information of the newly added page elements based on the rendering order among the newly added page elements.

[0116] The rendering execution module is used to render the updated hypertext page based on the target rendering execution information.

[0117] In some embodiments, the page update instruction includes an event-triggered instruction, which represents an instruction triggered based on a hypertext event in the code parsing result. The first update module includes:

[0118] The target update object acquisition unit is used to acquire the target update object of the hypertext event corresponding to the event triggering command in response to the event triggering command.

[0119] The update unit is used to update the structure of the first hypertext object based on the target update object to obtain the first update object structure.

[0120] In some embodiments, the device includes:

[0121] The third hypertext object structure generation module is used to generate the third hypertext object structure corresponding to the rendering framework based on the native object corresponding to the target application and the first hypertext object structure in the code parsing results. The third hypertext object structure is the association relationship between hypertext objects in the target format and the association relationship between hypertext objects in the target format and native objects.

[0122] The element information generation module is used to generate page element information and native page element information corresponding to the rendering framework based on the third hypertext object structure. The native page element information represents the native page element in the hypertext page that corresponds to the native object.

[0123] The page rendering module is used to render page elements based on page element information to obtain a hypertext page, and to perform rendering operations on native page elements based on the corresponding rendering component on the client to obtain a hypertext page.

[0124] In some embodiments, the third hypertext object structure generation module includes:

[0125] The second relay determination unit is used to determine the second transmission relay information corresponding to the first hypertext object structure and the third transmission relay information corresponding to the native object;

[0126] The second relay transmission unit is used to map the first hypertext object structure into the rendering frame based on the second relay transmission information to obtain the second hypertext object structure.

[0127] The third relay unit is used to map the native object into the rendering framework based on the third relay information to obtain the fourth hypertext object structure. The fourth hypertext object structure is the association between the native object and the hypertext object in the target format.

[0128] The third hypertext object structure acquisition unit is used to obtain the third hypertext object structure based on the second and fourth hypertext object structures.

[0129] The apparatus provided in the above embodiments can execute the method provided in any embodiment of this application, and has the corresponding functional modules and beneficial effects for executing the method. Technical details not described in detail in the above embodiments can be found in a hypertext page rendering method provided in any embodiment of this application.

[0130] This embodiment also provides a computer-readable storage medium storing computer-executable instructions, which are loaded and executed by a processor using the hypertext page rendering method described above in this embodiment.

[0131] This embodiment also provides a computer program product or computer program that includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the methods provided in the various optional implementations of the above-described hypertext page rendering.

[0132] This embodiment also provides an electronic device, which includes a processor and a memory, wherein the memory stores a computer program adapted to be loaded by the processor and executed by the hypertext page rendering method described above in this embodiment.

[0133] The device can be a computer terminal or a mobile terminal, and it can also participate in constituting the apparatus or system provided in the embodiments of this application. For example... Figure 10 As shown, the mobile terminal 10 (or computer terminal 10 or server 10) may include one or more processors 1002 (shown as 1002a, 1002b, ..., 1002n in the figure) (processor 1002 may include, but is not limited to, a microprocessor MCU or a programmable logic device FPGA, etc.), a memory 1004 for storing data, and a transmission device 1006 for communication functions. In addition, it may also include: a display, an input / output interface (I / O interface), a network interface, a power supply, and / or a camera. Those skilled in the art will understand that... Figure 10 The structure shown is for illustrative purposes only and does not limit the structure of the aforementioned electronic device. For example, the mobile terminal 10 may also include... Figure 10 The more or fewer components shown, or having the same Figure 10 The different configurations shown.

[0134] It should be noted that the aforementioned one or more processors 1002 and / or other data processing circuits are generally referred to herein as "data processing circuits". These data processing circuits may be wholly or partially embodied in software, hardware, firmware, or any other combination thereof. Furthermore, the data processing circuits may be a single, independent processing module, or may be wholly or partially integrated into any other element within the mobile terminal 10 (or computer terminal).

[0135] The memory 1004 can be used to store software programs and modules of application software, such as the program instructions / data storage device corresponding to the method in this embodiment. The processor 1002 executes various functional applications and data processing by running the software programs and modules stored in the memory 1004, thereby realizing the above-described method for generating temporal behavior capture boxes based on self-attention networks. The memory 1004 may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 1004 may further include memory remotely located relative to the processor 1002, and these remote memories can be connected to the mobile terminal 10 via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof.

[0136] The transmission device 1006 is used to receive or send data via a network. Specific examples of the network described above may include a wireless network provided by the communication provider of the mobile terminal 10. In one example, the transmission device 1006 includes a Network Interface Controller (NIC), which can connect to other network devices via a base station to communicate with the Internet. In another example, the transmission device 1006 may be a Radio Frequency (RF) module, used for wireless communication with the Internet.

[0137] The display may be, for example, a touchscreen liquid crystal display (LCD) that allows the user to interact with the user interface of the mobile terminal 10 (or computer terminal).

[0138] This specification provides method operation steps as shown in the embodiments or flowcharts, but based on conventional or non-inventive labor, more or fewer operation steps may be included. The steps and order listed in the embodiments are merely one possible execution order among many steps and do not represent the only execution order. In actual system or interrupt product execution, the methods shown in the embodiments or drawings can be executed sequentially or in parallel (e.g., in a parallel processor or multi-threaded processing environment).

[0139] The structures shown in this embodiment are only partial structures related to the solution of this application and do not constitute a limitation on the device to which the solution of this application is applied. Specific devices may include more or fewer components than shown, or combinations of certain components, or arrangements of different components. It should be understood that the methods, apparatuses, etc., disclosed in this embodiment can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative. For instance, the division of modules 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 system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be indirect coupling or communication connection between devices or unit modules through some interfaces.

[0140] Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as a USB flash drive, a portable hard drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

[0141] Those skilled in the art will further recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed in this specification can be implemented in electronic hardware, computer software, or a combination of both. To clearly illustrate the interchangeability of hardware and software, the components and steps of each example have been generally described in terms of functionality in the foregoing description. Whether these functions are implemented in hardware or software 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.

[0142] The above embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit it. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application.

Claims

1. A method for rendering a hypertext page, characterized in that, The method includes: In response to a cross-platform application launch command, a hypertext page rendering request for the target application is generated, and the web page code information of the target application corresponding to the hypertext page rendering request is obtained from the management server. The web page code information is obtained by converting general hypertext page code information based on a code conversion tool. The webpage code information is parsed to obtain the code parsing results; Based on the first hypertext object structure in the code parsing result, a second hypertext object structure corresponding to the preset rendering framework is generated. The first hypertext object structure represents the association between hypertext objects corresponding to the hypertext page, and the second hypertext object structure represents the association between hypertext objects in the target format. The target format is a format compatible with the rendering framework. Based on the second hypertext object structure, page element information corresponding to the rendering framework is generated. The page element information represents the association relationship between the page elements in the hypertext page and the page elements corresponding to the hypertext object. The page elements in the page element information have a corresponding relationship with the hypertext objects in the second hypertext object structure. Based on the page element information, rendering execution information corresponding to the rendering framework is created. The rendering execution information is the tree structure information of the page elements based on the rendering order between the page elements. The rendering execution information is information used to perform rendering operations. Based on the rendering execution information, the hypertext page is rendered.

2. The hypertext page rendering method according to claim 1, characterized in that, The process of generating a second hypertext object structure corresponding to a preset rendering framework based on the first hypertext object structure in the code parsing result includes: Determine the first transmission relay information corresponding to the first hypertext object structure; Based on the first transmission relay information, the first hypertext object structure is mapped into the rendering framework to obtain the second hypertext object structure.

3. The hypertext page rendering method according to claim 1, characterized in that, The first hypertext object structure is a tree structure constructed from the association relationships of hypertext objects corresponding to the hypertext page. The second hypertext object structure is used to associate the first hypertext object structure with the rendering framework, and to pass the hypertext object to be rendered to the rendering framework for rendering.

4. The hypertext page rendering method according to claim 1, characterized in that, After rendering the page elements based on the page element information to obtain the hypertext page, the method further includes: In response to the page update command, the structure of the first hypertext object is updated to obtain the first updated object structure; By comparing the structure of the first hypertext object and the structure of the first updated object, the first difference information is obtained; Based on the first difference information, the structure of the second hypertext object is updated to obtain the second updated object structure; By comparing the structure of the second hypertext object and the structure of the second updated object, the second difference information is obtained; Based on the second difference information, the page element information is updated to obtain updated page element information; Based on the newly added page elements in the updated page element information, target rendering execution information is created. The target rendering execution information is the tree structure information of the newly added page elements based on the rendering order among the newly added page elements. Based on the target rendering execution information, the updated hypertext page is rendered.

5. The hypertext page rendering method according to claim 4, characterized in that, The page update instruction includes an event trigger instruction, which represents an instruction triggered based on a hypertext event in the code parsing result. The step of updating the first hypertext object structure in response to the page update instruction to obtain a first updated object structure includes: In response to the event triggering command, obtain the target update object of the hypertext event corresponding to the event triggering command; Based on the target update object, the structure of the first hypertext object is updated to obtain the structure of the first update object.

6. The hypertext page rendering method according to claim 1, characterized in that, After parsing the webpage code information to obtain the code parsing result, the method includes: Based on the native object and the first hypertext object structure corresponding to the target application in the code parsing results, a third hypertext object structure corresponding to the rendering framework is generated. The third hypertext object structure is the association relationship between the hypertext objects of the target format and the association relationship between the hypertext objects of the target format and the native object. Based on the third hypertext object structure, page element information and native page element information corresponding to the rendering framework are generated. The native page element information represents the native page element in the hypertext page that corresponds to the native object. The page element is rendered based on the page element information to obtain the hypertext page, and the native page element is rendered based on the corresponding rendering component on the client to obtain the hypertext page.

7. The hypertext page rendering method according to claim 6, characterized in that, The step of generating the third hypertext object structure corresponding to the rendering framework based on the native object and the first hypertext object structure of the target application in the code parsing result includes: Determine the second transmission relay information corresponding to the first hypertext object structure and the third transmission relay information corresponding to the native object; Based on the second transmission relay information, the first hypertext object structure is mapped to the rendering framework to obtain the second hypertext object structure; Based on the third transmission relay information, the native object is mapped into the rendering framework to obtain a fourth hypertext object structure, which is the association between the native object and the hypertext object of the target format. The third hypertext object structure is obtained based on the second hypertext object structure and the fourth hypertext object structure.

8. A hypertext page rendering device, characterized in that, The device includes: The rendering request generation module is used to respond to the cross-platform application launch command, generate a hypertext page rendering request for the target application, and obtain the web page code information of the target application corresponding to the hypertext page rendering request from the management server. The web page code information is obtained by converting general hypertext page code information based on a code conversion tool. The code parsing module is used to parse the webpage code information and obtain the code parsing results; The rendering configuration information generation module is used to generate a second hypertext object structure corresponding to a preset rendering framework based on the first hypertext object structure in the code parsing result. The first hypertext object structure represents the association between hypertext objects corresponding to the hypertext page, and the second hypertext object structure is the association between hypertext objects in the target format. The target format is a format compatible with the rendering framework. A hypertext page rendering module is used to render a page based on the second hypertext object structure to obtain the hypertext page. The process of rendering the page based on the second hypertext object structure to obtain the hypertext page includes: Based on the second hypertext object structure, page element information corresponding to the rendering framework is generated. The page element information represents the association relationship between the page elements in the hypertext page and the page elements corresponding to the hypertext object. The page elements in the page element information have a corresponding relationship with the hypertext objects in the second hypertext object structure. Based on the page element information, rendering execution information corresponding to the rendering framework is created. The rendering execution information is the tree structure information of the page elements based on the rendering order between the page elements. The rendering execution information is information used to perform rendering operations. Based on the rendering execution information, the hypertext page is rendered.

9. An electronic device, characterized in that, The electronic device includes a processor and a memory, the memory storing at least one instruction or at least one program, the at least one instruction or the at least one program being loaded and executed by the processor to implement the hypertext page rendering method as described in any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, The storage medium includes a processor and a memory, wherein the memory stores at least one instruction or at least one program, the at least one instruction or the at least one program being loaded and executed by the processor to implement the hypertext page rendering method as described in any one of claims 1-7.

11. A computer program product, comprising a computer program / instructions, characterized in that, When the computer program / instructions are executed by the processor, they implement the hypertext page rendering method according to any one of claims 1 to 7.

Images