[发明专利]CSS样式精简方法、装置、电子设备及存储介质

说明书

一种CSS样式精简方法，包括：获取浏览器的插件接口；在插件接口中创建配置文件，其中，配置文件中记录有多个待测页面的地址及每个待测页面中的交互元素；读取配置文件并依次遍历多个待测页面的地址及每个待测页面中的交互元素；启动浏览器并控制浏览器依次访问遍历到的待测页面的地址对应的待测页面；通过浏览器对待测页面进行渲染并获取渲染过程中的第一CSS使用结果；通过浏览器对待测页面中的交互元素进行渲染并获取渲染过程中的第二CSS使用结果；根据第一CSS使用结果和第二CSS使用结果对CSS样式进行精简。本发明还提供一种CSS样式精简装置、电子设备及存储介质。本发明能够自动且精准的去除冗余的CSS样式。

技术领域

本发明涉及计算机技术领域，具体涉及一种CSS样式精简方法、装置、电子设备及存储介质。

背景技术

由于项目的不断优化迭代、公共样式积累、人为书写习惯不良等问题，导致网页中的CSS样式内容越来越臃肿，从而影响页面的加载速度以及页面渲染速度。

现有的CSS样式精简主要有两种模式，一是通过对HMTL代码进行扫描，查找代码中出现的样式名及标签和CSS样式的匹配情况，从而检测筛选出未使用的CSS样式内容，该方法识别率低，同时对于JavaScript脚本中异步使用的样式无法检测，存在较大的漏检测情况，导致最终精简结果不理想。二是基于浏览器渲染的方式，通过人工访问指定页面，通过检测浏览器渲染过程中使用到的样式内容，筛选出未使用的样式。该方法虽然识别率较高，但是需要人工介入，效率低，无法大规模投产使用，同时对于页面中存在交互的模块，需要人工点击操作，重新检测，并手工对前次的结果做合并才能得出最终结果，操作流程复杂。

发明内容

鉴于以上内容，有必要提出一种CSS样式精简方法、装置、电子设备及存储介质，能够自动且精准的去除冗余的CSS样式。

本发明的第一方面提供一种CSS样式精简方法，所述方法包括：

获取浏览器的插件接口；

在所述插件接口中创建配置文件，其中，所述配置文件中记录有多个待测页面的地址及每个待测页面中的交互元素；

读取所述配置文件并依次遍历所述多个待测页面的地址及每个待测页面中的交互元素；

启动所述浏览器并控制所述浏览器依次访问所述待测页面的地址对应的待测页面；

通过所述浏览器对所述待测页面进行渲染并获取渲染过程中的第一CSS使用结果；

通过所述浏览器对所述待测页面中的交互元素进行渲染并获取渲染过程中的第二CSS使用结果；

根据所述第一CSS使用结果和所述第二CSS使用结果对CSS样式进行精简处理。

根据本发明的一个可选的实施例，所述根据所述第一CSS使用结果和所述第二CSS使用结果对CSS样式进行精简处理包括：

读取代码中的CSS标签得到CSS全量；

对所述第一CSS使用结果和所述第二CSS使用结果进行合并处理；

根据合并处理得到的CSS结果对所述CSS全量中的CSS样式进行精简处理。

根据本发明的一个可选的实施例，所述对所述第一CSS使用结果和所述第二CSS使用结果进行合并处理包括：

初始化一个集合；

将所述第一CSS使用结果中的每个第一CSS样式按照顺序写入所述集合中；

依次遍历所述第二CSS使用结果中的每个第二CSS样式；

将每个第二CSS样式与所述集合中的第一CSS样式进行比对；