CN105205080B - 冗余文件清理方法、装置和系统 - Google Patents

Abstract

本发明公开了一种冗余文件清理方法、装置和系统。其中，该冗余文件清理方法包括：获取级联样式表文件；判断级联样式表文件是否满足预设冗余匹配条件；获取不满足预设冗余匹配条件的级联样式表文件，并将不满足预设冗余匹配条件的级联样式表文件作为冗余文件；以及删除冗余文件中的冗余代码。通过本发明，解决了相关技术中静态分析级联样式表里的规则导致分析不全面的问题。

Description

冗余文件清理方法、装置和系统

技术领域

本发明涉及计算机领域，具体而言，涉及一种冗余文件清理方法、装置和系统。

背景技术

通常人为书写的级联样式表(Cascading Style Sheets，简称为CSS)都会存在冗余情况。并且级联样式表文件通常会随着维护时间的增加而越来越冗余。

级联样式表里定义的规则是配合超文本标记语言文档对象模型HTML DOM元素渲染用的。如果超文本标记语言HTML改变后使得某个文档对象模型DOM元素没有了，而级联样式表里的规则没有删除相应的规则，则级联样式表里会出现没用的级联样式表规则，即CSS冗余。冗余的CSS级联样式表规则被发布到线上，不仅不能发挥作用，反而提高了用户下载文件的大小，并且增加了客户端分析级联样式表规则和进行页面渲染的压力，降低了用户体验。而删除冗余的CSS，能够降低用户浏览网页时需要下载的文件的大小，提高客户端渲染页面的速度，提升用户的体验。

在相关技术中，为了删除冗余的CSS，一般通过静态地分析固定已知的HTML和CSS来确定冗余的CSS，并删除之。然而，该方案存在以下问题：

1.虽然CSS文件是固定的，但对于动态的网站来说，HTML是动态渲染的，不同的用户看到的页面可能不同，对应的HTML就会不同。这样，找出所有场景下的HTML是一个问题。

2.一个CSS文件会被多个页面引用，这样，找出所有引用该CSS文件的页面也是一个问题。

3.CSS可以动态地引入其他的CSS文件，也可以通过JavaScript动态地插入CSS文件；HTML也可以通过JavaScript动态地渲染得到。有这么多的动态性，仅仅进行静态分析是不全面的。

针对相关技术中静态分析级联样式表里的规则导致分析不全面的问题，目前尚未提出有效的解决方案。

发明内容

本发明的主要目的在于提供一种冗余文件清理方法、装置和系统，以解决相关技术中静态分析级联样式表里的规则导致分析不全面的问题。

为了实现上述目的，根据本发明的一个方面，提供了一种冗余文件清理方法。该方法包括：获取级联样式表文件；判断级联样式表文件是否满足预设冗余匹配条件；获取不满足预设冗余匹配条件的级联样式表文件，并将不满足预设冗余匹配条件的级联样式表文件作为冗余文件；以及删除冗余文件中的冗余代码。

进一步地，采用以下方式获取级联样式表文件：检测目标网页的访问状态；根据目标网页的访问状态判断目标网页是否被访问；如果判断出目标网页被访问，则获取目标网页的样式文件列表；以及从样式文件列表中解析出级联样式表文件。

进一步地，通过以下方式从样式文件列表中解析出级联样式表文件：从样式文件列表中解析出内联的级联样式表文件；从样式文件列表中解析出外联的级联样式表文件；以及从样式文件列表中解析出动态依赖的级联样式表文件。

进一步地，通过以下方式判断级联样式表文件是否满足预设冗余匹配条件：从级联样式表文件中解析出级联样式表选择器列表；以及将级联样式表选择器列表与预设网页的HTML DOM元素进行匹配，其中，如果级联样式表选择器列表与预设网页的HTML DOM元素匹配，则确定级联样式表选择器列表对应的级联样式表文件满足预设冗余匹配条件，如果级联样式表选择器列表与预设网页的HTML DOM元素不匹配，则确定级联样式表选择器列表对应的级联样式表文件不满足预设冗余匹配条件。

进一步地，获取不满足预设冗余匹配条件的级联样式表文件，并将不满足预设冗余匹配条件的级联样式表文件作为冗余文件包括：获取多个客户端获取到的不满足预设冗余匹配条件的级联样式表文件；确定多个客户端获取到的不满足预设冗余匹配条件的级联样式表文件中的级联样式表文件的交集；以及将级联样式表文件的交集作为冗余文件。

为了实现上述目的，根据本发明的另一方面，提供了一种冗余文件清理装置。该装置包括：第一获取单元，用于获取级联样式表文件；判断单元，用于判断级联样式表文件是否满足预设冗余匹配条件；第二获取单元，用于获取不满足预设冗余匹配条件的级联样式表文件，并将不满足预设冗余匹配条件的级联样式表文件作为冗余文件；以及删除单元，用于删除冗余文件中的冗余代码。

进一步地，第一获取单元包括：检测模块，用于检测目标网页的访问状态；判断模块，用于根据目标网页的访问状态判断目标网页是否被访问；第一获取模块，用于如果判断出目标网页被访问，则获取目标网页的样式文件列表；以及第一解析模块，用于从样式文件列表中解析出级联样式表文件。

进一步地，第一解析模块还用于从样式文件列表中解析出内联的级联样式表文件；第一解析模块还用于从样式文件列表中解析出外联的级联样式表文件；以及第一解析模块还用于从样式文件列表中解析出动态依赖的SS文件。

