大家好！有很多关于 CSS 样式的提示和技巧。但不在本文中。今天我想谈谈如何更有效地使用 CSS，让你的平台更快！  1. 简单的选择器 CSS 有大量灵活的编码选项，您可以使用这些选项来定位 HTML 元素以进行样式设置。多年来，专家建议开发人员编写简单的选择器，以减少浏览器的负载并保持代码简洁明了。即使是最复杂的 CSS 选择器也需要几毫秒的时间来解析，但降低复杂性会减小文件大小并有助于浏览器解析 不要：   main > div.blog-section + article > * { /* Code here */ } 做：   .hero-image { /* Code here */ }  2.关键内联CSS 您可以内联关键的 CSS 规则。这通过以下方式提高了性能： 识别首屏元素使用的基本样式（页面加载时可见的样式） 将关键的 CSS 内联到 中的 标记中 <head> <style> 异步加载剩余的 CSS 以避免渲染阻塞。这可以通过以浏览器赋予较低优先级的“打印”样式加载样式表来完成。页面加载后，JavaScript 然后将其切换为“全部”媒体样式。   <style> /* critical styles */ body { font-family: sans-serif; color: #111; } </style>  <link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'"> <noscript> <link rel="stylesheet" href="/css/main.css"> </noscript>  3.避免 @import    at 规则允许任何 CSS 文件包含在另一个文件中。这似乎是加载较小组件和字体的合理方式。但事实并非如此。 @import   规则可以嵌套，因此浏览器必须依次加载和解析每个文件。 @import  HTML 中的多个 标记将并行加载 CSS 文件，这非常有效——尤其是在使用 HTTP/2 时。 <link> 不要：   /* main.css */ @import url("style1.css"); @import url("style2.css"); @import url("style3.css"); 做：   <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="carousel.css">  4. 预加载 CSS 文件 标签提供了一个可选的 preload 属性，可以立即开始下载，而不是等待 HTML 中的真正引用。 <link>    <link rel="preload" href="/css/main.css" as="style" />   <link rel="stylesheet" href="/css/main.css" />  5.渐进式渲染 不是使用单个站点范围的 CSS 文件，而是一种为单独的组件定义单独的样式表的技术。每个都在 HTML 中引用组件之前立即加载。 渐进式渲染 每个 仍然会阻塞渲染，但时间更短，因为文件更小。该页面可以更快地使用，因为每个组件都是按顺序呈现的；可以在加载剩余内容的同时查看页面顶部。 <link>   <head>  <link rel='stylesheet' href='base.css' /> </head> <body>  <link rel='stylesheet' href='header.css' /> <header>...</header>  <link rel='stylesheet' href='content.css' /> <main>  <link rel='stylesheet' href='form.css' /> <form>...</form> </main>  <link rel='stylesheet' href='footer.css' /> <footer>...</footer> </body>  6.使用媒体查询渲染 单个连接和缩小将使大多数站点受益，但需要大量较大屏幕样式的站点可以拆分 CSS 文件并使用媒体查询加载。    <link rel="stylesheet" href="core.css">  <link rel="stylesheet" media="(min-width: 40em)" href="40em.css">  <link rel="stylesheet" media="(min-width: 80em)" href="80em.css">  7. 采用 SVG 图像 可缩放矢量图形 (SVG) 通常用于徽标、图表、图标和更简单的图表。 SVG 不是像 JPG 和 PNG 位图那样定义每个像素的颜色，而是在 XML 中定义线条、矩形和圆形等形状。 更简单的 SVG 比同等位图小，可以无限缩放而不会丢失清晰度。 SVG 可以直接内联在 CSS 代码中作为背景图像。这对于较小的、可重复使用的图标来说是理想的，并且可以避免额外的 HTTP 请求。  SVG 示例：   <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /> <svg>  SVG 使用示例：   .mysvgbackground { background: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"><circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /></svg>') center center no-repeat; }  8. 使用 CSS 样式化 SVG  SVG 可以直接嵌入到 HTML 文档中。这会将 SVG 节点直接添加到 DOM 中。因此，所有 SVG 样式属性都可以使用 CSS 应用。  DOM 中的 SVG：   <body> <svg class="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" /> <svg> </body>  SVG 样式：   circle { stroke-width: 1em; } .mysvg { stroke-width: 5px; stroke: #f00; fill: #ff0; } 嵌入的 SVG 代码量减少了，CSS 样式可以根据需要重用或动画。 请注意，在 标记中使用 SVG 或作为 CSS 背景图像意味着它们与 DOM 分离，并且 CSS 样式将不起作用。 <img>  9. 避免 Base64 编码 您可以将图像编码为 base64 字符串，您可以将其用作 HTML  标记和 CSS 背景中的数据 URI。 <img> 这会减少 HTTP 请求的数量，但会损害 CSS 性能：  base64 字符串可以比其二进制等效字符串大 30%。 浏览器必须先解码字符串，然后才能使用图像，并且 更改一个图像像素会使整个 CSS 文件无效。 仅当您使用非常小的、不经常更改的图像且生成的字符串不明显长于 URL 时，才考虑使用 base64 编码。 不要：   .background { background-image: url('data:image/jpg;base64,ABC123...'); } 做：   .svgbackground { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><circle cx="300" cy="300" r="150" stroke-width="3" stroke="#f00" fill="#ff0" /></svg>'); }  10. 简短提示 用 CSS 效果替换图像 - 使用 CSS 代码定义“图像”使用的带宽要少得多，并且以后更容易修改或制作动画。 使用现代布局技术 -  和  。 Flexbox Grid 使用 CSS 动画 - 和 总是比 JavaScript 快。 过渡 动画 避免昂贵的属性——一些 CSS 比其他的需要更多的处理。   border-radius   box-shadow   text-shadow   opacity   transform   filter   position: fixed   backdrop-filter   background-blend-mode  PS 感谢阅读！ 更多关于前端开发的文章： 提高 React 性能的 9 大技巧 一篇文章中的一些 HTML、CSS 小秘密 最鲜为人知的 HTML 5 和 CSS 3 技巧和最佳实践 JavaScript 最佳实践的 12 个鲜为人知的技巧

Mozilla

Progressive

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Programming

2022 - HackerNoon Contributor of the Year - React

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - React

Nominated for 2022 - HackerNoon Contributor of the Year - Programming

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - Software Developer of the Year

該音頻是用故事的原始語言製作的！

太長; 讀書

前 10 个 CSS 性能提示

前 10 个 CSS 性能提示

About Author

註釋

標籤

这篇文章刊登在

Related Stories

Telegram：加密岛通往大陆的桥梁

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

架构师指南：构建 AI/ML 数据湖参考架构

从论坛到信息流：社交媒体算法如何塑造数字互动

Telegram：加密岛通往大陆的桥梁

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

架构师指南：构建 AI/ML 数据湖参考架构

从论坛到信息流：社交媒体算法如何塑造数字互动

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps