仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 860|回复: 7

[DIV+CSS] 给大家带来Firefox插件CSS Usage:一款CSS减肥的东西

[复制链接]
精灵巫婆 该用户已被删除
发表于 2015-1-15 23:16:04 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称,中文译作“层叠样式表单”。
破洛洛文章简介:CSS减肥工具―CSSUsage.
前端构建工程师常常会碰到跟着网站产物的范围扩展、产物数目、一样平常专题高低线等情形,形成网站的CSS渐渐变得痴肥从而影响了网站的用户体验,这类情形下,给网站CSS文件减肥相似于大海捞针的年夜工程,由于略不注意,一个不经意的删除,就会形成线上的产物的变乱。上面我们就给人人保举一款CSS减肥的工具–Firefox插件CSSUsage.
起首,我们必要安装Firefox(猛击此处下载),大概断定你已安装的版本已高于3.1;
第二步,安装前端开辟职员最提高的开辟工具Firebug;
第三步,安装CSSUsage0.2.2(写此文时的版本);
第四步,在扫瞄器中翻开我们要优化的页面(当地的页面也能够),点击右下角的firebug小图标,翻开firebug工具窗口,我们会看到在工具选项中我们有一个CSSUsage工具的按钮。

给大家带来Firefox插件CSS Usage:一款CSS减肥的工具

给大家带来Firefox插件CSS Usage:一款CSS减肥的工具

起首我们来剖析最下面的三个功效按钮的利用
Scan:经由过程字面意义我们就可以晓得,这是一个扫描以后页面的工具,假如我们的站点只要一个页面大概几个页面,我们能够经由过程利用此功效按键来检察页面的css有用情形.
Clear:扫除扫描了局,但我们检察完网页,并对CSS举行了修正后,我们就不必要之前的扫描了局了,那末我们就能够利用Clear功效键,扫除之前的扫描了局缓存,从头入手下手我们的扫描.
AutoScan:我们的网站大概会有良多的页面,更有大概有良多的弹出层,假如我们每次都点击扫描的话,会占用我们大批的工夫,AutoScan功效键可使我们的扫描事情更主动化,进步我们的事情效力.
当我们点击Scan按键后会有甚么样的情形呢?我们以独臂老宋的博客为案例http://blog.sina.com.cn/laosong11
点击Scan以后,CSSUsage会对以后的页面HTML和款式举行扫描,以下图

给大家带来Firefox插件CSS Usage:一款CSS减肥的工具

给大家带来Firefox插件CSS Usage:一款CSS减肥的工具

上图是我把扫描了局折叠后的模样,我们能够看到,CSSUsage对页面css款式表的内联(inline)款式和外链款式举行了扫描,HTML也作了扫描并显现加载工夫.
上面我们睁开一个内联款式

给大家带来Firefox插件CSS Usage:一款CSS减肥的工具

给大家带来Firefox插件CSS Usage:一款CSS减肥的工具

我们能看到这一句LineCSSSelectorSeen,Seenbefore,Unseen,:hover,告知我们”列出CSS选择器的形态:
绿色–暗示以后扫描看到的,
深绿色–的之前的扫描中看到的,
白色–的暗示在以后和之前扫描中均未发明的.
灰色–的代表伪类的选择器CSS,这部分将会被无视.
在这个列表的最上面,我们也会看到有个统计,告知我们有几被发明,几没有发明,被无视的是几,CSS有用的掩盖率是几的统计.
同时,CSSUsage还供应给我们关于CSS某个选择器被有用几次的统计

给大家带来Firefox插件CSS Usage:一款CSS减肥的工具

给大家带来Firefox插件CSS Usage:一款CSS减肥的工具

假如我们一向利用AutoScan功效的话,我们的Scan次数也是在积累的,好比我们从首页到博文目次、再到图片、最初抵达关于我,每次页面跳转,CSSUsage城市主动增添页面的扫描次数。以下图:

给大家带来Firefox插件CSS Usage:一款CSS减肥的工具

给大家带来Firefox插件CSS Usage:一款CSS减肥的工具

假如你想晓得,我们都是在哪些页面举行的扫描,是否是掩盖到了一切的页面,你能够看到关于页面的扫描纪录

给大家带来Firefox插件CSS Usage:一款CSS减肥的工具

给大家带来Firefox插件CSS Usage:一款CSS减肥的工具

假如我们仅仅是给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>
表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。
山那边是海 该用户已被删除
发表于 2015-1-17 21:15:58 | 显示全部楼层
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
深爱那片海 该用户已被删除
发表于 2015-1-26 22:57:18 | 显示全部楼层
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
谁可相欹 该用户已被删除
发表于 2015-2-11 08:12:56 | 显示全部楼层
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
灵魂腐蚀 该用户已被删除
发表于 2015-3-2 01:52:12 | 显示全部楼层
滚动条)层属性--溢出(visible/hidden/scroll/auto)
小妖女 该用户已被删除
发表于 2015-3-11 04:35:21 | 显示全部楼层
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
再见西城 该用户已被删除
发表于 2015-3-17 22:11:20 | 显示全部楼层
俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。
再现理想 该用户已被删除
发表于 2015-3-25 09:50:57 | 显示全部楼层
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-4-16 20:42

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表