CN107783764A - 清除前端样式冗余的方法及装置 - Google Patents

清除前端样式冗余的方法及装置 Download PDF

Info

Publication number
CN107783764A
CN107783764A CN201710916120.XA CN201710916120A CN107783764A CN 107783764 A CN107783764 A CN 107783764A CN 201710916120 A CN201710916120 A CN 201710916120A CN 107783764 A CN107783764 A CN 107783764A
Authority
CN
China
Prior art keywords
css
matching
html
redundancy
class
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201710916120.XA
Other languages
English (en)
Inventor
李艳萍
张建飞
陈彩丽
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Xiamen Micro Technology Co Ltd
Original Assignee
Xiamen Micro Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Xiamen Micro Technology Co Ltd filed Critical Xiamen Micro Technology Co Ltd
Priority to CN201710916120.XA priority Critical patent/CN107783764A/zh
Publication of CN107783764A publication Critical patent/CN107783764A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation
    • G06F8/44—Encoding
    • G06F8/443—Optimisation
    • G06F8/4434—Reducing the memory space required by the program code
    • G06F8/4435—Detection or removal of dead or redundant code

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

一种清除前端样式冗余的方法及装置，该方法包括：通过javascript对html及css的文件名做有序存储；获取html页面的id、class以及页面标签名；匹配整合css，初步清除冗余；以及对整合完成的css作反向匹配操作，深度清除冗余。

Description

