一种消除CSS样式冗余的方法及相关产品技术

技术编号:20745527 阅读:82 留言:0更新日期:2019-04-03 10:27
本申请公开了一种消除CSS样式冗余的方法,用于去除CSS样式文件中的冗余,该方法包括:获取网页中各个网页元素的CSS样式信息,样式信息包括网页元素对应的样式规则,样式规则包括样式属性;在样式规则的样式属性中确定无效样式属性;在网页对应的CSS样式文件中去除无效样式属性。本申请还公开了一种的消除CSS样式冗余的装置、存储介质以及处理器。

【技术实现步骤摘要】
一种消除CSS样式冗余的方法及相关产品
本申请涉及互联网
,具体涉及一种消除CSS样式冗余的方法、装置、存储介质以及处理器。
技术介绍
在网页加载过程中,会加载CSS(CascadingStyleSheets,层叠样式表)样式文件。CSS样式文件可以用于定义网页中各个网页元素的样式,例如通过CSS样式文件可以定义网页中各个网页元素的字体、显示颜色、背景颜色、位置等等。在加载CSS样式文件的过程中,CSS样式文件的大小会影响网页加载的速度。在现有技术中,CSS样式文件中通常存在代码冗余,导致网页加载速度较慢。因此,需要一种消除CSS样式文件中CSS样式冗余的方法。
技术实现思路
有鉴于此,本申请实施例提供一种消除CSS样式冗余的方法以及相关产品,以解决现有技术中在加载网页时CSS样式文件过大导致网页加载速度较慢的技术问题。为解决上述问题,本申请实施例提供的技术方案如下:一种消除CSS样式冗余的方法,所述方法包括:获取网页中各个网页元素的CSS样式信息,所述样式信息包括所述网页元素对应的样式规则,所述样式规则包括样式属性;在所述样式规则的样式属性中确定无效样式属性;在所述网页对应的CSS样式文件中去除所述无效样式属性。相应的,所述获取网页中各个网页元素的CSS样式信息之前,所述方法还包括:根据网页对应的CSS样式文件启动所述网页,遍历所述网页中各个网页元素。相应的,所述获取网页中各个网页元素的CSS样式信息,包括:利用样式获取网页插件获取网页中各个网页元素的CSS样式信息;或者,利用启动所述网页所使用浏览器的API接口获取网页中各个网页元素的CSS样式信息。相应的,所述在所述样式规则的样式属性中确定无效样式属性,包括:确定所述样式规则的样式属性的失效次数以及生效次数;在所述样式规则的样式属性中,将所述失效次数大于0且所述生效次数为0的样式属性确定为无效样式属性。相应的,所述在所述样式规则的样式属性中确定无效样式属性,包括:在所述样式规则的样式属性中确定生效的样式属性集合;在所述样式规则的样式属性中确定失效的样式属性集合;在所述失效的样式属性集合中去除在所述生效的样式属性集合中包括的样式属性之后,得到无效样式属性。一种消除CSS样式冗余的装置,所述装置包括:获取单元,用于获取网页中各个网页元素的CSS样式信息,所述样式信息包括所述网页元素对应的样式规则,所述样式规则包括样式属性;确定单元,用于在所述样式规则的样式属性中确定无效样式属性;去除单元,用于在所述网页对应的CSS样式文件中去除所述无效样式属性。相应的,所述装置还包括:启动单元,用于根据网页对应的CSS样式文件启动所述网页,遍历所述网页中各个网页元素。相应的,所述获取单元具体用于:利用样式获取网页插件获取网页中各个网页元素的CSS样式信息;或者,利用启动所述网页所使用浏览器的API接口获取网页中各个网页元素的CSS样式信息。相应的,所述确定单元包括:第一确定子单元,用于确定所述样式规则的样式属性的失效次数以及生效次数;第二确定子单元,用于在所述样式规则的样式属性中,将所述失效次数大于0且所述生效次数为0的样式属性确定为无效样式属性。相应的,所述确定单元包括:第三确定子单元,用于在所述样式规则的样式属性中确定生效的样式属性集合;第四确定子单元,用于在所述样式规则的样式属性中确定失效的样式属性集合;第五确定子单元,用于在所述失效的样式属性集合中去除在所述生效的样式属性集合中包括的样式属性之后,得到无效样式属性。一种存储介质,所述存储介质包括存储的程序,其中,所述程序执行上述的消除CSS样式冗余的方法。一种处理器,所述处理器用于运行程序,其中,所述程序运行时执行上述的消除CSS样式冗余的方法。由此可见,本申请实施例具有如下有益效果:本申请实施例通过获取网页中各个网页元素的样式规则,样式规则包括有样式属性,从各个样式规则的各个样式属性中可以确定出无效样式属性,通过在CSS样式文件中去除这些无效样式属性,从而消除了CSS样式文件中的冗余部分,达到了缩小CSS样式文件大小,提高网页加载速度的目的。附图说明图1为本申请实施例中消除CSS样式冗余的方法实施例的流程图;图2为本申请实施例中一网页实现代码的示意图;图3为本申请实施例中一CCS样式文件内容的示意图;图4为本申请实施例中上述网页实际显示效果的示意图;图5为本申请实施例中一优化后的CCS样式文件内容的示意图;图6为本申请实施例中消除CSS样式冗余的装置实施例的示意图。具体实施方式为使本申请的上述目的、特征和优点能够更加明显易懂,下面结合附图和具体实施方式对本申请实施例作进一步详细的说明。首先,对本申请实施例中涉及的一些概念进行说明。样式规则:样式规则可应用于网页中的网页元素,用于定义网页元素所需要的样式,例如网页元素为div元素,则可以利用样式规则定义该div元素对应的样式,div元素是用来为HTML(HyperTextMarkupLanguage,超级文本标记语言)文档内大块(block-level)的内容提供结构和背景的元素。样式规则可以由一个或多个样式属性及其取值组成,例如样式规则A可以包括样式属性A、样式属性A的取值,样式属性B、样式属性B的取值等。样式属性:样式属性的名称是一个合法的标识符,该标识符为CSS语法中的关键字。一种样式属性规定了格式修饰的一个方面。例如,样式属性color是文本的颜色属性,而样式属性text-indent是文本段落的缩进属性。每个样式属性都可以定义的取值,例如color:red表示样式属性color(颜色)的取值为red(红色),即定义了文本的颜色为红色。标签:标签是HTML语言中的基本单位,可以通过标签定义网页元素的类型,例如通过标签<div>可以定义div元素。在加载CSS样式文件的过程中,CSS样式文件的大小会影响网页加载的速度。在现有技术中,CSS样式文件中通常存在代码冗余,导致网页加载速度较慢。专利技术人经研究发现,CSS样式文件中存在代码冗余的原因包括:在网页加载过程中,为了定义一个HTML网页元素的样式,通常会生效多条样式规则。因为CSS样式规则的继承关系,有时候多条样式规则通常会包含重复的样式属性。而其中每一种样式属性,只能生效其中的一个属性值。所以,其他重复定义的样式属性实际上并没有生效,这样就有可能导致代码冗余。为此,本申请实施例通过去除网页实际加载过程中,没有生效的样式属性,达到消除了CSS样式文件中的冗余部分,提高网页加载速度的目的。参见图1所示,示出了本申请实施例中提供的一种消除CSS样式冗余的方法实施例的流程图,可以包括以下步骤:步骤101:获取网页中各个网页元素的CSS样式信息,样式信息包括网页元素对应的样式规则,样式规则包括样式属性。在浏览器中启动网页的过程中,首先会获取CSS样式文件等相关文件,根据CSS样式文件对网页进行渲染,完成网页的启动。在网页启动后,可以获取网页中各个网页元素的CSS样式信息。则在本申请实施例一些可能的实现方式中,在获取网页中各个网页元素的CSS样式信息之前,还可以:根据网页对应的CSS样式文件启动网页,遍历网页中各个网页元素。通过遍历的方式获得网页中所包括的网页元素,然后分别获取各个网页元本文档来自技高网...

