css文字瘦,前端开发CSS减肥工具:CSS Usage

web前端开发用什么工具包

前端开发产业是指什么意思

前端构建工程师经常会遇到随着网站产品的规模扩大、产品数量、日常专题上下线等情况,造成网站的CSS Usage.首先,我们需要安装Firefox(猛击此处下载),或者确定你已经安装的版本已经高于3.1;

第二步,安装前端开发人员最普及的开发工具 Firebug;

第三步,安装CSS Usage 0.2.2(写此文时的版本);

第四步,在浏览器中打开我们要优化的页面(本地的页面也可以),点击右下角的firebug小图标,打开firebug工具窗口,我们会看到在工具选项中我们有一个 首先我们来分析最上面的三个功能按钮的使用**Scan: 通过字面意思我们就能知道,这是一个扫描当前页面的工具,如果我们的站点只有一个页面或者几个页面,我们可以通过使用此功能按键来查看页面的css实用情况.Clear: 清除扫描结果,但我们查看完网页,并对CSS 进行了修改后,我们就不需要以前的扫描结果了,那么我们就可以使用Clear功能键,清除以前的扫描结果缓存,重新开始我们的扫描.AutoScan**: 我们的网站可能会有很多的页面,更有可能有很多的弹出层,如果我们每次都点击扫描的话,会占用我们大量的时间,AutoScan功能键可以使我们的扫描工作更自动化,提高我们的工作效率.当我们点击Scan按键后会有什么样的情况呢?我们以 独臂老宋的博客为案例http://blog.sina.com.cn/laosong11

点击Scan之后, CSS Usage会对当前的页面

上图是我把扫描结果折叠后的样子,我们可以看到,CSS Usage对页面css样式表的内联(inline)样式和外链样式进行了扫描,

如果我们一直使用 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 组合应用,找到更优答案.

前端开发中的同源是什么意思

前端开发都用什么工具

前端开发和什么打交道

前端开发项目是什么意思

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值