CSS Usage CSS减肥专用工具(firefox软件)

2021-03-12 13:31 jianzhan
这类状况下,给网站CSS文档减肥相近于海底捞针的大工程项目,由于略不留心,1个无意间的删掉,就会导致网上的商品的安全事故。下面大家就给大伙儿强烈推荐1款CSS减肥的专用工具–Firefox软件 CSS Usage.

最先,大家必须安裝Firefox(点一下此处免费下载),或明确你早已安裝的版本号早已高于3.1;
第2步,安裝前端开发开发设计人员最普及的开发设计专用工具 Firebug
第3步,安裝CSS Usage 0.2.2(写此文时的版本号);
第4步,在访问器中开启大家要提升的网页页面(当地的网页页面还可以),点一下右下角的firebug小标志,开启firebug专用工具对话框,大家会看到在专用工具选项中大家有1个 CSS Usage专用工具的按钮。


最先大家来剖析最上面的3个作用按钮的应用

Scan: 根据字面意思大家就可以了解,这是1个扫描仪当今网页页面的专用工具,假如大家的站点仅有1个网页页面或几个网页页面,大家能够根据应用此作用功能键来查询网页页面的css好用状况.

Clear: 消除扫描仪結果,但大家查询完网页页面,并对CSS 开展了改动后,大家就不必须之前的扫描仪結果了,那末大家便可以应用Clear作用键,消除之前的扫描仪結果缓存文件,再次刚开始大家的扫描仪.

AutoScan: 大家的网站将会会有许多的网页页面,更有将会有许多的弹出层,假如大家每次都点一下扫描仪的话,会占有大家很多的時间,AutoScan作用键可使大家的扫描仪工作中更全自动化,提升大家的工作中高效率.

当大家点一下Scan功能键后会有甚么样的状况呢?大家以 独臂老宋的blog为实例http://blog.sina.com.cn/laosong11
点一下Scan以后, CSS Usage会对当今的网页页面HTML和款式开展扫描仪,以下图

上图是我把扫描仪結果折叠后的模样,大家能够看到,CSS Usage对网页页面css款式表的内联(inline)款式和外链款式开展了扫描仪,HTML也作了扫描仪并显示信息载入時间.

下面大家进行1个内联款式

大家能看到这1句Line CSS Selector Seen, Seen before, Unseen, :hover,告知大家” 列出CSS挑选器的情况:
翠绿色–表明当今扫描仪看到的,
深翠绿色–的之前的扫描仪中看到的,
鲜红色–的表明在当今和之前扫描仪中均未发现的.
灰色–的意味着伪类的挑选器CSS,这一部分可能被忽略.
在这个目录的最下面,大家也会看到有个统计分析,告知大家有是多少被发现,是多少沒有发现,被忽略的是是多少,CSS好用的遮盖率是是多少的统计分析.

另外,CSS Usage还出示给大家有关CSS某个挑选器被好用是多少次的统计分析

 

假如大家1直应用 Auto Scan作用的话,大家的Scan次数也是在积累的,例如大家从主页到博文文件目录、再到照片、最终抵达有关我,每次网页页面自动跳转,CSS Usage 都会全自动提升网页页面的扫描仪次数。以下图:

假如你想了解,大家全是在哪儿些网页页面开展的扫描仪,是否遮盖到了全部的网页页面,你能够看到有关网页页面的扫描仪纪录

假如大家仅仅是给CSS减肥的话,那大家便可以对鲜红色的挑选器刚开始动手能力了,CSS Usage给大家出示了1个更智能化的专用工具, export cleaned css(导出来清除后的CSS).可是立即应用这个专用工具对许多大中型网站来讲都必须勇气,我的提议還是商业保险1些的好,大家能够挑选挑选器的名字,根据文档夹的检索作用,来搜索这个css挑选器的款式是否早已做为下线 商品或组件的构成一部分,早已沒有功效.也许大家在1个旮旯又 发现了它 ,那样大家只是那时候出了虚汗,而无须等改动的文档上线后再出虚汗.

大家还要提1下这个专用工具的缺陷:
假如网站应用了很多的ajax和dhtml的话,你必须尽量多地开启那些掩藏的div/对话框和tab,让Css Usage抓取尽量多的內容。
假如大家的网站网页页面数量许多的话,占有CPU和运行内存会较为大,必须充足的细心。

大家本文只是详细介绍了有关移除失效CSS挑选器 的方式,假如你想更全面的提高网站的速率,那末你将会必须融合Firebug\ Yslow\ Page Speed 组成运用,寻找更优回答.