【技术保护点】
1.一种消除CSS样式冗余的方法,其特征在于,所述方法包括:获取网页中各个网页元素的CSS样式信息,所述样式信息包括所述网页元素对应的样式规则,所述样式规则包括样式属性;在所述样式规则的样式属性中确定无效样式属性;在所述网页对应的CSS样式文件中去除所述无效样式属性。

【技术特征摘要】
1.一种消除CSS样式冗余的方法,其特征在于,所述方法包括:获取网页中各个网页元素的CSS样式信息,所述样式信息包括所述网页元素对应的样式规则,所述样式规则包括样式属性;在所述样式规则的样式属性中确定无效样式属性;在所述网页对应的CSS样式文件中去除所述无效样式属性。2.根据权利要求1所述的方法,其特征在于,所述获取网页中各个网页元素的CSS样式信息之前,所述方法还包括:根据网页对应的CSS样式文件启动所述网页,遍历所述网页中各个网页元素。3.根据权利要求1或2所述的方法,其特征在于,所述获取网页中各个网页元素的CSS样式信息,包括:利用样式获取网页插件获取网页中各个网页元素的CSS样式信息;或者,利用启动所述网页所使用浏览器的API接口获取网页中各个网页元素的CSS样式信息。4.根据权利要求1所述的方法,其特征在于,所述在所述样式规则的样式属性中确定无效样式属性,包括:确定所述样式规则的样式属性的失效次数以及生效次数;在所述样式规则的样式属性中,将所述失效次数大于0且所述生效次数为0的样式属性确定为无效样式属性。5.根据权利要求1所述的方法,其特征在于,所述在所述样式规则的样式属性中确定无效样式属性,包括:在所述样式规则的样式属性中确定生效的样式属性集合;在所述样式规则的样式属性中确定失效的样式属性集合;在所述失效的样式属性集合中去除在所述生效的样式属性集...

【专利技术属性】
技术研发人员:谢基颜
申请(专利权)人:北京国双科技有限公司
类型:发明
国别省市:北京,11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1