关于 Web 应用的内联 css 和 scss 文件里的 var 关键字用法

为什么网站性能调优准则里都强调要 Use inline fonts and CSS instead of loading them asynchronously?

网站性能优化的一个重要目标是尽可能地缩短页面加载时间,使用户可以更快地访问您的网站。加载字体和CSS样式表是构建页面的重要组成部分,但是它们也可能导致页面加载速度较慢,从而影响用户体验。因此,建议使用内联字体和CSS样式表,而不是异步加载它们。

使用内联字体和CSS样式表可以避免页面加载时的额外HTTP请求,从而加快页面加载速度。在内联模式下,字体和样式表直接嵌入到HTML文档中,使得页面在加载时只需下载一个文档即可呈现完整页面,这样用户就可以更快地看到网站内容。与此相反,异步加载字体和CSS样式表需要额外的HTTP请求和下载时间,可能导致页面加载速度变慢,特别是在网络速度较慢或访问量较大的情况下。

因此,使用内联字体和CSS样式表是一种性能优化的最佳实践,可以帮助提高网站的性能和用户体验。

以下是一个内联字体的例子。