- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章让我们一起聊聊如何提高 CSS 性能?由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
结合现代网站的复杂性和浏览器处理 CSS 的方式,即使是适量的 CSS 也可能成为处理受限设备、网络延迟、带宽或数据限制的人的瓶颈.
由于性能是用户体验的重要组成部分,因此必须确保跨各种形状和大小的设备提供一致、高质量的体验,这也需要优化 CSS.
这篇文章将介绍 CSS 会导致哪些类型的性能问题,以及制作不会妨碍人们的 CSS 的最佳实践.
当页面有可用的 CSS 时,无论是内联样式表还是外部样式表,浏览器都会延迟呈现,直到 CSS 被解析。这是因为没有 CSS 的页面通常无法使用.
如果浏览器向你展示了一个没有 CSS 的凌乱页面,那么片刻之后就会进入一个有样式的页面,不断变化的内容和突然的视觉变化会让用户体验变得混乱。糟糕的用户体验有一个名字——无样式内容闪现(FOUC) 。
尽管浏览器在解析完 CSS 之前不会显示内容,但它会处理 HTML 的其余部分。但是,脚本会阻止解析器,除非它们被标记为defer或async。脚本可能会操纵页面和其余代码,因此浏览器必须注意该脚本何时执行.
解析器阻塞脚本:脚本如何阻塞 HTML 解析.
因为脚本会影响应用到页面的样式,如果浏览器仍在处理一些 CSS,它会等到它完成后再运行脚本。由于在脚本运行之前它不会继续解析文档,这意味着 CSS 不再只是阻止渲染——根据外部样式表的顺序,文档中的脚本也可能会停止 HTML 解析.
Parser Blocking CSS:CSS 如何阻止 HTML 解析.
为避免阻塞解析,请尽快交付 CSS 并以最佳顺序安排您的资源.
建立连接去下载外部样式表不可避免地会导致延迟,但您可以通过最小化通过网络传输的总字节数来加快下载速度.
压缩文件可以显着提高速度,许多托管平台和 CDN 默认使用压缩编码资产(或者您可以轻松配置它们)。服务器和客户端交互使用最广泛的压缩格式是Gzip。还有Brotli可以提供更好的压缩结果,尽管它不像 Gzip 那样受支持.
缩小CSS是删除空格和任何不需要的代码的过程。输出是一个较小但完全有效的代码文件,浏览器可以解析它,这将为您节省一些字节。Terser是一种流行的 JavaScript 压缩工具,或使用webpack,v4 插件来创建缩小的构建文件.
使用 CSS 框架时,以未使用的 CSS 结束是比较常见的(除非我们只包含我们需要的组件)。同样的问题出现在长期增长的大型代码库中.
删除未使用的 CSS 通常是手动工作。主要的挑战是它有多复杂。我们必须在所有可能的状态下,在所有可能的设备(涵盖媒体查询)上仔细审核整个站点,并执行所有可能改变样式的 JavaScript 功能.
UnusedCSS 和 PurifyCSS 是可以帮助确定不必要样式的流行工具,但我们应该将它们与仔细的视觉回归测试配对.
这就是使用 CSS-in-JS 的显着优势:每个组件中呈现的样式仅需要 CSS。快速 CSS-in-JS 的秘诀是将 CSS 内联到页面中或将其提取到外部 CSS 文件中。在 JavaScript 文件中传送 CSS 将导致它被解析和评估缓慢.
关键CSS是一种为首屏内容提取和内联CSS的技术。在HTML文档的中内联提取的样式,无需发出额外的请求来获取这些样式并加快渲染速度.
为了最大限度地减少首次渲染的往返次数,请将首屏内容保持在14 KB(压缩)以下.
确定关键 CSS 并不完全准确,因为您需要对折叠位置(因设备屏幕尺寸而异)做出假设。这对于高度动态的站点来说可能很困难。即使不精确,它仍然可以带来性能改进,我们可以使用Critical、CriticalCSS和Penthouse等工具将其自动化.
CSS的其余部分(不太重要的部分)最好异步加载。实现这一点的方法是将链接媒体属性设置为print:
“打印”媒体类型定义了用户尝试打印页面时的样式表规则,浏览器将加载此类样式表而不会延迟页面渲染。将该样式表应用于所有媒体(即屏幕而不仅仅是打印)使用onload属性在样式表完成加载时将媒体设置为全部.
另一种选择是使用 。
(而不是rel="stylesheet")来实现与上述类似的模式,并在加载事件时将rel属性切换到样式表。使用这种方法时需要考虑一些缺点。· 浏览器对预加载的支持仍然不是很好,因此需要一个 polyfill(或使用诸如loadCSS 之类的库)来跨浏览器应用样式表.
· 预加载很早就以最高优先级获取文件,可能会降低其他重要下载的优先级.
如果你确实想要preload提供的高优先级获取(在支持它的浏览器中),loadCSS 的创建者建议你将它与第一个模式结合起来,像这样:
在 CSS 文件中使用@import会减慢渲染速度。首先,浏览器必须下载 CSS 文件以发现导入的资源,然后在渲染之前发起另一个下载请求.
如果你有一个包含@import url(imported.css) 的样式表;网络瀑布如下所示:
在链接元素中加载两个样式表允许并行下载:
当您为页面上的元素设置动画时,浏览器通常必须重新计算它们在文档中的位置和大小,这会触发布局。例如,如果您更改元素的宽度,则其任何子元素都可能受到影响,并且页面布局的很大一部分可能会更改。布局几乎总是作用于整个文档,所以布局树越大,它执行布局计算的时间就越长.
为元素设置动画时,必须尽量减少布局和重绘。并非所有 CSS 动画技术都是平等的,现代浏览器可以最好地创建具有位置、缩放、旋转和不透明度的高性能动画:
在包含 CSS属性告诉浏览器的元素及其后代被认为是独立于文档树(尽可能)。它将页面的子树与其余部分隔离开来。然后浏览器可以优化页面独立部分的渲染(样式、布局和绘制操作)以提高性能.
该包含属性是在包含许多独立的小部件页面有用。我们可以使用它来防止每个小部件内的更改在小部件的边界框之外产生副作用。一个主要是静态的站点不会从这个策略中获得什么好处.
字体通常是需要一段时间才能加载的大文件。一些浏览器会在字体加载之前隐藏文本(导致“不可见文本闪烁”或 FOIT)来解决这个问题。在优化速度时,您需要避免“不可见文本闪烁”,并立即使用系统字体(一种预装在他们机器上的字体)向人们显示内容。加载字体文件后,它将替换称为“无样式文本闪烁”或 FOUT 的系统字体.
实现此目的的一种方法是使用front-display 一种用于指定字体显示策略的API。使用带有值swap的font-display告诉浏览器使用该字体的文本应该立即使用系统字体显示.
可变字体使字体的许多不同变体能够合并到一个文件中,而不是为每个宽度、粗细或样式都设置一个单独的字体文件。它们允许您使用 CSS 和单个@font-face引用访问给定字体文件中的所有变体.
在需要多种字体变体的情况下,可变字体可以显着减小文件大小。您可以加载包含所有信息的单个文件,而不是加载常规和粗体样式及其斜体版本.
Monotype 进行了一项实验,通过组合 12 种输入字体来生成 8 个权重,跨越三种宽度,跨越斜体和罗马风格。在单个可变字体文件中存储 48 种独立字体意味着文件大小减少了 88%.
CSS 选择器的结构会影响浏览器匹配它们的速度。浏览器从右到左读取选择器,因此当您使用后代选择器时。例如,nav a {},它将首先匹配页面上的每个元素,然后在nav内部的元素上归零。如果您使用更具体的选择器,例如,在 nav 元素内的每个上使用.nav-link,它就不会花时间尝试匹配页面上的每个.
如果您考虑浏览器如何从右到左匹配选择器以及.container ul li a { } 之类的示例,您就会明白为什么后代选择器通常被标记为“重要”的原因.
这样的选择器似乎是一个速度问题。但是,选择器匹配性能很快。CSS 声明对压缩算法非常友好,因此优化 CSS 选择器所需的工作通常最好花在应用程序的其他部分上,从而获得更高的投资回报.
CSS 对于加载页面和令人愉悦的用户体验至关重要。虽然我们通常可能会优先考虑其他资产(例如脚本或图像)的影响更大,但我们不应该忘记 CSS。通过上述策略,您将能够确保快速交付和执行.
原文:https://calibreapp.com/blog/css-performance 。
原文链接:https://mp.weixin.qq.com/s/6SnwcFFAHKZ2vj7YtpDTkQ 。
最后此篇关于让我们一起聊聊如何提高 CSS 性能?的文章就讲到这里了,如果你想了解更多关于让我们一起聊聊如何提高 CSS 性能?的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我想要的是能够在输入获得焦点或失去焦点时执行某些操作(两个事件)。 我尝试了以下方法,但这按事件单独工作(单独编码时):仅在焦点上,或仅在失去焦点时。 另外,我希望它尽可能跨平台(包括触摸设备),这是
我分别研究了TableView的Filtering和Pagination。 过滤: this帖子帮助我满足了我的需要 分页: this , this帖子也帮助了我 我想像这样将它们组合在一起: 详情-
我是 TDD 方法的新手,所以我想知道是否有人经历过这种机智可以启发我一点。我想获得一些关于如何一起使用 UML 和 TDD 方法的线索。 我已经习惯了:用 UML 设计 --> 生成骨架类(然后保持
我尝试使用入口点和 cmd 设置 Docker。 FROM debian:stretch RUN apt-get update && \ apt install gnupg ca-certificat
我想要一个 Class 对象,但我想强制它所代表的任何类扩展类 A 并实现接口(interface) B。 我能做到: Class 或者: Class 但我不能两者兼得。有办法做到这一点吗? 最佳答案
我是 Rubymine 的长期用户。 Rubymine 非常适合基于 html 的 Rails 应用程序,但我现在正在做更多的 SPA 客户端工作(例如 javascript/react)。我发现我真
我注意到我使用的某个脚本依赖于原型(prototype)。 (Lightbox 2) 它会与 jQuery 在同一页面上一起工作吗?有没有办法确保它们不冲突? 最佳答案 可以,但你需要采取 speci
我需要对表中显示的数据进行分页并通过 ajax 调用获取它 - 这是我通过使用具有以下配置的 dataTables 插件来完成的 - bServerSide : true; sAjaxSource :
我是 gtk 新手,所以想知道在 C 语言中归档和 gtk 是否可以一起使用?例如,我可以从 .txt 文件中读取,然后在相同的代码中使用 gtk 在标签或其他内容中显示它吗?如果是,怎么办? 谢谢!
有没有人设法得到Bck2Brwsr最近与 Java 8/JavaFX 8 一起工作?有没有兼容的机会?我找不到太多关于它的信息,也没有一个好的起点。使用给定的 Maven archetype我遇到了几
在我的应用程序中,用户通过 openid(与 stackoverflow 相同)登录/注销。 我想通过 oauth 向第三方应用程序开放我的应用程序。 如何创建我的 openid-consumer 应
我在启动和运行 Hibernate 和 Spring 时遇到一些问题。我有一个网络服务器项目,它使用了其他几个具有持久实体的项目。我遇到的问题是,对于存储在 WEB-INF/libs 内的另一个 ja
我有 @ControllerAdvice 类,它处理一组异常。我们还有一些其他异常,这些异常用 @ResponseStatus 注释进行注释。为了结合这两种方法,我们使用博客文章中描述的技术:http
我想在屏幕上使用进度条而不是 progressDialog。 我在我的 XML View 文件中插入了一个进度条,我想让它在加载时显示并在不加载时禁用它。 所以我使用的是可见的,但它发生了,所以其余的
CREATE TABLE `users` ( `id` int(11) AUTO_INCREMENT, `academicdegree` varchar(255),
IN() 中使用的查询返回:1, 2。然而,整个查询返回 0 行,这是不可能的,因为它们存在。我在这里做错了什么? SELECT DISTINCT li.auto_id FROM links
亲们, 我如何在使用 Jade 生成的表单上实现 jQuery 样式?我想做的是美化 表单并使它们可点击。我在 UI 方面很糟糕。期间。 我如何在表单上实现这个可选择的方法? http://jquer
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我可以: auto o1 = new Content; 但不能: std::shared_ptr o1(new Content); std::unique_ptr o1(new Content); 我
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 4 年前。 Improve this qu
我是一名优秀的程序员,十分优秀!