CN103500118A - 一种级联样式表优化方法和装置 - Google Patents

Abstract

本发明公开了一种级联样式表优化方法和装置，包括：对网页HTML文档中引用的级联样式表CSS的文本进行解析;删除CSS的文本中的冗余信息、合并重复的CSS属性赋值、并压缩CSS代码以及CSS的选择器名称的长度；将网页HTML文档中引用的CSS的选择器名称替换为压缩后的CSS选择器名称。本发明的级联样式表优化方法和装置，能够去除CSS的文本中的冗余信息，将CSS的属性、选择器合并，压缩CSS代码以及CSS的选择器名称的长度，并对HTML文件中的CSS的选择器名称进行压缩，可以减小CSS的文本大小，提高页面的访问速度。

Description

一种级联样式表优化方法和装置

技术领域

本发明涉及互联网技术领域，尤其涉及一种级联样式表优化方法和装置。

背景技术

级联样式表（Cascading          StyleSheet）简称“CSS”，通常又称为“风格样式表（StyleSheet）”，它是用来进行网页风格设计的。例如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种网页风格。通过设立CSS，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。

在WEB开发中，经常要用到CSS来修饰页面，定义如何显示HTML元素，样式通常保存在外部的.css文件中。通过编辑一个CSS文档，可以同时改变站点中所有页面的布局和外观，同时控制多重页面的样式。但是，在显示HTML页面时，CSS要下载到浏览器端进行渲染，由于通常在编写CSS的文件时，需要考虑可读性，在文件中设置了注释，并且，CSS文件中还出现重复定义等冗余的信息，这些冗余的信息减低了浏览器端根据CSS文件进行渲染的运行速度，所以可以压缩CSS内容大小提高页面的访问速度。

发明内容

有鉴于此，本发明要解决的一个技术问题是提供一种级联样式表优化方法，能够压缩CSS的文本内容。

一种级联样式表优化方法，包括：对网页HTML文档中引用的级联样式表CSS的文本进行解析;删除CSS的文本中的冗余信息、合并重复的CSS属性赋值、并压缩CSS代码以及CSS的选择器名称的长度；将所述网页HTML文档中引用的CSS的选择器名称替换为压缩后的CSS选择器名称。

根据本发明的方法的一个实施例，进一步的，所述冗余信息包括：空格、换行符和注释；合并重复的CSS属性赋值包括：当CSS的文本中对一个属性进行了多次赋值时，选取对此属性的最后赋值；或者，当一个网页HTML文档中引用的多个CSS对属性具有相同的赋值时，合并此多个CSS的文本中对此属性的赋值。