清除前端样式冗余的方法及装置
技术领域
本发明涉及互联网技术领域，更具体地涉及一种清除前端样式冗余的方法及装置。
背景技术
项目开发过程中，往往会产生许多的冗余代码，特别是css部分，前期体现不明显，但随着时间越长，导入使用的文件逐渐增加的情况下，代码量必然极剧增加；冗余的代码量越多，也就越影响网站打开的速度及用户体验，那么清除无用的css样式是必然的。如何有效清除前端样式冗余是当前亟需解决的问题。
发明内容
鉴于现有方案存在的问题，为了克服上述现有技术方案的不足，本发明提出了一种清除前端样式冗余的方法及装置。
根据本发明的一个方面，提供了一种清除前端样式冗余的方法，包括：通过javascript对html及css的文件名做有序存储；获取html页面的id、class以及页面标签名；匹配整合css，初步清除冗余；以及对整合完成的css作反向匹配操作，深度清除冗余。
在一些实施例中，匹配整合css，初步清除冗余包括：对css和获取的id、class以及标签名进行匹配操作，筛选有效的css并存储；以及通过循环历遍筛选后的css，清除重复的css。
在一些实施例中，所述匹配操作采用正则表达式来执行。
在一些实施例中，对整合完成的css作反向匹配操作，深度清除冗余包括：采用querySelector()在html中匹配指定css选择器对应的class；获取html的dom节点；以及判断css选择器对应的dom节点是否为空，若是，则清除对应的css，否则保留对应的css。
在一些实施例中，在通过javascript对html及css的文件名做有序存储之前还包括：导入html及css文件。
在一些实施例中，在对整合完成的css作反向匹配操作，深度清除冗余之后还包括：导出清除冗余的css文件。
根据本发明的另一个方面，提供一种清除前端样式冗余的装置，包括：存储模块，通过javascript对html及css的文件名做有序存储；获取模块，获取html页面的id、class以及页面标签名；匹配整合模块，匹配整合css，初步清除冗余；以及反向匹配模块，对整合完成的css作反向匹配操作，深度清除冗余。
在一些实施例中，匹配整合模块包括：匹配单元，对css和获取的id、class以及标签名进行匹配操作，筛选有效的css并存储；以及整合单元，通过循环历遍筛选后的css，清除重复的css。
在一些实施例中，所述匹配操作采用正则表达式来执行。
在一些实施例中，反向匹配模块包括：反向匹配单元；采用querySelector()在html中匹配指定css选择器对应的class；Dom节点获取单元；获取html的dom节点；以及判断单元，判断css选择器对应的dom节点是否为空，若是，则清除对应的css，否则保留对应的css。
从上述技术方案可以看出，本发明具有至少以下有益效果：
基于javascript针对前端css代码做优化处理，清除代码冗余，提高前端代码质量，缩短文件加载时间以提升用户体验。
采用匹配整合实现初步清除冗余，采用反向匹配操作实现深度清除冗余，可实现多页面一体化操作，操作更简洁，在不需要借助其他工具的前提下，同时对所有的文件进行操作，导出完整的css文件，确保了线上css代码基本无冗余。
附图说明
图1为本发明一实施例中清除前端样式冗余的方法的流程图；
图2示出了图1中匹配整合css的流程图；
图3示出了图1中对整合完成的css作反向匹配操作的流程图；
图4为本发明另一实施例中清除前端样式冗余的装置的结构框图。
具体实施方式
本发明某些实施例于后方将参照所附附图做更全面性地描述，其中一些但并非全部的实施例将被示出。实际上，本发明的各种实施例可以许多不同形式实现，而不应被解释为限于此数所阐述的实施例；相对地，提供这些实施例使得本发明满足适用的法律要求。
在本说明书中，下述用于描述本发明原理的各种实施例只是说明，不应该以任何方式解释为限制发明的范围。参照附图的下述描述用于帮助全面理解由权利要求及其等同物限定的本发明的示例性实施例。下述描述包括多种具体细节来帮助理解，但这些细节应认为仅仅是示例性的。因此，本领域普通技术人员应认识到，在不悖离本发明的范围和精神的情况下，可以对本文中描述的实施例进行多种改变和修改。此外，为了清楚和简洁起见，省略了公知功能和结构的描述。此外，贯穿附图，相同附图标记用于相似功能和操作。
为使本发明的目的、技术方案和优点更加清楚明白，以下结合具体实施例，并参照附图，对本发明进一步详细说明。
本发明一实施例提供了一种清除前端样式冗余的方法，针对前端css代码做优化处理，清除代码冗余，提高前端代码质量，缩短文件加载时间以提升用户体验。该方法以javascript为基础，利用javascript基于对象和事件驱动完成工具开发。javascript是一种广泛用于客户端web开发的脚本语言，常用来给html网页添加动态功能，比如响应用户的各种操作。javascript也用于其他场合，如服务器端编程。完整的javascript实现包含三个部分：ECMAscript，文档对象模型，字节顺序记号。该方法利用javascript完成主干工作，如节点获取，数据同步。
图1示出了一实施例中清除前端样式冗余的方法的流程图，如附图1所示，清除前端样式冗余的方法包括以下具体步骤：
步骤S100：导入html及css文件；
其中，将需要清除前端样式冗余的html及css导入。
步骤S200：通过javascript对html及css的文件名做有序存储；
具体地，采用javascript数组来实现html及css的文件名的有序存储，其中，javascript数组主要用于在单独的变量名中存储一系列的值。
步骤S300：获取html页面的id、class以及页面标签名；
采用javascript数组遍历将数组中的数据依次取出来，获取html页面的id、class以及页面标签名。
步骤S400：匹配整合css，初步清除冗余；
匹配整合css包括匹配步骤和整合步骤，图2示出了一实施例中匹配整合css的流程图，如图2所示，步骤S400包括：
步骤S401：对css和获取的id、class以及标签名进行匹配操作，筛选有效的css并存储；
匹配操作可以采用javascript正则表达式来执行，获取有限的css。
步骤402：通过循环历遍筛选后的css，清除重复的css。
去除重复的有效css，完成初步清楚冗余。
步骤S500：对整合完成的css作反向匹配操作，深度清除冗余。
反向匹配操作可以由JavaScript的querySelector()来执行，图3示出了一实施例中对整合完成的css作反向匹配操作的流程图，如图3所示，步骤500具体包括：
步骤501：采用querySelector()在html中匹配指定css选择器对应的class；
对css选择器做数组遍历操作实现对应匹配。
步骤502：获取html的dom节点；
通过JavaScript获取各html的各dom节点。
步骤503：判断css选择器对应的dom节点是否为空，若是，则清除对应的css，否则保留对应的css。
若css选择器对应的dom节点为空，则判断对应的css为无用代码，直接清除，若css选择器对应的dom节点不为空，则判断对应的css为有用代码，将其保留，实现冗余深度清除。
步骤S600：导出清除冗余的css文件。
导出清除冗余后的css文件，确保了线上css代码基本无冗余。
采用该中清除冗余的方法，可实现多页面一体化操作，操作更简洁，在不需要借助其他工具的前提下，同时对所有的文件进行操作，导出完整的css文件，确保了线上css代码基本无冗余。
本发明另一实施例提供一种清除前端样式冗余的装置1000，图4示出了一实施例中清除前端样式冗余的装置的结构框图，如附图4所示，清除前端样式冗余的装置包括：导入模块100、存储模块200、获取模块300、匹配整合模块400、反向匹配模块500以及导出模块600。
导入模块100用于导入html及css文件，将需要清除前端样式冗余的html及css导入。
存储模块200用于通过javascript对html及css的文件名做有序存储；
具体地，采用javascript数组来实现html及css的文件名的有序存储，其中，javascript数组主要用于在单独的变量名中存储一系列的值。
获取模块300用于获取html页面的id、class以及页面标签名；
采用javascript数组遍历将数组中的数据依次取出来，获取html页面的id、class以及页面标签名。
匹配整合模块400用于匹配整合css，初步清除冗余；匹配整合模块400包括匹配单元401和整合单元402。
匹配单元401，对css和获取的id、class以及标签名进行匹配操作，筛选有效的css并存储；匹配操作可以采用javascript正则表达式来执行，获取有限的css。
整合单元402通过循环历遍筛选后的css，清除重复的css。整合单元402去除重复的有效css，完成初步清楚冗余。
反向匹配模块500用于对整合完成的css作反向匹配操作，深度清除冗余。反向匹配模块500包括反向匹配单元501、Dom节点获取单元502及判断单元503，反向匹配操作可以由JavaScript的querySelector()来执行。
反向匹配单元501用于采用querySelector()在html中匹配指定css选择器对应的class；对css选择器做数组遍历操作实现对应匹配。
Dom节点获取单元502用于获取html的dom节点；通过JavaScript获取各html的各dom节点。
判断单元503判断css选择器对应的dom节点是否为空，若是，则清除对应的css，否则保留对应的css。
若css选择器对应的dom节点为空，则判断对应的css为无用代码，直接清除，若css选择器对应的dom节点不为空，则判断对应的css为有用代码，将其保留，实现冗余深度清除。
导出模块600用于导出清除冗余的css文件。
导出清除冗余后的css文件，确保了线上css代码基本无冗余。
采用该中清除冗余的方法，可实现多页面一体化操作，操作更简洁，在不需要借助其他工具的前提下，同时对所有的文件进行操作，导出完整的css文件，确保了线上css代码基本无冗余。
前面的附图中所描绘的进程或方法可通过包括硬件(例如，电路、专用逻辑等)、固件、软件(例如，被承载在非瞬态计算机可读介质上的软件)，或两者的组合的处理逻辑来执行。虽然上文按照某些顺序操作描述了进程或方法，但是，应该理解，所描述的某些操作能以不同顺序来执行。此外，可并行地而非顺序地执行一些操作。
需要说明的是，在附图或说明书正文中，未绘示或描述的实现方式，均为所属技术领域中普通技术人员所知的形式，并未进行详细说明。此外，上述对各元件和方法的定义并不仅限于实施例中提到的各种具体结构、形状或方式，本领域普通技术人员可对其进行简单地更改或替换。
以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步详细说明，应理解的是，以上所述仅为本发明的具体实施例而已，并不用于限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种清除前端样式冗余的方法，其中，包括：
通过javascript对html及css的文件名做有序存储；
获取html页面的id、class以及页面标签名；
匹配整合css，初步清除冗余；以及
对整合完成的css作反向匹配操作，深度清除冗余。
2.根据权利要求1所述的方法，其中，匹配整合css，初步清除冗余包括：
对css和获取的id、class以及标签名进行匹配操作，筛选有效的css并存储；以及
通过循环历遍筛选后的css，清除重复的css。
3.根据权利要求2所述的方法，其中，所述匹配操作采用正则表达式来执行。
4.根据权利要求1所述的方法，其中，对整合完成的css作反向匹配操作，深度清除冗余包括：
采用querySelector()在html中匹配指定css选择器对应的class；
获取html的dom节点；以及
判断css选择器对应的dom节点是否为空，若是，则清除对应的css，否则保留对应的css。
5.根据权利要求1所述的方法，其中，在通过javascript对html及css的文件名做有序存储之前还包括：
导入html及css文件。
6.根据权利要求1所述的方法，其中，在对整合完成的css作反向匹配操作，深度清除冗余之后还包括：
导出清除冗余的css文件。
7.一种清除前端样式冗余的装置，其中，包括：
存储模块，通过javascript对html及css的文件名做有序存储；
获取模块，获取html页面的id、class以及页面标签名；
匹配整合模块，匹配整合css，初步清除冗余；以及
反向匹配模块，对整合完成的css作反向匹配操作，深度清除冗余。
8.根据权利要求7所述的装置，其中，匹配整合模块包括：
匹配单元，对css和获取的id、class以及标签名进行匹配操作，筛选有效的css并存储；以及
整合单元，通过循环历遍筛选后的css，清除重复的css。
9.根据权利要求8所述的装置，其中，所述匹配操作采用正则表达式来执行。
10.根据权利要求7所述的装置，其中，反向匹配模块包括：
反向匹配单元；采用querySelector()在html中匹配指定css选择器对应的class；
Dom节点获取单元；获取html的dom节点；以及
判断单元，判断css选择器对应的dom节点是否为空，若是，则清除对应的css，否则保留对应的css。
CN201710916120.XA 2017-09-29 2017-09-29 清除前端样式冗余的方法及装置 Pending CN107783764A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710916120.XA CN107783764A (zh) 2017-09-29 2017-09-29 清除前端样式冗余的方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710916120.XA CN107783764A (zh) 2017-09-29 2017-09-29 清除前端样式冗余的方法及装置

