HTML (Hypertext Markup Language) content intelligent rendering method, device, electronic equipment and system

Abstract

The invention relates to the technical field of data processing, and discloses an HTML (Hypertext Markup Language) content intelligent rendering method, device, electronic equipment and system.The method comprises the following steps: acquiring a to-be-rendered HTML code, and constructing a DOM (Document Object Model) tree corresponding to the HTML code according to the HTML code; determining target style information corresponding to the DOM tree based on a preset style analysis algorithm; according to the DOM tree and the target style information corresponding to the DOM tree, constructing a Widget tree corresponding to the DOM tree; based on a preset layout optimization algorithm, performing layout optimization operation on the Widget tree to obtain a target Widget tree; and based on a preset loading strategy, rendering the target Widget tree so as to display page content corresponding to the HTML code in the application program. Therefore, the rendering performance and the rendering accuracy of the HTML content in the mobile application can be improved by implementing the method and the device, so that the user experience of browsing and interacting the HTML content in the mobile application is improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of data processing, in particular to an HTML content intelligent rendering method, device, electronic equipment and system. BACKGROUND

[0002] HTML (Hyper Text Markup Language, HyperText Markup Language) as a general markup language, can flexibly display multimedia content such as rich text, pictures, videos, etc., so as to meet the needs of dynamic information display in mobile applications.

[0003] In the current mobile application development, the most common method for displaying HTML content is to use the WebView component, wherein the WebView component belongs to an embedded browser engine and can directly render HTML content. However, WebView is essentially an independent browser instance, which consumes a large amount of system resources, has a long start-up time and low performance; and the interaction between the native application component is complex, and data transmission needs to be performed through a specific interface, so that the interaction such as scrolling behavior, click response, etc. is inconsistent with the native application component, resulting in incoherent interaction between the two and poor user experience.

[0004] Therefore, it is particularly important to propose a technical solution capable of improving the rendering performance and rendering accuracy of HTML content in mobile applications, thereby improving the user experience of browsing and interacting with HTML content in mobile applications. SUMMARY

[0005] The present application provides an HTML content intelligent rendering method, device, electronic equipment and system, which can improve the rendering performance and rendering accuracy of HTML content in mobile applications, thereby improving the user experience of browsing and interacting with HTML content in mobile applications.

[0006] In order to solve the above technical problems, the present application discloses an HTML content intelligent rendering method, which is applied to an electronic device, wherein the electronic device is installed with an application program, the electronic device is in communication connection with a network attached storage device, the electronic device can access the network attached storage device through the application program, and the method is used for intelligently rendering the HTML content obtained by the electronic device or the network attached storage device; wherein the method comprises: obtaining HTML code to be rendered, and constructing a DOM tree corresponding to the HTML code according to the HTML code; the DOM tree comprises DOM nodes corresponding to a plurality of HTML tags in the HTML code; acquire inline styles recorded in the HTML code and global styles corresponding to the HTML code; generate first style rules according to the inline styles, and generate second style rules according to the global styles; determine target node styles corresponding to each DOM node according to the first style rules and the second style rules; construct a Widget tree corresponding to the DOM tree according to the DOM tree and target style information corresponding to the DOM tree, wherein the target style information corresponding to the DOM tree includes target node styles corresponding to all the DOM nodes; perform layout optimization operation on the Widget tree based on a pre-set layout optimization algorithm to obtain a target Widget tree; render the target Widget tree based on a pre-set loading strategy to display page content corresponding to the HTML code in the application.

[0007] The second aspect of the application discloses an HTML content intelligent rendering device, which is applied to an electronic device, wherein an application is installed in the electronic device, the electronic device is in communication connection with a network-attached storage device, the electronic device can access the network-attached storage device through the application, and the device is used for intelligently rendering HTML content obtained by the electronic device or the network-attached storage device; wherein the device comprises: an acquisition module, which is used for acquiring HTML code to be rendered; a construction module, which is used for constructing a DOM tree corresponding to the HTML code according to the HTML code; the DOM tree includes DOM nodes corresponding to a plurality of HTML tags in the HTML code; a determination module, which is used for acquiring inline styles recorded in the HTML code and global styles corresponding to the HTML code; generating first style rules according to the inline styles, and generating second style rules according to the global styles; and determining target node styles corresponding to each DOM node according to the first style rules and the second style rules; The construction module is also used for constructing a Widget tree corresponding to the DOM tree according to the DOM tree and target style information corresponding to the DOM tree; wherein the target style information corresponding to the DOM tree includes target node styles corresponding to all the DOM nodes; an optimization module, which is used for performing layout optimization operation on the Widget tree based on a pre-set layout optimization algorithm to obtain a target Widget tree; The rendering module is configured to render the target Widget tree based on a preset loading strategy, so as to display page content corresponding to the HTML code by the application program.

[0008] The third aspect of the present application discloses an electronic device, comprising: a memory storing executable program codes; a processor coupled with the memory; The processor invokes the executable program codes stored in the memory to execute part or all steps of the HTML content intelligent rendering method disclosed in the first aspect of the present application.

[0009] The fourth aspect of the present application discloses an HTML content intelligent rendering system, comprising the HTML content intelligent rendering device disclosed in the second aspect of the present application, and a network-attached storage device communicatively connected with the HTML content intelligent rendering device; wherein the HTML content intelligent rendering device performs intelligent rendering operation on the HTML content obtained by the HTML content intelligent rendering device or the network-attached storage device according to the HTML content intelligent rendering method disclosed in the first aspect of the present application. or, The system comprises the electronic device disclosed in the third aspect of the present application, and a network-attached storage device communicatively connected with the electronic device; wherein the electronic device performs intelligent rendering operation on the HTML content obtained by the electronic device or the network-attached storage device according to the HTML content intelligent rendering method disclosed in the first aspect of the present application.

[0010] The fifth aspect of the present application discloses a computer storage medium storing computer instructions, which are invoked to execute part or all steps of the HTML content intelligent rendering method disclosed in the first aspect of the present application.

[0011] Compared with the prior art, the present application has the following beneficial effects: The application can construct a corresponding DOM tree according to the obtained HTML code to be rendered, determine target style information corresponding to the DOM tree based on a style analysis algorithm, construct a Widget tree corresponding to the DOM tree in combination with the DOM tree and the target style information thereof, perform rendering on the target Widget tree obtained after layout optimization of the Widget tree, display HTML content in an application, realize native form presentation (such as Flutter Widget) of the HTML content in the application, seamlessly integrate the HTML content with other parts in the application while maintaining the visual effect of the original HTML, thereby improving the rendering performance and rendering accuracy of the HTML content in the mobile application, and improving the user experience of browsing and interacting with the HTML content in the mobile application; and the application can generate a first style rule according to an inline style recorded in the HTML code, generate a second style rule according to a global style corresponding to the HTML code, determine target node style corresponding to each DOM node in combination with the first style rule and the second style rule, improve the analysis flexibility and comprehensiveness of multiple styles, thereby improving the generation flexibility and accuracy of the style rule, and finally determining more accurate target style information in combination with the style rule corresponding to multiple styles, improving the accuracy of the target style information, and improving the construction accuracy of the Widget tree. BRIEF DESCRIPTION OF DRAWINGS

[0012] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed in the embodiment description will be briefly introduced. Obviously, the drawings in the following description are only some embodiments of the present application, and other drawings can be obtained by those skilled in the art without creative labor.

[0013] Figure 1 is a flowchart of an HTML content intelligent rendering method disclosed by an embodiment of the present application; Figure 2 is a flowchart of another HTML content intelligent rendering method disclosed by an embodiment of the present application; Figure 3 is a structural diagram of an HTML content rendering system architecture disclosed by an embodiment of the present application; Figure 4 is a flowchart of another HTML content intelligent rendering method disclosed by an embodiment of the present application; Figure 5 is a structural diagram of an HTML content intelligent rendering device disclosed by an embodiment of the present application; Figure 6is a structural schematic diagram of another HTML content intelligent rendering device disclosed by an embodiment of the present application; Figure 7 is a structural schematic diagram of still another HTML content intelligent rendering device disclosed by an embodiment of the present application; Figure 8 is a structural schematic diagram of an HTML content intelligent rendering system disclosed by an embodiment of the present application; Figure 9 is a structural schematic diagram of another HTML content intelligent rendering system disclosed by an embodiment of the present application. DETAILED DESCRIPTION

[0014] In order to enable persons skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be described clearly and completely below with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are only some of the embodiments of the present application, but not all the embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by persons skilled in the art without creative work fall within the scope of protection of the present application.

[0015] Embodiment one Please refer to Figure 1 , Figure 1 is a flow schematic diagram of an HTML content intelligent rendering method disclosed by an embodiment of the present application. Wherein, Figure 1 The described HTML content intelligent rendering method can be applied to an HTML content intelligent rendering device, which can include one of an intelligent terminal, an intelligent device, an intelligent system and a server, wherein the server can be a local server or a cloud server, and the present application does not limit the embodiments; the method can also be applied to an electronic device, which has an application program installed therein, and the electronic device is in communication connection with a network attached storage device, and the electronic device can access the network attached storage device through the application program, and the present application does not limit the embodiments; wherein the method can be used for intelligent rendering of HTML content obtained by the electronic device or the network attached storage device; the method can also be applied to an HTML content rendering system architecture, and further, the structure of the architecture can refer to Figure 3 , Figure 3 is a structural schematic diagram of an HTML content rendering system architecture disclosed by an embodiment of the present application, wherein, as Figure 3 indicated, the architecture can include an HTML parsing engine, a Widget conversion engine, a style management system and an extension mechanism, and the present application does not limit the embodiments. As Figure 1 indicated, the HTML content intelligent rendering method can include the following operations: 101. Obtain the HTML code to be rendered, and construct the DOM tree corresponding to the HTML code based on the HTML code.

[0016] In this embodiment of the invention, the DOM (Document Object Model) tree includes DOM nodes corresponding to several HTML tags in the HTML code.

[0017] In this embodiment of the invention, the HTML code may optionally include an HTML string and / or an HTML document, or may include other information forms containing HTML code. This embodiment of the invention does not limit the scope of the HTML code.

[0018] In this embodiment of the invention, optionally, obtaining the HTML code to be rendered may include the following operations: Obtain static HTML strings within the application; and / or receive dynamic HTML content returned by a network API (Application Programming Interface); and / or obtain HTML documents stored in a database; wherein the database may include a local database and / or a cloud database, which is not limited in this embodiment of the invention.

[0019] In this embodiment of the invention, the HTML code contains multiple HTML tags, each of which includes at least a start tag, or may consist of a start tag and an end tag. This embodiment of the invention does not impose any limitations.

[0020] 102. Retrieve inline styles and corresponding global styles from the HTML code.

[0021] In this embodiment of the invention, the inline style can be the style attribute in the HTML code; optionally, the global style can include at least one of the default style provided by the user, the style corresponding to the theme settings of the application, and the default tag style (e.g., the default font size of the h1 tag), which is not limited in this embodiment of the invention; further optionally, the above default style can be set by configuration parameters, which is not limited in this embodiment of the invention.

[0022] 103. Generate the first style rule based on the inline style, and generate the second style rule based on the global style.

[0023] In this embodiment of the invention, the first style rule includes the first node style corresponding to each DOM node; the second style rule includes the second node style corresponding to each DOM node.

[0024] 104. Based on the first and second style rules, determine the target node style for each DOM node.

[0025] In the embodiment of the present application, after step 104, the target node style corresponding to each DOM node is associated to the DOM node.

[0026] 105. Constructing a Widget tree corresponding to the DOM tree based on the DOM tree and the target style information corresponding to the DOM tree.

[0027] In the embodiment of the present application, the target style information corresponding to the DOM tree can include a target node style corresponding to each DOM node.

[0028] In the embodiment of the present application, the Widget tree can include a Widget component corresponding to each DOM node.

[0029] In the embodiment of the present application, optionally, the Widget tree can be a structure in the Flutter framework.

[0030] 106. Performing a layout optimization operation on the Widget tree based on a pre-set layout optimization algorithm to obtain a target Widget tree.

[0031] 107. Rendering the target Widget tree based on a pre-set loading strategy to display page content corresponding to the HTML code in the target area of the application.

[0032] In the embodiment of the present application, optionally, the page content corresponding to the HTML code can be displayed in the target area of the application, and further, the target area can be a visible area of the current page, which is not limited in the embodiment of the present application.

[0033] It can be seen that the method described in the embodiments of the present application can construct a corresponding DOM tree according to the obtained HTML code to be rendered, determine the target style information corresponding to the DOM tree based on the style parsing algorithm, then construct the Widget tree corresponding to the DOM tree in combination with the DOM tree and its target style information, and then render the target Widget tree obtained after layout optimization of the Widget tree, so as to display the HTML content in the application, which can realize the presentation of the HTML content in the native form corresponding to the application (such as Flutter Widget), thereby realizing the seamless integration with other parts in the application while maintaining the visual effect of the original HTML, and further improving the rendering performance and rendering accuracy of the HTML content in the mobile application, thereby facilitating the provision of a unified and smooth browsing experience for users, and further improving the use experience of users in browsing and interacting with the HTML content in the mobile application; compared with the prior art, the lightweight parsing engine and the optimized Widget construction strategy are adopted, which avoids the huge performance overhead of the WebView engine startup, improves the rendering efficiency of the HTML content, and further facilitates the improvement of the browsing experience of users for the rendered HTML content; and the first style rule can be generated according to the inline style recorded in the HTML code, and the second style rule can be generated according to the global style corresponding to the HTML code, and the target node style corresponding to each DOM node is determined in combination with the first style rule and the second style rule, which can improve the analysis flexibility and comprehensiveness of multiple styles, thereby improving the generation flexibility and accuracy of the style rule, and further facilitating the determination of more accurate target style information in combination with the style rule corresponding to multiple styles, improving the accuracy of the target style information, and further improving the construction accuracy of the Widget tree.

[0034] In an optional embodiment, after obtaining the HTML code to be rendered, and before constructing the DOM tree corresponding to the HTML code according to the HTML code, the method can further include the following operations: performing a verification operation on the HTML code to obtain a verification result; wherein the verification operation includes at least one of an encoding format checking operation, a version and type detection operation, and a validity verification operation; when the verification result indicates that the HTML code passes the verification, pre-processing the HTML code to obtain target HTML code; wherein the pre-processing can include at least one of character processing, format standardization processing, and content screening processing.

[0035] In the above, optionally, the character processing can specifically include: replacing HTML entities (i.e. encoding forms of special characters) with actual characters represented thereby, for example, replacing "<" with "<", and replacing "&" with "&"; and / or, processing contents of a CDATA (Character Data) section, the CDATA section being used to include text contents in an HTML document that should not be parsed by a parser, more specifically, contents of the CDATA section can be extracted or retained; and / or, removing HTML comments, embodiments of the present application are not limited thereto.

[0036] In the above, optionally, the format standardization processing can specifically include: fixing HTML errors in the HTML code, for example, processing unclosed tags; and / or, standardizing attribute formats, for example, unifying double quote formats; and / or, processing self-closing tags, for example: to Embodiments of the present application are not limited thereto.

[0037] In the above, optionally, the content screening processing can specifically include: filtering unsupported HTML tags, for example: <script>；和 / 或，清理风险内容，例如：XSS（跨站脚本攻击）防护；和 / 或，处理条件注释以及非标准HTML代码，本发明实施例不做限定。

[0038] 可见，该可选的实施例能够在构建DOM树之前，先对HTML代码进行检验，再在检验通过的情况下，对HTML代码进行预处理，得到目标HTML代码，有利于提高用于构建DOM树的HTML代码的可靠性，从而有利于提高DOM树的构建可靠性。

[0039] 在该可选的实施例中，可选的，根据HTML信息，构建HTML信息对应的DOM树，可以包括以下操作：基于预先设定的HTML解析器，解析目标HTML代码，以创建目标HTML代码中每个HTML标签对应的DOM节点，并构建DOM节点之间的节点关系；每个HTML标签对应的DOM节点记录有该HTML标签对应的标签名、属性键值对和标签内容；其中，该节点关系包括父子关系和 / 或兄弟关系；在解析目标HTML代码的过程中，当检测到目标HTML代码中存在需要特殊处理的特殊HTML标签时，对该特殊HTML标签进行特殊处理，得到特殊标签解析结果，并将该特殊标签解析结果写入至DOM节点中；根据所有DOM节点以及所有DOM节点关系，构建DOM树。