根据本发明的方法的一个实施例，进一步的，从CSS的文本的起始处进行扫描，依次将CSS文本中字符串或符号进行分隔，并生成与所述字符串或符号相对应的CSS属性数据；当分隔出的字符串或符号为换行符或空格时，不生成CSS属性数据；其中，所述字符串或符号包括：selector选择器名称、“{”、属性名称、“：”、属性值、“；”、“{”、注释分隔符、注释；每个所述CSS属性数据包括：表示字符串或符号类型的type属性、表示字符串或符号的value属性、该字符串或符号前的注释的commentBefore属性；其中，所述type属性的值包括：selector、property、colon、value和semicolon；生成存储所述CSS属性数据的CSS结构数组；对所述CSS结构数组进行遍历，获取所述CSS结构数组中的CSS属性结构，并滤去CSS属性结构中的commentBefore属性值，合并重复的CSS属性赋值，按照浏览器要求的格式生成CSS代码。

根据本发明的方法的一个实施例，进一步的，建立哈希数组，依照CSS的文本中的顺序将CSS属性以及对应的赋值放入到所述哈希数组中；以CSS属性为主键从所述哈希数组获取对应的赋值，能够合并属性的赋值。

根据本发明的方法的一个实施例，进一步的，建立压缩字典，所述压缩字典中包含26个英文字母；根据设定的CSS的选择器名称压缩后的长度，从所述压缩字典中获取与所述长度相等的字符串作为CSS的选择器名称。

本发明要解决的一个技术问题是提供一种级联样式表优化装置，能够压缩CSS的文本内容。

一种级联样式表的优化装置，包括：CSS代码优化装置，用于对网页HTML文档中引用的CSS的文本进行解析，删除冗余信息、合并重复的CSS属性赋值,压缩CSS代码并压缩CSS的选择器名称的长度；HTML文档优化装置，用于将所述网页HTML文档中引用的CSS的选择器名称替换为压缩后的CSS选择器名称。

根据本发明的装置的一个实施例，进一步的，所述冗余信息包括：空格、换行符和注释；合并重复的CSS属性赋值包括：当CSS的文本中对一个属性进行了多次赋值时，所述CSS代码优化装置选取对此属性的最后赋值；当一个网页HTML文档中引用的多个CSS对属性具有相同的赋值时，所述CSS代码优化装置合并此多个CSS的文本中对此属性的赋值。

根据本发明的装置的一个实施例，进一步的，所述CSS代码优化装置包括：CSS解析单元、CSS遍历单元和CSS压缩单元；所述CSS解析单元从CSS的文本的起始处进行扫描，依次将CSS文本中字符串或符号进行分隔，并生成与所述字符串或符号相对应的CSS属性数据；当分隔出的字符串或符号为换行符或空格时，所述CSS解析单元不生成CSS属性数据；其中，所述字符串或符号包括：selector选择器名称、“{”、属性名称、“：”、属性值、“；”、“{”、注释分隔符、注释；每个所述CSS属性数据包括：表示字符串或符号类型的type属性、表示字符串或符号的value属性、该字符串或符号前的注释的commentBefore属性；其中，所述type属性的值包括：selector、property、colon、value和semicolon；所述CSS遍历单元生成存储所述CSS属性数据的CSS结构数组；所述CSS遍历单元对所述CSS结构数组进行遍历，获取所述CSS结构数组中的CSS属性结构，并滤去CSS属性结构中的commentBefore属性值；所述CSS压缩单元合并重复的CSS属性赋值，按照浏览器要求的格式生成CSS代码。

根据本发明的装置的一个实施例，进一步的，所述CSS压缩单元建立哈希数组，依照CSS的文本中的顺序将CSS属性以及对应的赋值放入到所述哈希数组中；所述CSS压缩单元以CSS属性为主键从所述哈希数组获取对应的赋值，合并属性的赋值。

根据本发明的装置的一个实施例，进一步的，所述CSS压缩单元建立压缩字典，所述压缩字典中包含26个英文字母；所述CSS压缩单元根据CSS的选择器名称压缩后的长度，从所述压缩字典中获取与所述长度相等的字符串作为CSS的选择器名称。

本发明的级联样式表优化方法和装置，能够去除CSS的文本中的冗余信息，将CSS的属性、选择器合并，压缩CSS代码以及CSS的选择器名称的长度，并对HTML文件中的CSS的选择器名称进行压缩，可以减小CSS的文本大小，提高页面的访问速度。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为根据本发明的级联样式表优化方法的一个实施例的流程图；

图2A为一个HTML代码的示意图，图2B为2个CSS的文本示意图，图2C为CSS的文本被解析后形成的结构示意图，图2D为压缩后的CSS代码示意图；

图3为根据本发明的级联样式表优化方法的另一个实施例中扫描、压缩CSS的文本的流程图；

图4为根据本发明的级联样式表优化装置的一个实施例的示意图。

具体实施方式

下面参照附图对本发明进行更全面的描述，其中说明本发明的示例性实施例。下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在CSS的文本中设置的CSS规则由两个主要的部分构成：选择器、以及一条或多条声明。选择器通常是您需要改变样式的HTML元素。每条声明由一个属性和一个值组成。属性（property）是希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。

如图1中的级联样式表优化方法的流程图所示：

步骤101，对网页HTML文档中引用的级联样式表CSS的文本进行解析。

步骤102，删除CSS的文本中的冗余信息、合并重复的CSS属性赋值、并压缩CSS代码以及CSS的选择器名称的长度。

步骤103，将网页HTML文档中引用的CSS的选择器名称替换为压缩后的CSS选择器名称。

根据本发明的一个实施例，冗余信息包括：空格、换行符和注释。

合并重复的CSS属性赋值包括：当CSS的文本中对一个属性进行了多次赋值时，选取对此属性的最后赋值。或者，当一个网页HTML文档中引用的多个CSS对属性具有相同的赋值时，合并此多个CSS的文本中对此属性的赋值。

可以采用多种方式完成对CSS的文本解析，以及删除CSS的文本中的冗余信息、合并重复的CSS属性赋值、并压缩CSS代码以及CSS的选择器名称的长度。

根据本发明的一个实施例，如图2A所示的HTML代码中，div标签通过class引用了CSS里的样式，class名为w_textdot和w_textdot_b。图2B是CSS的样式。通过对CSS进行词法分析，可以得到结构化数据。

图3为根据本发明的级联样式表优化方法的另一个实施例中扫描、压缩CSS的文本的流程图。如图3所示：

步骤201，从CSS的文本的起始处进行扫描，依次将CSS文本中字符串或符号进行分隔，并生成与字符串或符号相对应的CSS属性数据。

当分隔出的字符串或符号为换行符或空格时，不生成CSS属性数据，可以直接删除换行符和空格。

字符串或符号包括：selector选择器名称、“{”、属性名称、“：”、属性值、“；”、“{”、注释分隔符、注释。

每个CSS属性数据包括：表示字符串或符号类型的type属性、表示字符串或符号的value属性、该字符串或符号前的注释的commentBefore属性。type属性的值包括：selector、property、colon、value和semicolon。

图2C是将图2B中的CSS文本进行解析并进行结构化的数据，为生成的一段TOKEN列表，每个TOKEN包含下面的信息：type:

表示TOKEN的类型，value:TOKEN对应的值，commentBefore:

该TOKEN前的注释（如果没有则没有该字段）。其中type的值有：selector(选择器),

property(css属性名)，colon(冒号)，value(css属性值),

semicolon(分号)。

从CSS的文本的起始处进行扫描，从前往后依次扫描要分析的文本，根据CSS语言的特征对字符串或符号进行分割。例如：扫描到/**注释**/为CSS的注释，扫描到“{”前面的.w_textdot为selector(选择器)，“{”为花括号，扫描到“：”前面的width为属性名，“：”为冒号，扫描到“;”前面的3px为属性值。对于扫描到的空格、换行符直接扔掉，不在TOKEN信息里体现。根据这种规则一直扫描到文本结束。

根据本发明的一个实施例，对从CSS文本中分隔出的字符串或符号建立各自的CSS属性对象，存储每个字符串或符号的信息，CSS属性对象包括：type、value、commentBefore等属性。在扫描后，可以将各个CSS属性对象的内容输出，生成一个大的字符串，格式可以如图2C所示。

步骤202，生成存储CSS属性数据的CSS结构数组。可以采用多种方式将在CSS文本中分隔出的字符串或符号的属性形成CSS结构数组。例如，可以通过后端语言提供的方法，如:php的json_decode函数,将结构化如图2C的字符串的数据转化为对应语言的数组。

步骤203，对CSS结构数组进行遍历，获取CSS结构数组中的CSS属性结构，并滤去CSS属性结构中的commentBefore属性值，合并重复的CSS属性赋值，按照浏览器要求的格式生成CSS代码。

根据本发明的一个实施例，可以通过语言提供的数组处理方法，如：PHP里的foreach方法对TOKEN列表进行遍历。空格在进行词法分析时已经扔掉，注释包含在TOKEN信息里，优化时将其扔掉，根据浏览器，例如360浏览器的格式要求生成CSS代码。

根据本发明的一个实施例，可以建立哈希数组，依照CSS的文本中的顺序将CSS属性以及对应的赋值放入到哈希数组中，以CSS属性为主键从哈希数组获取对应的赋值，能够合并属性的赋值。

由于CSS的选择器名称不能以数字打头，建立压缩字典，压缩字典中包含a到z的26个字符，根据设定的CSS的选择器名称压缩后的长度，从压缩字典中获取与长度相等的字符串作为CSS的选择器名称。建立压缩字典，将selector值换成字典的字符，可以减少selector的长度，从而减少CSS文件的大小。如：将.w_textdot替换为.a，由10个字符缩减为2个字符。

根据本发明的一个实施例，可以有多种方式实现压缩字典，例如可以是列表或数组。列表或数组中的值为a到z的26个字符,通过遍历或其他的方法，从列表或数组中获取需要的字符，组成字符串而形成CSS的选择器名称，其中，获取字符的个数与压缩后CSS的选择器名称的长度相同。

例如，压缩字典通过PHP中的数组array实现，在array中设置了a到z的26个字符作为数组的值，并从array中获取需要的字符组成字符串，具体的代码如下：

本发明的级联样式表优化方法，可以在代码开发完成后进行CSS和HTML文件的压缩和优化，使上线后的代码是压缩和优化过的。

通过本发明的级联样式表优化方法，分析出结构化的CSS代码数据后，通过对结构化的数据进行遍历，可以将图2B中的CSS代码优化如下：

1.删除里面的一些空格、换行符。

2.删除注释/**注释**/。

3.选择器.w_textdot里定义了2次width属性，由于后面的属性值将前面的属性值覆盖，所以可以将前面的width:3px删除。

4.选择器.w_textdot中定义了padding-left,padding-right,padding-top,padding-bottom4属性，这4个属性可以合并为padding:top right bottom left值，合并后的值为padding:10px20px10px10px。

5.

选择器.w_textdot和.w_textdot_b中都定义了float:left。height:3px;overflow:hidden属性，可以将其合并。合并后的css

为：.w_textdot,.w_textdot_b{float:left;height:3px;overflow:hidden}。

6.

对选择器.w_textdot和.w_textdot_b建立压缩字典，其中压缩字典的列表值有a到z26个值，a[a-z0-9\-_]到z[a-z0-9\-_]

26*38=988个值，还可以向后扩展3位，4位字符。通过建立好的字典对.w_textdot和.w_textdot_b进行压缩，得到对应关系为:.w_textdot=>.a；.w_textdot_b=>.b。最终压缩后的CSS代码如图2D所示。

图4为一种级联样式表优化装置的示意图。如图4所示，级联样式表的优化装置40包括：CSS代码优化装置42和HTML文档优化装置41。

CSS代码优化装置42对网页HTML文档中引用的CSS的文本进行解析，删除冗余信息、合并重复的CSS属性赋值,压缩CSS代码并压缩CSS的选择器名称的长度；HTML文档优化装置41将网页HTML文档中引用的CSS的选择器名称替换为压缩后的CSS选择器名称。

根据本发明的一个实施例，冗余信息包括：空格、换行符和注释。合并重复的CSS属性赋值包括：当CSS的文本中对一个属性进行了多次赋值时，CSS代码优化装置42选取对此属性的最后赋值。

当一个网页HTML文档中引用的多个CSS对属性具有相同的赋值时，CSS代码优化装置42合并此多个CSS的文本中对此属性的赋值。

根据本发明的一个实施例，CSS代码优化装置42包括：CSS解析单元421、CSS遍历单元422和CSS压缩单元423。

CSS解析单元421从CSS的文本的起始处进行扫描，依次将CSS文本中字符串或符号进行分隔，并生成与字符串或符号相对应的CSS属性数据；当分隔出的字符串或符号为换行符或空格时，CSS解析单元421不生成CSS属性数据。

字符串或符号包括：selector选择器名称、“{”、属性名称、“：”、属性值、“；”、“{”、注释分隔符、注释；每个CSS属性数据包括：表示TOKEN的类型的type属性、TOKEN对应值的value属性和该TOKEN前的注释的commentBefore属性。其中，type属性的值包括：selector、property、colon、value和semicolon。

CSS遍历单元422生成存储CSS属性数据的CSS结构数组。

CSS遍历单元422对CSS结构数组进行遍历，获取CSS结构数组中的CSS属性结构，并滤去CSS属性结构中的commentBefore属性值；CSS压缩单元423合并重复的CSS属性赋值，按照浏览器要求的格式生成CSS代码。

根据本发明的一个实施例，CSS压缩单元423建立哈希数组，依照CSS的文本中的顺序将CSS属性以及对应的赋值放入到哈希数组中。

CSS压缩单元423以CSS属性为主键从哈希数组获取对应的赋值，合并属性的赋值。

根据本发明的一个实施例，CSS压缩单元423建立压缩字典，压缩字典中包含26个英文字母。

CSS压缩单元423根据CSS的选择器名称压缩后的长度，从压缩字典中获取与长度相等的字符串作为CSS的选择器名称。

本发明的级联样式表优化方法和装置，去除CSS的文本中的冗余信息，将CSS的属性、选择器合并，并对HTML里的CSS选择器名称进行压缩，可以减小CSS的文本大小，提高页面的访问速度。

可能以许多方式来实现本发明的方法和系统。例如，可通过软件、硬件、固件或者软件、硬件、固件的任何组合来实现本发明的方法和系统。用于方法的步骤的上述顺序仅是为了进行说明，本发明的方法的步骤不限于以上具体描述的顺序，除非以其它方式特别说明。此外，在一些实施例中，还可将本发明实施为记录在记录介质中的程序，这些程序包括用于实现根据本发明的方法的机器可读指令。因而，本发明还覆盖存储用于执行根据本发明的方法的程序的记录介质。

本发明的描述是为了示例和描述起见而给出的，而并不是无遗漏的或者将本发明限于所公开的形式。很多修改和变化对于本领域的普通技术人员而言是显然的。选择和描述实施例是为了更好说明本发明的原理和实际应用，并且使本领域的普通技术人员能够理解本发明从而设计适于特定用途的带有各种修改的各种实施例。

Claims (10)

1.一种级联样式表优化方法，包括：

对网页HTML文档中引用的级联样式表CSS的文本进行解析;

删除CSS的文本中的冗余信息、合并重复的CSS属性赋值、并压缩CSS代码以及CSS的选择器名称的长度；

将所述网页HTML文档中引用的CSS的选择器名称替换为压缩后的CSS选择器名称。

2.如权利要求1所述的方法，其中：

所述冗余信息包括：空格、换行符和注释；

合并重复的CSS属性赋值包括：

当CSS的文本中对一个属性进行了多次赋值时，选取对此属性的最后赋值；或者

当一个网页HTML文档中引用的多个CSS对属性具有相同的赋值时，合并此多个CSS的文本中对此属性的赋值。

3.如权利要求2所述的方法，其中：

从CSS的文本的起始处进行扫描，依次将CSS文本中字符串或符号进行分隔，并生成与所述字符串或符号相对应的CSS属性数据；

当分隔出的字符串或符号为换行符或空格时，不生成CSS属性数据；

其中，所述字符串或符号包括：selector选择器名称、“{”、属性名称、“：”、属性值、“；”、“{”、注释分隔符、注释；

每个所述CSS属性数据包括：表示字符串或符号类型的type属性、表示字符串或符号的value属性、该字符串或符号前的注释的commentBefore属性；其中，所述type属性的值包括：selector、property、colon、value和semicolon；

生成存储所述CSS属性数据的CSS结构数组；

对所述CSS结构数组进行遍历，获取所述CSS结构数组中的CSS属性结构，并滤去CSS属性结构中的commentBefore属性值，合并重复的CSS属性赋值，按照浏览器要求的格式生成CSS代码。

4.如权利要求3所述的方法，其中：

建立哈希数组，依照CSS的文本中的顺序将CSS属性以及对应的赋值放入到所述哈希数组中；

以CSS属性为主键从所述哈希数组获取对应的赋值，能够合并属性的赋值。

5.如权利要求4所述的方法，其中：

建立压缩字典，所述压缩字典中包含26个英文字母；

根据设定的CSS的选择器名称压缩后的长度，从所述压缩字典中获取与所述长度相等的字符串作为CSS的选择器名称。

6.一种级联样式表的优化装置，其特征在于，包括：

CSS代码优化装置，用于对网页HTML文档中引用的CSS的文本进行解析，删除冗余信息、合并重复的CSS属性赋值,压缩CSS代码并压缩CSS的选择器名称的长度；

HTML文档优化装置，用于将所述网页HTML文档中引用的CSS的选择器名称替换为压缩后的CSS选择器名称。

7.如权利要求6所述的装置，其特征在于：

所述冗余信息包括：空格、换行符和注释；

合并重复的CSS属性赋值包括：

当CSS的文本中对一个属性进行了多次赋值时，所述CSS代码优化装置选取对此属性的最后赋值；

当一个网页HTML文档中引用的多个CSS对属性具有相同的赋值时，所述CSS代码优化装置合并此多个CSS的文本中对此属性的赋值。

8.如权利要求7所述的装置，其特征在于：

所述CSS代码优化装置包括：CSS解析单元、CSS遍历单元和CSS压缩单元；

所述CSS解析单元从CSS的文本的起始处进行扫描，依次将CSS文本中字符串或符号进行分隔，并生成与所述字符串或符号相对应的CSS属性数据；当分隔出的字符串或符号为换行符或空格时，所述CSS解析单元不生成CSS属性数据；

其中，所述字符串或符号包括：selector选择器名称、“{”、属性名称、“：”、属性值、“；”、“{”、注释分隔符、注释；

每个所述CSS属性数据包括：表示字符串或符号类型的type属性、表示字符串或符号的value属性、该字符串或符号前的注释的commentBefore属性；其中，所述type属性的值包括：selector、property、colon、value和semicolon；

所述CSS遍历单元生成存储所述CSS属性数据的CSS结构数组；所述CSS遍历单元对所述CSS结构数组进行遍历，获取所述CSS结构数组中的CSS属性结构，并滤去CSS属性结构中的commentBefore属性值；

所述CSS压缩单元合并重复的CSS属性赋值，按照浏览器要求的格式生成CSS代码。

9.如权利要求8所述的装置，其特征在于：

所述CSS压缩单元建立哈希数组，依照CSS的文本中的顺序将CSS属性以及对应的赋值放入到所述哈希数组中；

所述CSS压缩单元以CSS属性为主键从所述哈希数组获取对应的赋值，合并属性的赋值。

10.如权利要求4所述的方法，其特征在于：

所述CSS压缩单元建立压缩字典，所述压缩字典中包含26个英文字母；所述CSS压缩单元根据CSS的选择器名称压缩后的长度，从所述压缩字典中获取与所述长度相等的字符串作为CSS的选择器名称。

Images