Html5-boilerplate: Add `white-space: nowrap` to .visuallyhidden for faster rendering

[tomasz1986]

Before:

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

After:

.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;
}

Codepen: https://codepen.io/tomasz86/pen/pbwQqV
Codepen (debug): https://s.codepen.io/tomasz86/debug/pbwQqV

Adding white-space: no-wrap makes a huge positive difference in rendering speed.

I have tested the code in IE11, the newest versions of Firefox and Chrome, and also the old Opera 12 (the only browser with a proper CSS profiler). The code runs faster in all of them. There is a noticeable difference both in IE11 and Firefox. Opera 12 shows a 400ms difference between the two. Chrome actually hangs when trying to render the version without white-space on my Windows 7 PC but renders the other one very quickly.

[avprod1]

This is a very interesting look at visuallyhidden class, thank you, Tomasz.

I also looked at James Curd's pen on clip rect being deprecated and
possibily replacing with clip-path: inset(0 1px 1px 0)
https://codepen.io/aminimalanimal/pen/wMedpo

My test results (only tested in Chrome)

Test

Rendering

Total:

Baseline with clip rect

3912ms

2521m AVG 3027

2649ms

4.85sec

3.33sec AVG 3.87

3.44sec

Add white-space:nowrap

2590ms

2207ms AVG 2450

2554ms

3.79sec

2.98sec AVG 3.35

3.29sec

Add white-space, remove clip rect

2820ms

2424ms AVG 2520

2317ms

4.32sec

3.65sec AVG 3.83

3.53

Add white-space, remove clip rect, add clip-path

*need vendor prefix!

2820ms

1845ms _AVG 2241_

2057ms

4.32sec

3.20sec _AVG 3.63_

3.37sec

Summary: There was quite a large range within the individual tests. The
fourth test seemed best in Chrome, but the savings for a “real” production
page that has only a couple hidden elements may not be worth the cost of
changing the css class.

*(I found clip-path needs vendor prefixing!)

--Scott Davis--

On Wed, Jul 6, 2016 at 4:20 AM, Tomasz W. [email protected] wrote:

Before:

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

After:

.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;
}

Codepen: https://codepen.io/tomasz86/pen/pbwQqV
Codepen (debug): https://s.codepen.io/tomasz86/debug/pbwQqV

Adding white-space: no-wrap makes a huge positive difference in rendering
speed.

I have tested the code in IE11, the newest versions of Firefox and Chrome,
and also the old Opera 12 (the only browser with a proper CSS profiler).
The code runs faster in all of them. There is a noticeable difference both
in IE11 and Firefox. Opera 12 shows a 400ms difference between the two.
Chrome actually hangs when trying to render the version without
white-space on my Windows 7 PC but renders the other one very quickly.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/h5bp/html5-boilerplate/issues/1874, or mute the
thread
https://github.com/notifications/unsubscribe/ACKY8sYNxXJ6f9HLoTgQIKGkVDcHcnzDks5qS3NOgaJpZM4JF5XK
.

[tomasz1986]

Thank you for conducting additional tests :)

I have not considered clip-path at all simply due to clip's great browser compatibility (up to IE 4!). It may be deprecated but works flawlessly in all browsers which is not a common thing.

Back to the point - in my local tests in Opera 12 the difference is always around 400 ms. I have actually found this out by accident when testing a more real-life example with 400 pseudo-elements added this way. Rendering of pseudo-elements themselves is slow in general so I was wondering if something could be done about it, and was pleasantly surprised that simply adding white-space: nowrap reduced the rendering time by 40 ms. It may not seem like a huge diffetence but is easily noticeable when the whole site renders in 360 ms (and 320 ms with white-space).

The difference will likely be insignificant in most cases when only a few elements are present, yet will help people like me with hundreds of them. I also do not think there are any disadvantages or risks with adding white-space: nowrap. If performance can be improved this way with no additional costs, why not do that?

I do think that more testing should be done, both in different browsers and operating systems.

[paulirish]

I'm supportive of this change. want to do a PR?

[dakshshah96]

Is this issue closed?

[roblarsen]

Yes! closed via #1900