前端构建工程师经常会遇到随着网站产品的规模扩大、产品数量、日常专题上下线等情况，造成网站的CSS慢慢变得臃肿从而影响了网站的用户体验，这种 情况下，给网站CSS文件减肥类似于海底捞针的大工程，因为稍不留神，一个不经意的删除，就会造成线上的产品的事故。下面我们就给大家推荐一款CSS减肥 的工具–Firefox插件 CSS Usage.
首先，我们需要安装Firefox,或者确定你已经安装的版本已经高于3.1;
第二步，安装前端开发人员最普及的开发工具 Firebug；
第三步，安装CSS Usage 0.2.2(写此文时的版本)；
第四步，在浏览器中打开我们要优化的页面（本地的页面也可以），点击右下角的firebug小图标，打开firebug工具窗口，我们会看到在工具选项中我们有一个 CSS Usage工具的按钮。
首先我们来分析最上面的三个功能按钮的使用
Scan: 通过字面意思我们就能知道,这是一个扫描当前页面的工具,如果我们的站点只有一个页面或者几个页面,我们可以通过使用此功能按键来查看页面的css实用情况.
Clear: 清除扫描结果,但我们查看完网页,并对CSS 进行了修改后,我们就不需要以前的扫描结果了,那么我们就可以使用Clear功能键,清除以前的扫描结果缓存,重新开始我们的扫描.
AutoScan: 我们的网站可能会有很多的页面,更有可能有很多的弹出层,如果我们每次都点击扫描的话,会占用我们大量的时间,AutoScan功能键可以使我们的扫描工作更自动化,提高我们的工作效率.
当我们点击Scan按键后会有什么样的情况呢?我们以 独臂老宋的博客为案例http://blog.sina.com.cn/laosong11
点击Scan之后, CSS Usage会对当前的页面HTML和样式进行扫描,如下图
上图是我把扫描结果折叠后的样子,我们可以看到,CSS Usage对页面css样式表的内联(inline)样式和外链样式进行了扫描,HTML也作了扫描并显示加载时间.
下面我们展开一个内联样式
我们能看到这一句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和内存会比较大，需要足够的耐心。
-
做 web前端开发用什么工具包 前端开发产业是指什么意思 前端构建工程师经常会遇到随着网站产品的规模扩大、产品数量、日常专题上下线等情况，造成网站的CSS Usage.首先，我们需要安装Firefox(猛击此处下载),或者确定你已经安装的版本已经高于3.1; 第二步，安装前端开发人员最普及的开发工具 Firebug； 第三步，安装CSS Usage 0.2.2(写此文时的版本)； 第四步，在浏览器
-
Tips About Css usage of calc() for the content in calc, especially for operator + -, we need to keep space before or after them. otherwise, they will not be regonized by browser. *{ width:
-
It’s pretty simple. Some key points to note as follow: 1) Quite often, you find your change to the .css file doesn’t take effect. The key question here, are you changing the right .css file?
-
Naming rules: use letters, numbers, slashes, or minus signs. Don’t start with numbers. CSS Syntax: /* Selectors{ attribute:value; attribute:value; attribute:value; } */ Comment me
-
postcss 插件 We’ve featured PostCSS many times before on SitePoint, yet it continues to confuse many. To summarize it in one sentence: 我们精选PostCSS 很多 次 才上SitePoint，但它仍然迷惑许多。 用一句话概括一下： PostCSS handles te
-
我试图在JAVA中找到一个简单的（ha）SOAP示例，其中包含一个工作服务，但我发现的任何示例都不工作。 我已经试过这个例子中的这个，但是它不起作用，它要求我输入一个正斜杠，但是它已经输入了，没有任何反应。 有人知道我可以下载/请求和修改的SOAP示例链接吗？ 谢谢你的帮助。
-
问题内容： 有什么办法可以限制celery的工人数量？我的服务器很小，celery总是在1个核心处理器上创建10个进程。我想将此数目限制为3个进程。 问题答案： 我尝试在我的settings.py文件中将并发设置为1，将max_tasks_per_child设置为1，并同时运行3个任务。它仅以用户的身份生成1个进程，而以Celery的形式生成其他2个进程。它应该只运行1个进程，然后等待它完成，然后
-
问题内容： 据我了解，reduce函数带有一个列表和一个function 。然后，它在列表的前两个元素上调用该函数，然后使用下一个列表元素和上一个结果重复调用该函数。 因此，我定义了以下功能： 以下函数计算阶乘。 现在，这不应该给我吗？但是，它给出了。为什么呢 似乎也需要析因。但是，我需要了解原因。 有人可以解释为什么会发生这种情况以及解决方法吗？ 我基本上想计算列表中所有条目的阶乘乘积。备份计划
-
#Java找工作# #秋招# #校招# 一面是5个人群面，面试官挨个提问（60分钟，说是只要15-20分钟 ） 1、自我介绍 2、实习项目经历 3、对公司产品的了解 4、对投递岗位的认识 5、对加班出差的看法 总结： Java开发工程师是对OA系统的二次开发，需要和客户沟通，写代码很少（低代码），无产品经理，无测试。 经常出差（大部分省内出差，有点频繁），经常加班 实习期间工资3K，无任何
-
我在CentOS机器上启用标题中提到的模块时遇到了一些问题。 百胜安装php-mCrypt/php-soc/php-mysql工作正常，并提到它们已经安装，重新启动Apache后，似乎它们没有启用。 例如，我无法定位mcrypt.so，运行php--ini会给出： 这是在我放置extension=mcrypt之后。所以在php中。伊尼。
-
自我介绍 还有没有做过别的项目，介绍一下 网关 为什么在网关层用Dubbo 为什么用 springboot，有什么好处 介绍一下rocketmq rocketmq怎么避免重复消费 mysql索引 介绍一下B+树 redis数据结构 redis为什么性能高 分布式锁 反问
-
奇怪的问题是，如果我们创建一个fat-jar来执行项目，而不是从NetBeans执行，它就会失败。有线索为什么吗？ 这是一个简单的apache-camel应用程序，它使用Mina启动一条路由来接收HL7，然后使用一个bean直接回答ACK消息，这是一个简单的示例。 该应用程序有另一个java定义的REST路由，但这部分工作在Netbeans和执行jar文件中。 如果我们从Netbeans运行它，并
-
问题内容： 尝试指定自定义的肥皂标题。不知道如何填充SoapEnvelope.headerOut属性。 到目前为止我的代码？ 这是标题WSDL提取… 问题答案： headerOut是您需要构建的Element []。 像这样 然后将其添加到数组中。