依然还是或者其他
依然还是或者其他

【译】优化CSS 性能的20个技巧

【译】优化CSS 性能的20个技巧

原文地址：https://www.sitepoint.com/optimizing-css-performance/

在本文中，我们研究了20种优化CSS的方法，以使CSS更快地加载,更易于使用且效率更高。

根据最新的HTTP Archive报告，在Web中，存在大量的中断网站，它们要求在80个HTTP请求中分配1700KB的数据，并需要17秒才能完全加载到移动设备上。

本文提供了一系列用于减少页面大小的建议。在本文中，我们将集中讨论CSS。诚然，CSS很少是最糟糕的罪魁祸首，一个典型的站点会在5个样式表以上使用40KB的空间。也就是说，仍然有可以进行优化的地方。通过更改我们使用CSS的方式来提高网站性能。

1.学会使用分析工具

除非你知道问题出在哪里，否则你将无法解决问题。Browser DevTools 是最好用于开始分析的工具。你可以F12启动 或者，如果使用的是macOS，可以使用cmd+alt+i。

所有浏览器会提供类似的功能，并且这些工具将在效果不佳的页面上缓慢打开！但是，最有用的选项功能包括以下…

在网络tab中，当资源下载时,显示资源的瀑布图。为了获得最佳结果，请禁用高速缓存并考虑限制到较低的网络速度。查找下载或阻止其他文件缓慢的文件。浏览器通常会在CSS和JavaScript文件下载和解析时阻止浏览器呈现。

性能Tab分析浏览器进程。当开始记录，运行诸如页面重新加载之类的活动，然后停止记录以查看结果。

  1. 过多的布局/重排操作，迫使浏览器重新计算页面元素的位置和大小。
  2. 更改像素的昂贵绘画动作。
  3. 合成动作，将页面的绘制部分放在一起以显示在屏幕上。这通常是处理器最少的操作。

基于Chrome的浏览器提供了运行Google的Lighthouse工具的审核标签。Progressive Web App开发人员经常使用它，但也会提出CSS性能建议。

在线选项

或者，使用不受设备和网络速度和功能影响的在线分析工具。大多数人都可以在全球其他地方进行测试：

  • Pingdom Website Speed Test
  • GTmetrix
  • Google PageSpeed Insights
  • WebPageTest

2.首先进行大的优化

CSS不太可能成为性能问题的直接原因。但是，它可能会加载繁重的资源，我们对其进行优化。如：

  • 在服务器上激活HTTP / 2和GZIP压缩
  • 使用内容分发网络（CDN）来增加同时HTTP连接的数量并将文件复制到世界其他地方
  • 删除未使用的文件。

图片通常是页面变慢的最大原因，但是许多站点无法有效地优化：

  1. 调整位图图像的大小。入门级智能手机将拍摄百万像素的图像，这些图像无法在最大的高清屏幕上完整显示。很少有站点需要宽度超过1600像素的图像。
  2. 确保使用适当的文件格式。通常，JPG最适合照片，SVG最适合矢量图像，PNG最适合其他所有功能。你可以尝试找到最佳类型。
  3. 使用图像工具通过去除元数据和增加压缩系数来减小文件大小。

3. 用CSS效果替换图片

很少需要将背景图像用于边框，阴影，圆角，渐变和某些几何形状。使用CSS代码定义“图像”使用的带宽要少得多，以后更容易修改或设置动画。

4. 删除不必要的字体

Google Fonts服务可轻松将自定义字体添加到任何页面。不幸的是，一两行代码会检索数百千字节的字体数据。建议：

  1. 只使用您需要的字体。
  2. 仅加载所需的粗细和样式-例如，罗马，400粗细，无斜体。
  3. 尽可能限制字符集。Google字体允许您通过&text=在字体URL中添加值来选择某些字符，例如fonts.googleapis.com/css?family=Open+Sans&text=SitePon在Open Sans中显示“ SitePoint”。
  4. 考虑可变字体，该字体通过插值定义多个粗细和样式，因此文件较小。目前，支持仅限于Chrome，Edge和Safari的某些版本，但应会迅速增长。请参见如何使用可变字体。
  5. 考虑操作系统字体。您的500Kb网络字体可能是商标上的，但是如果您切换到常用的Helvetica或Arial，有人会注意到吗？许多站点使用自定义Web字体，因此标准的OS字体比以前少了很多！