[0040] 其中，可选的，该HTML解析器可以为自顶向下的递归下降解析器或者事件驱动的SAX（Simple API for XML）解析器，本发明实施例不做限定。

[0041] 其中，解析目标HTML代码可以具体包括识别HTML标签、提取HTML标签的属性键值对以及构建节点层次结构。

[0042] 其中，可选的，特殊HTML标签可以包括HTML5所引入的新标签和语义化元素、具备复杂结构（例如：表格、列表）的标签、文本标签、空白符中的一种或多种的组合，本发明实施例不做限定。

[0043] 可见，该可选的实施例还能够基于HTML解析器，解析目标HTML代码，以创建DOM节点并构建节点关系，若在解析过程中检测到特殊HTML标签，则对该标签进行特殊处理，并相应的特殊标签解析结果写入DOM节点，再根据DOM节点以及相应的节点关系，构建DOM树，能够提高对于HTML代码的解析稳定性及解析精准性，从而有利于提高DOM树的构建准确性及构建可靠性。

[0044] 在一个可选的实施例中，根据内联样式，生成第一样式规则，可以包括以下操作：以分号为分割依据，将内联样式分割为多个样式声明，并从每个样式声明中提取属性信息；其中，该属性信息包括属性名和属性值；解析属性信息，以处理颜色值、单位、复合属性、计算表达式，得到属性解析结果；对属性解析结果进行样式规范化处理，以处理属性简写、统一格式，得到第一样式规则。

[0045] 其中，示例性的，处理属性简写可以为将"margin: 10px”展开为四个方向的属性信息，统一格式可以为对单位和值格式进行统一，本发明实施例不做限定。

[0046] 可见，该可选的实施例还能够先对内联样式进行分割，以对每个样式声明中提取属性信息，再解析属性信息，然后对解析结果进行样式规范化处理，得到第一样式规则，能够提高对于内联样式的解析效率及解析精准性，从而有利于提高第一样式规则的生成准确性。

[0047] 在该可选的实施例中，可选的，根据全局样式，生成第二样式规则，可以包括以下操作：将全局样式匹配到相匹配的DOM节点，得到每个DOM节点对应的节点全局样式；基于媒体查询（Media Queries）功能，确定响应式布局对应的布局样式规则；当检测到全局样式中存在自定义样式时，基于预先设定的样式动态生成算法，生成动态自定义样式，以动态处理样式主题变更；根据所有节点全局样式、布局样式规则和动态自定义样式，确定第二样式规则。

[0048] 可见，该可选的实施例还能够将全局样式匹配到相应的DOM节点，得到每个DOM节点对应的节点全局样式，再基于媒体查询，确定响应式布局对应的布局样式规则，若检测到自定义样式，则生成动态自定义样式，再结合上述样式，确定第二样式规则，能够提高对于全局样式的解析效率及解析精准性，从而有利于提高第二样式规则的生成准确性；以及，通过设定对于自定义样式的分析逻辑，能够提高样式解析流程的可扩展性，有利于进一步提高样式解析的灵活性及准确性。

[0049] 在该可选的实施例中，可选的，根据第一样式规则和第二样式规则，确定每个DOM节点对应的目标节点样式，可以包括以下操作：针对每个DOM节点，基于优先级机制，根据第一样式规则和第二样式规则，计算该DOM节点对应的样式优先级信息，并根据样式优先级信息，确定该DOM节点对应的优先级样式；针对每个DOM节点，基于继承机制，根据第一样式规则和第二样式规则，确定该DOM节点对应的继承样式；针对每个DOM节点，根据优先级样式和继承样式，确定该DOM节点对应的合并样式；针对每个DOM节点，对该DOM节点对应的合并样式执行样式格式转换操作，得到该DOM节点对应的目标合并样式；目标合并样式为目标格式的合并样式；针对每个DOM节点，根据该DOM节点对应的目标合并样式，生成该DOM节点对应的样式集合，作为该DOM节点对应的目标节点样式。

[0050] 其中，优先级机制可以包括CSS优先级规则和"!important”标记对应的优先级规则，本发明实施例不做限定。

[0051] 其中，继承机制可以包括父子节点之间的继承规则以及与继承相关的关键字（例如：inherit、initial和unset）的继承规则，本发明实施例不做限定。

[0052] 其中，示例性的，合并样式的原样式格式可以为CSS格式，目标格式可以为Flutter格式，本发明实施例不做限定。

[0053] 其中，每个DOM节点对应的样式集合可以为StyleMap，且该样式集合可以包括多个目标合并样式。

[0054] 可见，该可选的实施例还能够针对每个DOM节点，基于优先级机制，计算该DOM节点对应的样式优先级信息，并根据样式优先级信息，确定优先级样式，以及基于继承机制，确定该DOM节点对应的继承样式，然后根据优先级样式和继承样式，确定该DOM节点对应的合并样式，再将该DOM节点对应的合并样式转换为目标格式，以根据目标合并样式，确定该DOM节点对应的目标节点样式，能够有效解决多种样式规则下所可能产生的样式冲突，从而有利于提高每个DOM节点的目标节点样式的确定准确性及确定可靠性，进而有利于提高目标样式信息的准确性。

[0055] 实施例二请参阅图2，图2是本发明实施例公开的一种HTML内容智能化渲染方法的流程示意图。其中，图2所描述的HTML内容智能化渲染方法可以应用于HTML内容智能化渲染装置中，该智能化渲染装置可以包括智能终端、智能设备、智能系统和服务器中的一种，其中，服务器可以为本地服务器或者云服务器，本发明实施例不做限定；该方法也可以应用于电子设备中，电子设备中安装有应用程序，电子设备与一网络附加存储设备通信连接，电子设备可通过应用程序访问网络附加存储设备，本发明实施例不做限定；其中，该方法可以用于对电子设备或者网络附加存储设备所获取到的HTML内容进行智能化渲染；该方法还可以应用于HTML内容渲染系统架构中，进一步的，该架构的结构可以参阅图3，图3是本发明实施例公开的一种HTML内容渲染系统架构的结构示意图，其中，如图3所示，该架构可以包括HTML解析引擎、Widget转换引擎、样式管理系统和扩展机制，本发明实施例不做限定。如图2所示，该HTML内容智能化渲染方法可以包括以下操作：201、获取待渲染的HTML代码，并根据HTML代码，构建HTML代码对应的DOM树。

[0056] 本发明实施例中，DOM树包括HTML代码中若干个HTML标签对应的DOM节点。

[0057] 202、获取HTML代码中所记载的内联样式和HTML代码对应的全局样式。

[0058] 203、根据内联样式，生成第一样式规则，并根据全局样式，生成第二样式规则。

[0059] 204、根据第一样式规则和第二样式规则，确定每个DOM节点对应的目标节点样式。

[0060] 205、遍历DOM树，以根据DOM树对应的目标样式信息，确定每个DOM节点对应的Widget信息。

[0061] 本发明实施例中，DOM树对应的目标样式信息可以包括每个DOM节点对应的目标节点样式。

[0062] 本发明实施例中，可以基于预先设定的遍历策略遍历DOM树；其中，可选的，该遍历策略可以采用深度优先遍历算法，从而自顶向下处理节点，并维护当前遍历路径和上下文；进一步可选的，可以条件性跳过无须处理的DOM节点，也可以控制遍历深度，还可以在处理大型DOM树时对处理性能进行优化，本发明实施例不做限定。

[0063] 206、根据每个DOM节点对应的Widget信息和DOM树对应的层次结构信息，递归生成每个DOM节点对应的Widget组件，得到DOM树对应的Widget树。

[0064] 本发明实施例中，在步骤204的过程中，还可以在生成Widget组件时，对Widget组件进行布局决策，示例性的：对于块级元素，可以将子Widget放入Column；对于inline-block属性，可以使用Wrap或Row等布局组件实现；对于Flex布局，可以使用Row或Column等布局组件合Expanded等空间分配工具实现，本发明实施例不做限定。

[0065] 本发明实施例中，在生成Widget树时，组装Widget组件之间的父子关系，并应用相应的布局约束，从而生成完整的Widget树结构。

[0066] 207、基于预先设定的布局优化算法，对Widget树执行布局优化操作，得到目标Widget树。

[0067] 208、基于预先设定的加载策略，渲染目标Widget树，以在应用程序显示HTML代码对应的页面内容。

