给大家带来Firefox插件CSS Usage:一款CSS减肥的工具
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称，中文译作“层叠样式表单”。破洛洛文章简介：CSS减肥工具―CSSUsage.
前端构建工程师常常会碰到跟着网站产物的范围扩展、产物数目、一样平常专题高低线等情形，形成网站的CSS渐渐变得痴肥从而影响了网站的用户体验，这类情形下，给网站CSS文件减肥相似于大海捞针的年夜工程，由于略不注意，一个不经意的删除，就会形成线上的产物的变乱。上面我们就给人人保举一款CSS减肥的工具–Firefox插件CSSUsage.
起首，我们必要安装Firefox（猛击此处下载）,大概断定你已安装的版本已高于3.1;
第二步，安装前端开辟职员最提高的开辟工具Firebug；
第三步，安装CSSUsage0.2.2(写此文时的版本)；
第四步，在扫瞄器中翻开我们要优化的页面（当地的页面也能够），点击右下角的firebug小图标，翻开firebug工具窗口，我们会看到在工具选项中我们有一个CSSUsage工具的按钮。
起首我们来剖析最下面的三个功效按钮的利用
Scan:经由过程字面意义我们就可以晓得,这是一个扫描以后页面的工具,假如我们的站点只要一个页面大概几个页面,我们能够经由过程利用此功效按键来检察页面的css有用情形.
Clear:扫除扫描了局,但我们检察完网页,并对CSS举行了修正后,我们就不必要之前的扫描了局了,那末我们就能够利用Clear功效键,扫除之前的扫描了局缓存,从头入手下手我们的扫描.
AutoScan:我们的网站大概会有良多的页面,更有大概有良多的弹出层,假如我们每次都点击扫描的话,会占用我们大批的工夫,AutoScan功效键可使我们的扫描事情更主动化,进步我们的事情效力.
当我们点击Scan按键后会有甚么样的情形呢?我们以独臂老宋的博客为案例http://blog.sina.com.cn/laosong11
点击Scan以后,CSSUsage会对以后的页面HTML和款式举行扫描,以下图
上图是我把扫描了局折叠后的模样,我们能够看到,CSSUsage对页面css款式表的内联(inline)款式和外链款式举行了扫描,HTML也作了扫描并显现加载工夫.
上面我们睁开一个内联款式
我们能看到这一句LineCSSSelectorSeen,Seenbefore,Unseen,:hover,告知我们”列出CSS选择器的形态:
绿色–暗示以后扫描看到的,
深绿色–的之前的扫描中看到的,
白色–的暗示在以后和之前扫描中均未发明的.
灰色–的代表伪类的选择器CSS,这部分将会被无视.
在这个列表的最上面,我们也会看到有个统计,告知我们有几被发明,几没有发明,被无视的是几,CSS有用的掩盖率是几的统计.
同时,CSSUsage还供应给我们关于CSS某个选择器被有用几次的统计
假如我们一向利用AutoScan功效的话,我们的Scan次数也是在积累的,好比我们从首页到博文目次、再到图片、最初抵达关于我，每次页面跳转，CSSUsage城市主动增添页面的扫描次数。以下图：
假如你想晓得，我们都是在哪些页面举行的扫描，是否是掩盖到了一切的页面，你能够看到关于页面的扫描纪录
假如我们仅仅是给CSS减肥的话,那我们就能够对白色的选择器入手下手下手了,CSSUsage给我们供应了一个更智能的工具,exportcleanedcss(导出清算后的CSS).可是间接利用这个工具对良多年夜型网站来讲都必要勇气,我的倡议仍是保险一些的好,我们能够选择选择器的称号,经由过程文件夹的搜刮功效,来查找这个css选择器的款式是否是已作为下线产物大概组件的构成部分,已没有感化.也许我们在一个旮旯又发明了它,那样我们只是事先出了盗汗,而不用等修正的文件上线后再出盗汗.
我们还要提一下这个工具的弱点：
假如网站利用了大批的ajax和dhtml的话，你必要尽量多地翻开那些埋没的div/窗口和tab,让CssUsage爬取尽量多的内容。
假如我们的网站页面数目良多的话，占用CPU和内存会对照年夜，必要充足的耐烦。
我们本文只是先容了关于移除有效CSS选择器的办法,假如你想更周全的提拔网站的速率,那末你大概必要分离FirebugYslowPageSpeed组合使用,找到更优谜底.
特地保举几款在线的CSS减肥工具:
CSSValidationServicehttp://jigsaw.w3.org/css-validator/
CssOptimiserhttp://www.cssoptimiser.com/
CleanCSShttp://www.cleancss.com/
CSSCompressorhttp://www.cssdrive.com/index.php/main/csscompressor
原文：CSS减肥工具—CSSUsage
</p>
表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。 不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。
页:
[1]