5. 避免 @import

该@import规则允许将任何CSS文件包含在另一个文件中。例如：

/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");

这似乎是加载较小的组件和字体的合理方法。但它不是。@import规则可以嵌套，因此浏览器必须依次加载和解析每个文件。

HTML中的多个标签将并行加载CSS文件，这将大大提高效率-特别是在使用HTTP / 2时：

也就是说，可能会有更可取的选择……

6. 串联并缩小

大多数构建工具允许您将所有部分文件合并到一个大型CSS文件中，该文件中已删除了不必要的空格，注释和字符。

使用HTTP / 2进行连接和传输请求时，连接的必要性降低。在某些情况下，如果您的CSS资产较小且需要定期更改，则单独的文件可能会有所帮助。但是，大多数站点很可能会受益于发送由浏览器立即缓存的单个文件。

启用GZIP后，缩小可能不会带来可观的收益。就是说，没有真正的负面影响。

最后，您可以考虑一个在声明中一致地对属性进行排序的构建过程。当在整个文件中使用常用的字符串时，GZIP可以最大程度地提高压缩率。

7. 使用现代的布局技术

多年来，有必要使用CSS float来布局页面。该技术是骇客。它需要大量代码和边距/填充调整，以确保布局正常工作。即使这样，除非添加媒体查询，否则浮动字体会在较小的屏幕尺寸下中断。

现代替代品：

  1. 一维布局的CSS Flexbox，可以根据每个块的宽度（可以）包装到下一行。Flexbox是菜单，图像画廊，卡片等的理想选择。
  2. 具有显式行和列的二维布局的CSS Grid。网格是页面布局的理想选择。

8. 减少CSS代码

最可靠，最快的代码是您永远不需要编写的代码！样式表越小，下载和解析速度越快。

所有开发人员的初衷都是善意的，但是CSS会随着功能数量的增加而逐渐膨胀。保留旧的，不必要的代码比删除它和冒着破坏某些东西的风险要容易得多。需要考虑的一些建议：

  • 警惕大型CSS框架。您不太可能使用大部分样式，因此仅在需要时添加模块。
  • 将CSS组织成较小的文件（部分），职责明确。如果CSS在中明确定义，则删除轮播小部件会更容易widgets/_carousel.css。
  • 考虑使用诸如BEM之类的命名方法来帮助开发分立组件。
  • 避免深层嵌套的Sass /预处理器声明。扩展的代码可能会变得异常大。
  • 避免使用!important覆盖级联。
  • 避免在HTML中使用内联样式。

诸如UnCSS的工具可以通过分析HTML来帮助删除多余的代码，但请注意由JavaScript交互引起的CSS状态。

9. 紧紧抓住级联

CSS-in-JS的兴起使开发人员可以避免使用CSS全局命名空间。通常，随机生成的类名是在构建时创建的，因此组件之间不会发生冲突。

如果CSS-in-JS改善了您的生活，请继续使用它。但是，值得了解CSS级联的好处，而不是在每个项目上都反对它。例如，您可以设置默认字体，颜色，大小，表格和表单字段，这些字体普遍应用于单个位置的每个元素。几乎不需要在每个组件中声明每种样式。

10. 简化选择器

即使最复杂的CSS选择器也要花费几毫秒的时间来解析，但是降低复杂度将减少文件大小并有助于浏览器解析。你真的需要这种选择器吗？

body > main.main > section.first h2:nth-of-type(odd) + p::first-line > a[href$=".pdf"]

再次提醒您注意预处理器（如Sass）中的深层嵌套，在这种情况下可能会无意间创建复杂的选择器。