[0068] 本发明实施例中，针对步骤201-步骤204以及步骤207-步骤208的其它详细描述，请参照实施例一中针对步骤101-步骤104以及步骤106-步骤107的详细描述，本发明实施例不再赘述。

[0069] 可见，实施本发明实施例所描述的方法能够根据获取到的待渲染的HTML代码，构建相应的DOM树，再基于样式解析算法，确定DOM树对应的目标样式信息，然后结合DOM树及其目标样式信息，构建DOM树对应的Widget树，然后在对Widget树进行布局优化之后，对优化后所得的目标Widget树进行渲染，以在应用程序显示HTML内容，能够实现HTML内容以应用程序对应的原生形式呈现（如：Flutter Widget），从而能够实现在保持原HTML的视觉效果的同时，与应用程序中的其他部分无缝集成，进而能够提高HTML内容在移动应用中的渲染性能及渲染准确性，进而有利于为用户提供统一、流畅的浏览体验，进而有利于提高用户在移动应用中浏览及交互HTML内容的使用体验；以及，相较于现有技术，采用的轻量级解析引擎和优化的Widget构建策略，避免了WebView引擎启动的巨大性能开销，提高了HTML内容的渲染效率，进而有利于提高用户对于渲染后的HTML内容的浏览体验；以及，还能够根据HTML代码中所记载的内联样式，生成第一样式规则，以及根据HTML代码对应的全局样式，生成第二样式规则，再结合第一样式规则和第二样式规则，确定每个DOM节点对应的目标节点样式，能够提高对于多种样式的分析灵活性及分析全面性，从而提高样式规则的生成灵活性及生成准确性，进而有利于结合多种样式所对应的样式规则所最终确定更为准确的目标样式信息，提高目标样式信息的精准性，进而有利于提高后续对于Widget树的构建精准性。此外，还能够通过遍历DOM树，确定DOM节点对应的Widget信息，从而结合DOM树的层次结构信息，递归生成每个DOM节点对应的Widget组件，得到Widget树，能够在提高对于DOM节点的分析准确性的同时，提高所生成的Widget组件与DOM节点之间的匹配程度，从而有利于提高Widget组件的准确性及可靠性，进而有利于提高Widget树的构建准确性，进而有利于提高HTML内容以Widget形式在应用程序的渲染准确性，进而有利于进一步提高用户对于渲染后的HTML内容的浏览体验。

[0070] 在一个可选的实施例中，确定每个DOM节点对应的Widget信息，可以包括以下操作：识别每个DOM节点对应的节点类型；针对每个DOM节点，根据该DOM节点对应的节点类型和目标样式信息，确定该DOM节点对应的Widget组件类型以及该DOM节点对应的Widget样式映射信息；针对每个DOM节点，当检测到该DOM节点对应的HTML标签属于任一特殊处理标签时，将该DOM节点对应的HTML标签所属于的特殊处理标签确定为目标特殊处理标签，并对该DOM节点执行与目标特殊处理标签相对应的特殊处理操作，得到该DOM节点对应的特殊处理结果；其中，每种特殊处理标签为表格标签、列表标签、多媒体标签和特殊交互标签中的一种；其中，每个DOM节点对应的Widget信息至少包括Widget组件类型和Widget样式映射信息；或者，每个DOM节点对应的Widget信息至少包括Widget组件类型和Widget样式映射信息，还包括特殊处理结果。

[0071] 其中，示例性的，每个DOM节点对应的节点类型可以为文本节点类型或元素节点类型，还可以为特殊节点类型（也即与特殊处理标签相对应的节点类型），进一步的，元素节点类型还可以划分为块级元素类型和内联元素类型，本发明实施例不做限定。进一步的，示例性的，当该DOM节点属于文本节点类型时，Widget组件类型可以为Text或TextSpan；当该DOM节点属于块级元素类型时，Widget组件类型可以为Container、Padding、Margin等；当该DOM节点属于内联元素时，Widget组件类型可以为RichText中的TextSpan；当该DOM节点属于表格元素类型时，Widget组件类型可以为Table、TableRow等，本发明实施例不做限定。

[0072] 其中，示例性的，目标样式信息中的颜色样式对应的Widget样式映射信息可以确定为color、backgroundColor等属性；边距样式对应的Widget样式映射信息可以确定为margin、padding等属性；文本样式对应的Widget样式映射信息可以确定为TextStyle对象，本发明实施例不做限定。

[0073] 其中，可选的，多媒体标签可以包括图片（img）、音频（audio）、视频（video）和SVG中的一种或多种，本发明实施例不做限定。

[0074] 其中，可选的，特殊交互标签可以包括链接标签（a）、iframe标签和表单元素标签中的一种或多种，本发明实施例不做限定。

[0075] 可见，该可选的实施例能够识别每个DOM节点对应的节点类型，并针对每个DOM节点，根据节点类型和目标样式信息，确定该DOM节点对应的Widget组件类型以及Widget样式映射信息，进一步的，若检测到该DOM节点对应的HTML标签属于特殊处理标签，则对该DOM节点执行与该目标特殊处理标签相对应的特殊处理，得到特殊处理结果，从而得到包括上述处理结果的Widget信息，能够提高对于DOM节点的分析灵活性及分析准确性，从而有利于提高将DOM节点的信息转换为Widget组件的信息的准确性，进而有利于提高Widget信息的确定准确性。

[0076] 在该可选的实施例中，可选的，针对每个DOM节点，对该DOM节点执行与目标特殊处理标签相对应的特殊处理操作，得到该DOM节点对应的特殊处理结果，可以包括以下操作：当目标特殊处理标签为表格标签时，解析该DOM节点对应的表格结构（例如：thead、tbody、tr、td等），和 / 或，解析该DOM节点对应的合并单元格（例如：colspan、rowspan），得到该DOM节点对应的表格解析结果，再在该表格解析结果上应用表格样式（例如：边框、间距等），得到该DOM节点对应的表格处理结果；当目标特殊处理标签为列表标签时，根据该DOM节点对应的列表类型（例如：有序列表（ol）和无序列表（ul）），解析该DOM节点的各个列表项及其嵌套，以及解析该DOM节点对应的自定义列表样式，得到该DOM对应的列表处理结果；其中，该自定义列表样式包括项目符号样式和 / 或编号样式；当目标特殊处理标签为多媒体标签时，若目标特殊处理标签为图片标签，则将该DOM节点转换为Image或CachedNetworkImage，作为图片处理结果；若目标特殊处理标签为音频标签，则使用所集成的第三方音频播放器对该DOM节点进行解析，得到音频处理结果；若目标特殊处理标签为视频标签，则使用所集成的第三方视频播放器对该DOM节点进行解析，得到视频处理结果；若目标特殊处理标签为SVG，则使用所集成的SVG渲染器对该DOM节点进行解析，得到SVG处理结果；当目标特殊处理标签为特殊交互标签时，若目标特殊处理标签为链接标签，则将该DOM节点转换为GestureDetector包装的Text；若目标特殊处理标签为iframe标签，则使用WebView组件解析该DOM节点；若目标特殊处理标签为表单元素标签，则将该DOM节点转换为TextField等输入组件。

[0077] 可见，该可选的实施例还能够在目标特殊处理标签分别为表格标签、列表标签、多媒体标签和特殊交互标签时，分别采取不同的解析逻辑，能够提高对于特殊处理标签的处理流程的设定灵活性及设定准确性，从而有利于提高对于特殊处理标签的处理准确性，进而有利于提高对于DOM节点的解析准确性。

[0078] 在另一个可选的实施例中，基于预先设定的布局优化算法，对Widget树执行布局优化操作，得到目标Widget树，可以包括以下操作：检测Widget树中是否存在满足预先设定的组件合并条件的Widget组件组；Widget组件组包括至少两个Widget组件；当检测到Widget树中存在满足组件合并条件的Widget组件组时，将满足组件合并条件的Widget组件组确定为目标Widget组件组，并对每个目标Widget组件组执行合并操作，得到Widget树对应的组件合并结果；检测Widget树是否满足预先设定的布局结构优化条件；当检测到Widget树满足布局结构优化条件时，对Widget树执行布局结构优化操作，得到Widget树对应的布局结构优化结果；布局结构优化操作包括容器简化操作、布局嵌套简化操作和布局结构简化操作中的至少一种；根据组件合并结果和 / 或布局结构优化结果，确定目标Widget树。

