css加粗字体(css加粗标签)

作者:匿名来源:前端大全

结合现代网站的复杂性和浏览器处理CSS的方式，即使是适量的CSS也会成为设备有限、网络延迟、带宽或数据的瓶颈。因为性能是用户体验的重要组成部分，所以有必要确保在各种形状和大小的设备上获得一致的高质量体验，这也需要优化您的CSS。

本文将讨论CSS导致的性能问题，以及如何制作不妨碍人们使用的CSS的最佳实践。

目录

CSS是如何工作的？ 注意CSS的大小 优先考虑关键的CSS 使用高效的CSS动画 使用CSS优化字体加载 不用担心CSS选择器的速度问题。

CSS是如何工作的？

CSS阻止呈现

当CSS可用于页面时，无论是内联样式表还是外部样式表，浏览器都会延迟呈现，直到CSS被解析。这是因为没有CSS的页面通常是不可用的。如果浏览器显示给你的是一个没有CSS的杂乱页面，过一会儿又弹出一个有风格的页面，不断变化的内容和突然的视觉变化会让用户体验混乱。这种糟糕的用户体验有一个名字——无风格内容闪现(FOUC)。

CSS可以阻止HTML的解析

虽然浏览器在CSS解析完成之前不会显示内容，但它会处理HTML的其余部分。但是，脚本会阻塞解析器，除非它们被标记为defer或async。脚本可能会操纵页面和其余代码，因此浏览器必须注意脚本的执行时间。

脚本屏蔽解析器:脚本如何屏蔽HTML解析？

因为脚本可以影响应用于页面的样式，所以如果浏览器仍在处理一些CSS，它会等到处理完成后再运行脚本。因为在脚本运行之前文档不会被解析，这意味着CSS不再只是停止渲染——根据文档中外部样式表和脚本的顺序，它还可能停止HTML解析。

解析器阻塞CSS:CSS如何阻塞HTML解析。

为了避免阻塞解析，请尽快交付CSS，并以最佳顺序安排您的资源。

注意CSS的大小压缩和最小化CSS

建立下载外部样式表的连接将不可避免地导致延迟，但是您可以通过最小化网络上传输的总字节数来加快下载速度。

压缩文件可以显著提高速度。很多托管平台和cdn都会默认压缩编码资产(或者你也可以轻松配置)。服务器-客户端交互中最广泛使用的压缩格式是Gzip。还有Brotli，可以提供更好的压缩，虽然不像Gzip那样支持。

最小化是去除空白色和任何不必要的代码的过程。输出是一个较小但完全有效的代码文件，浏览器可以解析，这将为您节省一些字节。Terser是一个流行的JavaScript压缩工具。如果您使用webpack，v4包含一个插件来创建缩小的构建文件。

微调：删除未使用的CSS

在使用CSS框架时，以未使用的CSS结束是相对常见的(除非我们只包含我们需要的组件)。同样的问题也出现在大型代码库的长期增长中。

移除未使用的CSS通常是手动完成的。主要的挑战是它有多复杂。我们必须在所有可能的状态和所有可能的设备上仔细审计整个网站(以涵盖媒体查询)，并执行所有可能改变风格的JavaScript函数。UnusedCSS和PurifyCSS是流行的工具，可以帮助找出不必要的样式，但我们应该配合仔细的视觉回归测试。

在这里，使用CSS-in-JS的显著优点是，每个组件中呈现的样式只需要CSS。在CSS-in-JS中加速CSS的秘诀是将CSS内联到页面中，或者将其提取到外部CSS文件中。向JavaScript文件发送CSS会导致其解析和计算缓慢。

优先考虑关键的CSS

关键CSS是一种提取并嵌入CSS以获取页面上方内容的技术。在HTML中

你知道吗？你知道吗？折叠上方指的是当页面在滚动前加载时，查看者看到的所有内容。因为有很多设备和屏幕尺寸，所以没有普遍定义的像素高度被认为是以上折叠。

为了最大限度地减少第一次渲染的往返次数，请将上述内容保持在14KB以下(压缩)。

确定按键CSS并不完全准确，因为你需要对折叠位置做出假设(不同设备屏幕尺寸的折叠位置不同)。这对于高度动态的网站来说是非常困难的。即使不准确，仍然可以带来性能的提升。我们可以通过Critical、CriticalCSS和Penthouse等工具实现自动化。

异步加载CSS

CSS的其余部分(不太重要的部分)应该异步加载。是通过将链接媒体属性设置为打印来实现的。

& ltlinkrellinkrel = & # 34样式表& # 34；href = & # 34非关键. & # 34media = & # 34打印& # 34；onload = & # 34this.media = & # 39所有& # 39；"& gt"打印& # 34；当用户尝试打印页面时，媒体类型定义样式表规则，浏览器将加载此样式表，而不会延迟页面呈现。加载样式表后，将其应用于所有媒体(即屏幕媒体，而不仅仅是打印媒体)，并使用onload属性将媒体设置为all。

