Какие свойства браузеру отрисовать тяжелее всего

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

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

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

Авторизация

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

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

Источник

В наше время скорость интернета довольно высока. Казалось бы, можно забыть о тех временах, когда нам приходилось ждать по 20-30 (а то и больше) секунд, чтобы веб-страница загрузилась и отобразилась на экране — теперь мы ждём отрисовки страницы в среднем около одной-двух секунд. Однако не стоит забывать, что значительная часть юзеров заходит на ваш сайт с мобильных устройств, на которых связь не всегда стабильна. В связи с этим будет совсем не лишним уделить немного внимания оптимизации вашего кода.

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

Как страница выводится на экран

Давайте разберёмся в том, что происходит при открытии новой страницы.

Итак, вы нажимаете enter и браузер посылает запрос на сервер. В ответ сервер посылает запрашиваемую страницу.

Браузер выполняет анализ полученной разметки. Формируются узлы (nodes), из которых затем строится DOM.
Если браузер обнаруживает ссылки на таблицы стилей, он немедленно отправляет запрос на сервер и загружает файлы; при этом отрисовка страницы блокируется.
Загрузив стили, браузер их анализирует и строит CSSOM.
Когда DOM и CSSOM сформированы, браузер создаёт на их основе модель визуализации (rendering tree). В неё попадают только те элементы, которые будут выведены на экран.
Для каждого элемента из модели визуализации рассчитывается его положение на странице. Этот процесс называется формированием макета.
После окончания формирования макета браузер отрисовывает полученный результат (painting).

Можно много чего рассказать о процессе рендеринга страницы, однако в контексте этой статьи нас интересует второй пункт.

Для начала повторюсь: браузер блокирует отрисовку страницы во время загрузки и обработки таблиц стилей. Если на страницу подключено несколько css-файлов, то браузер загрузит все, независимо от медиазапросов. К счастью, современные браузеры достаточно умны, чтобы в первую очередь загружать те файлы, которые непосредственно требуются для отрисовки основной части страницы. Давайте рассмотрим следующий пример:

У ссылки на первый файл таблицы стилей нет никаких атрибутов, и браузер начнёт загрузку файла сразу же после обнаружения ссылки на него. У ссылки на второй файл указан атрибут media=”screen”. Этот атрибут браузер присваивает элементу <link> по умолчанию, если он отсутствует, так что второй файл будет обработан сразу же после первого. В ссылках на третий и четвёртый файлы содержится условный media-запрос. Если это условие выполняется, браузер начнёт обработку файла. Если оно не выполняется, то браузер отложит эти файлы «на потом», и сперва обработает более актуальные стили. В четвёртой ссылке в атрибуте media стоит значение «print», указывающее браузеру на то, что этот файл содержит стили для печати. Так как в данный момент браузеру они не требуются, он также отложит их обработку.

Методы оптимизации

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

Использование высокопроизводительных селекторов

Не стоит забывать, что разные селекторы обрабатываются браузером с разной скоростью. Стив Саудерс в своё время проводил исследование и рассортировал CSS-селекторы по производительности — от наиболее быстрых до медленных:

Идентификатор: #id
Класс: .class
Элемент: div
Соседний элемент: h2 + p
Дочерний элемент: li > ul
Вложенный элемент: ul li
Общий селектор: *
Атрибут: [type=«email»]
Псевдоклассы/псевдоэлементы: a:hover

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

Уменьшение каскада

Большой каскад пагубно влияет на производительность. Сравним две конструкции:

#header .header__inner nav ul.nav-menu li:hover a {}

#header li:hover a {}

Очевидно, что вторая конструкция будет обработана быстрее.

Не могу не упомянуть один важный момент. Браузер обрабатывает селекторы справа налево. Рассмотрим следующую конструкцию:

.social li a {}

В данном случае браузер сперва найдёт все ссылки на странице (только представьте, сколько времени уйдёт на обработку такого запроса на огромных страницах), затем выберет ссылки, вложенные в <li>, из полученных ссылок отсеет всё, что не вложено в элемент с классом .social. Рекомендую в таких случаях сокращать конструкцию до двух селекторов следующего вида:

.social .social_link {}

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

Минификация и склеивание CSS

Избегайте использования множества мелких CSS-файлов; хорошей практикой является «склеивание» всех файлов. Благодаря склейке файлов браузеру придётся делать один запрос к серверу вместо нескольких.

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

Сервис CSS Shrink — этим сервисом я пользуюсь постоянно.
Сервис CSS Compressor — по сравнению с предыдущим даёт бо̀льшие возможности для настройки.
Плагин для Gulp — CSSO
Плагин для Grunt — contrib-cssmin

Отключение :hover-состояний при прокрутке страницы

Некоторые сайты изобилуют интерактивными элементами, которые имеют уникальные :hover-состояния. Когда пользователь прокручивает страницу, его вряд ли интересует, что произойдёт, если навести курсор вон на ту кнопочку или на это поле ввода. Можно смело отключать :hover-состояния при прокрутке.

Простое решение — создать класс .disable-hover и добавлять его к <body> во время прокрутки.

.disable-hover {
pointer-events: none;
}

var body = document.body,
timer;

window.addEventListener(‘scroll’, function() {
clearTimeout(timer);
if(!body.classList.contains(‘disable-hover’)) {
body.classList.add(‘disable-hover’)
}

timer = setTimeout(function(){
body.classList.remove(‘disable-hover’)
}, 500);
}, false);

Critical-path CSS

Как вы уже узнали из начала статьи, стили, подключенные через <link>, блокируют отрисовку страницы до полной загрузки. Если же таблица стилей имеет большой размер, то пользователи мобильных устройств ощутят значительную задержку перед появлением чего-либо на странице. Иначе говоря, страница будет полностью пуста, пока не загрузятся стили.

Чтобы избежать этого, была придумана техника, позволяющая отобразить часть контента ещё до полной загрузки стилей. Применяется она следующим образом. Посмотрите на десктопную и мобильную версию сайта и определите, какие части страницы критически важны для пользователя. Выберите CSS, который стилизует эти части, минифицируйте его и разместите в инлайновом виде перед подключением основных стилей. Под инлайновым видом подразумевается описание стилей непосредственно на самой странице, внутри тега <style>.

Для многих поиск критически важного CSS является утомительной задачей. К счастью, давно существуют инструменты, позволяющие автоматизировать этот процесс.

Букмарклет от Paul Kinlan
«Penthouse» от Jonas Ohlsson, доступный в виде node-модуля, таска для grunt и онлайн-сервиса.

Заключение

Надеюсь, что эта статья была полезна для вас. Буду рад, если в комментариях вы опишете свои приёмы по оптимизации CSS. Спасибо за чтение!

Источник

Попробую ответить на вопросы, который у Вас могут спросить на собеседовании, на должность верстальщика.

Вопросы

Какие бывают значения display? Расскажите как ведёт себя каждое свойство.

Подробнее

Спойлер статьи

block

Элемент показывается как блочный. Применение этого значения для строчных элементов, например <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.

inline

Элемент отображается как строчный. Использование блочных элементов, таких, как <div> и <p>, автоматически создаёт перенос и показывает их содержимое с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.

inline-block

Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный.

inline-table

Определяет, что элемент является таблицей, как при использовании <table>, но при этом таблица является строчным элементом и происходит её обтекание другими элементами, например, текстом.

inline-flex

Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.

flex

Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели.

list-item

Элемент выводится как блочный и добавляется маркер списка.
none
Временно удаляет элемент из документа. Занимаемое им место не резервируется, и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учётом вновь добавленного элемента.

run-in

Устанавливает элемент как блочный или строчный, в зависимости от контекста.

table

Определяет, что элемент является блочной таблицей, подобно использованию <table>.

table-caption

Задаёт заголовок таблицы, подобно применению <caption>.

table-cell

Указывает, что элемент представляет собой ячейку таблицы (<td> или <th>).

table-column

Назначает элемент колонкой таблицы, словно был добавлен <col>.

table-column-group

Определяет, что элемент является группой одной или более колонок таблицы, как при использовании <colgroup>.

Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой <tfoot>.

Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой <thead>.

table-row

Элемент отображается как строка таблицы (<tr>).

table-row-group

Создаёт структурный блок, состоящий из нескольких строк таблицы, аналогично действию <tbody>.

Что вы знаете о весе селекторов? Каковы значения веса?

Берите в граммах, не жадничайте :simple_smile:

Если условно, есть один быстрый способ выяснить, насколько правило CSS «сильное», путём вычисления специфичности селекторов.

Вес селекторов (по убыванию):

style=“”
#id
.class
[attr=value]
LI
*

Селектор с наивысшим «счётом» будет преобладать, независимо от порядка, в котором появляются правила CSS.

Какие бывают значения у свойства position? Расскажите как ведёт себя каждое свойство.

position: absolute | fixed | relative | static | sticky

Подробнее

Спойлер статьи

absolute

Абсолютное позиционирование. Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задаётся свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчёт координат ведётся от края окна браузера. Если у родителя значение position задано как relative, то отсчёт координат ведётся от края родительского элемента.

fixed

Фиксированное позиционирование. По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.

relative

