Html5-boilerplate: 将 `white-space: nowrap` 添加到 .visuallyhidden 以加快渲染速度

创建于 2016-07-06 · 5评论 · 资料来源: h5bp/html5-boilerplate

前：

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

后：

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: no-wrap;
    width: 1px;
}

代码笔： https ://codepen.io/tomasz86/pen/pbwQqV
Codepen（调试）： https ://s.codepen.io/tomasz86/debug/pbwQqV

添加white-space: no-wrap会对渲染速度产生巨大的积极影响。

我已经在 IE11、最新版本的 Firefox 和 Chrome 以及旧的 Opera 12（唯一具有适当 CSS 分析器的浏览器）中测试了代码。代码在所有这些中运行得更快。在 IE11 和 Firefox 中都有明显的差异。 Opera 12 显示两者之间有 400 毫秒的差异。在我的 Windows 7 PC 上尝试渲染没有white-space的版本时，Chrome 实际上挂起，但渲染另一个版本的速度非常快。

help wanted

资料来源

tomasz1986

❤2

所有5条评论

这是一个非常有趣的视觉隐藏类，谢谢你，Tomasz。

我还查看了 James Curd's pen on clip rect 被弃用和
可能替换为剪辑路径：插入（0 1px 1px 0）
https://codepen.io/aminimalanimal/pen/wMedpo

我的测试结果（仅在 Chrome 中测试过）

测试

渲染

全部的：

带剪辑矩形的基线

3912ms

2521m 平均 3027

2649ms

4.85秒

3.33 秒平均 3.87

3.44秒

添加空格：nowrap

2590ms

2207ms 平均 2450

2554ms

3.79秒

2.98 秒平均 3.35

3.29秒

添加空白，删除剪辑矩形

2820ms

2424ms 平均 2520

2317ms

4.32秒

3.65 秒平均 3.83

3.53

添加空白，删除剪辑矩形，添加剪辑路径

*需要供应商前缀！

2820ms

1845ms _AVG 2241_

2057ms

4.32秒

3.20 秒 _AVG 3.63_

3.37秒

总结：单项测试的范围相当大。这
第四次测试似乎在 Chrome 中效果最好，但是“真正”的制作可以节省成本
只有几个隐藏元素的页面可能不值得花费
更改 css 类。

*（我发现剪辑路径需要供应商前缀！）

——斯科特·戴维斯——

在 2016 年 7 月 6 日星期三凌晨 4:20，Tomasz W. [email protected]写道：

前：
.visuallyhidden {
边框：0；
剪辑：矩形（0 0 0 0）；
高度：1px；
边距：-1px；
溢出：隐藏；
填充：0；
位置：绝对；
宽度：1px；
}
后：
.visuallyhidden {
边框：0；
剪辑：矩形（0 0 0 0）；
高度：1px；
边距：-1px；
溢出：隐藏；
填充：0；
位置：绝对；
空白：不换行；
宽度：1px；
}
代码笔： https ://codepen.io/tomasz86/pen/pbwQqV
Codepen（调试）： https ://s.codepen.io/tomasz86/debug/pbwQqV
添加空白：no-wrap 对渲染产生了巨大的积极影响
速度。
我已经在 IE11、Firefox 和 Chrome 的最新版本中测试了代码，
以及旧的 Opera 12（唯一具有适当 CSS 分析器的浏览器）。
代码在所有这些中运行得更快。两者有明显区别
在 IE11 和 Firefox 中。 Opera 12 显示两者之间有 400 毫秒的差异。
Chrome 在尝试渲染版本时实际上挂起
我的 Windows 7 PC 上的空白，但很快就会呈现另一个。
—
您收到此消息是因为您订阅了此线程。
直接回复本邮件，在GitHub上查看
https://github.com/h5bp/html5-boilerplate/issues/1874 ，或静音
线
https://github.com/notifications/unsubscribe/ACKY8sYNxXJ6f9HLoTgQIKGkVDcHcnzDks5qS3NOgaJpZM4JF5XK
.

avprod1 于 2016-07-06

👍1

感谢您进行额外的测试:)

我根本没有考虑clip-path仅仅因为clip的出色浏览器兼容性（直到 IE 4！）。它可能已被弃用，但在所有浏览器中都可以完美运行，这并不常见。

回到正题 - 在我在 Opera 12 中的本地测试中，差异始终在 400 毫秒左右。我实际上是在测试一个以这种方式添加了 400 个伪元素的更真实的示例时偶然发现的。伪元素本身的渲染通常很慢，所以我想知道是否可以对此做些什么，并且惊喜地发现只需添加white-space: nowrap将渲染时间减少 40 毫秒。这可能看起来不是一个巨大的差异，但是当整个站点在 360 毫秒（和white-space 320 毫秒）内呈现时很容易引起注意。

在大多数情况下，当只有少数元素存在时，差异可能微不足道，但会帮助像我这样的人处理数百个元素。我也不认为添加white-space: nowrap有任何缺点或风险。如果可以在不增加成本的情况下以这种方式提高性能，为什么不这样做呢？

我确实认为应该在不同的浏览器和操作系统中进行更多的测试。

tomasz1986 于 2016-07-07

👍1

我支持这种改变。想做公关？

paulirish 于 2016-08-08

❤1

这个问题关闭了吗？

dakshshah96 于 2017-02-20

是的！通过 #1900 关闭

roblarsen 于 2017-02-20

👍1

此页面是否有帮助？

0 / 5 - 0 等级

Html5-boilerplate: 将 `white-space: nowrap` 添加到 .visuallyhidden 以加快渲染速度

所有5条评论

相关问题