另一种方法是使用

浏览器对预加载的支持还不是很好，所以需要一个polyfill（或者使用loadCSS等库）来跨浏览器应用样式表。 预加载会很早地以最高优先级获取文件，可能会降低其他重要下载的优先级。

如果您真的想预加载所提供的高优先级采集(在支持它的浏览器中)，loadCSS的创建者建议您将它与第一种模式结合起来，就像这样。

& ltlinkrellinkrel = & # 34预载& # 34；href = & # 34/path/to/my . CSS & # 34；as = & # 34风格& # 34；& gt& ltlinkrellinkrel = & # 34样式表& # 34；href = & # 34/path/to/my . CSS & # 34；media = & # 34打印& # 34；onload = & # 34this.media = & # 39所有& # 39；"& gt避免在CSS文件中使用@import在CSS文件中使用@import会降低渲染速度。首先，浏览器必须下载CSS文件来发现导入的资源，然后在呈现之前再次请求下载它。

如果你有一个包含@import url(import.css)的样式表；网上的瀑布是这样的。

在link元素中加载两个样式表，允许并行下载。

使用高效的CSS动画

当您激活页面上的元素时，浏览器通常会重新计算它们在文档中的位置和大小，从而触发布局。例如，如果一个元素的宽度发生变化，它的任何子元素都可能受到影响，并且页面布局的很大一部分也可能发生变化。布局几乎总是应用于整个文档，因此布局树越大，执行布局计算所需的时间就越长。

当动画元素时，布局和重绘必须最小化。并非所有的CSS动画技术都是一样的。现代浏览器最能通过位置、缩放、旋转、不透明来创作出性能卓越的动画。

不要改变高度和宽度属性，而是使用transform：scale()。 要移动元素，避免改变top、right、bottom或left属性，而使用transform: translate()。 如果你想模糊背景，可以考虑使用模糊的图像并改变其不透明度。微调：contain属性

contain CSS属性告诉浏览器该元素及其子元素被认为是独立于文档树的(尽可能地)。将页面的子树与其他部分隔离开来。通过这种方式，浏览器可以优化页面独立部分的呈现(样式、布局和绘制操作)以提高性能。

contain属性在包含许多独立小部件的页面上非常有用。您可以使用它来防止每个小部件内的更改导致小部件边界框外的副作用。一个大部分是静态的网站不会从这个策略中受益。

使用CSS优化字体加载避免在加载字体时出现不可见的文字

字体加载大文件通常需要一段时间。一些浏览器在字体加载之前隐藏文本(导致& # 34；隐形文本的闪烁& # 34；或FOIT)来处理这个问题。当优化速度时，你会想要避免& # 34；隐形文本的闪烁& # 34；，并使用系统字体(机器预装的字体)将内容立即展现给人们。一旦字体文件被加载，它将取代所谓的& # 34；一闪而过的不规则文字& # 34；或者FOUT的系统字体。

实现这个目标的一个方法是使用font-display，这是一个指定字体显示策略的API。使用font-display with value exchange告诉浏览器应该使用系统字体立即以该字体显示文本。。

使用可变字体来减小文件大小。

可变字体可以将许多不同的字体集成到一个文件中，而不是为每种宽度、粗细或样式创建单独的字体文件。它们允许您通过CSS和@font-face引用访问给定字体文件中的所有更改。

当您需要多种字体时，可变字体可以显著减小文件大小。您可以加载包含所有信息的单个文件，而不是加载常规和粗体样式以及它们的斜体版本。

Monotype做了一个实验，组合12种输入字体生成8种权重，横跨3种宽度，斜体和罗马体。在可变字体文件中存储48种单独的字体意味着文件大小减少了88%。

不用担心CSS选择器的速度。

CSS选择器的构造方式会影响浏览器匹配它们的速度。浏览器从右向左读取选择器，所以当你使用后代选择器时。例如，nav a {}，它将匹配每个< a & gt元素，然后将nav中的元素重置为零。例如，如果使用更具体的选择器，每个

如果考虑浏览器如何从右到左匹配选择器，再举一个例子，比如。容器ul阿利{}，你就明白为什么后代选择器经常被粘贴了& # 34；贵& # 34；标签。

看来这样的选择器会是速度问题。但是，选择器匹配性能非常快。CSS声明对压缩算法非常友好，因此优化CSS选择器所需的努力通常更好地用于应用程序的其他部分，投资回报更高。

CSS对于加载页面和愉快的用户体验是必不可少的。虽然我们可能通常会优先考虑其他资源(如脚本或图像)，因为它们更有影响力，但我们不应该忘记CSS。通过以上策略，你将能够确保快速交付和执行。