进一步地，判断单元包括：第二解析模块，用于从级联样式表文件中解析出级联样式表选择器列表；以及匹配模块，用于将级联样式表选择器列表与预设网页的HTML DOM元素进行匹配，其中，如果级联样式表选择器列表与预设网页的HTML DOM元素匹配，则确定级联样式表选择器列表对应的级联样式表文件满足预设冗余匹配条件，如果级联样式表选择器列表与预设网页的HTML DOM元素不匹配，则确定级联样式表选择器列表对应的级联样式表文件不满足预设冗余匹配条件。

进一步地，第二获取单元包括：第二获取模块，用于获取多个客户端获取到的不满足预设冗余匹配条件的级联样式表文件；第一确定模块，用于确定多个客户端获取到的不满足预设冗余匹配条件的级联样式表文件中的级联样式表文件的交集；以及第二确定模块，用于将级联样式表文件的交集作为冗余文件。

为了实现上述目的，根据本发明的再一方面，提供了一种冗余文件清理系统。该冗余文件清理系统包括：客户端，用于获取级联样式表文件，判断级联样式表文件是否满足预设冗余匹配条件，获取不满足预设冗余匹配条件的级联样式表文件，并将不满足预设冗余匹配条件的级联样式表文件作为冗余文件；以及服务器，用于确定客户端获取的冗余文件，并删除冗余文件。

进一步地，客户端为多个客户端，客户端用于分别获取不满足预设冗余匹配条件的级联样式表文件，服务器用于确定多个客户端获取到的不满足预设冗余匹配条件的级联样式表文件中的级联样式表文件的交集，并将级联样式表文件的交集作为冗余文件。

通过本发明，采用获取级联样式表文件；判断级联样式表文件是否满足预设冗余匹配条件；获取不满足预设冗余匹配条件的级联样式表文件，并将不满足预设冗余匹配条件的级联样式表文件作为冗余文件；以及删除冗余文件中的冗余代码，解决了相关技术中静态分析级联样式表里的规则导致分析不全面的问题，进而达到了动态而全面的分析级联样式表里的规则的效果。

附图说明

构成本申请的一部分的附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例的冗余文件清理系统的示意图；

图2是根据本发明实施例的冗余文件清理装置的示意图；以及

图3是根据本发明实施例的冗余文件清理方法的流程图。

具体实施方式

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本发明。

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

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含。

需要说明的是，在详细阐述本发明实施例之前，先将以下名词解释如下：

CSS：英文全称为Cascading Style Sheets，中文全称为级联样式表。级联样式表是用来表现HTML(标准通用标记语言的一个应用)或者XML(标准通用标记语言的一个子集)等文本样式的计算机语言。

CSS选择器：和CSS规则是同一概念，它是通过解析CSS文件得到的。每个CSS选择器可以对应一个或多个超文本标记语言文档对象模型HTML DOM元素。

HTML DOM元素：比如页面里的链接、图片、文本框等，都是HTML DOM元素。

JS：英文全称为JavaScript，它是在浏览器端执行的脚本。

另外，本发明的应用场景可以包括支付宝平台的主要页面，比如收银台和个人主页等。

根据本发明的实施例，提供了一种冗余文件清理系统，该冗余文件清理系统用于动态的分析级联样式表里的规则是否存在冗余，并将冗余的级联样式表里的规则删除。

图1是根据本发明实施例的冗余文件清理系统的示意图。

如图1所示，该系统包括：客户端和服务器。

客户端可以用于获取级联样式表文件，判断级联样式表文件是否满足预设冗余匹配条件，获取不满足预设冗余匹配条件的级联样式表文件，并将不满足预设冗余匹配条件的级联样式表文件作为冗余文件。

在本发明实施例中，可以通过客户端获取级联样式表CSS文件，例如，可以通过浏览器获取级联样式表CSS文件。

具体地，浏览器可以通过执行JS来获取网页的CSS文件，并且浏览器执行不同的JS代码可以获取不同的网页的CSS文件。级联样式表文件可以包括内联的、外联的和动态依赖的级联样式表文件。其中，动态依赖的级联样式表文件是指CSS文件引用的其它CSS文件，例如，CSS文件1在引用CSS文件2时，CSS文件2就是CSS文件1的动态依赖的级联样式表文件。需要说明的是，在有用户访问时，客户端可以递归的获取样式文件列表，并通过样式文件列表解析出所有的前述CSS文件。

具体地，在获取级联样式表CSS文件之后，可以对其进行解析，得到CSS选择器，即CSS规则。判断级联样式表文件是否满足预设冗余匹配条件可以是CSS规则是否有用。如果CSS规则有用，则表明级联样式表文件满足预设冗余匹配条件，从而级联样式表文件中的CSS规则为非冗余的代码。如果CSS规则没有用，则表明级联样式表文件不满足预设冗余匹配条件，从而级联样式表文件中的CSS规则为冗余的代码。

需要说明的是，CSS规则是否有用可以通过CSS规则与网页的HTML DOM元素的匹配情况来判断。如果CSS规则与网页的HTML DOM元素匹配，则表明CSS规则有用，如果CSS规则与网页的HTML DOM元素不匹配，则表明CSS规则没有用。例如，CSS规则1与一个网页中的图片1匹配，则表明CSS规则有用，进而表明CSS规则的代码为非冗余的代码。前述的网页可以为多个网页。

