Question

问题：

如果CSS文件中存在大量的字体 - 例如超过2000，那么浏览器将从＆＃34;大列表中选择字体的效率如何？用于HTML块的应用程序？ 请忽略字体文件大小，网络延迟，缓存或其他所有内容。

详细信息：

我正在开发一个开源项目来创建一个CSS文件，其中包含fonts.google.com上托管的所有字体的字体。原因是使字体包含简单和交叉项目，即在每个项目中只包含相同的单个CSS文件，然后放手。

我担心太多字体声明的性能影响。整个CSS文件大小将小于25KB Gzip，所以我很好。但是，将有1950多种字体可能会使某些浏览器在现实世界中变慢。

虽然这些字体文件不会被浏览器下载，除非它们确实在HTML文档中使用，所以这不是问题。我只关心浏览器＆＃39;在内存中处理这些font-faces声明的效率，并在CSS中使用时有效地引用它们。

有人可以帮忙吗？

修改

以下是我打算使用的css文件：https://raw.githubusercontent.com/praisedpk/Local-Google-Fonts/master/google-fonts/webfonts.css

来自github repo：Local Google Fonts

Answer 1

是的，会对性能产生影响，但效果不是很高。

为了衡量影响，我使用Chrome的“检查”选项和“网络”标签。（其他选项也可以这样做。）

检查“禁用缓存”按钮后，我转到了提供的链接。这样做可以让您测量第一次下载文件的全部影响。

这表明webfonts.css文件的大小为17.9 KB，我的系统使用Chrome在26ms内下载。（也不错，但这完全取决于你判断的好处。）

如果您将鼠标悬停在“瀑布”时间栏上，则可以在浏览器中查看有关此文件下载的更多详细信息。

Answer 2

您必须考虑两个视角：网络和浏览器的渲染。加载大量字体时，这两个方面都会导致性能影响。 Google在https://fonts.google.com/上遇到了同样的问题 - 他们已经很好地解决了这个问题。

让我们看看他们做了什么。让我们打开Chrome，打开https://fonts.google.com/，按F12打开开发人员工具，然后按F5重新排列页面。现在切换到网络选项卡以查看已加载的文件。惊喜：只加载了大约25种字体。

现在向下滚动页面以查看更多字体样本 - 并观看网络标签。当您向下滚动时，您会看到Google加载了越来越多的字体。这称为“按需加载”。有关详细信息，请参阅此SO主题：Load fonts on demand

var link = document.createElement("link")
link.setAttribute("rel", "stylesheet")
link.setAttribute("type", "text/css")
link.setAttribute("href", "http://fonts.googleapis.com/css?family=Indie+Flower")
document.getElementsByTagName("head")[0].appendChild(link)

因此Google会手动查看当前页面的哪些部分，并立即加载字体。当然，当用户重新访问网站时，他们还会应用缓存标头以使此过程更快。

要检测您网站的某个部分是否在视野中，您可以使用以下脚本：https://plnkr.co/edit/91gybbZ7sYVELEYvy1IK?p=preview

$(document).ready(function() {
  myElement = $('.someObject');
  window.onscroll = function() {

    var screenTop = $(window).scrollTop();
    var screenBottom = screenTop + $(window).height();    
    var elTop = $(myElement).offset().top;
    var elBottom = elTop + $(myElement).height();

    var info = 'screenTop:' + screenTop + ' screenBottom:' + screenBottom + ' elTop:' + elTop + ' elBottom:' + elBottom;

    if((elBottom <= screenBottom) && (elTop >= screenTop)) {
      $('.info').html('Element is in view + <small>' + info + '</small>');
    } else {
      $('.info').html('Element is out of view + <small>' + info + '</small>');
    }

  }
})

Answer 3

如果我理解你的问题，你不是要求网络加载时间，而是要求从加载列表中选择正确的字体声明。

从css文件中选择字体的时间是可以忽略的。加载站点时几乎任何其他操作都将花费更多时间。如果您想使用所选的浏览器进行测试，只需打开css file in the browser并搜索CTRL+F的任何字体。即使在较旧的机器上，结果也应该在不到100毫秒的时间内可见。

无论如何，您应该考虑并非所有浏览器的行为都相同，并且Internet Explorer（或至少旧版本）将下载您声明的每种字体。无论您是否使用它都没关系，因此如果该站点应该是跨浏览器兼容的，那么您的项目将不是一个选项。

Answer 4

在发布页面的响应标头中使用缓存控制设置，以通知浏览器在检查新版本之前可以重复使用缓存的CSS文件多长时间。

例如，使用SO网站并使用Chrome的 Inspect 功能查看下载的CSS文件，定义了最大年龄值604,800秒（1周）。

要显示与之前图片类似的显示，请点击＆＃34; 网络＆＃34;中列出的文件。 Chrome的 Inspect 实用程序的标签。

我相信max-age持续时间会通知浏览器在需要检查新文件是否可用之前可以使用当前缓存文件多长时间。在某些情况下，最好让持续时间更短。

有关此内容的详细信息，请访问此MDN page on Cache-Control。

还有许多带有缓存控制主题的SO条目可能适用于您网站的环境。

使用太多字体表面声明会对性能产生什么影响？

4 个答案: