CSS减肥工具 CSS Usage
webphp 12年前
<p>前端构建工程师经常会遇到随着网站产品的规模扩大、产品数量、日常专题上下线等情况，造成网站的CSS慢慢变得臃肿从而影响了网站的用户体验，这种 情况下，给网站CSS文件减肥类似于海底捞针的大工程，因为稍不留神，一个不经意的删除，就会造成线上的产品的事故。下面我们就给大家推荐一款CSS减肥 的工具–Firefox插件 CSS Usage.</p> <p><span id="more-488"> </span></p> <p>首先，我们需要安装Firefox,或者确定你已经安装的版本已经高于3.1;<br /> 第二步，安装前端开发人员最普及的开发工具 Firebug；<br /> 第三步，安装<a href="/misc/goto?guid=4958191908391757588" rel="nofollow" target="_blank">CSS Usage 0.2.2</a>(写此文时的版本)；<br /> 第四步，在浏览器中打开我们要优化的页面（本地的页面也可以），点击右下角的firebug小图标，打开firebug工具窗口，我们会看到在工具选项中我们有一个 CSS Usage工具的按钮。</p> <p><img title="CSS减肥工具 CSS Usage" border="0" alt="CSS减肥工具 CSS Usage" src="https://simg.open-open.com/show/5e94a0e237c2eef769371e0c3d9dad35.jpg" width="544" height="104" /><br /> <strong>首先我们来分析最上面的三个功能按钮的使用</strong></p> <p><strong>Scan</strong>: 通过字面意思我们就能知道,这是一个扫描当前页面的工具,如果我们的站点只有一个页面或者几个页面,我们可以通过使用此功能按键来查看页面的css实用情况.</p> <p><strong>Clear</strong>: 清除扫描结果,但我们查看完网页,并对CSS 进行了修改后,我们就不需要以前的扫描结果了,那么我们就可以使用Clear功能键,清除以前的扫描结果缓存,重新开始我们的扫描.</p> <p><strong>AutoScan</strong>: 我们的网站可能会有很多的页面,更有可能有很多的弹出层,如果我们每次都点击扫描的话,会占用我们大量的时间,AutoScan功能键可以使我们的扫描工作更自动化,提高我们的工作效率.</p> <p>当我们点击Scan按键后会有什么样的情况呢?我们以 独臂老宋的博客为案例http://blog.sina.com.cn/laosong11<br /> 点击Scan之后, CSS Usage会对当前的页面HTML和样式进行扫描,如下图</p> <p><img title="CSS减肥工具 CSS Usage" border="0" alt="CSS减肥工具 CSS Usage" src="https://simg.open-open.com/show/303e875d39a2360d78f7cc99ae102542.jpg" width="558" height="340" /></p> <p>上图是我把扫描结果折叠后的样子,我们可以看到,CSS Usage对页面css样式表的内联(inline)样式和外链样式进行了扫描,HTML也作了扫描并显示加载时间.</p> <p>下面我们展开一个内联样式<br /> <img title="CSS减肥工具 CSS Usage" border="0" alt="CSS减肥工具 CSS Usage" src="https://simg.open-open.com/show/6fe78bffc14ea6ba1d8b14be88f8eb4e.jpg" width="332" height="101" /></p> <p>我们能看到这一句Line CSS Selector Seen, Seen before, Unseen, :hover,告诉我们” 列出CSS选择器的状态:<br /> 绿色–表示当前扫描看到的,<br /> 深绿色–的以前的扫描中看到的,<br /> 红色–的表示在当前和以前扫描中均未发现的.<br /> 灰色–的代表伪类的选择器CSS,这部分将会被忽视.<br /> 在这个列表的最下面,我们也会看到有个统计,告诉我们有多少被发现,多少没有发现,被忽视的是多少,CSS实用的覆盖率是多少的统计.</p> <p>同时,CSS Usage还提供给我们关于CSS某个选择器被实用多少次的统计</p> <p>如果我们一直使用 Auto Scan功能的话,我们的Scan次数也是在累积的,比如我们从首页到博文目录、再到图片、最后到达关于我，每一次页面跳转，CSS Usage 都会自动增加页面的扫描次数。如下图：<img title="CSS减肥工具 CSS Usage" border="0" alt="CSS减肥工具 CSS Usage" src="https://simg.open-open.com/show/434392d51fe53b58b65c2cb2600e337e.jpg" width="558" height="29" /></p> <p>如果你想知道，我们都是在哪些页面进行的扫描，是不是覆盖到了所有的页面，你可以看到关于页面的扫描记录<img title="CSS减肥工具 CSS Usage" border="0" alt="CSS减肥工具 CSS Usage" src="https://simg.open-open.com/show/53b68478d86f61eb45fade91d7cd3095.jpg" width="558" height="98" /></p> <p>如果我们仅仅是给CSS减肥的话,那我们就可以对红色的选择器开始动手了,CSS Usage给我们提供了一个更智能的工具, export cleaned css(导出清理后的CSS).但是直接使用这个工具对很多大型网站来说都需要勇气,我的建议还是保险一些的好,我们可以选择选择器的名称,通过文件夹的 搜索功能,来查找这个css选择器的样式是不是已经作为下线 产品或者组件的组成部分,已经没有作用.或许我们在一个旮旯又 发现了它 ,那样我们只是当时出了冷汗,而不必等修改的文件上线后再出冷汗.</p> <p>我们还要提一下这个工具的缺点：<br /> 如果网站使用了大量的ajax和dhtml的话，你需要尽可能多地打开那些隐藏的div/窗口和tab,让Css Usage爬取尽可能多的内容。<br /> 如果我们的网站页面数量很多的话，占用CPU和内存会比较大，需要足够的耐心。<br /> <br /> 项目地址：<a href="/misc/goto?guid=4958185665575099708" target="_blank">https://addons.mozilla.org/en-US/firefox/addon/css-usage/</a></p>