具体地，可以通过众包的方式，在用户访问网页时，动态地分析CSS规则与网页的HTML DOM元素匹配情况。由于网站开发的页面是给用户使用的，因此用户访问到的页面会包含所有的HTML应用场景，这样，可以使得用于和CSS规则进行匹配的HTML的覆盖率达到100％，从而不会有遗漏。并且这种方式可以部署在所有页面上，所以所有页面的数据都可以通过用户访问得到，从整站或这个应用的角度，全面地进行分析。并且在页面中的JavaScript脚本执行之后进行分析，所有当前用户访问页面的动态的CSS规则和HTML也都被覆盖。这样，可以避免由于HTML覆盖面不全面而导致有用的CSS规则被当成冗余代码删掉，以及由此导致的部分用户访问的页面里的某些区块不能正常显示。

在本发明实施例中，每个客户端可以获取自身不满足预设冗余匹配条件的级联样式表文件，并将不满足预设冗余匹配条件的级联样式表文件作为冗余文件，这样，可以得到多个客户端的多个冗余文件。例如，客户端可以包括客户端A和客户端B，其中，客户端A可以得到冗余文件A，客户端B可以得到冗余文件B，这样，客户端可以得到冗余文件A和冗余文件B。

优选地，客户端可以将冗余文件发送至服务器，由于冗余文件的数据较大，因此，可以通过推送的方式将冗余文件发送至服务器。

服务器可以用于确定客户端获取的冗余文件，并删除冗余文件中的冗余代码。

如果确定CSS规则为冗余文件，则可以将其删除。具体地，在各个客户端确定自身的CSS规则为冗余文件时，可以提醒用户(例如程序员)将相应的客户端的冗余文件删除。或者服务器通过汇总所有客户端确定的冗余文件，确定所有客户端的冗余文件，并提醒用户(例如程序员)将所有客户端的冗余文件删除。需要说明的是，在服务器端可以通过执行任意后端语言(比如Ruby，NodeJS，PHP，Java等)来实现。

优选地，在本发明实施例中，客户端可以为多个客户端，每个客户端可以用于分别获取不满足预设冗余匹配条件的级联样式表文件，相应的服务器可以用于确定多个客户端获取到的不满足预设冗余匹配条件的级联样式表文件中的级联样式表文件的交集，并将级联样式表文件的交集作为冗余文件。

这样，可以避免对一个客户端无用，而对其他的客户端有用的级联样式表文件被误删除，进而可以防止部分用户访问的页面里的某些区块不能正常显示。

具体地，服务器可以接收多个客户端通过post的方式发送的各自不满足预设冗余匹配条件的级联样式表文件的数据。需要说明的是，服务器在接收到各个客户端post的数据之后，一方面，可以存储不匹配的CSS选择器列表(即冗余的CSS选择器列表)和与之对应的CSS文件的URL路径，其中，服务器可以以CSS文件的URL地址为key进行存储；另一方面，可以对不匹配的CSS选择器列表的数据进行分析。例如，服务器可以从存储器中取出不匹配的CSS选择器列表的数据，并按CSS文件的URL地址进行归类。其中，可以将属于同一类别的CSS文件的URL下的规则做交集处理，分析得出最终的CSS冗余列表。

例如，可以通过以下方式得到级联样式表文件的交集：比如客户端甲的数据可以是选择器A和选择器B，客户端乙的数据可以是选择器B和选择器C，那么说明用户甲用到了选择器C，而用户乙用到了选择器A。所以只有选择器B是冗余的CSS规则。

通过本发明的上述实施例，采用众包的方式，在用户访问网站中的页面时，获取所有HTML场景，并配合CSS规则进行分析，然后通过服务器汇总所有数据，分析得出准确的CSS冗余规则列表，并将其删除，解决了相关技术中静态分析级联样式表里的规则导致分析不全面的问题，达到了动态而全面的分析级联样式表里的规则的效果。

根据本发明的实施例，提供了一种冗余文件清理装置，该冗余文件清理装置用于动态的分析级联样式表里的规则是否存在冗余，并将冗余的级联样式表里的规则删除。

图2是根据本发明实施例的冗余文件清理装置的示意图。

如图1所示，该装置包括：第一获取单元10、判断单元20、第二获取单元30和删除单元40。

第一获取单元10可以用于获取级联样式表文件。

在本发明实施例中，可以通过客户端获取级联样式表CSS文件，例如，可以通过浏览器获取级联样式表CSS文件。

具体地，浏览器可以通过执行JS来获取网页的CSS文件，并且浏览器执行不同的JS代码可以获取不同的网页的CSS文件。级联样式表文件可以包括内联的、外联的和动态依赖的级联样式表文件。其中，动态依赖的级联样式表文件是指CSS文件引用的其它CSS文件，例如，CSS文件1在引用CSS文件2时，CSS文件2就是CSS文件1的动态依赖的级联样式表文件。需要说明的是，在有用户访问时，客户端可以递归的获取样式文件列表，并通过样式文件列表解析出所有的前述CSS文件。

判断单元20可以用于判断级联样式表文件是否满足预设冗余匹配条件。