[0079] 其中，可选的，Widget组件组所包括的所有Widget组件可以为相邻Widget组件，本发明实施例不做限定。

[0080] 可见，该可选的实施例能够在检测到Widget树中存在满足组件合并条件的Widget组件组时，对每个目标Widget组件组执行合并操作，得到Widget树对应的组件合并结果，以及在检测到Widget树满足布局结构优化条件时，对Widget树执行布局结构优化操作，得到Widget树对应的布局结构优化结果，然后根据组件合并结果和 / 或布局结构优化结果，确定目标Widget树，能够提高对于Widget树的优化准确性，从而使优化后的Widget树的布局结构更为合理、简洁，进而有利于提高HTML内容的渲染效率。

[0081] 在该可选的实施例中，可选的，检测Widget树中是否存在满足预先设定的组件合并条件的Widget组件组，可以包括以下操作：检测Widget树中是否存在Widget样式映射信息相同且Widget组件类型均属于同一目标元素类型的Widget组件组；当检测到Widget树中存在Widget样式映射信息相同且Widget组件类型均属于同一目标元素类型的Widget组件组时，将该Widget组件组确定为目标Widget组件组，并分析该目标Widget组件组对应的合并可行度；当该目标Widget组件组对应的合并可行度大于或等于预设可行度时，确定该目标Widget满足组件合并条件，也即Widget树中存在满足组件合并条件的Widget组件组。

[0082] 其中，示例性的，目标元素类型可以为文本节点类型或者TextSpan序列类型，本发明实施例不做限定。

[0083] 可选的，对每个目标Widget组件组执行合并操作，得到Widget树对应的组件合并结果，可以包括以下操作：针对每个目标Widget组件组，将该目标Widget组中的所有Widget组件的文本内容进行连接，得到目标文本内容，并保留该目标Widget组中所有Widget组件的共同样式，并基于该目标文本内容和共同样式，合并该目标Widget组件组，得到合并组件；其中，Widget树对应的组件合并结果包括所有目标Widget组件组对应的合并组件。

[0084] 可见，该可选的实施例还能够通过合并样式相同、组件类型相同且合并可行度高的Widget组件组，能够减少Widget实例数量，从而有利于降低渲染Widget树的复杂度，进而有利于进一步提高HTML内容的渲染效率。

[0085] 在该可选的实施例中，可选的，对Widget树执行布局结构优化操作，得到Widget树对应的布局结构优化结果，可以包括以下操作：当布局结构优化操作包括容器简化操作时，移除Widget树中仅包含单个Widget组件的容器，并合并嵌套的容器属性，以实现对布局容器进行扁平化处理，得到优化后的布局容器；当布局结构优化操作包括布局嵌套简化操作时，简化嵌套的布局层级，并减少布局约束传递链，得到优化后的布局层级；当布局结构优化操作包括布局结构简化操作时，识别并消除冗余布局结构，并对固定大小的Widget组件的布局方式进行动态调整，以及简化嵌套布局结果，得到优化后的布局结构。

[0086] 可见，该可选的实施例还能够通过容器简化操作、布局嵌套简化操作和布局结构简化操作，能够消除冗余布局，从而有利于优化布局计算，进而有利于降低布局复杂度，进而有利于进一步提高HTML内容的渲染效率。

[0087] 在该可选的实施例中，可选的，该方法还可以包括以下操作：获取HTML代码对应的页面交互需求；页面交互需求包括若干个HTML标签对应的交互需求；交互需求包括链接点击需求、输入需求、滚动需求、多媒体交互需求和手势识别需求中的至少一种；根据页面交互需求，生成页面交互需求对应的Widget交互事件。

[0088] 可选的，根据页面交互需求，生成页面交互需求对应的Widget交互事件，可以包括以下操作：当页面交互需求包括链接点击需求时，先识别链接组件，再对链接组件进行事件绑定，并设置相应的链接点击处理逻辑；（例如：先识别链接组件中的href属性，再区分内部链接、外部链接和邮件 / 电话等特殊链接；再使用GestureDetector包装链接文本，并配置onTap事件处理器，从而传递URL给onTapUrl回调；然后实现URL打开功能以及相应的自定义链接处理逻辑）；当页面交互需求包括输入需求时，先识别表单组件，再确定与表单组件相匹配的输入控件，然后设置相应的表单处理逻辑；（例如：先识别INPUT、TEXTAREA、SELECT等表单元素，并提取表单属性（type、placeholder等）以及表单样式；再确定相应的输入控件，如文本输入可选择TextField，选择框可选择DropdownButton，复选框可选择Checkbox，单选框可选择Radio；然后设置相应的表单提交、表单验证、表单状态保存及恢复等功能对应的处理逻辑）；当页面交互需求包括滚动需求时，先检测需要滚动的内容，再根据加载策略对应的渲染模式确定相匹配的ScrollView，从而设置相应的平滑滚动和滚动位置控制的控制逻辑；当页面交互需求包括多媒体交互需求时，设置图片点击放大、视频播放控制以及音频播放控制中的至少一种的处理逻辑；当页面交互需求包括手势识别需求时，基于默认手势交互规则和 / 或自定义手势交互规则，设置手势交互（例如：缩放、长按、双击）对应的处理逻辑。

[0089] 可见，该可选的实施例还能够根据获取到的页面交互需求（如：链接点击需求、输入需求、滚动需求、多媒体交互需求和手势识别需求），生成页面交互需求对应的Widget交互事件，能够提高Widget组件的交互事件的生成灵活性及生成准确性，从而有利于提高用户与渲染后的HTML内容的交互体验。

[0090] 在该可选的实施例中，可选的，根据组件合并结果和 / 或布局结构优化结果，确定目标Widget树，可以包括以下操作：根据组件合并结果和 / 或布局结构优化结果和 / 或Widget交互事件，确定目标Widget树。

[0091] 其中，可以将Widget交互事件与对应的Widget组件相关联。

[0092] 可见，该可选的实施例还能够结合Widget交互事件，确定目标Widget树，能够进一步提高Widget树的确定准确性，有利于提高用户与渲染后的HTML内容的交互体验。

[0093] 在又一个可选的实施例中，在根据每个DOM节点对应的Widget信息和DOM树对应的层次结构信息，递归生成每个DOM节点对应的Widget组件，得到DOM树对应的Widget树的过程中，该方法还可以包括以下操作：针对每个DOM节点，检测是否存在与该DOM节点相匹配的自定义处理器；当检测到存在与该DOM节点相匹配的自定义处理器时，调用该自定义处理器，以基于该自定义处理器对应的自定义处理逻辑，处理该DOM节点，并生成该DOM节点对应的Widget组件，再将该Widget组件集成到Widget树中。

[0094] 可见，该可选的实施例能够若检测到存在与该DOM节点相匹配的自定义处理器，则通过调用该自定义处理器对应的自定义处理逻辑，处理该DOM节点，并生成相应的Widget组件，并将该组件集成到Widget树中，能够定制节点解析规则，实现对于解析功能的灵活扩展，从而有利于进一步提高Widget组件的生成灵活性及生成准确性。

[0095] 在又一个可选的实施例中，基于预先设定的加载策略，渲染目标Widget树，以在应用程序显示HTML代码对应的页面内容，可以包括以下操作：基于预先设定的懒加载策略，渲染目标Widget树，以优先加载并显示应用程序的目标区域内的页面内容。

[0096] 其中，示例性的，懒加载策略可以包括图片懒加载策略和 / 或音视频懒加载策略；具体的，图片懒加载策略可以具体为：使用FadeInImage及图片预加载机制，并通过添加占位图和加载指示器的方式，加载图片；音视频懒加载策略可以具体为：按照当前播放需求及当前播放状态加载音视频资源，以及实现缩略图预览展示，以及在检测到用户交互时才初始化播放器，实现延迟初始化播放器。

[0097] 其中，进一步可选的，可以基于确定出的并发加载数量，加载页面内容，本发明实施例不做限定。

[0098] 其中，可选的，可以通过不同组件类型对应的渲染器和 / 或渲染插件，渲染目标Widget树；进一步可选的，渲染器可以包括文本渲染器、布局渲染器、多媒体渲染器中的一种或多种的组合，本发明实施例不做限定。

