如何提高CSS性能?（css性能优化技巧）
wxin55 2024-11-08 14:42 10 浏览 0 评论
云和安全管理服务专家新钛云服 魏建民翻译
结合现代网站的复杂性和浏览器处理 CSS 的方式，即使是适量的 CSS 也可能成为处理受限设备、网络延迟、带宽或数据限制的人的瓶颈。
由于性能是用户体验的重要组成部分，因此必须确保跨各种形状和大小的设备提供一致、高质量的体验，这也需要优化 CSS。
这篇文章将介绍 CSS 会导致哪些类型的性能问题，以及制作不会妨碍人们的 CSS 的最佳实践。
一、CSS 是如何工作的？
1、CSS 块渲染
当页面有可用的 CSS 时，无论是内联样式表还是外部样式表，浏览器都会延迟呈现，直到 CSS 被解析。这是因为没有 CSS 的页面通常无法使用。
如果浏览器向你展示了一个没有 CSS 的凌乱页面，那么片刻之后就会进入一个有样式的页面，不断变化的内容和突然的视觉变化会让用户体验变得混乱。糟糕的用户体验有一个名字——无样式内容闪现（FOUC）
2、CSS 可以阻止 HTML 解析
尽管浏览器在解析完 CSS 之前不会显示内容，但它会处理 HTML 的其余部分。但是，脚本会阻止解析器，除非它们被标记为defer或async。脚本可能会操纵页面和其余代码，因此浏览器必须注意该脚本何时执行。
解析器阻塞脚本：脚本如何阻塞 HTML 解析。
因为脚本会影响应用到页面的样式，如果浏览器仍在处理一些 CSS，它会等到它完成后再运行脚本。由于在脚本运行之前它不会继续解析文档，这意味着 CSS 不再只是阻止渲染——根据外部样式表的顺序，文档中的脚本也可能会停止 HTML 解析。
Parser Blocking 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 将导致它被解析和评估缓慢。
三、优先考虑关键 CSS
关键CSS是一种为首屏内容提取和内联CSS的技术。在HTML文档的<head>中内联提取的样式，无需发出额外的请求来获取这些样式并加快渲染速度。
为了最大限度地减少首次渲染的往返次数，请将首屏内容保持在14 KB（压缩）以下。
确定关键 CSS 并不完全准确，因为您需要对折叠位置（因设备屏幕尺寸而异）做出假设。这对于高度动态的站点来说可能很困难。即使不精确，它仍然可以带来性能改进，我们可以使用Critical、CriticalCSS和Penthouse等工具将其自动化。
1、异步加载 CSS
CSS的其余部分（不太重要的部分）最好异步加载。实现这一点的方法是将链接媒体属性设置为print：
“打印”媒体类型定义了用户尝试打印页面时的样式表规则，浏览器将加载此类样式表而不会延迟页面渲染。将该样式表应用于所有媒体（即屏幕而不仅仅是打印）使用onload属性在样式表完成加载时将媒体设置为全部。
另一种选择是使用<link rel="preload">（而不是rel="stylesheet"）来实现与上述类似的模式，并在加载事件时将rel属性切换到样式表。使用这种方法时需要考虑一些缺点。
· 浏览器对预加载的支持仍然不是很好，因此需要一个 polyfill（或使用诸如loadCSS 之类的库）来跨浏览器应用样式表。
· 预加载很早就以最高优先级获取文件，可能会降低其他重要下载的优先级。
如果你确实想要preload提供的高优先级获取（在支持它的浏览器中），loadCSS 的创建者建议你将它与第一个模式结合起来，像这样：
2、避免在 CSS 文件中使用 @import
在 CSS 文件中使用@import会减慢渲染速度。首先，浏览器必须下载 CSS 文件以发现导入的资源，然后在渲染之前发起另一个下载请求。
如果你有一个包含@import url(imported.css) 的样式表；网络瀑布如下所示：
在链接元素中加载两个样式表允许并行下载：
四、使用高效的 CSS 动画
当您为页面上的元素设置动画时，浏览器通常必须重新计算它们在文档中的位置和大小，这会触发布局。例如，如果您更改元素的宽度，则其任何子元素都可能受到影响，并且页面布局的很大一部分可能会更改。布局几乎总是作用于整个文档，所以布局树越大，它执行布局计算的时间就越长。
为元素设置动画时，必须尽量减少布局和重绘。并非所有 CSS 动画技术都是平等的，现代浏览器可以最好地创建具有位置、缩放、旋转和不透明度的高性能动画：
· 不要更改高度和宽度属性，而是使用transform: scale()。
· 四处移动元素，请避免更改top、right、bottom或left属性并使用transform: translate()代替。
· 如果要模糊背景，请考虑使用模糊图像并更改其不透明度。
在包含 CSS属性告诉浏览器的元素及其后代被认为是独立于文档树（尽可能）。它将页面的子树与其余部分隔离开来。然后浏览器可以优化页面独立部分的渲染（样式、布局和绘制操作）以提高性能。
该包含属性是在包含许多独立的小部件页面有用。我们可以使用它来防止每个小部件内的更改在小部件的边界框之外产生副作用。一个主要是静态的站点不会从这个策略中获得什么好处。
五、使用 CSS 优化字体加载
1、在字体加载期间避免不可见的文本
字体通常是需要一段时间才能加载的大文件。一些浏览器会在字体加载之前隐藏文本（导致“不可见文本闪烁”或 FOIT）来解决这个问题。在优化速度时，您需要避免“不可见文本闪烁”，并立即使用系统字体（一种预装在他们机器上的字体）向人们显示内容。加载字体文件后，它将替换称为“无样式文本闪烁”或 FOUT 的系统字体。
实现此目的的一种方法是使用front-display 一种用于指定字体显示策略的API。使用带有值swap的font-display告诉浏览器使用该字体的文本应该立即使用系统字体显示。
2、使用可变字体来减小文件大小
可变字体使字体的许多不同变体能够合并到一个文件中，而不是为每个宽度、粗细或样式都设置一个单独的字体文件。它们允许您使用 CSS 和单个@font-face引用访问给定字体文件中的所有变体。
在需要多种字体变体的情况下，可变字体可以显着减小文件大小。您可以加载包含所有信息的单个文件，而不是加载常规和粗体样式及其斜体版本。
Monotype 进行了一项实验，通过组合 12 种输入字体来生成 8 个权重，跨越三种宽度，跨越斜体和罗马风格。在单个可变字体文件中存储 48 种独立字体意味着文件大小减少了 88%。
六、不用担心 CSS 选择器的速度
CSS 选择器的结构会影响浏览器匹配它们的速度。浏览器从右到左读取选择器，因此当您使用后代选择器时。例如，nav a {}，它将首先匹配页面上的每个<a>元素，然后在nav内部的元素上归零。如果您使用更具体的选择器，例如，在 nav 元素内的每个<a>上使用.nav-link，它就不会花时间尝试匹配页面上的每个<a>。
如果您考虑浏览器如何从右到左匹配选择器以及.container ul li a { } 之类的示例，您就会明白为什么后代选择器通常被标记为“重要”的原因。
这样的选择器似乎是一个速度问题。但是，选择器匹配性能很快。CSS 声明对压缩算法非常友好，因此优化 CSS 选择器所需的工作通常最好花在应用程序的其他部分上，从而获得更高的投资回报。
CSS 对于加载页面和令人愉悦的用户体验至关重要。虽然我们通常可能会优先考虑其他资产（例如脚本或图像）的影响更大，但我们不应该忘记 CSS。通过上述策略，您将能够确保快速交付和执行。
原文：https://calibreapp.com/blog/css-performance
相关推荐
- 黑客工具sqlmap，带你了解什么师sql注入
-
1、sqlmap介绍sqlmap是一款支持MySQL,Oracle,PostgreSQL,MicrosoftSQLServer,MicrosoftAccess,IBMDB2,SQL...
- Web网络安全漏洞分析，SQL注入原理详解
-
本文主要为大家介绍了Web网络安全漏洞分析SQL注入的原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪一、SQL注入的基础1.1介绍SQL注入SQL注入就是指We...
- sql注入、文件上传、文件包含（sql注入数据提交的类型）
-
在owasp年度top10安全问题中，注入高居榜首。SQL注入攻击指的是通过构建特殊的输入作为参数传入Web应用程序，而这些输入大都是SQL语法里的一些组合，通过执行SQL语句进而执行攻击者所要...
- 比较常见类型漏洞讲解(三):SQL注入(一)
-
比较常见类型漏洞讲解（一）比较常见类型漏洞讲解（二）：文件上传这里继续介绍比较容易找到的不同类型的漏洞。演示准备目标主机：Metasploitable2攻击目标：目标主机的dvwa系统攻击机：Kali...
- 警惕SQL注入:检测与防御的实战指南
-
在当今数字化的时代，软件系统的安全性至关重要。SQL注入作为一种常见且危害巨大的安全漏洞，给企业和用户带来了潜在的风险。对于测试人员来说，掌握发现和解决SQL注入漏洞的方法是保障软件质量和安全的...
- SQL注入的原理和危害（sql注入的原理及危害）
-
什么是SQL注入SQL注入是发生在web端的安全漏洞，实现非法操作，欺骗服务器执行非法查询，他的危害有会恶意获取，甚至篡改数据库信息，绕过登录验证，原理是针对程序员编写时的疏忽，通过执行SQL语句，实...
- 科普基础 | 最全的SQL注入总结（sql注入是干嘛的）
-
0x01SQL注入原理当客户端提交的数据未作处理或转义直接带入数据库，就造成了sql注入。攻击者通过构造不同的sql语句来实现对数据库的任意操作。0x02SQL注入的分类按变量类型分：数字型和字符...
- 产品经理必备IT技术知识之“什么是SQL注入攻击?
-
不少优秀的产品经理都会写一些简单的SQL语句进行数据查询的操作，但是会写SQL语句不代表能写好SQL语句。SQL语句写得不好，就会引发SQL注入攻击。SQL注入攻击是Web开发中最常见的一种安全问题，...
- 通过sql注入获取用户名和密码（联通光猫超级用户名超级密码获取）
-
1.啥是sql注入sql注入是一种通过操作输入来修改后台sql语句以达到利用代码进行攻击目的的技术2.生成sql注入漏洞的原因总结一句话:对前台传过来的参数没有进行有效的过滤,太相信前端传过来的参数...
- 什么是SQL注入攻击(SQL Injection)
-
1，定义：在构建数据库SQL语句时，攻击者在参数请求中注入恶意的SQL代码，并在在数据库中执行，操控数据库执行意图之外的操作。2，目的：窃取数据、修改数据、删除数据、绕过身份验证、权限提升，执...
- 浅谈SQL注入（sql注入的理解）
-
在关于SQL注入，百度的解释是这样的：SQL注入即是指web应用程序对用户输入数据的合法性没有判断或过滤不严，攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句，在管理员不知...
- sql注入（sql注入攻击是什么意思）
-
SQL注入分类1.数字型注入当输入的参数为整型时，则有可能存在数字型注入漏洞。假设存在一条URL为：HTTP://www.aaa.com/test.php?id=1可以对后台的SQL语句猜...
- SQL注入详解（sql注入总结）
-
现在大多数系统都使用B/S架构，出于安全考虑需要过滤从页面传递过来的字符。通常，用户可以通过以下接口调用数据库的内容：URL地址栏、登陆界面、留言板、搜索框等。这往往会出现安全隐患，为了更好的保护数据...
- 什么是sql注入，这些坑得避开（什么是sql注入,编程时如何避免）
-
1、sql注入是什么sql注入就是用户通过输入的参数，拼接到原先的sql中，成为sql的一部分，从而影响sql的功能和执行结果2、sql注入破坏力-小兵破坏力比如原先sql如下s...
- 金母鸡量化教学场:pandas—数据挖掘的Python库
-
如果你想充分发挥Python的强大作用，如果你想成为一名好的Python量化师，你应该先学好Pandas。今天就来了解什么是Pandas。与numpy易于处理同种类型数据不同，pandas更加的适合...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- hive行转列函数 (63)
- sourcemap文件是什么 (54)
- display none 隐藏后怎么显示 (56)
- 共享锁和排他锁的区别 (51)
- httpservletrequest 获取参数 (64)
- jstl包 (64)
- qsharedmemory (50)
- watch computed (53)
- java中switch (68)
- date.now (55)
- git-bash (56)
- 盒子垂直居中 (68)
- npm是什么命令 (62)
- python中+=代表什么 (70)
- fsimage (51)
- nginx break (61)
- mysql分区表的优缺点 (53)
- centos7切换到图形界面 (55)
- 前端深拷贝 (62)
- kmp模式匹配算法 (57)
- jsjson字符串转json对象 (53)
- jdbc connection (61)
- javascript字符串转换为数字 (54)
- mybatis 使用 (73)
- 安装mysql数据库 (55)