具体地，在获取级联样式表CSS文件之后，可以对其进行解析，得到CSS选择器，即CSS规则。判断级联样式表文件是否满足预设冗余匹配条件可以是CSS规则是否有用。如果CSS规则有用，则表明级联样式表文件满足预设冗余匹配条件，从而级联样式表文件中的CSS规则为非冗余的代码。如果CSS规则没有用，则表明级联样式表文件不满足预设冗余匹配条件，从而级联样式表文件中的CSS规则为冗余的代码。

需要说明的是，CSS规则是否有用可以通过CSS规则与网页的HTML DOM元素的匹配情况来判断。如果CSS规则与网页的HTML DOM元素匹配，则表明CSS规则有用，如果CSS规则与网页的HTML DOM元素不匹配，则表明CSS规则没有用。例如，CSS规则1与一个网页中的图片1匹配，则表明CSS规则有用，进而表明CSS规则的代码为非冗余的代码。前述的网页可以为多个网页。

具体地，可以通过众包的方式，在用户访问网页时，动态地分析CSS规则与网页的HTML DOM元素匹配情况。由于网站开发的页面是给用户使用的，因此用户访问到的页面会包含所有的HTML应用场景，这样，可以使得用于和CSS规则进行匹配的HTML的覆盖率达到100％，从而不会有遗漏。并且这种方式可以部署在所有页面上，所以所有页面的数据都可以通过用户访问得到，从整站或这个应用的角度，全面地进行分析。并且在页面中的JavaScript脚本执行之后进行分析，所有当前用户访问页面的动态的CSS规则和HTML也都被覆盖。这样，可以避免由于HTML覆盖面不全面而导致有用的CSS规则被当成冗余代码删掉，以及由此导致的部分用户访问的页面里的某些区块不能正常显示。

第二获取单元30可以用于获取不满足预设冗余匹配条件的级联样式表文件，并将不满足预设冗余匹配条件的级联样式表文件作为冗余文件。

在本发明实施例中，每个客户端可以获取自身不满足预设冗余匹配条件的级联样式表文件，并将不满足预设冗余匹配条件的级联样式表文件作为冗余文件，这样，可以得到多个客户端的多个冗余文件。例如，客户端可以包括客户端A和客户端B，其中，客户端A可以得到冗余文件A，客户端B可以得到冗余文件B，这样，客户端可以得到冗余文件A和冗余文件B。

优选地，客户端可以将冗余文件发送至服务器，由于冗余文件的数据较大，因此，可以通过推送的方式将冗余文件发送至服务器。

删除单元40可以用于删除冗余文件。

如果确定CSS规则为冗余文件，则可以将其删除。具体地，在各个客户端确定自身的CSS规则为冗余文件时，可以提醒用户(例如程序员)将相应的客户端的冗余文件删除。或者服务器通过汇总所有客户端确定的冗余文件，确定所有客户端的冗余文件，并提醒用户(例如程序员)将所有客户端的冗余文件删除。需要说明的是，在服务器端可以通过执行任意后端语言(比如Ruby，NodeJS，PHP，Java等)来实现。

优选地，在本发明实施例中，第一获取单元10可以包括：检测模块、判断模块、第一获取模块和第一解析模块。

检测模块可以用于检测目标网页的访问状态。其中，目标网页的访问状态可以包括目标网页正在被访问或者没有正在被访问。

判断模块可以用于根据目标网页的访问状态判断目标网页是否被访问。具体地，可以根据目标网页的访问状态判断目标网页是否正在被访问。

第一获取模块可以用于如果判断出目标网页被访问，则获取目标网页的样式文件列表。其中，如果判断出目标网页正在被访问，则动态地递归地获取目标网页的样式文件列表。例如，可以分别获取内联的、外联的和动态依赖的样式文件列表。

第一解析模块可以用于从样式文件列表中解析出级联样式表文件。其中，可以从内联的样式文件列表中解析出内联的级联样式表文件、从外联的样式文件列表中解析出外联的级联样式表文件、从动态依赖的样式文件列表中解析出动态依赖的级联样式表文件。

这样，可以找出所有的CSS文件，避免CSS文件覆盖不全的情况。

优选地，在本发明实施例中，第一解析模块还可以用于从样式文件列表中解析出内联的级联样式表文件。具体地，可以解析Style标签获取内联样式文件列表，并从内联样式文件列表中解析出内联的级联样式表文件。第一解析模块还可以用于从样式文件列表中解析出外联的级联样式表文件。具体地，可以解析link标签获取外联样式文件列表，并从外联样式文件列表中解析出外联的级联样式表文件。第一解析模块还可以用于从样式文件列表中解析出动态依赖的SS文件。具体地，可以判断级联样式表文件的内容中是否包含@import规则，如果判断出级联样式表文件的内容中包含@import规则，则获取外联样式文件列表，并且加载外联的级联样式表文件，获取CSS的内容。

优选地，在本发明实施例中，判断单元20可以包括：第二解析模块和匹配模块。

第二解析模块可以用于从级联样式表文件中解析出级联样式表选择器列表。

匹配模块可以用于将级联样式表选择器列表与预设网页的HTML DOM元素进行匹配。

其中，如果级联样式表选择器列表与预设网页的HTML DOM元素匹配，则确定级联样式表选择器列表对应的级联样式表文件满足预设冗余匹配条件，如果级联样式表选择器列表与预设网页的HTML DOM元素不匹配，则确定级联样式表选择器列表对应的级联样式表文件不满足预设冗余匹配条件。

