优化CSS并加速网站的21种方法

CSS有必要通过一个相对复杂的管道，就像HTML和JavaScript相同，浏览器有必要从服务器下载文件，然后进行解析并将其应用于DOM。由于优化程度极高，这个进程一般非常快——对于不根据框架的小型web项目，CSS一般只占总资源耗费的一小部分。
框架打破了这种平衡。包括一个JavaScriptGUI堆栈，如jQueryUI，能够观察CSS,JS和HTML大小逐步的变大。一般，开发人员最终才会感到压力，当他们用一个强大的8核工作站后面，运用T3internet时，没有人关心速度，这跟着推迟或cpu受限设备的呈现而改动。
优化CSS需求一个多维的办法。尽管手艺编写的代码能够运用各种技能进行简化，可是手艺查看框架代码是低效的。在这些情况下，运用主动化的简化会产生更好的成果。
下面的过程将带我们进入CSS优化的国际。并不是每一个都能够直接应用到你的项目中，可是一定要记住它们。
01.运用简写
运用缩写语句，如下面所示的margin声明，能够从根本上减小CSS文件的大小。在google上查找CSSShorthand能够找到许多其他的速记方式。
p{margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;}
p{margin:1px2px3px4px;}
02.查找并删去未运用的CSS
删去不必要的部分CSS，j显然会加快网页的加载速度。谷歌的Chrome浏览器有这种开箱即用的功用。只需转到查看>开发人员>开发人员东西，并在最近的版本中翻开Sources选项卡，然后翻开命令菜单。然后，选择ShowCoverage，在Coverageanalysis窗口中高亮显现当前页面上未运用的代码，让您大开眼界。
翻开谷歌浏览器开发都东西，在Conlse周围更多选择Coverage，就能够看到未运用的CSS,点击对应的项，高亮显现当前页面上未运用的代码，让你大开眼界：
03.以更快捷的方式做到这一点
1571448835387382.png
在逐行剖析中导航并不一定快捷，运用谷歌浏览器的Audits就能够快速帮我们剖析，运用方式，翻开开发者东西，点击Audits栏位，点击Runaudits后就开端剖析成果。
04.留意这些问题
加载外部款式表需求花费时刻，这是由于推迟造成的——因而，能够把最要害的代码位放在head中。可是，请保证不要做得过火，记住，履行维护任务的人员也有必要读取代码。
Hello,world!
06.答应反并行解析
@import将CSS款式方便增加代码中。惋惜的是，这些好处并不是没有价值的:由于@import能够嵌套，因而无法并行解析它们。更并行的办法是运用一系列符号，浏览器能够立即获取这些符号。
@importurl(“a.css”);
@importurl(“b.css”);
@importurl(“c.css”);
07.用CSS替换图片
几年前，一套半透明的png在网站上创立半透明效果是习以为常的。现在，CSS过滤器供给了一种节约资源的替代办法。例如，以下这个代码片段能够保证所讨论的图片显现为其自身的灰度版本。
img{
-webkit-filter:grayscale(100%);
/*oldsafari*/
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的规范答应省掉特点组中的最终一个分号。由于这种优化办法所节约的成本很小，所以我们首要针对那些正在开发主动优化的程序员阐明这一点。
1
p{…font-size:1.33em}
11.运用纹理图集
由于协议开销的原因，加载多个小图片的功率很低。CSS精灵将一系列小图片组合成一个大的PNG文件，然后通过CSS规则将其分化。TexturePacker（https://www.codeandweb.com/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文件的方式发布，可在此处取得（http://yui.github.io/yuicompressor/），并且能够运用所选的JVM运转。
java-jaryuicompressor-x.y.z.jar
Usage:java-jaryuicompressor-x.y.z.jar
[options][inputfile]
GlobalOptions
-h,–helpDisplaysthis
information
–typeSpecifiesthe
typeoftheinputfile
17.在NPM运转它
如果你期望将产品集成到Node.JS中，请拜访npmjs.com/package/yuicompressor。维护不良的存储库包括一组包装器文件和JavaScriptAPI。
varcompressor=require(‘yuicompressor’);
compressor.compress(‘/path/to/
fileorStringofJS’,{
//CompressorOptions:
charset:’utf8′,
type:’js’,
18.保持Sass的查看
1571448920487836.jpg
尽管CSS选择器的功能不像几年前那么重要(请参阅参考资料)，可是像Sass这样的框架有时会产生非常复杂的代，不时查看输出文件，并考虑优化成果的办法。
什么是Sass？(https://www.creativebloq.com/web-design/what-is-sass-111517618)
19.设置缓存
有句老话说，最快的文件永久不会通过网络发送。让浏览器缓存恳求有效地完成这一点。惋惜的是，缓存头的设置有必要在服务器上进行。充分上面讲的的两个Chrome东西，它们供给了一种快速剖析更改成果的办法。
20.打破缓存
设计人员一般不喜欢缓存，由于他们忧虑浏览器会缓存前次的款式表。处理这个问题的一个简单办法是包括带有文件名的符号。惋惜的是，由于一些署理拒绝缓存具有“动态”路径的文件，此过程所顺便的代码中概述的方案并不适用于一切当地。
21.不要忘掉基础知识
优化CSS只是游戏的一部分。如果你的服务器不运用HTTP/2和gzip紧缩，那么在数据传输期间会损失许多时刻。幸运的是，处理这两个问题一般很简单。我们的示例显现了对常用Apache服务器的一些调整。如果您发现自己在一个不同的体系上，只需参考服务器文档即可。