用于解析网页的方法、装置及电子设备制造方法及图纸

本申请涉及用于解析网页的方法、装置及电子设备,方法包括：将网页关联的CSS样式表翻译成JS(JavaScript)对象得到JS样式表；对所述网页的HTML文件进行编译得到JS网页文件，编译时将所述JS样式表关联到所述JS网页文件；解析所述JS网页文件时，根据所述JS样式表对所述JS网页文件进行渲染。本申请的技术方案能够跨平台支持CSS外联方式，进一步地能够实现ReactNative对CSS的高效率的样式布局方式的支持。

【技术实现步骤摘要】
用于解析网页的方法、装置及电子设备
本申请涉及移动互联网
，具体而言，涉及用于解析网页的方法、装置及电子设备。
技术介绍
浏览器解析HTML时，通常采用加载的步骤：1.解析HTML结构；2.加载外部脚本和样式表文件；3.解析并执行脚本代码；4.DOM树构建完成；5.加载图片等外部资源；6.页面加载完毕。顺序大至如上所示，但很多时候几个步骤是同时发生的。由于浏览器采用至上而下的方式解析，所以会先解析html，直到遇到外部样式和外部脚本。这时会阻塞浏览器的解析，外部样式和外部脚本(在没有async、defer属性下)会并行加载，但是外部样式会阻塞外部脚本的执行。近几年随着移动互联网的流行，APP开发需求量变得越来越大。但是手机有IOS和安卓以及各种各样的型号，对于网页解析来说，一套代码不能运行在各个平台上，造成不同机型的网页解析方式需要重复开发，效率低下。
技术实现思路
本申请公开用于解析网页的方法，能实现ReactNative对CSS的高效率的样式布局方式的支持。本专利技术的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本专利技术的实践而习得。根据本专利技术的第一方面，提供一种用于解析网页的方法，包括：将网页关联的CSS样式表翻译成JavaScript对象(以下简称JS对象)得到JS样式表；对所述网页的HTML文件进行编译得到JS网页文件，编译时将所述JS样式表关联到所述JS网页文件；解析所述JS网页文件时，根据所述JS样式表对所述JS网页文件进行渲染。根据一些实施例，所述方法还包括编译时在所述HTML文件的标签的注入_id属性，以使所述JS网页文件中的节点具有节点标识。根据一些实施例，根据所述JS样式表对所述JS网页文件进行渲染包括：解析所述JS网页文件时，根据所述节点标识为所述JS网页文件中的节点建立父子关系映射树；根据所述父子关系映射树和所述JS样式表解析所述JS网页文件中的节点的样式，根据所述样式依次渲染所述节点。根据一些实施例，根据所述父子关系映射树和所述JS样式表解析所述JS网页文件中的节点的样式包括：根据所述JS样式表以末级选择器为关键字生成树形结构的选择器索引；根据所述父子关系映射树、所述选择器索引、以及节点的_styles属性动态匹配所述节点上生效的样式规则对象；对所述JS网页文件中的节点分别采用匹配的所述样式规则对象进行渲染。根据一些实施例，根据所述父子关系映射树、所述选择器索引、以及节点的_styles属性动态匹配所述节点上生效的样式规则对象包括：根据所述父子关系映射树和所述选择器索引对所述选择器索引进行过滤以获取与所述节点相关的选择器列表；获取所述节点从父节点继承的样式规则，对所继承的样式规则、所述节点的_styles属性、以及所述选择器列表进行规则合并确定所述节点上生效的样式规则对象。根据一些实施例，所述方法还包括编译时将所述HTML文件的标签的结点继承设定基类；根据所述JS样式表对所述JS网页文件进行渲染包括：采用所述设定基类定义的方法根据所述JS样式表对所述JS网页文件进行渲染。根据一些实施例，若所述网页关联多个CSS样式表，所述将网页关联的CSS样式表翻译成JS对象得到JS样式表包括：将所述多个CSS样式表分别翻译成JS对象得到多个JS样式表；所述编译时将所述JS样式表关联到所述JS网页文件包括：编译时将所述多个JS样式表关联到所述JS网页文件。根据一些实施例：将网页关联的CSS样式表翻译成JS对象得到JS样式表包括：将网页关联的CSS样式表翻译成ReactNative支持的JS对象得到JS样式表；对所述网页的HTML文件进行编译得到JS网页文件包括：对所述网页的HTML文件进行编译得到ReactNative支持的JS网页文件；对节点上生效的样式规则进行解析包括：在ReactNative框架上对节点上生效的样式规则进行解析。根据一些实施例，编译时将所述JS样式表关联到所述JS网页文件包括：编译时在所述HTML文件的最外层标签上注入_styles属性，在所述_styles属性中标记所述JS样式表。根据本专利技术的第二方面，提供一种用于解析网页的装置，其包括：样式表翻译单元，用于将网页关联的CSS样式表翻译成JS对象得到JS样式表；网页编译单元，用于对所述网页的HTML文件进行编译得到JS网页文件，编译时将所述JS样式表关联到所述JS网页文件；解析渲染单元，用于解析所述JS网页文件时，根据所述JS样式表对所述JS网页文件进行渲染。根据一些实施例，所述网页编译单元还用于，编译时在所述HTML文件的标签的注入_id属性，以使所述JS网页文件中的节点具有节点标识。根据一些实施例，所述解析渲染单元用于：解析所述JS网页文件时，根据所述节点标识为所述JS网页文件中的节点建立父子关系映射树；根据所述父子关系映射树和所述JS样式表解析所述JS网页文件中的节点的样式，根据所述样式依次渲染所述节点。根据一些实施例，所述解析渲染单元用于：根据所述JS样式表以末级选择器为关键字生成树形结构的选择器索引；根据所述父子关系映射树、所述选择器索引、以及节点的_styles属性动态匹配所述节点上生效的样式规则对象；对所述JS网页文件中的节点分别采用匹配的所述样式规则对象进行渲染。根据一些实施例，所述解析渲染单元用于：根据所述父子关系映射树和所述选择器索引对所述选择器索引进行过滤以获取与所述节点相关的选择器列表；获取所述节点从父节点继承的样式规则，对所继承的样式规则、所述节点的_styles属性、以及所述选择器列表进行规则合并确定所述节点上生效的样式规则对象。根据一些实施例，所述网页编译单元还用于：编译时将所述HTML文件的标签的结点继承设定基类；所述解析渲染单元用于：采用所述设定基类定义的方法根据所述JS样式表对所述JS网页文件进行渲染。根据一些实施例，所述网页关联多个CSS样式表；所述样式表翻译单元用于：将所述多个CSS样式表分别翻译成JS对象得到多个JS样式表；所述网页编译单元用于：编译时将所述多个JS样式表关联到所述JS网页文件。根据一些实施例：所述样式表翻译单元用于：将网页关联的CSS样式表翻译成ReactNative支持的JS对象得到JS样式表；所述网页编译单元用于：对所述网页的HTML文件进行编译得到ReactNative支持的JS网页文件；所述解析渲染单元用于：在ReactNative框架上对节点上生效的样式规则进行解析。根据一些实施例，所述解析渲染单元用于：编译时在所述HTML文件的最外层标签上注入_styles属性，在所述_styles属性中标记所述JS样式表。根据本专利技术的第三方面，提供一种电子设备，包括：处理器；存储器，存储用于所述处理器控制如上述第一方面任一项操作的指令。本申请的实施例提供的技术方案可以包括以下有益效果：本申请的实施例提供的技术方案分别将网页关联的CSS样式表和HTML文件编译成JS文件，在解析时，根据样式表对应的JS文件动态匹配样式，能够跨平台支持CSS外联方式。应当理解的是，以上的一般描述和后文的细节描述仅是示例性的，并不能限制本专利技术。附图说明通过参照附图详细描述其示例实施例，本专利技术的上述和其它特征及优点将变得更加明显。图1示出了根据本专利技术一实施例的用于本文档来自技高网...