在本发明实施例中，可以通过分析CSS文件内容来解析CSS选择器列表。具体地，可以通过正则匹配的分析方法来分析CSS文件内容。因为CSS的规则定义全部都是下面这样的格式：选择器{属性：值；属性：值；……}，因此，可以通过正则/([^\{}+]\{[^\]+}\)/g来获取到所有的CSS选择器列表。

预设网页可以为用户正在访问的所有的页面。通过将级联样式表选择器列表与现有页面的HTML DOM元素进行匹配，得出不匹配的CSS选择器列表。这里，可以使用每一个CSS选择器在HTML里进行DOM元素查找，其中，查找方式可以是浏览器内置的查找方式，具体地，可以是：document.querySelector(CSS Selector)。

将级联样式表选择器列表与预设网页的HTML DOM元素进行匹配，可以分别得到与预设网页的HTML DOM元素匹配的级联样式表选择器列表和与预设网页的HTML DOM元素不匹配的级联样式表选择器列表。其中，对与预设网页的HTML DOM元素匹配的级联样式表选择器列表不做任何处理，即，保留与预设网页的HTML DOM元素匹配的级联样式表选择器列表的相应代码。对与预设网页的HTML DOM元素部匹配的级联样式表选择器列表，可以将其作为冗余的级联样式表选择器列表代码，并将其删除。

需要说明的是，在本发明实施例中，多个客户端可以获取与预设网页的HTML DOM元素不匹配的级联样式表选择器列表的数据，并将该数据发送至服务器。由于级联样式表选择器列表的数据量加大，因此可以通过post的方式将该数据发送至服务器。另外，多个客户端除了将不匹配的级联样式表选择器列表的数据post到服务器之外，还可将与不匹配的级联样式表选择器列表相对应的CSS文件的URL地址发送至服务器。

优选地，在本发明实施例中，第二获取单元30可以包括：第二获取模块、第一确定模块和第二确定模块。

第二获取模块可以用于获取多个客户端获取到的不满足预设冗余匹配条件的级联样式表文件。

第一确定模块可以用于确定多个客户端获取到的不满足预设冗余匹配条件的级联样式表文件中的级联样式表文件的交集。

第二确定模块可以用于将级联样式表文件的交集作为冗余文件。

这样，可以避免对一个客户端无用，而对其他的客户端有用的级联样式表文件被误删除，进而可以防止部分用户访问的页面里的某些区块不能正常显示。

具体地，服务器可以接收多个客户端通过post的方式发送的各自不满足预设冗余匹配条件的级联样式表文件的数据。需要说明的是，服务器在接收到各个客户端post的数据之后，一方面，可以存储不匹配的CSS选择器列表(即冗余的CSS选择器列表)和与之对应的CSS文件的URL路径，其中，服务器可以以CSS文件的URL地址为key进行存储；另一方面，可以对不匹配的CSS选择器列表的数据进行分析。例如，服务器可以从存储器中取出不匹配的CSS选择器列表的数据，并按CSS文件的URL地址进行归类。其中，可以将属于同一类别的CSS文件的URL下的规则做交集处理，分析得出最终的CSS冗余列表。

例如，可以通过以下方式得到级联样式表文件的交集：比如客户端甲的数据可以是选择器A和选择器B，客户端乙的数据可以是选择器B和选择器C，那么说明用户甲用到了选择器C，而用户乙用到了选择器A。所以只有选择器B是冗余的CSS规则。

通过本发明的上述实施例，采用众包的方式，在用户访问网站中的页面时，获取所有HTML场景，并配合CSS规则进行分析，然后通过服务器汇总所有数据，分析得出准确的CSS冗余规则列表，并将其删除，解决了相关技术中静态分析级联样式表里的规则导致分析不全面的问题，达到了动态而全面的分析级联样式表里的规则的效果。

根据本发明的实施例，提供了一种冗余文件清理方法，该冗余文件清理方法用于动态的分析级联样式表里的规则是否存在冗余，并将冗余的级联样式表里的规则删除。该冗余文件清理方法可以运行在计算机处理设备上。需要说明的是，本发明实施例所提供的冗余文件清理方法可以通过本发明实施例的冗余文件清理装置来执行，本发明实施例的冗余文件清理装置也可以用于执行本发明实施例的冗余文件清理方法。

图3是根据本发明实施例的冗余文件清理方法的流程图。

如图3所示，该方法包括如下的步骤S302至步骤S308：

步骤S302，获取级联样式表文件。

在本发明实施例中，可以通过客户端获取级联样式表CSS文件，例如，可以通过浏览器获取级联样式表CSS文件。

具体地，浏览器可以通过执行JS来获取网页的CSS文件，并且浏览器执行不同的JS代码可以获取不同的网页的CSS文件。级联样式表文件可以包括内联的、外联的和动态依赖的级联样式表文件。其中，动态依赖的级联样式表文件是指CSS文件引用的其它CSS文件，例如，CSS文件1在引用CSS文件2时，CSS文件2就是CSS文件1的动态依赖的级联样式表文件。需要说明的是，在有用户访问时，客户端可以递归的获取样式文件列表，并通过样式文件列表解析出所有的前述CSS文件。

步骤S304，判断级联样式表文件是否满足预设冗余匹配条件。

