суббота, 9 октября 2010 г.

[блогеру на заметку] CSS-свойство box-shadow + Firefox = эпичные тормоза и лаги

Сегодня обнаружил сайт, на котором Firefox тормозит и лагает вплоть до того, что почти невозможно прокручивать страницу. При этом на соседних вкладках другие сайты ведут себя вполне нормально. (Обычно если Firefox тормозит, то весь целиком.)

Стало любопытно разобраться, в чём проблема. Скрипты в качестве подозреваемого сразу отпадают, поскольку у них алиби NoScript. Сохранил страницу на диск и стал мучить её исходный код. После непродолжительного сеанса научного тыка, основной источник лагов обнаружился в виде CSS-свойства box-shadow. Ну а после исключения еще и свойства border-radius, всё стало совсем шоколадно.
В самом деле, вот обсуждение проблемы на форуме проекта, а вот и соответствующий багрепорт, который висит в багзилле в состоянии UNCONFIRMED с 2008-го года. Да. И, как пишут там в комментариях, в бете 4-й версии баг по-прежнему присутствует. Ведь все силы разработчиков ушли на то, чтобы сплагиатить из Opera большую красную кнопку.

Сайт тот, кстати, слегка подтормаживает и в других браузерах — еще бы, сохранённая копия страницы вместе со всеми скриптами и картинками весит 1.7 мегабайт. (Не знаю, зачем нужно столько скриптов, но, как говорится, хозяин — барин.) Но даже целому взводу JavaScript-кодеров, которые писали все эти скрипты, не под силу так угробить производительность современного компьютера, как это могут сделать разработчики мозиловского движка рендеринга страниц. И победоносное пришествие CSS3 с настоящими тенями и истинными-скруглёнными-углами опять откладывается на неопределённый срок.

Так что, товарищи блогеры, будьте бдительны, проверяйте свои дизайны на совместимость с популярными браузерами и если что, сносите все эти красивости нахрен. Удобство посетителя важнее красивых теней.

14 комментариев

Like

А лекарство есть от этих тормозов? Где почитать?

clrclr

Можно убрать из таблицы стилей в шаблоне блога все строчки с -moz-box-shadow и box-shadow, оставив только -webkit-box-shadow и -goog-ms-box-shadow.

-webkit-box-shadow - это аналог box-shadow для браузеров на webkit-овском движке (Сафари, Хром и Хромиум). А -goog-ms-box-shadow, если я правильно понимаю это непонятное "goog-ms" , — это для гугловского набора скриптов, который эмулирует современные фичи браузеров для старых версий Internet Explorer-а. В этих браузерах красивости отанутся, в Firefox пропадут.

Хотя я не заметил, чего они такого существенного добавляют во внешний вид сайта, можно вообще все эти строчки выпилить, мне кажется, дизайн ничуть не пострадает.

Like

Убрал, дизайн вроде бы не пострадал...

Like

Попробовал у себя через мозилу посмотреть, вродебы нормально...

clrclr

После того как страница прогрузится полностью, прокручиваться сейчас стало нормально.
Пока грузится - всё еще немного подлагивает, но это, видимо, из-за большого объема скриптов.

Like

Странно, у меня всего 4 скрипта подгружено в виде гаджетов html/java

clrclr

Вероятно, очень жирные гаджеты. В сохранённой локально копии страницы общий размер *.js-файлов 695 килобайт. При этом, копия еще и с инета что-то догружает динамически при открытии.

Like

Нашел, что грузит страницу. Это скрипт одной кнопки для соц.закладок
Именно он и нагружает так сильно.

teerex

Баг актуален до сих пор, в новейшей версии FF
Достаточно написать что-то вроде:
box-shadow:inset 0 0 50px #ccc; и будут заметны тормоза
Если написать box-shadow:inset 0 0 500px #ccc; то прокрутка страницы превращается в слайдшоу.

Анонимный

Firefox 46.0
Прошло 5 лет - БАГ АКТУАЛЕН!

Анонимный

На дворе 2016 год, а баг box-shadow:inset в FF версии 46.0 еще актуален. Несколько дней выносил себе мозг, пытаясь разобраться в чем причина

Анонимный

Вот ты лошара короче! Нет бы Вована сразу спросить!

Анонимный

Да вот надо было. Вован, спасибо тебе за помощь!

Анонимный

https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Putin_with_flag_of_Russia.jpg/200px-Putin_with_flag_of_Russia.jpg

Отправить комментарий