[发明专利]用于解析网页的方法、装置及电子设备

说明书

本申请涉及用于解析网页的方法、装置及电子设备,方法包括：将网页关联的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属性、以及所述选择器列表进行规则合并确定所述节点上生效的样式规则对象。