具体地，在获取级联样式表CSS文件之后，可以对其进行解析，得到CSS选择器，即CSS规则。判断级联样式表文件是否满足预设冗余匹配条件可以是CSS规则是否有用。如果CSS规则有用，则表明级联样式表文件满足预设冗余匹配条件，从而级联样式表文件中的CSS规则为非冗余的代码。如果CSS规则没有用，则表明级联样式表文件不满足预设冗余匹配条件，从而级联样式表文件中的CSS规则为冗余的代码。

需要说明的是，CSS规则是否有用可以通过CSS规则与网页的HTML DOM元素的匹配情况来判断。如果CSS规则与网页的HTML DOM元素匹配，则表明CSS规则有用，如果CSS规则与网页的HTML DOM元素不匹配，则表明CSS规则没有用。例如，CSS规则1与一个网页中的图片1匹配，则表明CSS规则有用，进而表明CSS规则的代码为非冗余的代码。前述的网页可以为多个网页。

具体地，可以通过众包的方式，在用户访问网页时，动态地分析CSS规则与网页的HTML DOM元素匹配情况。由于网站开发的页面是给用户使用的，因此用户访问到的页面会包含所有的HTML应用场景，这样，可以使得用于和CSS规则进行匹配的HTML的覆盖率达到100％，从而不会有遗漏。并且这种方式可以部署在所有页面上，所以所有页面的数据都可以通过用户访问得到，从整站或这个应用的角度，全面地进行分析。并且在页面中的JavaScript脚本执行之后进行分析，所有当前用户访问页面的动态的CSS规则和HTML也都被覆盖。这样，可以避免由于HTML覆盖面不全面而导致有用的CSS规则被当成冗余代码删掉，以及由此导致的部分用户访问的页面里的某些区块不能正常显示。

步骤S306，获取不满足预设冗余匹配条件的级联样式表文件，并将不满足预设冗余匹配条件的级联样式表文件作为冗余文件。

在本发明实施例中，每个客户端可以获取自身不满足预设冗余匹配条件的级联样式表文件，并将不满足预设冗余匹配条件的级联样式表文件作为冗余文件，这样，可以得到多个客户端的多个冗余文件。例如，客户端可以包括客户端A和客户端B，其中，客户端A可以得到冗余文件A，客户端B可以得到冗余文件B，这样，客户端可以得到冗余文件A和冗余文件B。

优选地，客户端可以将冗余文件发送至服务器，由于冗余文件的数据较大，因此，可以通过推送的方式将冗余文件发送至服务器。

步骤S308，删除冗余文件中的冗余代码。

如果确定CSS规则为冗余文件，则可以将其删除。具体地，在各个客户端确定自身的CSS规则为冗余文件时，可以提醒用户(例如程序员)将相应的客户端的冗余文件删除。或者服务器通过汇总所有客户端确定的冗余文件，确定所有客户端的冗余文件，并提醒用户(例如程序员)将所有客户端的冗余文件删除。需要说明的是，在服务器端可以通过执行任意后端语言(比如Ruby，NodeJS，PHP，Java等)来实现。

优选地，在本发明实施例中，可以采用以下方式中的步骤获取级联样式表文件：

S2，检测目标网页的访问状态。其中，目标网页的访问状态可以包括目标网页正在被访问或者没有正在被访问。

S4，根据目标网页的访问状态判断目标网页是否被访问。具体地，可以根据目标网页的访问状态判断目标网页是否正在被访问。

S6，如果判断出目标网页被访问，则获取目标网页的样式文件列表。其中，如果判断出目标网页正在被访问，则动态地递归地获取目标网页的样式文件列表。例如，可以分别获取内联的、外联的和动态依赖的样式文件列表。

S8，从样式文件列表中解析出级联样式表文件。其中，可以从内联的样式文件列表中解析出内联的级联样式表文件、从外联的样式文件列表中解析出外联的级联样式表文件、从动态依赖的样式文件列表中解析出动态依赖的级联样式表文件。

这样，可以找出所有的CSS文件，避免CSS文件覆盖不全的情况。

优选地，在本发明实施例中，可以通过以下方式从样式文件列表中解析出级联样式表文件：

S10，从样式文件列表中解析出内联的级联样式表文件。具体地，可以解析Style标签获取内联样式文件列表，并从内联样式文件列表中解析出内联的级联样式表文件。

S12，从样式文件列表中解析出外联的级联样式表文件。具体地，可以解析link标签获取外联样式文件列表，并从外联样式文件列表中解析出外联的级联样式表文件。

S14，从样式文件列表中解析出动态依赖的级联样式表文件。具体地，可以判断级联样式表文件的内容中是否包含@import规则，如果判断出级联样式表文件的内容中包含@import规则，则获取外联样式文件列表，并且加载外联的级联样式表文件，获取CSS的内容。

优选地，在本发明实施例中，可以通过以下方式判断级联样式表文件是否满足预设冗余匹配条件：

S16，从级联样式表文件中解析出级联样式表选择器列表。

S18，将级联样式表选择器列表与预设网页的HTML DOM元素进行匹配。

其中，如果级联样式表选择器列表与预设网页的HTML DOM元素匹配，则确定级联样式表选择器列表对应的级联样式表文件满足预设冗余匹配条件，如果级联样式表选择器列表与预设网页的HTML DOM元素不匹配，则确定级联样式表选择器列表对应的级联样式表文件不满足预设冗余匹配条件。

