Html5-boilerplate: Добавьте `white-space: nowrap` в .visuallyhidden для более быстрого рендеринга

Это очень интересный взгляд на визуально скрытый класс, спасибо, Томаш.

Я также посмотрел, что ручка Джеймса Курда на прямоугольнике клипа устарела и
возможность замены на clip-path: inset (0 1px 1px 0)
https://codepen.io/aminimalanimal/pen/wMedpo

Мои результаты тестирования (проверено только в Chrome)

Тестовое задание

Рендеринг

Общий:

Базовая линия с прямоугольником клипа

3912 мс

2521 м AVG 3027

2649 мс

4,85 с

3,33 сек. AVG 3,87

3,44 с

Добавить пробел: nowrap

2590 мс

2207 мс AVG 2450

2554 мс

3,79 с

2,98 с СРЕДНЕЕ 3,35

3,29 с

Добавить пробел, удалить прямоугольник клипа

2820 мс

2424 мс AVG 2520

2317 мс

4,32 с

3,65 с СРЕДНЕЕ 3,83

3,53

Добавить пробел, удалить прямоугольник обрезки, добавить путь обрезки

* нужен префикс производителя!

2820 мс

1845 мс _AVG 2241_

2057 мс

4,32 с

3.20 с _AVG 3.63_

3,37 с

Резюме: В отдельных тестах был довольно большой разброс. В
четвертый тест казался лучшим в Chrome, но экономия на «реальном» производстве
страница, на которой есть всего пара скрытых элементов, может не стоить затрат
изменение класса css.

* (Я обнаружил, что clip-path требует префикса поставщика!)

- Скотт Дэвис -

В среду, 6 июля 2016 г., в 4:20 утра Томаш В. [email protected] написал:

До:

.visuallyhidden {
граница: 0;
клип: rect (0 0 0 0);
высота: 1 пикс;
маржа: -1px;
переполнение: скрыто;
отступ: 0;
позиция: абсолютная;
ширина: 1 пикс;
}

После:

.visuallyhidden {
граница: 0;
клип: rect (0 0 0 0);
высота: 1 пикс;
маржа: -1px;
переполнение: скрыто;
отступ: 0;
позиция: абсолютная;
белое пространство: без переноса;
ширина: 1 пикс;
}

Codepen: 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 фактически зависает при попытке рендеринга версии без
white-space на моем ПК с Windows 7, но очень быстро отображает другой.

-
Вы получаете это, потому что подписаны на эту беседу.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/h5bp/html5-boilerplate/issues/1874 или отключите звук
нить
https://github.com/notifications/unsubscribe/ACKY8sYNxXJ6f9HLoTgQIKGkVDcHcnzDks5qS3NOgaJpZM4JF5XK
.

Спасибо за проведение дополнительных тестов :)

Я вообще не рассматривал clip-path просто из-за отличной совместимости с браузером clip (до IE 4!). Возможно, он устарел, но работает безупречно во всех браузерах, что не является обычным явлением.

Вернемся к сути - в моих локальных тестах в Opera 12 разница всегда составляет около 400 мс. На самом деле я обнаружил это случайно, когда тестировал более реальный пример с 400 добавленными таким образом псевдоэлементами. Рендеринг самих псевдоэлементов в целом медленный, поэтому мне было интересно, можно ли что-то с этим сделать, и был приятно удивлен, что простое добавление white-space: nowrap уменьшило время рендеринга на 40 мс. Это может показаться не очень большим различием, но это легко заметить, когда весь сайт отображается за 360 мс (и 320 мс с white-space ).

Разница, вероятно, будет незначительной в большинстве случаев, когда присутствует только несколько элементов, но поможет таким людям, как я, с сотнями из них. Я также не думаю, что добавление white-space: nowrap связано с какими-либо недостатками или рисками. Если производительность может быть улучшена таким образом без дополнительных затрат, почему бы этого не сделать?

Я действительно считаю, что необходимо провести дополнительное тестирование как в разных браузерах, так и в разных операционных системах.

Я поддерживаю это изменение. хотите сделать пиар?

Вопрос закрыт?

Да! закрыто через # 1900