css性能优化

小土工
82 阅读3分钟
  1. 在开始优化 CSS 之前，你应该回答一个问题：“我需要优化什么？”
  2. 为了优化css界面, 可以这样操作:
  • 删除不必要的样式
  • 将 CSS 拆分为独立模块: CSS 模块化可以延迟加载在页面加载阶段非必要的 CSS，缩短初始 CSS 的阻塞和加载时间。最简单的方法是将 CSS 拆分为独立的文件，并仅加载所需内容：
<!-- 加载和解析 styles.css 会阻塞渲染 -->
<link rel="stylesheet" href="styles.css" />

<!-- 加载和解析 print.css 不会阻塞渲染 -->
<link rel="stylesheet" href="print.css" media="print" />

<!-- 在大屏幕上，加载和解析 mobile.css 不会阻塞渲染 -->
<link
  rel="stylesheet"
  href="mobile.css"
  media="screen and (max-width: 480px)" />

当浏览器看到只需要在特定情况下应用的样式表时，它仍然会下载样式表，但不会阻塞渲染。通过将 CSS 拆分为多个文件，主要的渲染阻塞文件（在本例中为 styles.css）会小得多，从而减少渲染阻塞的时间。

  • 最小化和压缩你的 CSS：最小化包括在代码进入生产环境后，在文件中删除仅为了人类可读性而存在的所有空格。通过对 CSS 进行最小化，你可以大大减少加载时间。
  • 简化选择器：们经常编写比应用所需样式更复杂的选择器。这不仅会增加文件大小，还会增加解析这些选择器的时间。例如：
/* 非常具体的选择器 */
body div#main-content article.post h2.headline {
  font-size: 24px;
}

/* 你可能只需要这个 */
.headline {
  font-size: 24px;
}
  • 不要将样式应用于不需要的元素：常见的错误是使用通用选择器将样式应用于所有元素，或者至少应用于比实际需要的元素更多的元素。这种类型的样式会对性能产生负面影响，特别是在较大的站点上。
/* 选择 <body> 元素内的所有元素 */
body * {
  font-size: 14px;
  display: flex;
}

请记住，许多属性（例如 font-size）会从其父元素继承其值，因此你不需要在所有地方应用它们。而且功能强大的工具（如弹性盒子）需要谨慎使用。在所有地方都使用它们可能会导致各种意外行为。

  • 使用 CSS 精灵图减少图像相关的 HTTP 请求：CSS 精灵图 是一种技术，它将你希望在站点上使用的多个小图像（例如图标）放入单个图像文件中，然后使用不同的 background-position 值在不同的位置显示图像的一部分。这可以大大减少获取图像所需的 HTTP 请求数量。
  • 预加载重要资源：你可以使用 rel="preload" 将 <link> 元素转换为预加载器，用于关键资源，包括 CSS 文件、字体和图片：
<link rel="preload" href="style.css" as="style" />

<link
  rel="preload"
  href="ComicSans.woff2"
  as="font"
  type="font/woff2"
  crossorigin />

<link
  rel="preload"
  href="bg-image-wide.png"
  as="image"
  media="(min-width: 601px)" />

使用 preload，浏览器会尽快获取引用的资源，并将其存储在浏览器缓存中，以便在后续代码中引用时可以更快地使用它们。为了让用户体验尽可能流畅，我们应提前加载页面加载初期用户会遇到的高优先级资源。请注意，你还可以使用 media 属性创建响应式的预加载器。

  • 尽可能少使用标签选择器: 浏览器在渲染时, 遇到标签选择器会将所有的相同标签都查找一遍, 然后再找对应的父类标签
  • 改善字体性能: 请记住，字体仅在使用 font-family 属性应用于元素时才会加载，而不是在首次使用 @font-face at 规则引用时加载：字体文件有几兆, 太大了, 影响性能,
/* 字体在此处没有加载 */
@font-face {
  font-family: "Open Sans";
  src: url("OpenSans-Regular-webfont.woff2") format("woff2");
}

h1,
h2,
h3 {
  /* 字体实际上在此处加载 */
  font-family: "Open Sans";
}

因此，使用 rel="preload" 来提前加载重要的字体，这样它们在实际需要时可以更快地可用：

<link
  rel="preload"
  href="OpenSans-Regular-webfont.woff2"
  as="font"
  type="font/woff2"
  crossorigin />
avatar
文章
阅读
粉丝