在本发明实施例中，可以通过分析CSS文件内容来解析CSS选择器列表。具体地，可以通过正则匹配的分析方法来分析CSS文件内容。因为CSS的规则定义全部都是下面这样的格式：选择器{属性：值；属性：值；……}，因此，可以通过正则/([^\{}+]\{[^\]+}\)/g来获取到所有的CSS选择器列表。

预设网页可以为用户正在访问的所有的页面。通过将级联样式表选择器列表与现有页面的HTML DOM元素进行匹配，得出不匹配的CSS选择器列表。这里，可以使用每一个CSS选择器在HTML里进行DOM元素查找，其中，查找方式可以是浏览器内置的查找方式，具体地，可以是：document.querySelector(CSS Selector)。

将级联样式表选择器列表与预设网页的HTML DOM元素进行匹配，可以分别得到与预设网页的HTML DOM元素匹配的级联样式表选择器列表和与预设网页的HTML DOM元素不匹配的级联样式表选择器列表。其中，对与预设网页的HTML DOM元素匹配的级联样式表选择器列表不做任何处理，即，保留与预设网页的HTML DOM元素匹配的级联样式表选择器列表的相应代码。对与预设网页的HTML DOM元素部匹配的级联样式表选择器列表，可以将其作为冗余的级联样式表选择器列表代码，并将其删除。

需要说明的是，在本发明实施例中，多个客户端可以获取与预设网页的HTML DOM元素不匹配的级联样式表选择器列表的数据，并将该数据发送至服务器。由于级联样式表选择器列表的数据量加大，因此可以通过post的方式将该数据发送至服务器。另外，多个客户端除了将不匹配的级联样式表选择器列表的数据post到服务器之外，还可将与不匹配的级联样式表选择器列表相对应的CSS文件的URL地址发送至服务器。

优选地，在本发明实施例中，获取不满足预设冗余匹配条件的级联样式表文件，并将不满足预设冗余匹配条件的级联样式表文件作为冗余文件可以包括：

S20，获取多个客户端获取到的不满足预设冗余匹配条件的级联样式表文件。

S22，确定多个客户端获取到的不满足预设冗余匹配条件的级联样式表文件中的级联样式表文件的交集。

S24，将级联样式表文件的交集作为冗余文件。

这样，可以避免对一个客户端无用，而对其他的客户端有用的级联样式表文件被误删除，进而可以防止部分用户访问的页面里的某些区块不能正常显示。

具体地，服务器可以接收多个客户端通过post的方式发送的各自不满足预设冗余匹配条件的级联样式表文件的数据。需要说明的是，服务器在接收到各个客户端post的数据之后，一方面，可以存储不匹配的CSS选择器列表(即冗余的CSS选择器列表)和与之对应的CSS文件的URL路径，其中，服务器可以以CSS文件的URL地址为key进行存储；另一方面，可以对不匹配的CSS选择器列表的数据进行分析。例如，服务器可以从存储器中取出不匹配的CSS选择器列表的数据，并按CSS文件的URL地址进行归类。其中，可以将属于同一类别的CSS文件的URL下的规则做交集处理，分析得出最终的CSS冗余列表。

例如，可以通过以下方式得到级联样式表文件的交集：比如客户端甲的数据可以是选择器A和选择器B，客户端乙的数据可以是选择器B和选择器C，那么说明用户甲用到了选择器C，而用户乙用到了选择器A。所以只有选择器B是冗余的CSS规则。

通过本发明的上述实施例，采用众包的方式，在用户访问网站中的页面时，获取所有HTML场景，并配合CSS规则进行分析，然后通过服务器汇总所有数据，分析得出准确的CSS冗余规则列表，并将其删除，解决了相关技术中静态分析级联样式表里的规则导致分析不全面的问题，达到了动态而全面的分析级联样式表里的规则的效果。

需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

显然，本领域的技术人员应该明白，上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。

以上仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (12)

1.一种冗余文件清理方法，其特征在于，包括：

获取级联样式表文件；

判断所述级联样式表文件是否满足预设冗余匹配条件；

获取不满足所述预设冗余匹配条件的级联样式表文件，并将不满足所述预设冗余匹配条件的级联样式表文件作为冗余文件；以及

删除所述冗余文件中的冗余代码；

其中，判断所述级联样式表文件是否满足预设冗余匹配条件包括：判断CSS规则是否有用，其中，CSS规则是否有用通过CSS规则与网页的HTML DOM元素的匹配情况来判断；如果CSS规则与网页的HTML DOM元素匹配，则表明CSS规则有用，如果CSS规则与网页的HTML DOM元素不匹配，则表明CSS规则没有用；

其中，通过众包的方式，在用户访问网页时，动态地分析所述CSS规则与网页的HTMLDOM元素匹配情况。

2.根据权利要求1所述的冗余文件清理方法，其特征在于，采用以下方式获取所述级联样式表文件：

检测目标网页的访问状态；

根据所述目标网页的访问状态判断所述目标网页是否被访问；

如果判断出所述目标网页被访问，则获取所述目标网页的样式文件列表；以及

从所述样式文件列表中解析出所述级联样式表文件。

3.根据权利要求2所述的冗余文件清理方法，其特征在于，通过以下方式从所述样式文件列表中解析出所述级联样式表文件：

从所述样式文件列表中解析出内联的级联样式表文件；

从所述样式文件列表中解析出外联的级联样式表文件；以及

从所述样式文件列表中解析出动态依赖的级联样式表文件。