【技术保护点】
1.一种解析网页的方法，其特征在于，包括：将网页关联的CSS样式表翻译成JS对象得到JS样式表；对所述网页的HTML文件进行编译得到JS网页文件，编译时将所述JS样式表关联到所述JS网页文件；解析所述JS网页文件时，根据所述JS样式表对所述JS网页文件进行渲染。

【技术特征摘要】
1.一种解析网页的方法，其特征在于，包括：将网页关联的CSS样式表翻译成JS对象得到JS样式表；对所述网页的HTML文件进行编译得到JS网页文件，编译时将所述JS样式表关联到所述JS网页文件；解析所述JS网页文件时，根据所述JS样式表对所述JS网页文件进行渲染。2.如权利要求1所述的方法，其特征在于，所述方法还包括编译时在所述HTML文件的标签的注入_id属性，以使所述JS网页文件中的节点具有节点标识。3.如权利要求2所述的方法，其特征在于，根据所述JS样式表对所述JS网页文件进行渲染包括：解析所述JS网页文件时，根据所述节点标识为所述JS网页文件中的节点建立父子关系映射树；根据所述父子关系映射树和所述JS样式表解析所述JS网页文件中的节点的样式，根据所述样式依次渲染所述节点。4.如权利要求3所述的方法，其特征在于，根据所述父子关系映射树和所述JS样式表解析所述JS网页文件中的节点的样式包括：根据所述JS样式表以末级选择器为关键字生成树形结构的选择器索引；根据所述父子关系映射树、所述选择器索引、以及节点的_styles属性动态匹配所述节点上生效的样式规则对象；对所述JS网页文件中的节点分别采用匹配的所述样式规则对象进行渲染。5.如权利要求4所述的方法，其特征在于，根据所述父子关系映射树、所述选择器索引、以及节点的_styles属性动态匹配所述节点上生效的样式规则对象包括：根据所述父子关系映射树和所述选择器索引对所述选择器索引进行过滤以获取与所述节点相关的选择器列表；获取所述节点从父节点继承的样式规则，对所继承的样式规则、所述节点的_styles属性、以及所述选择器列表进行规则合并确定所述节点上生效的样式规则对象。6.如权利要求1所述的方法，其特征在于，所述方法还包括编译时将所述HTML文件的标签的结点继承设定基类；根据所述JS样式表对所述JS网页文件进行渲染包括：采用所述设定基类定义的方法根据所述JS样式表对所述JS网页文件进行渲染。7.如权利要求1所述的方法，其特征在于，若所...

【专利技术属性】
技术研发人员：江浩，
申请(专利权)人：艺龙网信息技术北京有限公司，
类型：发明
国别省市：北京,11