code前端网优化CSS Web性能并加快网站速度的21种方法
CSS必须经过相对复杂的管道，就像HTML和JavaScript一样，浏览器必须从服务器下载文件，然后解析并将其应用到DOM。由于优化程度很高，这个过程通常非常快——对于不基于框架的小型Web项目来说，CSS通常只占总资源消耗的一小部分。
框架打破了这种平衡。包含 JavaScript GUI 堆栈（例如 jQuery UI），并观察 CSS、JS 和 HTML 大小的增量增长。当开发人员使用强大的 8 核工作站并使用 T3 互联网时，他们通常是最后一个感到压力的人，而且没有人关心速度，而速度会随着延迟或 CPU 相关设备的出现而发生变化。
CSS 优化需要多维方法。尽管可以使用各种技术来简化手写代码，但手动检查框架的代码效率很低。在这种情况下，使用自动简化可以获得更好的结果。
以下步骤将带我们进入 CSS 优化的世界。并非其中每一项都直接适用于您的项目，但请务必牢记它们。
01。使用简写
使用下面的 margin 等简写短语可以从根本上减小 CSS 文件的大小。 Google CSS 速记 可找到许多其他形式的速记。
p { margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px; }
p { margin: 1px 2px 3px 4px; }
复制代码02。查找并删除未使用的 CSS谷歌的 Chrome 浏览器已经具备了此功能。只需转到“查看”>“开发人员”>“开发人员工具”，然后打开最近构建的“源”选项卡，然后打开命令菜单。然后选择“显示覆盖率”，在“覆盖率分析”窗口中突出显示当前页面上未使用的代码，这会让您大开眼界。
打开 Google Chrome 开发工具，选择 Conlse 旁边的Coverage，您将看到未使用的 CSS。单击相应的项目以突出显示当前页面。这将使您大开眼界，看到一个未使用的代码：
03。用更方便的方式来做
逐行导航分析可能不太方便，使用 Google Chrome 审核可以帮助快速分析和使用该方法，打开开发者工具，单击 Audits 字段单击运行审核并开始分析结果。
04。请注意这些问题
请记住，自动 CSS 分析总是会导致错误。用压缩的 CSS 文件替换未压缩的 CSS 文件后，彻底测试整个站点 - 没有人知道优化器可能会导致什么错误。
05。内联关键 CSS
由于延迟，外部样式表需要一些时间来加载 - 因此请将最关键的代码位放在 header 中。但是，请确保不要做得太过分，并记住执行维护工作的人员也必须阅读代码。
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
复制代码06。启用并行解析
@import 方便地将CSS样式添加到您的代码中。不幸的是，这些优势并不是没有代价的：因为 @import 可以嵌套，因此无法并行解析它们。一种更并行的方法是使用浏览器可以立即检索的一系列标签。
@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 支持多种单位和数字格式。它们是值得优化的目标 - 可以删除尾随和尾随零，如下面的代码片段所示。另请记住，null 始终为 null，添加维度不会为所包含的信息增加价值。
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][7] 这样的程序极大地简化了创建过程。
.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。避免具有性能要求的属性
分析表明，某些标签比其他标签更昂贵。以下解析会影响性能 - 除非必要，否则尽量不要使用它们。边界半径框阴影变换过滤器：第 n 个子位置：固定；
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][8]。维护不善的存储库包含一组包装文件和 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
作者：前端小智
链接：https://juejin.im/post/5c9a265bf265da611846b9ab
来源：掘金♾版权归作者所有。商业转载请联系作者获取授权。非商业转载请注明出处。
版权声明
本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。