4.根据权利要求1所述的冗余文件清理方法，其特征在于，通过以下方式判断所述级联样式表文件是否满足预设冗余匹配条件：

从所述级联样式表文件中解析出级联样式表选择器列表；以及

将所述级联样式表选择器列表与预设网页的HTML DOM元素进行匹配，

其中，如果所述级联样式表选择器列表与所述预设网页的HTML DOM元素匹配，则确定所述级联样式表选择器列表对应的级联样式表文件满足所述预设冗余匹配条件，如果所述级联样式表选择器列表与所述预设网页的HTML DOM元素不匹配，则确定所述级联样式表选择器列表对应的级联样式表文件不满足所述预设冗余匹配条件。

5.根据权利要求1所述的冗余文件清理方法，其特征在于，获取不满足所述预设冗余匹配条件的级联样式表文件，并将不满足所述预设冗余匹配条件的级联样式表文件作为冗余文件包括：

获取多个客户端获取到的不满足所述预设冗余匹配条件的级联样式表文件；

确定所述多个客户端获取到的不满足所述预设冗余匹配条件的级联样式表文件中的级联样式表文件的交集；以及

将所述级联样式表文件的交集作为所述冗余文件。

6.一种冗余文件清理装置，其特征在于，包括：

第一获取单元，用于获取级联样式表文件；

判断单元，用于判断所述级联样式表文件是否满足预设冗余匹配条件；

第二获取单元，用于获取不满足所述预设冗余匹配条件的级联样式表文件，并将不满足所述预设冗余匹配条件的级联样式表文件作为冗余文件；以及

删除单元，用于删除所述冗余文件中的冗余代码；

其中，判断所述级联样式表文件是否满足预设冗余匹配条件包括：判断CSS规则是否有用，其中，CSS规则是否有用通过CSS规则与网页的HTML DOM元素的匹配情况来判断；如果CSS规则与网页的HTML DOM元素匹配，则表明CSS规则有用，如果CSS规则与网页的HTML DOM元素不匹配，则表明CSS规则没有用；

其中，通过众包的方式，在用户访问网页时，动态地分析所述CSS规则与网页的HTMLDOM元素匹配情况。

7.根据权利要求6所述的冗余文件清理装置，其特征在于，所述第一获取单元包括：

检测模块，用于检测目标网页的访问状态；

判断模块，用于根据所述目标网页的访问状态判断所述目标网页是否被访问；

第一获取模块，用于如果判断出所述目标网页被访问，则获取所述目标网页的样式文件列表；以及

第一解析模块，用于从所述样式文件列表中解析出所述级联样式表文件。

8.根据权利要求7所述的冗余文件清理装置，其特征在于，

所述第一解析模块还用于从所述样式文件列表中解析出内联的级联样式表文件；

所述第一解析模块还用于从所述样式文件列表中解析出外联的级联样式表文件；以及

所述第一解析模块还用于从所述样式文件列表中解析出动态依赖的SS文件。

9.根据权利要求6所述的冗余文件清理装置，其特征在于，所述判断单元包括：

第二解析模块，用于从所述级联样式表文件中解析出级联样式表选择器列表；以及

匹配模块，用于将所述级联样式表选择器列表与预设网页的HTML DOM元素进行匹配，

其中，如果所述级联样式表选择器列表与所述预设网页的HTML DOM元素匹配，则确定所述级联样式表选择器列表对应的级联样式表文件满足所述预设冗余匹配条件，如果所述级联样式表选择器列表与所述预设网页的HTML DOM元素不匹配，则确定所述级联样式表选择器列表对应的级联样式表文件不满足所述预设冗余匹配条件。

10.根据权利要求6所述的冗余文件清理装置，其特征在于，所述第二获取单元包括：

第二获取模块，用于获取多个客户端获取到的不满足所述预设冗余匹配条件的级联样式表文件；

第一确定模块，用于确定所述多个客户端获取到的不满足所述预设冗余匹配条件的级联样式表文件中的级联样式表文件的交集；以及

第二确定模块，用于将所述级联样式表文件的交集作为所述冗余文件。

11.一种冗余文件清理系统，其特征在于，包括：

客户端，用于获取级联样式表文件，判断所述级联样式表文件是否满足预设冗余匹配条件，获取不满足所述预设冗余匹配条件的级联样式表文件，并将不满足所述预设冗余匹配条件的级联样式表文件作为冗余文件；以及

服务器，用于确定所述客户端获取的所述冗余文件，并删除所述冗余文件；

其中，判断所述级联样式表文件是否满足预设冗余匹配条件包括：判断CSS规则是否有用，其中，CSS规则是否有用通过CSS规则与网页的HTML DOM元素的匹配情况来判断；如果CSS规则与网页的HTML DOM元素匹配，则表明CSS规则有用，如果CSS规则与网页的HTML DOM元素不匹配，则表明CSS规则没有用；

其中，通过众包的方式，在用户访问网页时，动态地分析所述CSS规则与网页的HTMLDOM元素匹配情况。

12.根据权利要求11所述的冗余文件清理系统，其特征在于，所述客户端为多个客户端，所述客户端用于分别获取不满足所述预设冗余匹配条件的级联样式表文件，所述服务器用于确定所述多个客户端获取到的不满足所述预设冗余匹配条件的级联样式表文件中的级联样式表文件的交集，并将所述级联样式表文件的交集作为所述冗余文件。