Относительное позиционирование. Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.

static

Статичное позиционирование. Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.

sticky

Это сочетание относительного и фиксированного позиционирования. Элемент рассматривается как позиционированный относительно, пока он не пересекает определённый порог, после чего рассматривается как фиксированный. Обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается на странице.

Что будет если задать элементу с position:relative свойство top:10px left: 10px? Что будет если тоже самое задать элементу с position: static?
Что такое float?

Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.

Что такое clearfix? Из чего он состоит и для чего он?

Это способ борьбы с проблемой контейнера нулевой высоты для плавающих элементов

Как верстать html письма?

Мой совет, лучше не верстать))

А в целом, таблицами, будет пуленепробиваемое. Или сейчас есть множество генераторов.

Из чего строится размер элемента?

Из его размера) Но тут есть оговорка на box-sizing

###box-sizing: content-box

Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту содержимого и не включают в себя значения margin, padding и border.

box-sizing: border-box

Свойства width и height включают в себя значения padding и border, но не margin.

Что такое border-box?

Смотри выше ☝️

Расскажите о различия padding и margin?

margin

Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.

padding

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

Как ведут себя margin у двух элементов по соседству?

У блочных элементов расположенных рядом друг с другом по вертикали наблюдается эффект схлопывания, когда отступы не суммируются, а объединяются между собой. Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху или снизу, при этом примыкающие отступы комбинируются в один. Для отступов слева и справа схлопывание никогда не применяется.

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

для элементов, у которых на стороне схлопывания задано свойство padding.
для элементов, у которых на стороне схлопывания задана граница;
на элементах с абсолютным позиционированием, т. е. таких, у которых position установлено как absolute;
на плавающих элементах (для них свойство float задано как left или right);
для строчных элементов;
для <html>.

Какие теги по умолчанию являются блочными, а какие строчными? Можно ли изменить их поведение и как?

В теме про display есть овтеты.

Есть ли у тегов предопределённые стили?

Есть, в Консоли можно посмотреть. В частности у input. В разных браузерах может быть по-разному. Если я правильно понял, о чём тут речь)

Как повлиять на вертикальное выравнивание строчного элемента?

Не понятный вопрос… Наверно, речь про vertical-align

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

Как браузер «читает» css?

Делает он это сверху вниз, проходясь последовательно по каждой строчке.

Вот крутая статья, по поводу загрузки страницы в целом.

Хотя там мало что, о css.

Какие свойства браузеру отрисовать тяжелее всего?

К ним относятся: box-shadow, border-radius, прозрачность (так как браузер должен высчитывать что показывает под полу-прозрачным элементом), трансформами transform и убийцы производительности CSS фильтры.

«Тяжелее» всего свойства меняющие вид страницы при прокрутке.
Например, есть полупрозрачные тени у блоков и один из них закреплен.
При прокрутке будет постоянно рассчитываться перекрытие теней.

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

Наверно, речь про это.

Т.е. те свойства которые заставляют браузер пересобирать слои каждый раз (left/top/right/bottom).

Какие вы знаете псевдоэлементы? Где их используют?

Самые «ходовые»:

:after
:before
:placeholder
:selection

Что такое инлайновые стили?

Стили прямо в html.

Инлайновые стили «сильнее» стилей в обычном файле css?

Да.

Что такое наследование стилей?

Брат за брата)

Наследование в CSS — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам.

Стили, присвоенные некоторому элементу, наследуются всеми потомками (вложенными элементами), если они не переопределены явно. Например, размер шрифта и его цвет достаточно применить к body, чтобы все элементы внутри имели те же свойства.

Наследование позволяет сократить размер таблицы стилей, но если стилей много, то отследить какой родительский элемент установил некоторое свойство, становится сложнее.

Что вы знаете об !important?

Переводится, как !важный )

Можно им переопределить стили.

Приходилось ли Вам сталкиваться с фоном в письмах? Расскажите о своём опыте.

Печального опыта не помню. Но в целом, надо смотреть как у почтовых клиетов обстоят с этим дела.
С background-color не было проблем.

Как отцентровать элемент по горизонтали не зная ширину родительского блока?

Наверно так:

margin: 0 auto?, text-align: center, flex, justify-content: center

Как отцентровать элемент по вертикали не зная высоту родительского блока? Перечислите все известные вам методы.

таблица
позиционирование
tranform
flexbox

Есть ещё другие.

Что такое «резиновая» вёрстка?

Чтобы было красивенько на всех устройствах.

Какие вы знаете значения размеров в «резиновой» вёрстке?

Эм, брейкпоинты? В нынешнее время их бесконечное множество.

Лучше используйте Адаптивную вёрстку)

