值得珍藏的CSS机能优化办法
运用缩写语句，如下面所示的 margin 声明，可以从基本上减小 CSS 文件的大小。在 google 上搜寻 CSS Shorthand 可以寻到很多其他的速记情势。
p { margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px; }
p { margin: 1px 2px 3px 4px; }02. 查寻并删除未运用的 CSS
在逐行剖析中导航并纷歧定便利，运用谷歌阅读器的 Audits 就可以迅速帮我们剖析，运用方式，打开开发者工具，点击 Audits 栏位，点击 Run audits 后就开端剖析效果。
04. 注意这些题目
请记住，对 CSS 的主动剖析总是会致使差错。用紧缩后的 CSS 文件替代 未紧缩CSS文件之后，对整个网站进行彻底的测试——没有人晓得优化器会致使什么差错。
05.内联关键 CSS
加载外部样式表需要破费工夫，这是因为推迟造成的——因而，可以把最关键的代码位放在 head 中。但是，请确保不要做得过火，记住，施行保护任务的人员也必需读代替码。
Hello, world!
06.允许反并行解析
@import 将 CSS 样式利便增加代码中。遗憾的是，这些益处并不是没有代价的:因为 @import 可以嵌套，因而没法并行解析它们。更并行的办法是运用一系列 标志，阅读器可以立刻猎取这些标志。
@import url("a.css");
@import url("b.css");
@import url("c.css");
07. 用 CSS 替代图片
几年前，一套半透亮的 png 在网站上新建半透亮结果是绝无仅有的。此刻，CSS过 滤器供给了一种节俭资源的替换办法。例如，下列这个代码片段可以确保所计议的图片显示为其本身的灰度版本。
img {
-webkit-filter: grayscale(100%);
/* old safari */
filter: grayscale(100%);
}08.运用色彩快捷方式
常识告诉我们，六位数的色彩描述符是表达色彩最有效的方式。事实并非如此——在某些状况下，速记描述或色彩名称可以更短。
target { background-color: #ffffff; }
target { background: #fff; }09. 删除无须要的零和单位
CSS 支撑多种单位和数字格局。它们是一个值得谢谢的优化指标——可以删除尾随和追随的零，如下面的代码片段所示。此外，请记住，零始终是零，增加维度不会为包括的信息附带价值。
padding: 0.2em; margin: 20.0em; avalue: 0px; padding: .2em; margin: 20em; avalue: 0;
10. 消弭过多分号
这种优化需要谨慎，由于它会影响代码的更改。CSS的标准允许省去属性组中的最后一个分号。因为这种优化办法所节俭的老本很小，所以我们主要针对那些正在开发主动优化的程序员注明这一点。
p {
. . .
font-size: 1.33em
}11.运用纹理图集
因为协定开销的缘由，加载多个小图片的效率很低。CSS 精灵将一系列小图片组合成一个大的PNG 文件，然后通过 CSS 法则将其分解。TexturePacker 等程序大大简化了新建历程。
.download {
width:80px;
height:31px;
background-position: -160px -160px
}
.download:hover {
width:80px;
height:32px;
background-position: -80px -160px
}12. 省去 px
提高机能的一个简略办法是运用CSS规范的一个特性。为 0 的数值默许单位是 px—— 删除 px 可认为每个数字节俭两个字节。
h2 {padding:0px; margin:0px;}
h2 {padding:0; margin:0}13. 以免需要机能请求的属性
剖析表白，一些标签比其他标签更昂贵。下列这些解析会影响机能—要是在没有须要的状况，尽量不要运用它们。
border-radius box-shadow transform filter :nth-child position: fixed;
14. 删除空格
空格——考虑制表符、回车符和空格——使代码更容易浏览，但从解析器的角度看，它没有什么用场。在发表前删除它们，更好的办法是将此任务委托给 shell 足本或相似的工具。
15. 删除注释
注释对编译器也没有任何作用。新建一个自定义解析器，以便在发表以前删除它们。这不仅节俭了带宽，并且还确保袭击者和克隆者更难了解手头代码背后的思想。
16. 运用主动紧缩
Yahoo 的会员体验团队新建了一个处置很多紧缩任务的利用程序。它以 JAR 文件的情势发表，在这里可用，而且可以运用所选的JVM运转。
java -jar yuicompressor-x.y.z.jar
Usage: java -jar yuicompressor-x.y.z.jar
[options] [input file]
Global Options
-h, --help Displays this
information
--type Specifies the
type of the input file 17. 在 NPM 运转它
要是你但愿将产品集成到 Node.JS 中，请拜访 npmjs.com/package/yuicompressor。保护不良的存储库包括一组包装器文件和JavaScript API。
var compressor = require('yuicompressor');
compressor.compress('/path/to/
file or String of JS', {
//Compressor Options:
charset: 'utf8',
type: 'js',18. 维持 Sass 的检查
虽然 CSS 选中器的机能不像几年前那么重要(请参阅参照 材料)，但是像 Sass 这样的框架有时会发生非常复杂的代，时时查看输出文件，并考虑优化效果的办法。
19. 设定缓存
有句老话说，最快的文件永远不会通过网络发送。让阅读器缓存要求有效地实现这一点。遗憾的是，缓存头的设定必需在办事器上进行。充分上面讲的的两个 Chrome 工具，它们供给了一种迅速剖析更改效果的办法。
20. 打破缓存
设计人员平常不喜好缓存，由于他们担忧阅读器会缓存上次的样式表。解决这个题目的一个简略办法是包括带有文件名的标志。遗憾的是，因为一些代理拒绝缓存拥有“动态”途径的文件，此步骤所附带的代码中概述的方案并不适用于所有地方。
21. 不要忘怀根基见识
优化CSS只是游戏的一局部。要是你的办事器不运用 HTTP/2 和 gzip 紧缩，那么在数据传输期间会亏损许多工夫。荣幸的是，解决这两个题目平常很简略。我们的示例显示了对常用Apache 办事器的一些调整。要是您发明本人在一个不一样的系统上，只需参照 办事器文档即可。
pico /etc/httpd/conf/httpd.conf AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css
举荐学习：CSS视频教程
以上就是值得珍藏的CSS机能优化办法的细致内容，更多请关注 百分百源码网 其它相干文章！
