Web 性能优化：21种优化CSS和加快网站速度的方法
这是 Web 性能优化的第 4 篇，上一篇在下面看点击查看：
Web 性能优化：使用 Webpack 分离数据的正确方法
Web 性能优化：图片优化让网站大小减少 62%
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后就开始分析结果。
顺便给大家推荐一个裙，它的前面是 537，中间是631，最后就是 707。想要学习前台的小伙伴可以加入我们一起学习，互相帮助。群里每天晚上都有大神免费直播上课，假如不是想学习的小伙伴就不要加啦。
04. 注意这些问题
请记住，对 CSS 的自动分析总是会导致错误。用压缩后的 CSS 文件替换 未压缩CSS文件之后，对整个网站进行彻底的测试——没有人知道优化器会导致什么错误。
05.内联关键 CSS
加载外部样式表需要花费时间，这是因为推迟造成的——因而，可以把最关键的代码位放在head中。但是，请确保不要做得过火，记住，执行维护任务的人员也必需读取代码。
<html>
??<head>
????<style>
??????.blue{color:blue;}
????</style>
????</head>
??<body>
????<div?class=”blue”>
??????Hello,?world!
????</div>
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?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. 打破缓存
设计人员通常不喜欢缓存，由于他们担心浏览器会缓存上次的样式表。处理这个问题的一个简单方法是包含带有文件名的标记。遗憾的是，因为少量代理商拒绝缓存具备“动态”路径的文件，此步骤所附带的代码中概述的方案并不适用于所有地方。
<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
代码部署后可能存在的BUG没法实时知道，事后为理解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具?Fundebug。
你的点赞是我持续分享好东西的动力，欢迎点赞！
原文：Web 性能优化：21 种优化 CSS 和加快网站速度的方法
作者：前台小智
原文地址：https://segmentfault.com/a/1190000018533393
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Web 性能优化：21种优化CSS和加快网站速度的方法