Какие бывают значения у свойства background-size? Расскажите о каждом из них.

auto

Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.

cover

Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.

contain

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

Что такое семантичная вёрстка? Для чего она? Улучшает ли она что либо?

Вёрстка по правилам. Улучшает? Не уверен…

Чем отличается article от section?

article

Элемент <article> задаёт содержание сайта вроде новости, статьи, записи блога, форума и др.

section

Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. Раздел обычно содержит заголовок. Допускается вкладывать один тег <section> внутрь другого.

Какие вы знаете способы организации css кода?

Наверно, речь о методологиях.

БЭМ
OOCSS
SMACSS
Atomic CSS

Что такое БЭМ?

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».

По БЭМ может ли быть блок внутри блока?

Да.

Какие из препроцессоров вы знаете? В чём их различия?

scss, stylus, less

Какие из инструментов сборки вам знакомы?

Gulp, Grunt, Webpack (хотя он и не совсем для сборки, но может)

Что лучше Gulp или Grunt?

Что к сердцу ближе)

Как происходит «сборка» проекта в Gulp и Grunt?

Как описать в конфиге, так и будет происходить?

Что лучше Less или Scss?

Я бы scss выбрал. Но опять же, что к сердцу ближе)

Вы знакомы с Google Pagespeed?

Знаком.

Что такое gracefull degradation?

Функционирование элемента, но с внешними потерями.

Как проверить html-код на валидность?

Воспользоваться валидаторами

Что такое Bootstrap? Из чего состоит его сетка? На чём построен Bootstrap?

css фреймворк. Новый бустрап, вроде целиком на флексах.

Что такое размер viewport?

Мобильные браузеры отображают страницы в виртуальном «окне» (viewport, вьюпорт), которое, как правило, шире экрана устройства. Поэтому им не нужно сжимать макет каждой страницы в крошечное окно (что может сломать многие сайты, не оптимизированные под мобильные устройства). Пользователи могут изменять и масштабировать видимую область, чтобы видеть разные части страницы.

Вертикальный скролл входит в размер viewport?

Да.

Какой размер вертикального скролла?

Обычно она равна 16px, в редких и мобильных браузерах может колебаться от 14px до 18px, а кое-где даже равна 0px.

Как правильно задать overflow для body чтобы сохранить вертикальный скролл?

overflow-x: hidden;

Как сделать мобильную, планшетную и десктопную версию сайта?

Стилями.

Что такое ретинизация?

Корректное отображение элементов на ретина экранах.

Должны ли мы отдавать разные размеры картинок пользователям разных устройств? Если да, то как?

Как можно задавать размеры картинкам?

Можно стилями, можно width, height.

Что такое SVG?

Scalable Vector Graphics — масштабируемая векторная графика.

Что такое иконочные шрифты? Где их искать и как подключать?

Шрифт – иконки)

fontawesome.io/icons/

Что лучше, делать иконки через SVG или через иконочные шрифты?

svg

Какие вы знаете способы подключения шрифтов к странице?

Ссылкой, инлайново в стилях.

Какие есть способы вставки SVG в HTML? В чём между ними разница?

Инлайново, спрайтом, картинкой.

Как мы можем взаимодействовать с SVG?

Хоть как, если вставлен инлайново.

Как проверить кроссбраузерность тех или иных методов вёрстки?

Лучше на живых устройствах.

Что такое JQuery?

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML.

Как найти элемент на странице с помощью JS и JQuery?

Что вы знаете о замыканиях и областях видимости в JS?

Замыкания, область видимости

Чем ограничена область видимости JS?

–

Чем ограничена область видимости Document?

–

Что такое DOM?

Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) – объектная модель, используемая для XML/HTML-документов.

Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом «текст».

DOM – это представление документа в виде дерева объектов, доступное для изменения через JavaScript.

dom

Что подразумевает понятие MVC?

Шаблон проектирования MVC предполагает разделение данных приложения, пользовательского интерфейса и управляющей логики на три отдельных компонента: Модель, Представление и Контроллер – таким образом, что модификация каждого компонента может осуществляться независимо.

Что такое AJAX?

AJAX (аббревиатура от «Asynchronous Javascript And Xml») – технология обращения к серверу без перезагрузки страницы.

Как вызвать отладчик в разных браузерах?

F12

Расскажите что показывает каждая вкладка в отладчике?

–

Что такое NODE JS?

ajax-nodejs

Что такое Bower?

Менеджер пакетов.

Что такое npm?

Пакетный менеджер node.js

Расскажите про формат .json?

json

Зачем нам обычно файл package.json?

Установленные плагины.

Что такое git?

Управление версиями.