При изменении каких свойств браузер затратит больше всего ресурсов и почему

Слушая доклад Андрея Ситника из 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 механизм всплытия

Результаты ответов

Ген. паролей
Ген. промокодов
Пройти тест
Темы блога
Контакты
Вход
Регистрация

Авторизация

Забыли пароль?

Восстановление пароля

Источник

Если вы давно подумываете о смене профессии или же наоборот только вступаете в трудовую жизнь и Вам интересен web, интернет, дизайн, то обратите внимание на такую профессию как верстальщик. Верстальщик создает при помощи кода разметки web-страницы: размещает текст и картинки. Дизайнер придумывает дизайн сайта, а верстальщик делает так, чтобы это всё работало в разных браузерах, на планшетах и мобильных телефонах.

Если хотите иметь хотя бы некоторое представление о том, что Вас может ждать на собеседовании, то посмотрите на вопросы которые могут задать соискателю на должность верстальщик.

Вопросы на собеседование на должность верстальщика

1. Что такое DOCTYPE и для чего он нужен?
2. Что пишут в теге HEAD?
3. В чем разница между тегами div и span?.
4. Вложенность тегов?
5. Нужно ли в 5-м ХТМЛ закрывать /> одиночные теги ?
6. Отличие i от em и т. д.?
7. Как сделать чтобы все гиперссылки сайта открывались в новом окне, т.е чтобы по умолчанию использовался target=»_blank»?А как теперь быть, если какую-то из гиперссылок я захочу открыть в этом же окне, т.е. не создавая новое?
8. Как убрать маркер у ul.
10. Типы верстки. Табличная, адаптивная. Вопросы по стилю. Как больше нравится, почему? Как именует и группирует в CSS. Как часто оставляет комментарии и что вообще комментирует. Что геморно делать. На чем верстает.
11. Используете ли сас?
12. Объясните своими словами отличия между xhtml 1.0 и html 5.
13. Какие бывают значения display? Расскажите как ведёт себя каждое свойство.
14. Что вы знаете о весе селекторов? Каковы значения веса?
15. Какие бывают значения у свойства position? Расскажите как ведёт себя каждое свойство.
16. Что будет если задать элементу с position:relative свойство top:10px left: 10px? Что будет если тоже самое задать элементу с position: static?
17. Что такое float? Float в переводе с английского — наплывать.
18. Что такое clearfix? Из чего он состоит и для чего он?
19. Как верстать html письма?
20. Из чего строится размер элемента?
21. Что такое border-box?
22. Расскажите о различия padding и margin?
23. Как ведут себя margin у двух элементов по соседству?
24. Какие теги по умолчанию являются блочными, а какие строчными? Можно ли изменить их поведение и как?
25. Есть ли у тегов предопределённые стили?
26. Как повлиять на вертикальное выравнивание строчного элемента?
27. Как браузер “читает” css?
28. Какие свойства браузеру отрисовать тяжелее всего?
29. При изменении каких свойств браузер затратит больше всего ресурсов и почему?
30. Какие вы знаете псевдоэлементы? Где их используют?
31. Что такое инлайновые стили?
32. Инлайновые стили “сильнее” стилей в обычном файле css?
33. Что такое наследование стилей?
34. Что вы знаете об !important?
35. Как отцентровать элемент по горизонтали не зная ширину родительского блока?
36. Как отцентровать элемент по вертикали не зная высоту родительского блока? Перечислите все известные вам методы.
37. Какие вы знаете значения размеров в “резиновой” вёрстке?
38. Какие бывают значения у свойства background-size? Расскажите о каждом из них.
39. Что такое семантичная вёрстка? Для чего она? Улучшает ли она что либо?
40. Чем отличается article от section?
41. Из чего можете верстать (форматы файлов, программы).
42. Опишите идеально созданный для вас .PSD
43. Знакомы ли с бутстрапом? Или другие фремворки?
44. Пару заданий «на внимательность» — найти ошибку в тегах атрибутах. Изменить шаблон чтобы было меньше элементов в менюшке (позаботясь об индексации и спрайтах), Как сделать то-то и то-то в CSS (закругленные уголки — тут и кроссбраузерность и напишет ли 2 радиуса по x и y).
45. Практические знания, если хоть несколько сайтов сайтов сверстал — ответит. На стиль дам задание где текст в виде фото (что исправишь?), в резиновом дизайне выброшу минимальную ширину (тот же вопрос).
46. Приоритеты, несколько правил к одному элементу. Какой стиль «победит» — атрибут в теге, или !important, в теге style класс или наследование тегов, по ИД и классам вопросы.
47. Позиционирование, зет-индекс. Наследование свойств. «тег+тег» vs «тег>тег» vs «тег тег».
48. Задачки на кроссбраузерность. Что нужно сделать, чтобы в браузере таком-то отображалось адекватно. Настройки пользователя. Сброс. Универсальный селектор.
49. Можно на *{font-size: 200%;} и вложенные элементы дать. Каким будет размер шрифта.
50. Какие вы знаете способы организации css кода?
51. Что такое БЭМ?
52. По БЭМ может ли быть блок внутри блока?
53. Какие из препроцессоров вы знаете? В чём их различия?
54. Какие из инструментов сборки вам знакомы?
55. Что лучше Gulp или Grunt?
56. Как происходит “сборка” проекта в Gulp и Grunt?
57. Что лучше Less или Scss?
58. Вы знакомы с Google Pagespeed?
59. Что такое gracefull degradation?
60. Как проверить html-код на валидность?
61. Что такое размер viewport?
62. Вертикальный скролл входит в размер viewport?
63. Какой размер вертикального скролла?
64. Как правильно задать overflow для body чтобы сохранить вертикальный скролл?
65. Как сделать мобильную, планшетную и десктопную версию сайта?
66. Что такое ретинизация?
67. Как можно задавать размеры картинкам?
68. Что такое SVG?
69. Что такое иконочные шрифты? Где их искать и как подключать?
70. Что лучше, делать иконки через SVG или через иконочные шрифты?
71. Какие вы знаете способы подключения шрифтов к странице?
72. Какие есть способы вставки SVG в HTML? В чём между ними разница?
73. Как мы можем взаимодействовать с SVG?
74. Как проверить кроссбраузерность тех или иных методов вёрстки?
75. Что такое JQuery?Как найти элемент на странице с помощью JS и JQuery?
76. Что вы знаете о замыканиях и областях видимости в JS?
77. Чем ограничена область видимости JS?
78. Чем ограничена область видимости Document?
79. Что такое DOM?
80. Что подразумевает понятие MVC?
81. Что такое AJAX?
82. Как вызвать отладчик в разных браузерах?
83. Расскажите что показывает каждая вкладка в отладчике?
84. Что такое NODE JS?
85. Что такое Bower?
86. Что такое npm?
87. Расскажите про формат .json?
88. Зачем нам обычно файл package.json?
89. Что такое git?
90. Знакомо ли вам git flow? Если да, то расскажите что это такое?
91. Вы знакомы с работой в командной строке?
92. Какой командой посмотреть список папок и файлов в категории?
93. Какой командой мы можем создать и удалить папку в директории?
94. Какому DOCTYPE отдается предпочтение при верстке с нуля?
95. Для каких браузеров/устройств верстали?
96. В чем облегчение при отказе от верстки под IE6? IE7?
97. Какие свойства получает элемент, которому назначено свойство display:inline-block?
98. Чем отличается display:none от visibility:hidden?
99. Какой HTML-документ можно назвать валидным? Что проверяет валидатор?
100. Какие теги в HTML употреблять нельзя?
101. Какие атрибуты html-тегов устарели?
102. Чем отличается класс (class) от идентификатора (id) в HTML?
103. Какими тегами и атрибутами можно подключать внешние ресурсы в HTML?
104. Какие атрибуты есть у тега input?
105. Какие значения есть у атрибута type тега input?
106. Чем отличается visibility:hidden от dusplay:none?
107. Как очистить поток? Приведите примеры, зачем это может понадобиться.
108. В чем разница между inline, block, inline-block?
109. Чем отличается margin от padding?
110. Как отпозиционировать один элемент относительно другого?
111. Что такое спрайты?
112. Расскажите о принципах Responsive верстки
113. Используете вы Perfect Pixel или что-то аналогичное?
114. Знаете ли вы о CSS архитектурах? БЭМ, OOCSS, SMACSS?

Некоторые вопросы похожи, их можно объединить, чтобы выдать наиболее полный ответ. Дерзайте, готовьтесь, много верстайте — работодатели очень любят портфолио. Рано или поздно вас пригласят работать.

Источник

Изображения и текст принадлежат их авторам.

Анимация элементов в мобильных приложениях — это просто. Правильная анимация тоже может быть простой… если вы последуете представленным в статье советам.

Сегодня кто только не использует 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.

Неправильный путь

.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:

Теперь мы можем контролировать состояние меню несколько по-другому. Мы будем управлять анимацией через класс, который удаляется после того, как анимация заканчивается, используя событие 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;
}

А что показывает временная шкала?

Как-то так.

Источник