11. 警惕昂贵的属性

一些属性比其他属性渲染速度慢。为了增加灵活性，请尝试在所有元素上放置阴影框！

*, ::before, ::after {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

浏览器的性能会有所不同，但是通常，任何会导致在绘制之前重新计算的内容都会在性能方面造成更高的成本：

  • border-radius
  • box-shadow
  • opacity
  • transform
  • filter
  • position: fixed

12. 采用CSS动画

原生CSS CSS transitions和 animations总是比修改相同属性的JavaScript效果要快。CSS动画在IE9及更低版本的旧版浏览器中将无法使用，但是这些用户永远不会知道自己缺少什么。

也就是说，请避免动画。微妙的效果可以增强用户体验，而不会对性能产生不利影响。过多的动画可能会降低浏览器的速度并导致某些用户晕车。

13. 避免使用动画中昂贵的属性

对元素的尺寸或位置进行动画处理可能会导致整个页面在每一帧上重新布局。如果动画仅影响合成阶段，则可以提高性能。最有效的动画使用：

  • opacity 和/或
  • transform 平移（移动），缩放或旋转元素（该元素使用的原始空间不会改变）。

浏览器通常使用硬件加速的GPU渲染这些效果。如果都不理想，请考虑将元素从页面流中取出，position: absolute以便可以在其自己的层中对其进行动画处理。

14. 指出将动画的元素

该will-change 属性特性允许CSS作者指明的元素将被动画这样浏览器就可以提前做好性能优化。例如，声明一个元素将被transform应用：

.myelement {
  will-change: transform;
}

可以定义任意多个逗号分隔的属性。然而：

  • 使用will-change作为最后的手段来解决性能问题
  • 不要将其应用于太多元素
  • 给它足够的时间来工作：也就是说，不要立即开始动画。

15. 采用SVG图片

可缩放矢量图形（SVG）通常用于徽标，图表，图标和更简单的图表。SVG并未定义JPG和PNG位图之类的每个像素的颜色，而是以XML定义了诸如线条，矩形和圆形之类的形状。例如：

较简单的SVG比等效的位图要小，并且可以无限缩放而不会丢失定义。

SVG可以直接嵌入CSS代码中作为背景图像。这对于较小的可重复使用的图标非常理想，并且避免了其他HTTP请求。例如：

.mysvgbackground {
  background: url('data:image/svg+xml;utf8,') center center no-repeat;
}

16. CSS样式的SVG

通常，SVG直接嵌入HTML文档中：

这会将SVG节点直接添加到DOM中。因此，可以使用CSS来应用所有SVG样式属性：

circle {
  stroke-width: 1em;
}

.mysvg {
  stroke-width: 5px;
  stroke: #f00;
  fill: #ff0;
}

嵌入式SVG代码的数量减少了，并且CSS样式可以根据需要重新使用或动画化。

请注意，在标签内使用SVG 或将CSS用作背景图片意味着它们与DOM分开，并且CSS样式无效。

17. 避免使用Base64位图图像

可以将标准位图JPG，PNG和GIF编码为数据URI中的base64字符串。例如：

.myimg {
  background-image: url('data:image/png;base64,ABCDEFetc+etc+etc');
}

不幸的是：

  • base64编码通常比其二进制等效符号大30％
  • 浏览器必须先解析字符串，然后才能使用
  • 更改图像会使整个（缓存的）CSS文件无效。

尽管发出的HTTP请求较少，但很少提供明显的好处-特别是通过HTTP / 2连接。通常，除非图像不太可能经常更改并且生成的base64字符串不太可能超过数百个字符，否则请避免内联位图。

18. 考虑关键的CSS

使用Google页面分析工具的用户通常会看到“内联关键CSS”或“减少渲染阻止样式表”的建议。加载CSS文件会阻止渲染，因此可以通过以下步骤提高性能：

  1. 提取用于在折叠上方渲染元素的样式。CriticalCSS之类的工具可以提供帮助。
  2. 将它们添加到