[0099] 可见，该可选的实施例能够通过懒加载策略，渲染目标Widget树并优先加载及显示页面内容，能够实现按需加载资源，提高页面的初始加载速度，从而提高页面加载性能，以及能够优先加载当前用户可浏览的区域的页面内容，提高了用户的浏览体验。

[0100] 在该可选的实施例中，可选的，该方法还可以包括以下操作：检测目标Widget树中是否存在满足预先设定的重复使用条件的Widget组件；其中，可选的，满足重复使用条件的Widget组件可以为在目标Widget树中存在多个样式和结构均相同的Widget组件；当检测到目标Widget树中存在满足上述重复使用条件的Widget组件时，将该满足上述重复使用条件的Widget组件确定为缓存Widget组件，并将缓存Widget组件缓存至存储空间；当检测到需要复用存储空间中的任一缓存Widget组件时，从存储空间中读取相应的缓存Widget组件。

[0101] 其中，可选的，该存储空间可以使用LRU（Least Recently Used，最近最少使用）缓存淘汰策略，本发明实施例不做限定。进一步可选的，该存储空间可以为TextStyle对象，本发明实施例不做限定。

[0102] 可见，该可选的实施例还能够在检测到Widget组件满足重复使用条件时，对Widget组件进行缓存，实现Widget组件的复用，有利于提高后续页面内容渲染过程中的Widget组件使用效率，进而有利于提高后续页面内容渲染的效率。

[0103] 在本发明实施例中，示例性的，该HTML内容智能化渲染方法可以应用于如图3所示的HTML内容渲染系统架构中，如图3所示，该架构可以包括HTML解析引擎、Widget转换引擎、样式管理系统和扩展机制，具体的：1.HTML解析引擎可以包括标签识别器、属性提取器和CSS解析器；其中，标签识别器用于识别HTML代码中的各种HTML标签，以构建初步的DOM节点层次结构；属性提取器用于提取HTML标签中的各种属性，并生成相应的属性键值对；CSS解析器用于解析内联样式、样式标签以及全局标签中的样式规则，并将样式规则与DOM节点关联；2.Widget转换引擎可以包括基础文本渲染器、布局渲染器和多媒体渲染器；其中，基础文本渲染器用于处理纯文本节点和基本文本格式化标签，并生成优化的文本Widget树；布局渲染器用于处理影响布局的HTML标签以选择合适的Flutter布局Widget；多媒体渲染器用于处理多媒体内容标签；3.样式管理系统可以包括内联样式处理器、全局样式管理器和继承属性处理器；其中，内联样式处理器用于处理内联样式中定义的样式，并将样式转换为Flutter样式；全局样式管理器用于匹配DOM节点的样式，并计算样式优先级和层叠；继承属性处理器用于识别可继承的CSS属性，并处理继承样式、样式覆盖和优先级；4.扩展机制可以包括自定义标签处理器和插件管理器；其中，自定义标签处理器用于为自定义标签 / 特定标签自定义渲染逻辑；插件管理器用于管理和协调各种功能插件；可选的，该框架还可以包括专用插件模块，该专用插件模块用于扩展多媒体渲染和交互功能，具体的：专用插件模块可以包括图像渲染插件、音频渲染插件、视频渲染插件、SVG渲染插件、URL处理插件和WebView插件；其中，图像渲染插件用于优化图片的加载及渲染；音频渲染插件用于处理音频标签并提供音频播放控制功能；视频渲染插件用于处理视频标签并提供视频播放控制功能；SVG渲染插件用于渲染SVG图像并支持矢量图像缩放、颜色修改等功能；URL处理插件用于处理A标签的链接点击及链接对应的功能实现；WebView插件用于处理iframe标签，以嵌入网页内容。

[0104] 这样，通过设置插件架构和自定义渲染机制，使开发者可以轻松扩展系统功能。

[0105] 进一步的，当该HTML内容智能化渲染方法可以应用于如图3所示的HTML内容渲染系统架构中时，该方法的操作流程可以参阅图4，图4是本发明实施例公开的又一种HTML内容智能化渲染方法的流程示意图。如图4所示，该方法可以包括以下操作：1.输入处理阶段：（1）接收HTML字符串输入；（2）预处理HTML内容(清理非法字符、格式化)；（3）解析HTML为DOM树结构；2.样式处理阶段：（1）解析内联CSS样式；（2）应用全局样式配置；（3）计算每个DOM节点的最终样式属性；3.Widget生成阶段：（1）遍历DOM树；（2）根据节点类型选择对应的Widget生成策略；（3）处理特殊标签(表格、列表、多媒体等)；（4）递归生成子Widget；4.交互处理阶段：（1）绑定链接点击事件；（2）处理表单输入；（3）实现滚动、放大等交互效果；5.渲染优化阶段：（1）合并相邻文本节点；（2）优化布局结构；（3）应用懒加载策略(对于图片、音视频等)；（4）缓存重复的Widget。

[0106] 实施例三请参阅图5，图5是本发明实施例公开的一种HTML内容智能化渲染装置的结构示意图。其中，图5所描述的HTML内容智能化渲染装置可以包括智能终端、智能设备、智能系统和服务器中的一种，其中，服务器可以为本地服务器或者云服务器，本发明实施例不做限定；该装置可以应用于电子设备中，电子设备中安装有应用程序，电子设备与一网络附加存储设备通信连接，电子设备可通过应用程序访问网络附加存储设备，本发明实施例不做限定；其中，该装置可以用于对电子设备或者网络附加存储设备所获取到的HTML内容进行智能化渲染；该装置还可以应用于HTML内容渲染系统架构中，进一步的，该架构的结构可以参阅图3，图3是本发明实施例公开的一种HTML内容渲染系统架构的结构示意图，其中，如图3所示，该架构可以包括HTML解析引擎、Widget转换引擎、样式管理系统和扩展机制，本发明实施例不做限定。如图5所示，该HTML内容智能化渲染装置30可以包括：获取模块301，用于获取待渲染的HTML代码；构建模块302，用于根据HTML代码，构建HTML代码对应的DOM树；DOM树包括HTML代码中若干个HTML标签对应的DOM节点；确定模块303，用于获取HTML代码中所记载的内联样式和HTML代码对应的全局样式；根据内联样式，生成第一样式规则，并根据全局样式，生成第二样式规则；根据第一样式规则和第二样式规则，确定每个DOM节点对应的目标节点样式；构建模块302，还用于根据DOM树和DOM树对应的目标样式信息，构建DOM树对应的Widget树；其中，所述DOM树对应的目标样式信息包括所有所述DOM节点对应的目标节点样式；优化模块304，用于基于预先设定的布局优化算法，对Widget树执行布局优化操作，得到目标Widget树；渲染模块305，用于基于预先设定的加载策略，渲染目标Widget树，以在应用程序显示HTML代码对应的页面内容。

[0107] 可见，实施本发明实施例所描述的装置能够根据获取到的待渲染的HTML代码，构建相应的DOM树，再基于样式解析算法，确定DOM树对应的目标样式信息，然后结合DOM树及其目标样式信息，构建DOM树对应的Widget树，然后在对Widget树进行布局优化之后，对优化后所得的目标Widget树进行渲染，以在应用程序显示HTML内容，能够实现HTML内容以应用程序对应的原生形式呈现（如：Flutter Widget），从而能够实现在保持原HTML的视觉效果的同时，与应用程序中的其他部分无缝集成，进而能够提高HTML内容在移动应用中的渲染性能及渲染准确性，进而有利于为用户提供统一、流畅的浏览体验，进而有利于提高用户在移动应用中浏览及交互HTML内容的使用体验；以及，相较于现有技术，采用的轻量级解析引擎和优化的Widget构建策略，避免了WebView引擎启动的巨大性能开销，提高了HTML内容的渲染效率，进而有利于提高用户对于渲染后的HTML内容的浏览体验；以及，还能够根据HTML代码中所记载的内联样式，生成第一样式规则，以及根据HTML代码对应的全局样式，生成第二样式规则，再结合第一样式规则和第二样式规则，确定每个DOM节点对应的目标节点样式，能够提高对于多种样式的分析灵活性及分析全面性，从而提高样式规则的生成灵活性及生成准确性，进而有利于结合多种样式所对应的样式规则所最终确定更为准确的目标样式信息，提高目标样式信息的精准性，进而有利于提高后续对于Widget树的构建精准性。

[0108] 在一个可选的实施例中，确定模块303根据第一样式规则和第二样式规则，确定每个DOM节点对应的目标节点样式的具体方式，可以包括：针对每个DOM节点，基于优先级机制，根据第一样式规则和第二样式规则，计算该DOM节点对应的样式优先级信息，并根据样式优先级信息，确定该DOM节点对应的优先级样式；针对每个DOM节点，基于继承机制，根据第一样式规则和第二样式规则，确定该DOM节点对应的继承样式；针对每个DOM节点，根据优先级样式和继承样式，确定该DOM节点对应的合并样式；针对每个DOM节点，对该DOM节点对应的合并样式执行样式格式转换操作，得到该DOM节点对应的目标合并样式；目标合并样式为目标格式的合并样式；针对每个DOM节点，根据该DOM节点对应的目标合并样式，生成该DOM节点对应的样式集合，作为该DOM节点对应的目标节点样式。

[0109] 可见，实施该可选的实施例所描述的装置还能够针对每个DOM节点，基于优先级机制，计算该DOM节点对应的样式优先级信息，并根据样式优先级信息，确定优先级样式，以及基于继承机制，确定该DOM节点对应的继承样式，然后根据优先级样式和继承样式，确定该DOM节点对应的合并样式，再将该DOM节点对应的合并样式转换为目标格式，以根据目标合并样式，确定该DOM节点对应的目标节点样式，能够有效解决多种样式规则下所可能产生的样式冲突，从而有利于提高每个DOM节点的目标节点样式的确定准确性及确定可靠性，进而有利于提高目标样式信息的准确性。

[0110] 在一个可选的实施例中，构建模块302根据DOM树和DOM树对应的目标样式信息，构建DOM树对应的Widget树的具体方式，可以包括：遍历DOM树，以根据DOM树对应的目标样式信息，确定每个DOM节点对应的Widget信息；根据每个DOM节点对应的Widget信息和DOM树对应的层次结构信息，递归生成每个DOM节点对应的Widget组件，得到DOM树对应的Widget树。

[0111] 可见，实施该可选的实施例所描述的装置能够通过遍历DOM树，确定DOM节点对应的Widget信息，从而结合DOM树的层次结构信息，递归生成每个DOM节点对应的Widget组件，得到Widget树，能够在提高对于DOM节点的分析准确性的同时，提高所生成的Widget组件与DOM节点之间的匹配程度，从而有利于提高Widget组件的准确性及可靠性，进而有利于提高Widget树的构建准确性，进而有利于提高HTML内容以Widget形式在应用程序的渲染准确性，进而有利于进一步提高用户对于渲染后的HTML内容的浏览体验。

[0112] 在该可选的实施例中，可选的，构建模块302确定每个DOM节点对应的Widget信息的具体方式，可以包括：识别每个DOM节点对应的节点类型；针对每个DOM节点，根据该DOM节点对应的节点类型和目标样式信息，确定该DOM节点对应的Widget组件类型以及该DOM节点对应的Widget样式映射信息；针对每个DOM节点，当检测到该DOM节点对应的HTML标签属于任一特殊处理标签时，将该DOM节点对应的HTML标签所属于的特殊处理标签确定为目标特殊处理标签，并对该DOM节点执行与目标特殊处理标签相对应的特殊处理操作，得到该DOM节点对应的特殊处理结果；其中，每种特殊处理标签为表格标签、列表标签、多媒体标签和特殊交互标签中的一种；其中，每个DOM节点对应的Widget信息至少包括Widget组件类型和Widget样式映射信息；或者，每个DOM节点对应的Widget信息至少包括Widget组件类型和Widget样式映射信息，还包括特殊处理结果。

[0113] 可见，实施该可选的实施例所描述的装置还能够识别每个DOM节点对应的节点类型，并针对每个DOM节点，根据节点类型和目标样式信息，确定该DOM节点对应的Widget组件类型以及Widget样式映射信息，进一步的，若检测到该DOM节点对应的HTML标签属于特殊处理标签，则对该DOM节点执行与该目标特殊处理标签相对应的特殊处理，得到特殊处理结果，从而得到包括上述处理结果的Widget信息，能够提高对于DOM节点的分析灵活性及分析准确性，从而有利于提高将DOM节点的信息转换为Widget组件的信息的准确性，进而有利于提高Widget信息的确定准确性。

[0114] 在该可选的实施例中，可选的，优化模块304基于预先设定的布局优化算法，对Widget树执行布局优化操作，得到目标Widget树的具体方式，可以包括：检测Widget树中是否存在满足预先设定的组件合并条件的Widget组件组；Widget组件组包括至少两个Widget组件；当检测到Widget树中存在满足组件合并条件的Widget组件组时，将满足组件合并条件的Widget组件组确定为目标Widget组件组，并对每个目标Widget组件组执行合并操作，得到Widget树对应的组件合并结果；检测Widget树是否满足预先设定的布局结构优化条件；当检测到Widget树满足布局结构优化条件时，对Widget树执行布局结构优化操作，得到Widget树对应的布局结构优化结果；布局结构优化操作包括容器简化操作、布局嵌套简化操作和布局结构简化操作中的至少一种；根据组件合并结果和 / 或布局结构优化结果，确定目标Widget树。

[0115] 可见，实施该可选的实施例所描述的装置还能够在检测到Widget树中存在满足组件合并条件的Widget组件组时，对每个目标Widget组件组执行合并操作，得到Widget树对应的组件合并结果，以及在检测到Widget树满足布局结构优化条件时，对Widget树执行布局结构优化操作，得到Widget树对应的布局结构优化结果，然后根据组件合并结果和 / 或布局结构优化结果，确定目标Widget树，能够提高对于Widget树的优化准确性，从而使优化后的Widget树的布局结构更为合理、简洁，进而有利于提高HTML内容的渲染效率。

[0116] 在该可选的实施例中，可选的，获取模块301，还用于获取HTML代码对应的页面交互需求；页面交互需求包括若干个HTML标签对应的交互需求；交互需求包括链接点击需求、输入需求、滚动需求、多媒体交互需求和手势识别需求中的至少一种；以及，如图6所示，该装置还可以包括：生成模块306，用于根据页面交互需求，生成页面交互需求对应的Widget交互事件；其中，优化模块304根据组件合并结果和 / 或布局结构优化结果，确定目标Widget树的具体方式，可以包括：根据组件合并结果和 / 或布局结构优化结果和 / 或Widget交互事件，确定目标Widget树。

[0117] 可见，实施该可选的实施例所描述的装置还能够根据获取到的页面交互需求（如：链接点击需求、输入需求、滚动需求、多媒体交互需求和手势识别需求），生成页面交互需求对应的Widget交互事件，能够提高Widget组件的交互事件的生成灵活性及生成准确性；以及，还能够结合Widget交互事件，确定目标Widget树，能够进一步提高Widget树的确定准确性，从而有利于提高用户与渲染后的HTML内容的交互体验。

[0118] 实施例四请参阅图7，图7是本发明实施例公开的又一种电子设备的结构示意图。如图7所示，该电子设备40可以包括：存储有可执行程序代码的存储器401；与存储器401耦合的处理器402；处理器402调用存储器401中存储的可执行程序代码，执行本发明实施例一或本发明实施例二所描述的HTML内容智能化渲染方法中的部分或全部步骤。

[0119] 实施例五本发明实施例公开了一种HTML内容智能化渲染系统。请参阅图8，图8是本发明实施例公开的一种HTML内容智能化渲染系统的结构示意图。如图8所示，该HTML内容智能化渲染系统包括本发明实施例三所描述的HTML内容智能化渲染装置30，以及与HTML内容智能化渲染装置30通信连接的网络附加存储设备50；其中，HTML内容智能化渲染装置30依据如本发明实施例一或本发明实施例二所描述的HTML内容智能化渲染方法对HTML内容智能化渲染装置30或网络附加存储设备50所获取到的HTML内容执行智能化渲染操作；或者，本发明实施例中，作为另一种可选的实施方式，可选的，请参阅图9，图9是本发明实施例公开的另一种HTML内容智能化渲染系统的结构示意图。如图9所示，该HTML内容智能化渲染系统包括如本发明实施例四所描述的电子设备40，以及与电子设备40通信连接的网络附加存储设备50；其中，电子设备40依据如本发明实施例一或本发明实施例二所描述的HTML内容智能化渲染方法对电子设备40或网络附加存储设备50所获取到的HTML内容执行智能化渲染操作。

