Web机能优化：21种优化CSS和加速网站速率的要领

想浏览更多优良文章请猛戳GitHub博客,一年百来篇优良文章等着你！

这是 Web 机能优化的第 4 篇，上一篇在下面看点击检察：

1. Web 机能优化：运用 Webpack 星散数据的准确要领
2. Web 机能优化：图片优化让网站大小削减 62%
3. Web 机能优化：缓存 React 事宜来进步机能

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 中。然则，请确保不要做得过分，记着，实行保护使命的职员也必需读取代码。

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


代码布置后能够存在的BUG没法及时晓得，预先为了处理这些BUG，花了大批的时候举行log 调试，这边顺便给人人引荐一个好用的BUG监控东西 Fundebug。

你的点赞是我延续分享好东西的动力，迎接点赞！

交换

干货系列文章汇总以下，以为不错点个Star，迎接 加群 互相进修。

https://github.com/qq44924588&＃8230;

我是小智，民众号「大迁天下」作者，对前端手艺坚持进修爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注民众号，背景复兴福利，即可看到福利，你懂的。