一种用原生用户界面组件展示网页的方法及系统技术方案

本发明专利技术实施例提供了一种用原生用户界面组件展示网页的方法及系统，涉及计算机技术领域。本发明专利技术可以将在服务器侧将针对网页的HTML文档转换为XML文档；接收访问所述网页的操作指令，根据所述操作指令向服务器发送针对所述网页的网页请求，接收所述服务器返回的XML文档，使用原生用户界面组件将所述XML文档进行渲染展示。由于原生应用的性能和用户体验优势，通过将针对网页的HTML文档转换为XML文档，使用原生用户界面组件将所述XML文档进行渲染展示，由此解决了使用网页窗口组件展示HTML文档带来的性能和用户体验问题，在保证和网页窗口组件同样展示效果的同时，使用原生用户界面组件展示能带来更好的性能和用户体验。

【技术实现步骤摘要】

本专利技术涉及计算机
，特别是涉及一种用原生用户界面组件展示网页的方法及系统。
技术介绍
随着计算机及互联网技术的不断发展，网页浏览已经逐渐成为生活中不可分割的一部分，人们对智能手机网页加载的性能和体验的要求也越来越高。目前，开发人员使用富文本编辑工具手动编辑展示性网页，并生成非结构化数据，这些非结构化数据上传到后台系统之后以HTML(HyperTextMarkupLanguage，超文本标记语言)文档进行存储，在Android(安卓系统)/IOS(iPhoneOS操作系统)客户端应用中用网页窗口组件(Webview组件)展示给用户。在专利技术人应用在先技术时，发现在先技术在Android/IOS客户端页面中使用网页窗口组件展示HTML文档，由于网页窗口组件作为一个内嵌浏览器，其具有和正常浏览器同样功能庞大、特性完备的网页展示功能，网页窗口组件和一个独立浏览器一样对CPU、内存和电量等设备资源消耗较大，同时它作为页面的内嵌组件，它依赖宿主环境的网络加载能力，所以在Android/IOS客户端页面中使用网页窗口组件展示HTML文档的方法，存在明显的性能和用户体验问题，例如：图片加载慢，需要较长时间才能展示出来；上下滚动、缩放、左右滑动切换手势交互体验差；CPU、内存和电量的设备资源消耗较大。
技术实现思路
鉴于上述问题，提出了本专利技术以便提供一种克服上述问题或者至少部分地解决上述问题的用原生用户界面组件展示网页的方法和相应的用原生用户界面组件展示网页的系统。依据本专利技术的一个方面，提供了一种用原生用户界面组件展示网页的方法，包括：在服务器侧将针对网页的第一HTML文档转换为XML文档；接收访问所述网页的操作指令；根据所述操作指令向服务器发送针对所述网页的网页请求；接收所述服务器返回的XML文档；所述XML文档由服务器根据所述网页请求返回；使用原生用户界面组件将所述XML文档进行渲染展示。优选地，所述在服务器侧将针对网页的第一HTML文档转换为XML文档的步骤，包括：将所述第一HTML文档进行预处理，获得第二HTML文档；所述第二HTML文档中的实体元素只包含数据内容，不包含其他实体元素，以及容器元素不直接包含数据内容，只包含实体元素或容器元素；将第二HTML文档中由网页窗口组件渲染的容器元素、实体元素、布局属性和绘制属性，分别根据布局容器转换表、实体元素转换表、布局属性转换表和绘制属性转换表，转换为由原生用户界面组件渲染的容器元素、实体元素、布局属性和绘制属性，从而生成XML文档。优选地，所述将第二HTML文档中由网页窗口组件渲染的容器元素、实体元素、布局属性和绘制属性，分别根据布局容器转换表、实体元素转换表、布局属性转换表和绘制属性转换表，转换为由原生用户界面组件渲染的容器元素、实体元素、布局属性和绘制属性，从而生成XML文档的步骤，包括：对所述第二HTML文档进行解析，生成文档对象模型树和样式树；对于所述文档对象模型树中的每一个文档对象模型节点，判断所述文档对象模型节点的元素类型；所述元素类型包括：容器元素和实体元素；如果所述文档对象模型节点是容器元素，根据文档对象模型节点的关联的样式节点中的显示属性值和位置属性值，在布局容器转换表中查找到对应的XML文档的容器元素记录，转换生成XML文档中的视图组节点，并根据文档对象模型节点把所述视图组节点加入到对应的XML文档的视图树中的父节点的子节点列表中，如果无父节点，所述XML文档中的视图组节点为视图树的根节点；如果所述文档对象模型节点是实体元素，根据实体元素的标签在实体元素转换表中查找到对应的XML文档实体元素记录，转换生成XML文档中的视图节点，复制HTML文档中的数据内容到XML文档中的视图节点，并根据文档对象模型节点把所述视图节点加入到对应的XML文档的视图树中的父节点的子节点列表中；对于样式树中每一个文档对象模型节点对应的布局属性和布局属性值，根据布局属性转换表，转换生成对应的视图组节点或视图节点中的布局属性，并复制布局属性值，将转换后的布局属性和布局属性值加入到视图树中对应的视图组节点或视图节点上；对于样式树中每一个文档对象模型节点对应的绘制属性和绘制属性值，根据绘制属性转换表，转换生成对应的视图组节点或视图节点中的绘制属性，并复制绘制属性值，将转换后的绘制属性和绘制属性加入到视图树中对应的视图组节点或视图节点上；根据所述视图树，从根节点开始递归遍历，反向编译包含内联样式数据的XML文档。优选地，所述对于所述文档对象模型树中的每一个文档对象模型节点，判断所述文档对象模型节点的元素类型的步骤，包括：根据所述文档对象模型节点中的元素，读取元素的子节点列表，如果所述子节点列表为空或没有元素节点，则所述元素为实体元素；如果所述子节点列表不为空或有元素节点，则所述元素为容器元素。优选地，所述将所述第一HTML文档进行预处理，获得第二HTML文档；所述第二HTML文档中的实体元素只包含数据内容，不包含其他实体元素，以及容器元素不直接包含数据内容，只包含实体元素或容器元素的步骤，包括：对所述第一HTML文档进行解析，生成文档对象模型树和样式树；从根元素开始遍历文档对象模型树，对于所述文档对象模型树的每一个元素，获取所述元素关联的样式节点，通过读取所述样式节点的显示属性值，判断所述元素的元素类型；所述元素类型包括：容器元素和实体元素；如果所述元素类型为容器元素，则通过读取所述元素的子节点列表，判断所述元素的子节点列表是否直接包含文本数据；如果所述容器元素直接包含文本数据，则在所述容器元素中通过调用<span>标签创建一个新的实体元素，并把所述文本数据填入所述实体元素中，删除所述容器元素中的文本数据；如果所述元素类型为实体元素，则通过读取所述元素的子节点列表，判断所述元素的子节点列表是否直接包含文本数据和包含实体元素；如果所述实体元素直接包含文本数据和包含实体元素，则把外层的实体元素默认为容器元素，在所述容器元素中通过调用<span>标签创建一个新的实体元素，并把所述文本数据填入所述实体元素中，删除所述容器元素中的文本数据。根据本专利技术的另一方面，提供了一种用原生用户界面组件展示网页的系统，包括：所述系统包括：服务器和客户端；所述服务器包括：转换模块，用于在服务器侧将针对网页的第一HTML文档转换为XML文档；所述客户端包括：接收模块，用于接收访问所述网页的操作指令；发送模块，用于根据所述操作指令向服务器发送针对所述网页的网页请求；返回模块，用于接收所述服务器返回的XML文档；所述XML文档由服务器根据所述网页请求返回；展示模块，用于使用原生用户界面组件将所述XML文档进行渲染展示。优选地，所述用于在服务器侧将针对网页的第一HTML文档转换为XML文档的转换模块，包括：预处理模块，用于将所述第一HTML文档进行预处理，获得第二HTML文档；所述第二HTML文档中的实体元素只包含数据内容，不包含其他实体元素，以及容器元素不直接包含数据内容，只包含实体元素或容器元素；文档转换模块，用于将第二HTML文档中由网页窗口组件渲染的容器元素、实体元素、布局属性和绘制属性，分别根据布局容器转换表、实体元素转换表、布局属性转换表和绘制属性转换表本文档来自技高网...

