优化文本渲染速度,然后通过延迟样式表异步优化易读性是否有效?

Is it valid to optimize speed for text rendering, and then asynchronously optimize legibility via a deferred stylesheet?

text-rendering: optimizeLegibilitydefault for most modern browsers.(编辑:不正确,但留给后代。)

但是,text-rendering: optimizeSpeed 获得了 considerable performance 收益。

目前,我内联了 above-the-fold/critical 样式,使用 rel=preload.

异步延迟了折叠下方的样式

我的问题是,最初在我的关键样式中使用 text-rendering: optimizeSpeed,然后在我的 deferred/asynchronous 样式表中,切换到 [=10 是否有效*或值得** =]?

* 有效性定义为按您期望的方式工作。最初使用 "Optimize speed",然后当延迟样式表异步加载时,使用 "optimize legibility"。

** 值得定义为与在我的 SS 中切换样式的(简单)过程成比例的任何超过可忽略的性能提升。

好的,我想我已经回答了我自己的问题,所以我会在这里为后代留下一些东西:

  • 我问题的核心答案:一揽子应用optimizeLegibility,来自重绘的初始渲染时间。所以我的结论是,即使异步加载它也不值得,因为它会延迟异步样式表的加载并导致 FOIT [1](尤其是当应用于长文本字符串时)。

  • 正如 BoltClock 指出的那样,Chrome 和 Safari 默认使用 auto,而只有 Firefox 在 20px 阈值处智能切换。此外,Chrome 和 Safari 将 auto 视为 optimizeSpeed[2] 所以在我的 above-fold 样式中声明 oS 基本上是多余的。

    • 我认为也许最重要的是,这表明 optimizeLegibility 还没有达到可以毫无例外地使用它的地步,因为 Chrome 和 Safari 甚至不习惯使用除 speed 未指定 precision 等其他选项。
  • 不仅在某些旧浏览器中缺乏支持,实际上在其他浏览器中也存在破坏交易的错误,[2] 意味着 text-rendering: optimizeLegibility 不适用于渐进式增强(至少 PE 通过延迟折叠样式)。

最后,我 submitted an issue 在 caniuse 的 repo 上纠正了现代浏览器默认为 optimizeLegibility 的错误声明(感谢 BoltClock 指出了这一点)。

TL;DR 有效吗?从技术上讲,但第一部分是多余的。这值得么?不仅不值得,还有性能和未解决的错误问题。