[0120] 实施例六本发明实施例公开了一种计算机存储介质，该计算机存储介质存储有计算机指令，该计算机指令被调用时，用于执行本发明实施例一或本发明实施例二所描述的HTML内容智能化渲染方法中的部分或全部步骤。

[0121] 实施例七本发明实施例公开了一种计算机程序产品，该计算机程序产品包括存储了计算机程序的非瞬时性计算机可读存储介质，且该计算机程序可操作来使计算机执行实施例一或实施例二中所描述的HTML内容智能化渲染方法中的部分或全部步骤。

[0122] 以上所描述的装置实施例仅是示意性的，其中所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

[0123] 最后应说明的是：本发明实施例公开的一种HTML内容智能化渲染方法、装置、电子设备及系统所揭露的仅为本发明较佳实施例而已，仅用于说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解；其依然可以对前述各项实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或替换，并不使相应的技术方案的本质脱离本发明各项实施例技术方案的精神和范围。< / script>

Claims

1. An intelligent rendering method for HTML content, characterized in that, The method is applied to an electronic device, the electronic device is installed with an application program, the electronic device is connected with a network attached storage device, the electronic device can access the network attached storage device through the application program, and the method is used for intelligently rendering HTML content obtained by the electronic device or the network attached storage device; wherein the method comprises: obtaining HTML code to be rendered, and constructing a DOM tree corresponding to the HTML code according to the HTML code; the DOM tree comprises DOM nodes corresponding to a plurality of HTML tags in the HTML code; obtaining an inline style recorded in the HTML code and a global style corresponding to the HTML code; generating a first style rule according to the inline style, and generating a second style rule according to the global style; determining a target node style corresponding to each DOM node according to the first style rule and the second style rule; constructing a Widget tree corresponding to the DOM tree according to the DOM tree and target style information corresponding to the DOM tree; wherein the target style information corresponding to the DOM tree comprises target node styles corresponding to all the DOM nodes; performing a layout optimization operation on the Widget tree based on a pre-set layout optimization algorithm to obtain a target Widget tree; rendering the target Widget tree based on a pre-set loading strategy to display page content corresponding to the HTML code in the application program. 2.The HTML content intelligent rendering method of claim 1, characterized in that, The method comprises: for each DOM node, calculating style priority information corresponding to the DOM node according to the first style rule and the second style rule based on a priority mechanism, and determining a priority style corresponding to the DOM node according to the style priority information; for each DOM node, determining an inheritance style corresponding to the DOM node according to the first style rule and the second style rule based on an inheritance mechanism; for each DOM node, determining a merged style corresponding to the DOM node according to the priority style and the inheritance style; for each DOM node, performing a style format conversion operation on the merged style corresponding to the DOM node to obtain a target merged style corresponding to the DOM node; the target merged style is a merged style in a target format; for each DOM node, generating a style set corresponding to the DOM node according to the target merged style corresponding to the DOM node as a target node style corresponding to the DOM node.

3. The HTML content intelligent rendering method according to claim 1 or 2, characterized in that, The method comprises: traversing the DOM tree to determine Widget information corresponding to each DOM node according to the target style information corresponding to the DOM tree; According to the Widget information corresponding to each DOM node and the hierarchical structure information corresponding to the DOM tree, recursively generating a Widget component corresponding to each DOM node to obtain a Widget tree corresponding to the DOM tree.

4. The HTML content intelligent rendering method of claim 3, characterized in that, The determining of the Widget information corresponding to each DOM node comprises: identifying a node type corresponding to each DOM node; for each DOM node, determining a Widget component type corresponding to the DOM node and Widget style mapping information corresponding to the DOM node according to the node type corresponding to the DOM node and the target style information; for each DOM node, when detecting that an HTML tag corresponding to the DOM node belongs to any special processing tag, determining the special processing tag to which the HTML tag corresponding to the DOM node belongs as a target special processing tag, and performing a special processing operation corresponding to the target special processing tag on the DOM node to obtain a special processing result corresponding to the DOM node; wherein each special processing tag is one of a table tag, a list tag, a multimedia tag, and a special interaction tag; wherein the Widget information corresponding to each DOM node at least comprises the Widget component type and the Widget style mapping information; or the Widget information corresponding to each DOM node at least comprises the Widget component type and the Widget style mapping information, and further comprises the special processing result.

5. The method of claim 1, 2, or 4, wherein, The performing of the layout optimization operation on the Widget tree based on the pre-set layout optimization algorithm to obtain a target Widget tree comprises: detecting whether there is a Widget component group in the Widget tree that meets a pre-set component merging condition; the Widget component group comprises at least two Widget components; when detecting that there is a Widget component group in the Widget tree that meets the component merging condition, determining the Widget component group that meets the component merging condition as a target Widget component group, and performing a merging operation on each target Widget component group to obtain a component merging result corresponding to the Widget tree; detecting whether the Widget tree meets a pre-set layout structure optimization condition; when detecting that the Widget tree meets the layout structure optimization condition, performing a layout structure optimization operation on the Widget tree to obtain a layout structure optimization result corresponding to the Widget tree; the layout structure optimization operation comprises at least one of a container simplification operation, a layout nesting simplification operation, and a layout structure simplification operation; determining a target Widget tree according to the component merging result and / or the layout structure optimization result. 6.The HTML content intelligent rendering method of claim 5, characterized in that, The method further comprises: The page interaction requirement corresponding to the HTML code is acquired; the page interaction requirement includes interaction requirements corresponding to a plurality of HTML tags; the interaction requirements include at least one of a link click requirement, an input requirement, a scroll requirement, a multimedia interaction requirement, and a gesture recognition requirement; According to the page interaction requirement, a Widget interaction event corresponding to the page interaction requirement is generated. According to the component merging result and / or the layout structure optimization result, a target Widget tree is determined. According to the component merging result and / or the layout structure optimization result and / or the Widget interaction event, a target Widget tree is determined.

7. An intelligent HTML content rendering device, characterized in that, The device is applied to an electronic device, an application program is installed in the electronic device, the electronic device is communicatively connected with a network-attached storage device, the electronic device can access the network-attached storage device through the application program, and the device is used for intelligently rendering HTML content acquired by the electronic device or the network-attached storage device; wherein the device comprises: An acquisition module is configured to acquire HTML code to be rendered. A construction module is configured to construct a DOM tree corresponding to the HTML code according to the HTML code; the DOM tree includes DOM nodes corresponding to a plurality of HTML tags in the HTML code. A determination module is configured to acquire an inline style recorded in the HTML code and a global style corresponding to the HTML code; generate a first style rule according to the inline style and a second style rule according to the global style; and determine a target node style corresponding to each DOM node according to the first style rule and the second style rule. The construction module is further configured to construct a Widget tree corresponding to the DOM tree according to the DOM tree and target style information corresponding to the DOM tree; wherein the target style information corresponding to the DOM tree includes target node styles corresponding to all the DOM nodes. An optimization module is configured to perform a layout optimization operation on the Widget tree based on a pre-set layout optimization algorithm to obtain a target Widget tree. A rendering module is configured to render the target Widget tree based on a pre-set loading strategy to display page content corresponding to the HTML code in the application program.

8. An electronic device, comprising: The electronic device comprises: A memory storing executable program code; A processor coupled with the memory; The processor invokes the executable program code stored in the memory to execute the HTML content intelligent rendering method of any one of claims 1-6.

9. An HTML content intelligent rendering system, characterized in that, The system comprises the HTML content intelligent rendering device as claimed in claim 7, and a network attached storage device in communication connection with the HTML content intelligent rendering device; wherein the HTML content intelligent rendering device performs intelligent rendering operation on the HTML content acquired by the HTML content intelligent rendering device or the network attached storage device according to the HTML content intelligent rendering method as claimed in any one of claims 1-6. Or, The system comprises the electronic device as claimed in claim 8, and a network attached storage device in communication connection with the electronic device; wherein the electronic device performs intelligent rendering operation on the HTML content acquired by the electronic device or the network attached storage device according to the HTML content intelligent rendering method as claimed in any one of claims 1-6.

10. A computer storage medium, characterized in that, The computer storage medium stores computer instructions, which when invoked, are used to perform the HTML content intelligent rendering method as claimed in any one of claims 1-6.

Images