【技术保护点】
一种用原生用户界面组件展示网页的方法，其特征在于，包括：在服务器侧将针对网页的第一HTML文档转换为XML文档；接收访问所述网页的操作指令；根据所述操作指令向服务器发送针对所述网页的网页请求；接收所述服务器返回的XML文档；所述XML文档由服务器根据所述网页请求返回；使用原生用户界面组件将所述XML文档进行渲染展示。

【技术特征摘要】
1.一种用原生用户界面组件展示网页的方法，其特征在于，包括：在服务器侧将针对网页的第一HTML文档转换为XML文档；接收访问所述网页的操作指令；根据所述操作指令向服务器发送针对所述网页的网页请求；接收所述服务器返回的XML文档；所述XML文档由服务器根据所述网页请求返回；使用原生用户界面组件将所述XML文档进行渲染展示。2.如权利要求1所述的方法，其特征在于，所述在服务器侧将针对网页的第一HTML文档转换为XML文档的步骤，包括：将所述第一HTML文档进行预处理，获得第二HTML文档；所述第二HTML文档中的实体元素只包含数据内容，不包含其他实体元素，以及容器元素不直接包含数据内容，只包含实体元素或容器元素；将第二HTML文档中由网页窗口组件渲染的容器元素、实体元素、布局属性和绘制属性，分别根据布局容器转换表、实体元素转换表、布局属性转换表和绘制属性转换表，转换为由原生用户界面组件渲染的容器元素、实体元素、布局属性和绘制属性，从而生成XML文档。3.如权利要求2所述的方法，其特征在于，所述将第二HTML文档中由网页窗口组件渲染的容器元素、实体元素、布局属性和绘制属性，分别根据布局容器转换表、实体元素转换表、布局属性转换表和绘制属性转换表，转换为由原生用户界面组件渲染的容器元素、实体元素、布局属性和绘制属性，从而生成XML文档的步骤，包括：对所述第二HTML文档进行解析，生成文档对象模型树和样式树；对于所述文档对象模型树中的每一个文档对象模型节点，判断所述文档对象模型节点的元素类型；所述元素类型包括：容器元素和实体元素；如果所述文档对象模型节点是容器元素，根据文档对象模型节点的关联的样式节点中的显示属性值和位置属性值，在布局容器转换表中查找到对应的XML文档的容器元素记录，转换生成XML文档中的视图组节点，并根据文档对象模型节点把所述视图组节点加入到对应的XML文档的视图树中的父节点的子节点列表中，如果无父节点，所述XML文档中的视图组节点为视图树的根节点；如果所述文档对象模型节点是实体元素，根据实体元素的标签在实体元素转换表中查找到对应的XML文档实体元素记录，转换生成XML文档中的视图节点，复制HTML文档中的数据内容到XML文档中的视图节点，并根据文档对象模型节点把所述视图节点加入到对应的XML文档的视图树中的父节点的子节点列表中；对于样式树中每一个文档对象模型节点对应的布局属性和布局属性值，根据布局属性转换表，转换生成对应的视图组节点或视图节点中的布局属性，并复制布局属性值，将转换后的布局属性和布局属性值加入到视图树中对应的视图组节点或视图节点上；对于样式树中每一个文档对象模型节点对应的绘制属性和绘制属性值，根据绘制属性转换表，转换生成对应的视图组节点或视图节点中的绘制属性，并复制绘制属性值，将转换后的绘制属性和绘制属性加入到视图树中对应的视图组节点或视图节点上；根据所述视图树，从根节点开始递归遍历，反向编译包含内联样式数据的XML文档。4.如权利要求3所述的方法，其特征在于，所述对于所述文档对象模型树中的每一个文档对象模型节点，判断所述文档对象模型节点的元素类型的步骤，包括：根据所述文档对象模型节点中的元素，读取元素的子节点列表，如果所述子节点列表为空或没有元素节点，则所述元素为实体元素；如果所述子节点列表不为空或有元素节点，则所述元素为容器元素。5.如权利要求2所述的方法，其特征在于，所述将所述第一HTML文档进行预处理，获得第二HTML文档；所述第二HTML文档中的实体元素只包含数据内容，不包含其他实体元素，以及容器元素不直接包含数据内容，只包含实体元素或容器元素的步骤，包括：对所述第一HTML文档进行解析，生成文档对象模型树和样式树；从根元素开始遍历文档对象模型树，对于所述文档对象模型树的每一个元素，获取所述元素关联的样式节点，通过读取所述样式节点的显示属性值，判断所述元素的元素类型；所述元素类型包括：容器元素和实体元素；如果所述元素类型为容器元素，则通过读取所述元素的子节点列表，判断所述元素的子节点列表是否直接包含文本数据；如果所述容器元素直接包含文本数据，则在所述容器元素中通过调用<span>标签创建一个新的实体元素，并把所述文本数据填入所述实体元素中，删除所述容器元素中的文本数据；如果所述元素类型为实体元素，则通过读取所述元素的子节点列表，判断所述元素的子节点列表是否直接包含文本数据和包含实体元素；如果所述实体元素直接包含文本数据和包含实体元素，则把外层的实体元素默认为容器元素，在所述容器元素中通过调用<span>标签创建一个新的实体元素，并把所述文本数据填入所述实体元素中，删除所述容器元素中的文本数据。6.一种用原生用户界面组件展示网页的系统，其特征在于，包括：所述系统包括：服务器和客户端；所述服务器包括：转换模块，用于在服务器侧将针对网页的第一HTML文档转换为XML文档；所述客户端包括：接收模块，用于接收访问所述网页的操作指令；发送模块，用于根据所...

【专利技术属性】
技术研发人员：刘永生，
申请(专利权)人：北京奇艺世纪科技有限公司，
类型：发明
国别省市：北京;11