结合现代网站的复杂性和浏览器处理CSS的方式，即使是适量的CSS也会成为那些处理受限设备、网络延迟、带宽或数据限制的瓶颈。由于性能是用户体验的重要组成部分，因此必须确保在各种形状和大小的设备上提供一致、高质量的体验，这也需要优化CSS。这篇文章将解释CSS可能导致哪些类型的性能问题，以及制作不妨碍CSS的最佳实践。1.CSS是如何工作的？1.CSS块渲染当页面有可用的CSS时，无论是内联样式表还是外部样式表，浏览器都会延迟渲染，直到解析完CSS。这是因为没有CSS的页面通常无法使用。如果浏览器向您显示一个没有CSS的凌乱页面，那么片刻之后您将被带到一个带有样式、不断变化的内容和突然的视觉变化的页面，这些都会扰乱用户体验。糟糕的用户体验有个名字——闪烁无样式内容(FOUC)2.CSS可以阻止HTML解析虽然浏览器在完成解析CSS之前不会显示内容，但它会处理其余的HTML。但是，脚本会阻止解析器，除非它们被标记为延迟或异步。脚本可能会操纵页面和其余代码，因此浏览器必须知道该脚本何时执行。解析器阻止脚本：脚本如何阻止HTML解析。因为脚本会影响应用到页面的样式，如果浏览器仍在处理一些CSS，它会等到完成后再运行脚本。由于在脚本运行之前它不会继续解析文档，这意味着CSS不再只是阻止渲染——根据外部样式表的顺序，文档中的脚本也可能会停止HTML解析。解析器阻止CSS：CSS如何阻止HTML解析。为避免阻塞解析，请尽快交付CSS并以最佳顺序排列您的资产。二、观察CSS的大小1.压缩和缩小CSS建立连接下载外部样式表难免会造成延迟，但可以通过尽量减少网络传输的总字节数来加快下载速度。压缩文件可以显着提高速度，许多托管平台和CDN默认使用压缩来编码资产（或者您可以轻松配置它们）。服务器和客户端交互使用最广泛的压缩格式是Gzip。还有Brotli可能会提供更好的压缩结果，尽管它不像Gzip那样受支持。缩小CSS是删除空格和任何不必要代码的过程。输出是浏览器可以解析的较小但完全有效的代码文件，这将为您节省一些字节。Terser是一个流行的JavaScript缩小器，或者使用webpack，v4插件来创建缩小的构建文件。2.删除未使用的CSS使用CSS框架时，以未使用的CSS结束是比较常见的（除非我们只包含我们需要的组件）。随着时间的推移，大型代码库也会出现同样的问题。删除未使用的CSS通常需要手动操作。主要的挑战是它有多复杂。我们必须在所有可能的设备（包括媒体查询）上以所有可能的状态仔细检查整个站点，并执行所有可能更改样式的JavaScript函数。UnusedCSS和PurifyCSS是流行的工具，可以帮助识别不必要的样式，但我们应该将它们与仔细的视觉回归测试结合使用。这是使用CSS-in-JS的一个显着优势：每个组件中呈现的样式只需要CSS。快速CSS-in-JS的秘诀是将CSS内联到页面中或将其提取到外部CSS文件中。在JavaScript文件中传送CSS会导致它被缓慢地解析和评估。3.确定关键CSS的优先级关键CSS是一种为首屏内容提取和内联CSS的技术。在HTML文档中内联提取的样式，无需发出额外的请求来获取它们并加快渲染速度。要最大程度地减少首次渲染往返，请将首屏内容保持在14KB（压缩）以下。确定关键CSS并不完全准确，因为您需要对折叠位置（因设备屏幕尺寸而异）做出假设。这对于高度动态的站点来说可能很困难。即使它不精确，它仍然可以带来性能改进，我们可以使用Critical、CriticalCSS和Penthouse等工具自动实现。1.异步加载CSS其余的CSS（不太重要的）最好异步加载。实现这一点的方法是将链接媒体属性设置为打印：“打印”媒体类型定义了用户尝试打印页面时的样式表规则，浏览器将加载此类样式表而不会延迟页面呈现。将该样式表应用于所有媒体（即屏幕而不仅仅是打印），当样式表完成加载时，使用onload属性将媒体设置为全部。另一种选择是使用（而不是rel="stylesheet"）来实现与上述类似的模式，并将rel属性切换到样式表加载事件。使用此方法时需要考虑一些缺点。浏览器对预加载的支持仍然不是很好，因此需要一个polyfill（或使用像loadCSS这样的库）来跨浏览器应用样式表。·预加载很早就获取优先级最高的文件，可能会降低其他重要下载的优先级。如果你真的想要preload提供的高优先级抓取（在支持它的浏览器中），loadCSS的创建者建议你将它与第一种模式结合起来，像这样：2.避免在CSS文件中使用@import在中使用@importCSS文件会减慢渲染速度。首先，浏览器必须下载CSS文件以发现导入的资源，然后在渲染之前发起另一个下载请求。如果你有一个包含@importurl(imported.css)的样式表；Web瀑布看起来像这样：在一个链接元素中加载两个样式表允许并行下载：当设置动画时，浏览器通常必须重新计算它们在文档中的位置和大小，这会触发布局。例如，如果您更改元素的宽度，则其任何子元素都可能受到影响，并且页面布局的很大一部分可能会发生变化。布局几乎总是作用于整个文档，因此布局树越大，执行布局计算所需的时间就越长。动画元素时，布局和重绘必须最小化。并非所有CSS动画技术都是一样的，现代浏览器最擅长创建具有位置、比例、旋转和不透明度的高性能动画：使用transform:scale()而不是更改高度和宽度属性。要四处移动元素，请避免更改top、right、bottom或left属性，而应使用transform:translate()代替。·如果您想模糊背景，请考虑使用模糊图像并更改其不透明度。包含的CSS属性告诉浏览器该元素及其后代被认为独立于文档树（尽可能）。它将页面的子树与其余部分隔离开来。然后，浏览器可以优化页面各个部分的呈现（样式、布局和绘制操作）以提高性能。include属性在包含许多独立小部件的页面中很有用。我们可以使用它来防止每个小部件内的更改在小部件的边界框之外产生副作用。主要静态站点将不会从该策略中获得什么好处。5.使用CSS优化字体加载1.避免在字体加载过程中出现不可见的文本字体通常是需要一段时间才能加载的大文件。一些浏览器通过在字体加载之前隐藏文本（导致“不可见文本闪烁”或FOIT）来解决这个问题。在优化速度时，您需要避免“不可见的文本闪烁”并立即向使用系统字体（一种预装在他们的机器上的字体）的人显示内容。加载字体文件时，它会替换称为“FlashofUnstyledText”或FOUT的系统字体。实现此目的的一种方法是使用front-display，这是一种用于指定字体显示策略的API。使用值为swap的font-display告诉浏览器使用此字体的文本应立即使用系统字体显示。2.使用可变字体来减小文件大小可变字体可以将一种字体的许多不同变体组合到一个文件中，而不是为每种宽度、粗细或样式创建一个单独的字体文件。它们允许您使用CSS和单个@font-face引用访问给定字体文件中的所有变体。在需要多种字体变体的情况下，可变字体可以显着减小文件大小。您可以加载包含所有信息的单个文件，而不是加载常规和粗体样式及其斜体版本。Monotype进行了一项实验，通过组合12种输入字体生成8种权重，跨越三种宽度，跨越斜体和罗马字体。在单个可变字体文件中存储48种独立字体意味着文件大小减少了88%。六、不用担心CSS选择器的速度CSS选择器的结构会影响浏览器匹配它们的速度。浏览器从右到左读取选择器，因此当您使用后代选择器时。例如，nava{}，它将首先匹配页面上的每个元素，然后将nav内的元素归零。如果您使用更具体的选择器，例如，在nav元素中的每个选择器上使用.nav-link，它就不会花时间尝试匹配页面上的每个选择器。如果您考虑浏览器如何从右到左匹配选择器以及类似.containerullia{}的示例，您就会明白为什么后代选择器通常被标记为“重要”。这样的选择器似乎是一个速度问题。但是，选择器匹配性能很快。CSS声明对压缩算法非常友好，因此优化CSS选择器所需的工作通常最好花在应用程序的其他部分，从而获得更高的投资回报。CSS对于加载页面和令人愉悦的用户体验至关重要。虽然我们可能经常优先考虑其他资产（例如脚本或图像）以获得更大的影响，但我们不应该忘记CSS。通过上述策略，您将能够确保快速交付和执行。原文：https://calibreapp.com/blog/css-performance
