前端开发过程中经常会遇到随着网站项目的规模扩大、产品数量、日常专题上下线等情况,造成网站的CSS慢慢变得臃肿从而影响了网站的响应速度,这种情况下,给网站CSS文件减肥是必要的,如果稍不留神,不小心的误删,就会造成线上的产品的事故。下面jquery特效就给大家推荐一款CSS减肥的工具–Firefox插件 CSS Usage.
首先,我们需要安装Firefox;
第二步,安装前端开发er最普及的开发工具 Firebug;
第三步,安装CSS Usage 0.2.9;
安装CSS Usage
第四步,在浏览器中打开我们要优化的页面(本地的页面也可以),点击右下角的firebug小图标,打开firebug工具窗口,我们会看到在工具选项中我们有一个 CSS Usage工具的按钮。
安装CSS Usage 使用方法
首先我们来分析最上面的三个功能按钮的使用
Scan: 通过字面意思我们就能知道,这是一个扫描当前页面的工具,如果我们的站点只有一个页面或者几个页面,我们可以通过使用此功能按键来查看页面的css实用情况.
Clear: 清除扫描结果,但我们查看完网页,并对CSS 进行了修改后,我们就不需要以前的扫描结果了,那么我们就可以使用Clear功能键,清除以前的扫描结果缓存,重新开始我们的扫描.
AutoScan: 我们的网站可能会有很多的页面,更有可能有很多的弹出层,如果我们每次都点击扫描的话,会占用我们大量的时间,AutoScan功能键可以使我们的扫描工作更自动化,提高我们的工作效率.
当我们点击Scan按键后会有什么样的情况呢?咱就用jquery博客为例子http://www.jqueryba.com/
点击Scan之后, CSS Usage会对当前的页面HTML和样式进行扫描,如下图
安装CSS Usage 使用方法
上图是我把扫描结果折叠后的样子,我们可以看到,CSS Usage对页面css样式表的内联(inline)样式和外链样式进行了扫描,HTML也作了扫描并显示加载时间.
下面我们展开一个瞧瞧
安装CSS Usage 使用方法
我们能看到这一句Line CSS Selector Seen, Seen before, Unseen, :hover,告诉我们” 列出CSS选择器的状态:
绿色–表示当前扫描看到的,
深绿色–的以前的扫描中看到的,
红色–的表示在当前和以前扫描中均未发现的.
灰色–的代表伪类的选择器CSS,这部分将会被忽视.
在这个列表的最下面,我们也会看到有个统计,告诉我们有多少被发现,多少没有发现,被忽视的是多少,CSS实用的覆盖率是多少的统计.
同时,CSS Usage还提供给我们关于CSS某个选择器被实用多少次的统计
如果我们一直使用 Auto Scan功能的话,我们的Scan次数也是在累积的,比如我们从首页到博文目录、再到图片、最后到达关于我,每一次页面跳转,CSS Usage 都会自动增加页面的扫描次数。
如果你想知道,我们都是在哪些页面进行的扫描,是不是覆盖到了所有的页面,你可以看到关于页面的扫描记录
如果我们仅仅是给CSS减肥的话,那我们就可以对红色的选择器开始动手了,CSS Usage给我们提供了一个更智能的工具, export cleaned css(导出清理后的CSS).但是直接使用这个工具对很多大型网站来说都需要勇气,我的建议还是保险一些的好,我们可以选择选择器的名称,通过文件夹的搜索功能,来查找这个css选择器的样式是不是已经作为下线 产品或者组件的组成部分,已经没有作用.或许我们在一个旮旯又发现了它 ,那样我们只是当时出了冷汗,而不必等修改的文件上线后再出冷汗.
我们还要提一下这个工具的缺点:
如果网站使用了大量的ajax和dhtml的话,你需要尽可能多地打开那些隐藏的div/窗口和tab,让Css Usage爬取尽可能多的内容。
如果我们的网站页面数量很多的话,占用CPU和内存会比较大,需要足够的耐心。
我们本文只是介绍了关于移除无效CSS选择器 的方法,如果你想更全面的提升网站的速度,那么你可能需要结合Firebug\ Yslow\ Page Speed 强强组合应用,也许会找到更优答案.
转自 jquery http://www.jqueryba.com/568.html
首先,我们需要安装Firefox;
第二步,安装前端开发er最普及的开发工具 Firebug;
第三步,安装CSS Usage 0.2.9;
安装CSS Usage
第四步,在浏览器中打开我们要优化的页面(本地的页面也可以),点击右下角的firebug小图标,打开firebug工具窗口,我们会看到在工具选项中我们有一个 CSS Usage工具的按钮。
安装CSS Usage 使用方法
首先我们来分析最上面的三个功能按钮的使用
Scan: 通过字面意思我们就能知道,这是一个扫描当前页面的工具,如果我们的站点只有一个页面或者几个页面,我们可以通过使用此功能按键来查看页面的css实用情况.
Clear: 清除扫描结果,但我们查看完网页,并对CSS 进行了修改后,我们就不需要以前的扫描结果了,那么我们就可以使用Clear功能键,清除以前的扫描结果缓存,重新开始我们的扫描.
AutoScan: 我们的网站可能会有很多的页面,更有可能有很多的弹出层,如果我们每次都点击扫描的话,会占用我们大量的时间,AutoScan功能键可以使我们的扫描工作更自动化,提高我们的工作效率.
当我们点击Scan按键后会有什么样的情况呢?咱就用jquery博客为例子http://www.jqueryba.com/
点击Scan之后, CSS Usage会对当前的页面HTML和样式进行扫描,如下图
安装CSS Usage 使用方法
上图是我把扫描结果折叠后的样子,我们可以看到,CSS Usage对页面css样式表的内联(inline)样式和外链样式进行了扫描,HTML也作了扫描并显示加载时间.
下面我们展开一个瞧瞧
安装CSS Usage 使用方法
我们能看到这一句Line CSS Selector Seen, Seen before, Unseen, :hover,告诉我们” 列出CSS选择器的状态:
绿色–表示当前扫描看到的,
深绿色–的以前的扫描中看到的,
红色–的表示在当前和以前扫描中均未发现的.
灰色–的代表伪类的选择器CSS,这部分将会被忽视.
在这个列表的最下面,我们也会看到有个统计,告诉我们有多少被发现,多少没有发现,被忽视的是多少,CSS实用的覆盖率是多少的统计.
同时,CSS Usage还提供给我们关于CSS某个选择器被实用多少次的统计
如果我们一直使用 Auto Scan功能的话,我们的Scan次数也是在累积的,比如我们从首页到博文目录、再到图片、最后到达关于我,每一次页面跳转,CSS Usage 都会自动增加页面的扫描次数。
如果你想知道,我们都是在哪些页面进行的扫描,是不是覆盖到了所有的页面,你可以看到关于页面的扫描记录
如果我们仅仅是给CSS减肥的话,那我们就可以对红色的选择器开始动手了,CSS Usage给我们提供了一个更智能的工具, export cleaned css(导出清理后的CSS).但是直接使用这个工具对很多大型网站来说都需要勇气,我的建议还是保险一些的好,我们可以选择选择器的名称,通过文件夹的搜索功能,来查找这个css选择器的样式是不是已经作为下线 产品或者组件的组成部分,已经没有作用.或许我们在一个旮旯又发现了它 ,那样我们只是当时出了冷汗,而不必等修改的文件上线后再出冷汗.
我们还要提一下这个工具的缺点:
如果网站使用了大量的ajax和dhtml的话,你需要尽可能多地打开那些隐藏的div/窗口和tab,让Css Usage爬取尽可能多的内容。
如果我们的网站页面数量很多的话,占用CPU和内存会比较大,需要足够的耐心。
我们本文只是介绍了关于移除无效CSS选择器 的方法,如果你想更全面的提升网站的速度,那么你可能需要结合Firebug\ Yslow\ Page Speed 强强组合应用,也许会找到更优答案.
转自 jquery http://www.jqueryba.com/568.html
发表评论
-
jquery仿凡客诚品图文切换效果
2012-12-29 22:31 952前端开发过程中需要不断学习,不断温习。最近计划白天继续温习jq ... -
初识javascript美术馆
2012-11-24 12:55 636不断学习,对前端开发来说很是重要,况且咱还是菜鸟更需要好好学习 ... -
jQuery如何性能优化
2012-11-20 09:18 654现在jquery应用的越来越多,上手快,可以满足一般的前端开发 ... -
100个超炫的HTML 5示例(四)
2012-11-12 09:04 693习惯性的早起,星期天睡不着啊,估计这个是前端开发的职业病,落下 ... -
WP-Syntax 代码高亮插件使用方法
2012-11-07 13:43 1038jquery博客之前代码插件好好的,最近把WP Code Hi ... -
css样式表中字体乱码
2012-11-02 22:07 742有时候,我们的css样式表中字体乱码,很诧异。百度谷歌是两个老 ... -
网页中如何插入FLASH(swf文件)的html代码
2012-10-26 09:44 833记得jquery博客从学校出来,走上这条前端开发这不归路,就没 ... -
100个超炫的HTML 5示例(三)
2012-10-25 09:42 708jquery博客继续折腾shopex纠结了,老是出现无法安装, ... -
jquery简单attr用法
2012-10-24 11:39 778之前看JavaScript DOM编程艺术清晰中文版中getA ... -
discuz x2.5用户注册后邮箱认证后无法收到邮件或者直接进垃圾箱
2012-10-23 09:07 904又是一个周末,jquery特效继续折腾我那discuz论坛,我 ... -
100个超炫的HTML 5示例(二)
2012-10-22 23:42 652战斗月,7月即将结束,回首望去,jquery特效不知不觉加班了 ... -
浅谈getElementByID getElementsByTagName getAttribute
2012-10-17 14:01 840今天晚上是jquery博客连续加班的最后一个晚上了,明天开始终 ... -
wordpress 子页面添加关键词和描述,增强SEO优化
2012-10-12 22:11 586jquery特效对seo优化了解的不多,只是一些瞎折腾,今天逛 ... -
几个实用的.htaccess代码片段
2012-10-10 09:27 695自动为文件添加 utf-8 编码 为了避免编码问题,你可以通过 ... -
javascript中非继承的扩展
2012-10-08 15:26 586jquery特效之前只是用,有些东西没有深入追究。惭愧,好多不 ... -
javascript之调用被覆盖的方法
2012-09-29 08:50 586jquery博客这两天在看原生的javascript,看到一些 ... -
淡淡简单描述javascript中方法apply和call
2012-09-27 13:00 564jquery博客最近在看原生javascript,是那本犀牛书 ... -
css a链接 写法 新手篇
2012-09-25 09:03 630今天jquery博客被问到咋写a链接后的样式 这个是很早很早一 ... -
jquery实现隔行换色效果
2012-09-24 08:09 675隔行换色在显示数据的时候用的比较多。jquery整自己的小站的 ... -
jquery 判断 IE6 浏览器 javascript
2012-09-22 09:46 637jquery博客依然整3D地图,火狐 谷歌 IE 7 8 9搞 ...
相关推荐
同时,CSS Usage还提供给我们关于CSS某个选择器被实用多少次的统计,就是CCS文件后面的(1 scans) 如果我们一直使用 Auto Scan功能的话,我们的Scan次数也是在累积的,比如我们从首页到博文目录、再到图片、最后到达关于...
CSS Usage.xpi CSS减肥工具Firefox插件CSS Usage使用教程.txt firebug-2.0.16-fx.xpi Firefox Setup 30.0b9.exe
css usage是一个基于firebug的firefox扩展,可以用来查看页面中的CSS的使用情况,可以清楚的查看css文件中所有的规则在你的网站中的 真实的使用情况。可以查看一个网站中多个页面中的css使用情况——这个很好,可以...
CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的...
css层叠样式表手册_css样式表_css层叠样式表_css样式表下载css层叠样式表手册_css样式表_css层叠样式表_css样式表下载css层叠样式表手册_css样式表_css层叠样式表_css样式表下载
第一步,我们需要安装Firefox,或者确定你已经安装的版本已经高于3.1; 第二步,安装前端开发人员最普及的开发工具 Firebug; 第三步,安装CSS Usage 第四步,在浏览器中打开我们要优化的页面(本地的页面也可以)...
自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式
Dreamweaver CS6 CSS样式汉化文件
CSS3 公共样式文件 Normalize.css
这种情况下,给网站CSS文件减肥类似于海底捞针的大工程,因为稍不留神,一个不经意的删除,就会造成线上的产品的事故。下面我们就给大家推荐一款CSS减肥的工具–Firefox插件 CSS Usage. 首先,我们需要安装Firefox...
css全局样式,css外部文件,取消浏览器默认样式,有助于优化代码,节省带宽。
CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了 CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多 栏布局等模块 [1] 。 CSS演进的...
css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式...
可以添加CSS Usage插件的firefox浏览器,其他版本都不能添加,只有这个版本可以的,喜欢就下载吧!
css自定义文件上传按钮样式
上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合
web前端开发必备资料,项目初始化css,normalize.css,用来统一各个浏览器之间的样式。
CSS样式重写.cssCSS样式重写.cssCSS样式重写.cssCSS样式重写.cssCSS样式重写.cssCSS样式重写.css
css重置样式文件reset.css
CSS usage是Firefox的一个清除多余CSS的插件,强大的CSS减肥工具。注意:我们需要安装Firefox30,不能高于30。