Publications (1)

Publication Number Publication Date
CN107783764A true CN107783764A (zh) 2018-03-09

Family

ID=61433985

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710916120.XA Pending CN107783764A (zh) 2017-09-29 2017-09-29 清除前端样式冗余的方法及装置

Country Status (1)

Country Link
CN (1) CN107783764A (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108446136A (zh) * 2018-03-22 2018-08-24 北京焦点新干线信息技术有限公司 一种元素代码的提取方法及系统
US20190138565A1 (en) * 2012-02-22 2019-05-09 Akamai Technologies Inc. Methods and apparatus for accelerating content authored for multiple devices
CN110502443A (zh) * 2019-08-22 2019-11-26 深圳前海环融联易信息科技服务有限公司 冗余代码检测方法、检测模块、电子设备及计算机存储介质
CN111045684A (zh) * 2019-12-18 2020-04-21 深圳前海环融联易信息科技服务有限公司 Css代码冗余检测优化方法与装置和设备及存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103500118A (zh) * 2013-10-24 2014-01-08 北京奇虎科技有限公司 一种级联样式表优化方法和装置
US20140070966A1 (en) * 2012-09-10 2014-03-13 Canon Kabushiki Kaisha Methods and systems for compressing and decompressing data
CN105205080A (zh) * 2014-06-26 2015-12-30 阿里巴巴集团控股有限公司 冗余文件清理方法、装置和系统
CN106919624A (zh) * 2015-12-28 2017-07-04 航天信息股份有限公司 提高网页加载速度的方法及装置
CN106980497A (zh) * 2017-02-10 2017-07-25 九次方大数据信息集团有限公司 网页网站性能优化方法和装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140070966A1 (en) * 2012-09-10 2014-03-13 Canon Kabushiki Kaisha Methods and systems for compressing and decompressing data
CN103500118A (zh) * 2013-10-24 2014-01-08 北京奇虎科技有限公司 一种级联样式表优化方法和装置
CN105205080A (zh) * 2014-06-26 2015-12-30 阿里巴巴集团控股有限公司 冗余文件清理方法、装置和系统
CN106919624A (zh) * 2015-12-28 2017-07-04 航天信息股份有限公司 提高网页加载速度的方法及装置
CN106980497A (zh) * 2017-02-10 2017-07-25 九次方大数据信息集团有限公司 网页网站性能优化方法和装置

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20190138565A1 (en) * 2012-02-22 2019-05-09 Akamai Technologies Inc. Methods and apparatus for accelerating content authored for multiple devices
US10671691B2 (en) * 2012-02-22 2020-06-02 Akamai Technologies Inc. Methods and apparatus for accelerating content authored for multiple devices
CN108446136A (zh) * 2018-03-22 2018-08-24 北京焦点新干线信息技术有限公司 一种元素代码的提取方法及系统
CN108446136B (zh) * 2018-03-22 2021-10-15 北京焦点新干线信息技术有限公司 一种元素代码的提取方法及系统
CN110502443A (zh) * 2019-08-22 2019-11-26 深圳前海环融联易信息科技服务有限公司 冗余代码检测方法、检测模块、电子设备及计算机存储介质
CN111045684A (zh) * 2019-12-18 2020-04-21 深圳前海环融联易信息科技服务有限公司 Css代码冗余检测优化方法与装置和设备及存储介质

Similar Documents

Publication Publication Date Title
CN107783764A (zh) 清除前端样式冗余的方法及装置
CN107291476B (zh) Canvas代码生成方法、装置、电子设备及存储介质
CN104461484B (zh) 前端模板的实现方法和装置
CN101968817B (zh) 网页模板配置方法
CN103995781B (zh) 一种基于模型的构件测试用例生成方法
CN101145157B (zh) 一种xml格式嵌入式设备特征信息解析方法
CN104035754A (zh) 一种基于xml的自定义代码生成方法及生成器
CN105493095A (zh) 用于样本提交的自适应和递归过滤
CN104462268B (zh) 一种html文档信息抽取表达式的方法及系统
CN107247587A (zh) 一种网页模板生成方法及装置
JP6699200B2 (ja) シンプルデータタイプに対するグラマー生成
CN103853770B (zh) 一种抽取论坛网页中帖子内容的方法及系统
US20090055728A1 (en) Decompressing electronic documents
CN106897287B (zh) 网页发布时间抽取方法和用于网页发布时间抽取的装置
CN106293862B (zh) 一种可扩展标记语言xml数据的解析方法和装置
CN107632831B (zh) 快速规范前端代码的方法及装置
CN102663041B (zh) 面向深层网页面数据自动抽取方法
CN111966930B (zh) 基于XPath序列的网页列表解析方法及系统
Lehmberg et al. WInte. r-A Web Data Integration Framework.
JP6707082B2 (ja) 正規化スキーマ比較のためのシステム及び方法
CN106095854B (zh) 一种确定信息块的位置信息的方法及装置
CN107408104B (zh) 样式的声明级联重新排序
CN106649118A (zh) 一种基于AST的Java代码SSA单路径的生成方法
CN106610922A (zh) 反序列化方法及装置
CN111061863B (zh) 期刊目录展示方法、装置及设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20180309