При изменении каких свойств браузер затратит больше всего ресурсов и почему
Слушая доклад Андрея Ситника из Evil Martians про CSS линтер, я узнал что существуют тяжелые CSS свойства, которые сильно влияют на скорость отображения станицы в браузере. И действительно, я замечал это ранее и не раз.
Веб шрифты, custom scroll, smooth scrolling
То, что мне уже было известно:
— большое количество подключенных веб-шрифтов, даже если 70% из них не используются — сильно тормозят прокрутку и рендеринг страницы.
— кастомный скролл — одно из самых больших зол. Хуже только кастомный скролл плюс js/jQuery плагин smooth scrolling effect.
Box-shadow
Вот что сказал Андрей:
— box shadow в большом количестве замедляет рендеринг и прокрутку страницы.
Погуглив на тему box-shadow, я узнал что чем больше тень, тем сильнее она тормозит рендеринг и прокрутку. При скролле страницы на каждые 30-40 пикселей скролла, тень перерисовывается браузером заново по 3-4 раза! Теперь следует 10 раз подумать прежде чем лепить box-shadow эффект. Смею предположить что с text-shadow та же история.
Исследование airbnb
Airbnb провели целое исследование на эту тему CSS box-shadow Can Slow Down Scrolling. Вот их результаты, это просто ошеломляет:
10px box-shadow blur-radius = 3 перерисовки элемента на каждые 40px скролла
От тени полностью они не отказались, но поменяли 10px blur на 3px blur. Подробнее у них в статье по ссылке. Сказать честно, их сайту и сейчас явно не помешало бы ускорить производительность. Рекомендую подписаться на их блог/твиттер если вы фронтэнд разаботчик.
border-radius и что с ним не так
Дальше по списку. Еще немого погуглив, я обнаружил статью про выявление проблем с производительностью. Автор сделал пару десятков автоматических тестов, которые запускал по 10 раз на своем сайте, чтобы выявить CSS свойство которое значительно тормозило отрисовку страницы. И это был — border-radius! Причем не просто радиус. Это свойство было применено к большому контейнеру, в котором располагалось очень много элементов. Это как если взять главный контейнер main со списком всех статей на блоге, запихнув в него же сайдбар и навигацию, и задать ему радиус скругления. В общем не знаю почему именно, но вот такие результаты дало его исследование. Отсюда делаем вывод. Радиус для кнопок и небольших плашек — используем как и ранее. Для задания радиуса большим плашкам в которых помещен чуть ли не весь контент страницы следует относится осторожнее. Если есть проблемы с производительностью, присмотритесь к ним.
Самые дорогие / сложные CSS свойства для отображения
Очень познавательная статья про селекторы, раздутый код и CSS свойства. Рекомендую хотя бы бегло ее просмотреть. Если вкратце и сразу к выводам.
Самые дорогие CSS свойства — это те свойства, которые браузер должен пересчитывать каждый раз когда прорисовывает элемент. К ним относятся: box-shadow, border-radius, прозрачность (так как браузер должен высчитывать что показывает под полу-прозрачным элементом), трансформами transform и убийцы производительности CSS фильтры. Если производительность ваш приоритет, то все из перечисленного ваш худший враг.
Пользуйтесь BEM
Эта статья про CSS свойства, а не про селекторы. Но говоря о производительности нельзя их не затронуть. Пользуйтесь BEM именованием для классов и все у вас будет в порядке.
Статьи по теме и около:
Какие анимации самые «дешевые» для рендеринга в браузере
UnCSS — Инструмент для определения и удаления неиспользуемых CSS селекторов
Источник
USE-WEB
- Полезные сервисы3
- Пройти тест
- Генератор паролей
- Генератор промокодов
- Темы блога
- Контакты
- Вход
- Регистрация
Меню
- Профиль
- Выход
Главная / Тесты / Пройти собеседование на HTML-верстальщика ( тест )
Пройти собеседование на HTML-верстальщика ( тест )
Выбрать другой тест
Вопрос 1 из 15
Какие бывают значения у свойства position?
position: absolute | fixed | relative | static | sticky
position: block | fix | flex
position: inline | inline -fix | inline flex
Что такое clearfix? Из чего он состоит и для чего он?
это способ борьбы с проблемой контейнера нулевой высоты для плавающих элементов
в css нет такого понятия
тоже самое что и position: fixed
Как верстать html письма?
Таблицами
как и обычный html документ
блоками
Из чего строится размер элемента? Если не учитывать box-sizing
width и height задают ширину. включают в себя значения padding и border
width и height задают ширину. не включают в себя значения margin, padding и border
width и height задают ширину. включают в себя значения margin, padding и border
Что такое margin
устанавливает размер элемента
Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента
Что такое padding
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента
Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое
устанавливает размер элемента
Как ведут себя margin у двух элементов по соседству по вертикали?
У блочных элементов расположенных рядом друг с другом по вертикали наблюдается эффект схлопывания (Но есть исключения из правил)
margin суммируются
Странный вопрос
Есть ли у тегов предопределённые стили?
нет
да
не знаю
Как браузер «читает» css?
сверху вниз
снизу вверх
браузер css не читает
Какие свойства браузеру отрисовать тяжелее всего?
position: absolute | fixed
box-shadow, border-radius
все одинаково тяжело
При изменении каких свойств браузер затратит больше всего ресурсов?
border-radius
width и height
left/top/right/bottom
Какие вы знаете псевдоэлементы? Самые популярные
left/top/right/bottom
after :before :placeholder :selection
last-child, first-child
Что такое инлайновые стили?
стили прямо в css
стили у которых прописано свойство inline
стили прямо в html
Инлайновые стили «сильнее» стилей в обычном файле css?
да
нет
все стили равны
Что такое наследование стилей?
Наследование в CSS — механизм, с помощью которого значения свойств элемента- потомка передается его родителю
Наследование в CSS — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам.
Наследование в CSS механизм всплытия
- Ген. паролей
- Ген. промокодов
- Пройти тест
- Темы блога
- Контакты
- Вход
- Регистрация
Авторизация
Забыли пароль?
Восстановление пароля
Источник
Изображения и текст принадлежат их авторам.
Анимация элементов в мобильных приложениях — это просто. Правильная анимация тоже может быть простой… если вы последуете представленным в статье советам.
Сегодня кто только не использует CSS 3 анимацию в своих проектах, тем не менее не только лишь все, но мало кто может делать это правильно. Даже описаны так называемые «лучшие практики», но люди продолжают делать всё по-своему. Скорее всего потому, что просто не понимают, почему всё устроено именно так, а не иначе.
Спектр мобильных устройств только и делает, что расширяется, поэтому если вы не оптимизируете свой код с учётом этого, такой подход рано или поздно даст о себе знать в виде тормозов приложения, с которыми будут сталкиваться ваши пользователи.
Запомните: не смотря на то, что в мире есть несколько флагманских девайсов, постоянно толкающих прогресс вперед, люди пользуются своим любимым антиквариатом, с которым им неохота расставаться.
Корректное использование CSS 3 устранит часть проблем, поэтому мы хотим помочь вам в понимании некоторых вещей.
Укрощая время
Что делает браузер в процессе рендеринга и управления всеми этими элементами на странице? Ответ — эта простая временная шкала, названная CRP (Critical Rendering Path).
Чтобы достичь плавности анимаций, нам необходимо сфокусироваться на изменении свойств, которые влияют на шаг Composite.
Стили
Браузер начинает рассчитывать стили, чтобы применить их к элементам.
Каркас
На данном этапе браузер формирует и определяет позицию элементов на странице. Именно в этот момент браузер устанавливает атрибуты страницы, такие как ширина, высота, отступы и другие.
Отрисовка
Браузер формирует элементы как отдельные слои, применяя к ним такие свойства, как box-shadow, border-radius, color, background-color и так далее.
Общая картина
Именно на данном этапе потребуется ваша магия, так как именно сейчас браузер отрисовывает все сформированные слои на экране. Современные браузеры отлично анимируют четыре вида свойств, оперируя трансформацией и полупрозрачностью.
- Позиция. transform: translateX(n) translateY(n) translateZ(n);
- Масштабирование. transform: scale(n);
- Поворот. transform: rotate(ndeg);
- Полупрозрачность. opacity: n;
Как достичь отметки в 60 FPS
Давайте начнем с HTML и создадим простую структуру для меню приложения внутри контейнера .layout.
<div class=”layout”>
<div class=”app-menu”></div>
<div class=”header”></div>
</div>
Неправильный путь
.app-menu {
left: -300px;
transition: left 300ms linear;
}
.app-menu-open .app-menu {
left: 0px;
transition: left 300ms linear;
}
Заметили, какие свойства мы меняем? Необходимо избегать использования трансформаций со свойствами left/top/right/bottom. Они не позволяют создавать плавную анимацию, потому что заставляют браузер пересобирать слои каждый раз, а это подействует на все дочерние элементы.
Результат примерно такой:
Анимация тормозит. Мы проверили временную шкалу DevTools, чтобы посмотреть, что происходит на самом деле, и вот результат:
Картинка ясно показывает нестабильность FPS и, как следствие, низкую производительность.
Использование трансформаций
app-menu {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
transition: transform 300ms linear;
}
.app-menu-open .app-menu {
-webkit-transform: none;
transform: none;
transition: transform 300ms linear;
}
В отличие от вышеуказанных свойств, трансформации применяются к уже отрисованным блокам, то есть на стадии Composite. В примере выше мы как бы говорим браузеру, что перед началом анимации все слои уже будут отрисованы и готовы к манипуляциям.
Временная шкала показывает, что FPS стал более ровным, поэтому и анимация будет выглядеть несколько плавнее.
Анимация с использованием GPU
Всё может быть ещё лучше. Для этого мы будем использовать графический ускоритель.
.app-menu {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
transition: transform 300ms linear;
will-change: transform;
}
В то время как translateZ() или translate3d() всё еще требуются некоторыми браузерами, как некий хак, будущее за свойством will-change. Оно указывает браузеру переместить элементы в отдельный слой так, чтобы он затем не проверял весь каркас на предмет сборки или отрисовки.
Видите, насколько плавной стала анимация? Таймлайн это подтверждает:
FPS стал ещё более стабильным, но всё же еще остается один медленный отрезок анимации в начале. Исходя из структуры меню, в JS обычно пишут примерно такую обработку:
function toggleClassMenu() {
var layout = document.querySelector(“.layout”);
if(!layout.classList.contains(“app-menu-open”)) {
layout.classList.add(“app-menu-open”);
} else {
layout.classList.remove(“app-menu-open”);
}
}
var menu = document.querySelector(“.menu-icon”);
menu.addEventListener(“click”, toggleClassMenu, false);
Проблема в том, что добавляя класс к контейнеру .layout, мы заставляем браузер пересчитывать стили еще раз, а это сказывается на скорости компоновки и отрисовки.
Как по маслу
Но что если бы меню было расположено за областью видимости? Сделав это, мы задействовали бы только тот элемент, который действительно необходимо анимировать, то есть наше меню. Для ясности — структура HTML:
<div class=”menu”>
<div class=”app-menu”></div>
</div>
<div class=”layout”>
<div class=”header”></div>
</div>
Теперь мы можем контролировать состояние меню несколько по-другому. Мы будем управлять анимацией через класс, который удаляется после того, как анимация заканчивается, используя событие transitionend.
function toggleClassMenu() {
myMenu.classList.add(“menu–animatable”);
myMenu.classList.add(“menu–visible”);
}
function onTransitionEnd() {
myMenu.classList.remove(“menu–animatable”);
}
var myMenu = document.querySelector(“.menu”),
menu = document.querySelector(“.menu-icon”);
myMenu.addEventListener(“transitionend”, onTransitionEnd, false);
menu.addEventListener(“click”, toggleClassMenu, false);
Ну, а теперь всё вместе. Вашему вниманию полный пример CSS 3, где всё на своих местах:
.menu {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 150;
}
.menu—visible {
pointer-events: auto;
}
.app-menu {
background-color: #fff;
color: #fff;
position: relative;
max-width: 400px;
width: 90%;
height: 100%;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
-webkit-transform: translateX(-103%);
transform: translateX(-103%);
display: flex;
flex-direction: column;
will-change: transform;
z-index: 160;
pointer-events: auto;
}
.menu—-visible.app-menu {
-webkit-transform: none;
transform: none;
}
.menu-—animatable.app-menu {
transition: all 130ms ease-in;
}
.menu–visible.menu—-animatable.app-menu {
transition: all 330ms ease-out;
}
.menu:after {
content: ‘’;
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
opacity: 0;
will-change: opacity;
pointer-events: none;
transition: opacity 0.3s cubic-bezier(0,0,0.3,1);
}
.menu.menu–visible:after{
opacity: 1;
pointer-events: auto;
}
А что показывает временная шкала?
Как-то так.
Источник
Если у вас пк/ноутбук с объемом оперативной памяти меньше 8 ГБ, то данный урок создан именно для вас.
В принципе, данная настройка “облегчит жизнь” абсолютно любого компьютера.
Гуляя по интернету, вы наверняка замечали, что спустя небольшой промежуток времени ваш компьютер начинает тормозит, открытие вкладок и прокрутка страниц очень замедляется. Если в этот момент вы посмотрите на верхнюю панель управления своего браузера, то увидите как минимум 10 открытых вкладок. В этом и кроется главная причина “тормозов” в его работе.
70 открытых вкладок!? WTF?? А я то думал, мои 20 – это много!
НЕМНОЖКО МАТЧАСТИ.
Все дело в том, что в наше время браузеры “жрут” оперативку ведрами. Им все время ее мало. За последние пару лет “прожорливость” браузеров выросла примерно в 3 раза.
Например, всего три года назад движок “Оперы” потреблял меньше 200 Мб оперативки, а каждая открытая вкладка около 50 Мб. Сейчас же движок любого браузера тратит 500 – 600 Мб оперативки, а каждая открытая вкладка 150 – 200 Мб.
Если вы не используете блокировщик рекламы, затраты оперативки будут еще выше.
Создатели оперативной памяти Corsair даже выпустили очень смешное видео на эту тему. В нем показано сравнение прожорливости браузера “Хром” и фотошопа.
Арифметика довольно проста. Имея на борту 2 Гб оперативки, а таких компов/ноутбуков очень много, вы сможете использовать для своей работы около 1 Гб (половину забирает ваша система).
И это не считая антивируса и различных дополнительных программ.
Из оставшегося гига памяти почти 600 Мб уйдет на запуск движка браузера без учета различных расширений. Несложно подсчитать, что, открыв всего 5 вкладок, вы столкнетесь с “тормозами” как в браузере, так и в самой системе.
Для примера посмотрите, сколько оперативки ест браузер с 8 открытыми вкладками.
1,2 Гб оперативки съели 8 открытых вкладок в хромоподобном браузере
На 4 гигах оперативки комфортное использование браузера ограничится 10-15 вкладками.
Конечно, если у вас от 16 Гб оперативки, то у вас не будет никаких проблем со скоростью работы браузера, но все же стоит присмотреться к данному способу, чтобы не тратить ресурсы железа впустую.
КАК УСКОРИТЬ РАБОТУ БРАУЗЕРА?
Для ускорения работы браузера мы будем использовать специальное расширение, которое будет “усыплять” все неиспользуемые вкладки без необходимости закрывать их вручную. Благодаря этому они не будут кушать оперативку вашей машины и создавать нагрузку на систему.
Единственный минус данного метода – на восстановление вкладки уходит примерно 1 секунда. Приходится чуть-чуть подождать. Но это с лихвой окупается быстрой работой браузера.
1. Если у вас браузер “Опера”, сначала установите расширение Install Chrome Extensions (оно позволит вам устанавливать расширения браузера “Хром”).
Если у вас другой хромо-подобный браузер, переходите к пункту 2.
К сожалению, данная фишка не работает в браузере Firefox, из-за отсутствия поддержки расширений “Хром”.
2. Переходим на страницу расширения The Great Suspender в магазине “Хром” и устанавливаем его.
3. В “Опере” вас перекинет в дополнительное меню для подтверждения установки The Great Suspender.
4. Вам сразу же откроется меню настроек расширения. Кроме того, его значок добавится в панель инструментов браузера (справа от адресной строки).
Значок “The Great Suspender” в панели инструментов
The Great Suspender имеет богатый набор настроек, а, с недавних пор, еще и полную русскую локализацию. Так что вы без труда разберетесь во всем сами.
Настройки применяются сразу, достаточно проставить галочки.
Меню настроек “The Great Suspender”
Вы можете задать таймер отключения вкладок в промежутке от “никогда” до “2 недель”, горячие клавиши для различных действий и создать белый список сайтов, вкладки которых не будут “усыпляться”.
Меню настроек “The Great Suspender”. Выбор времени до “усыпления”
Обязательно советую поставить галочки в разделе “Приостановленные вкладки”, а время до усыпления – 5 минут.
Раздел “Приостановленные вкладки”
5. Если вы щелкните левой кнопкой мыши по значку расширения в панели инструментов браузера, вам откроется меню с быстрым доступом к различными функциям.
Меню быстрого доступа
6. Теперь все вкладки, кроме активной, будут “усыплены” расширением, пока вы не перейдете на них.
В начале урока вы видел скрин, с информацией о то, сколько оперативки отнимают 8 открытых вкладок. Теперь посмотрите на то же самое, но с включенным The Great Suspender.
Все неактивные вкладки “заморожены” и не тратят драгоценную оперативку
Мы видим, что оперативная память идет только на движок браузера, а все открытые вкладки исчезли из списка из-за “усыпления”. Также они перестали потреблять оперативную память.
7. Вы можете убедиться в работе расширения и через стандартный диспетчер задач Windows. Жмем правой кнопкой мыши по панели задач Windows и в открывшемся меню выбираем “Диспетчер задач”.
Вызов “Диспетчера задач”
В списке процессов найдите свой браузер и сравните, сколько оперативки он ест до и после усыпления вкладок. Вы будете приятно удивлены.
Браузер “Вивальди” и 8 открытых вкладок
Браузер “Вивальди” с работающим “The Great Suspender”
Как видите, снижается нагрузка не только на оперативку, но и на процессор.
Надеюсь, данный урок был для вас полезен.
ТАКЖЕ СОВЕТУЮ ПОСМОТРЕТЬ
Для чего нужна эта незаметная, но очень полезная кнопка рядом с часами в панели задач Windows?
Как назначить действия на углы рабочего стола Windows? Очень полезная фишка для всех! (Windows 7,8/8.1,10)
Как парой кликов удалить весь встроенный хлам из Windows 10?
Как за секунду навсегда отключить бесполезный “Защитник” Windows 10?
Помогло ли вам такое ускорение работы браузера? Пишите в комментариях!
Источник