值得珍藏的CSS机能优化办法
CSS 必需通过一个相对复杂的管道，就像 HTML 和 JavaScript一样，阅读器必需从效劳器下载文件，然后停止解析并将其利用于DOM。由于优化程度极高，这个历程平常非常快——关于不基于框架的小型 web 项目，CSS平常只占总资源耗损的一小部分。
框架打破了这种均衡。包罗一个 JavaScript GUI 堆栈，如 jQuery UI，可以视察 CSS, JS 和 HTML大小逐步的变大。平常，开发人员最后才会感到压力，当他们用一个强大的 8 核工作站后面，使用 T3 internet 时，没有人关怀速度，这随着延迟或 cpu 受限设备的显现而改动。
优化CSS需要一个多维的办法。虽然手工编写的代码可以使用各种技术停止简化，但是手工检查框架代码是低效的。在这些状况下，使用主动化的简化会发生更好的结果。
下面的步骤将带我们进入 CSS 优化的世界。并不是每一个都可以直接利用到你的项目中，但是必然要记住它们。
01. 使用简写
使用缩写语句，如下面所示的 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
删除不必要的部分 CSS，j明显会加快网页的加载速度。谷歌的Chrome阅读器有这种开箱即用的功效。只需转到查看>开发人员>开发人员工具，并在比来的版本中翻开Sources选项卡，然后翻开命令菜单。然后，选中Show Coverage，在Coverage analysis窗口中高亮显示当前页面上未使用的代码，让您大长见识。
翻开谷歌阅读器开发都工具，在 Conlse 旁边更多选中 Coverage，就可以看到未使用的 CSS, 点击对应的项，高亮显示当前页面上未使用的代码，让你大长见识：
03. 以更便利的方式做到这一点
在逐行剖析中导航并不必然便利，使用谷歌阅读器的 Audits 就可以快速帮我们剖析，使用方式，翻开开发者工具，点击 Audits 栏位，点击 Run audits 后就开端剖析结果。
04. 留意这些问题
请记住，对 CSS 的主动剖析总是会致使错误。用紧缩后的 CSS 文件更换 未紧缩CSS文件之后，对整个网站停止彻底的测试——没有人知道优化器会致使什么错误。
05.内联关键 CSS
加载外部样式表需要花费时间，这是由于延迟造成的——因此，可以把最关键的代码位放在 head 中。但是，请确保不要做得过火，记住，施行保护任务的人员也必需读代替码。
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<p class="blue">
Hello, world!
</p>06.同意反并行解析
@import 将 CSS 样式利便增加代码中。遗憾的是，这些好处并不是没有代价的:由于 @import 可以嵌套，因此没法并行解析它们。更并行的办法是使用一系列 <link> 标志，阅读器可以马上猎取这些标志。
@import url("a.css");
@import url("b.css");
@import url("c.css");
<link rel="stylesheet" href="a.css">
<link rel="stylesheet" href="b.css">
<link rel="stylesheet" href="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 <js|css> Specifies the
type of the input file17. 在 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. 打破缓存
设计人员平常不喜爱缓存，由于他们担忧阅读器会缓存上次的样式表。解决这个问题的一个简便办法是包括带有文件名的标志。遗憾的是，由于一些代理回绝缓存具有“动态”途径的文件，此步骤所附带的代码中概述的方案并不适用于所有地方。
<Link rel="stylesheet" href="style.css?v=1.2.3">
21. 不要健忘根基知识
优化CSS只是游戏的一部分。假如你的效劳器不使用 HTTP/2 和 gzip 紧缩，那么在数据传输期间会亏损许多时间。荣幸的是，解决这两个问题平常很简便。我们的示例显示了对常用Apache 效劳器的一些调整。假如您发明本人在一个不一样的系统上，只需参照 效劳器文档即可。
pico /etc/httpd/conf/httpd.conf AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css
引荐学习：CSS视频教程
以上就是值得珍藏的CSS机能优化办法的具体内容，更多请关注百分百源码网其它相关文章！
