优化文本渲染速度,然后通过延迟样式表异步优化易读性是否有效?
Is it valid to optimize speed for text rendering, and then asynchronously optimize legibility via a deferred stylesheet?
text-rendering: optimizeLegibility
是 default 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 有效吗?从技术上讲,但第一部分是多余的。这值得么?不仅不值得,还有性能和未解决的错误问题。
(编辑:不正确,但留给后代。)text-rendering: optimizeLegibility
是 default 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 有效吗?从技术上讲,但第一部分是多余的。这值得么?不仅不值得,还有性能和未解决的错误问题。