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

Обновлено: 04.07.2024

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

Что понимается под «объектом» (было рассмотрено выше).

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

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

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

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

Это свойство особенно важно для объектов, отказ которых опасен для жизни людей. Отказ рулевого управления или тормозов автомобиля может иметь тяжелые последствия, поэтому для таких объектов безотказность -наиболее важная составная часть надежности.

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

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

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

Все объекты делятся на ремонтируемые и неремонтируемые.

Ремонтируемым называется объект, для которого проведение ремонтов предусмотрено в нормативно-технической и (или) конструкторской документации.

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

С усложнением систем все труднее становится находить причины отказов и отказавшие элементы. Так, в сложных электрогидравлических системах поиск причин отказов может занимать более 50% общего времени восстановления работоспособности. Поэтому облегчение поиска отказавших элементов закладывается в конструкцию новых сложных систем. Возможность быстрого обнаружения и устранения отказа, легкий доступ ко всем узлам определяют малые затраты времени на ремонт. Таким образом, важность ремонтопригодности определяется простоями, связанными с обнаружением отказов и проведением ремонта, что в свою очередь ведет к недовыпуску продукции и значительным убыткам.

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

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

При хранении в сыром неотапливаемом помещении резиновых манжет в течение 3, 4 и 5 лет их ресурс, соответственно, снижается до 70, 30 и 3% по сравнению с новыми манжетами. Более 40% клиновых ремней выбраковывают из-за расслоения и трещин, возникающих вследствие неправильного хранения.

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

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

Основные понятия надежности

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

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

Остановимся на некоторых свойствах объекта:

• Надежность — свойство объекта сохранять во времени в установленных пределах значения всех параметров, характеризующих способность выполнять требуемые функции в заданных режимах и условиях применения, технического обслуживания, хранения, ремонта и транспортирования [ 14).

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

• Безотказность — свойство объекта непрерывно сохранять работоспособное состояние в течение некоторого времени или наработки. Это свойство обычно применяют к использованию объекта по назначению. Данное свойство важно для оборудования, отказ в работе которого связан с опасностью для жизни людей или с перерывами в работе большого комплекса машин и оборудования.
• Долговечность — свойство объекта длительно сохранять работоспособность до наступления предельного состояния при установленной системе технического обслуживания и ремонтов. Очевидно, что для невосстанавливаемых изделий понятия долговечности и безотказности совпадают.
• Ремонтопригодность — свойство объекта, заключающееся в приспособленности к предупреждению и обнаружению причин возникновения отказов, повреждений и устранению их последствий путем проведения технического обслуживания и ремонта.

Долговечность и ремонтопригодность являются определяющими свойствами уровня надежности СМиО [42]. Важность свойства ремонтопригодности машин определяется огромными затратами на ремонт. Ремонтопригодность определяет доступность, контролепригодность, легкосъемность, взаимозаменяемость, унификацию и количество смазываемых точек.

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

• Сохраняемость — свойство объекта непрерывно сохранять безотказность, долговечность и ремонтопригодность в течение и после хранения и транспортирования. Практическая роль свойства велика для машин и оборудования сезонного использования. Наиболее эффективные методы повышения сохраняемости: консервация, применение защитных специальных покрытий, профилактические мероприятия.

В идеальных условиях объект полностью сохраняет работоспособное состояние, а в реальных происходит ухудшение параметров. Поэтому в зависимости от условий и режимов применения объекта требования к сохраняемости бывают разные.

• Безопасность — свойство объекта при изготовлении и эксплуатации не создавать угрозу для населения и окружающей среды.

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

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

Для технических объектов, которые являются источниками опасности, основным является понятие безопасности.

2. Классификация систем в зависимости от возможности корректировки их свойств в

3. Характеристики всех аспектов надежности системы:

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

Наработка характеризует продолжительность или объем работы системы (измеряется в часах, числе циклов, километрах).

Ресурс – суммарная наработка, исчисляемая от начала эксплуатации системы или ее возобновление после ремонта до перехода в предельное состояние.

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

Срок сохраняемости – календарная продолжительность хранения или транспортировки объекта, в течение и после которой значения показателей надежности сохраняется в установленных пределах.

Базовые показатели не могут полностью характеризовать различных по своему назначению систем. Их перечень должен быть дополнен в соответствии с видами систем. Классификация видов систем в зависимости от возможности корректировки их свойств в процессе функционирования приведен на рис. 1.5.

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

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

Ремонт – операция по восстановлению и поддержанию работоспособности системы, устранения неисправностей, возникающих при работе и выявленных при Т.О.

В зависимости от того, предусмотрены нормативно-технической и конструкторской документацией для данной системы операции ТО, системы подразделяются на обслуживаемые и необслуживаемые.

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

В зависимости от того возможно или невозможно у данной системы восстановление работоспособного состояния в рассматриваемой ситуации системы подразделяют на восстанавливаемые и невосстанавливаемые.

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

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

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

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

где – общее число объектов в выборке;

– число объектов, отказавших к моменту времени – t.

Вероятность безотказной работы называют также функцией надежности, а ее дополнение до 1, т.е. – функцией риска.

Гамма-процентная наработка до отказа определяет интервал времени , в котором обеспечивается безотказная работа системы с вероятностью g. Увеличение вероятности g приводит к уменьшению значения .

Интенсивность отказов определяется как вероятность отказа невосстанавливаемой системы в единицу времени после данного момента времени при условии, что до этого момента времени отказ не возникал:

Статистическая оценка интенсивности отказов определена зависимостью:

где: – число отказавших объектов в выборке в интервале времени от до ;

– среднее число исправно работающих объектов в интервале .

где и – число исправно работающих объектов в начале и конце интервала , соответственно.

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

Важным показателем безотказности восстанавливаемых систем служит параметр потока отказов – отношение математического ожидания числа отказов системы за достаточно малую наработку к значению этой наработки:

где – число отказов, наступивших от начального момента времени до достижения наработки t.

Статистическая оценка параметра потока отказов для наиболее простого – стационарного потока определяется зависимостью:

Еще одним показателем безотказности восстанавливаемых систем служит наработка на отказ – среднее значение наработки восстанавливаемой системы между отказами (Т).

Статистическая оценка определится:

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

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

¾ характеризует изменение надежности во времени;

¾ охватывает большинство факторов, существенно влияющих на надежность системы, а поэтому достаточно полно характеризуют надежность;

¾ сравнительно просто может быть получена расчетным путем, что позволяет во-многом решить проблему надежности на этапе проектирования;

¾ является удобной характеристикой надежности, как простейших элементов, так и сложных систем.

Указанные достоинства явились причиной широкого практического распространения этой характеристики.

Однако имеет ряд недостатков, в числе которых тот, что является достаточно полной характеристикой только для невосстанавливаемых систем.

Интенсивность отказов , сохраняя достоинства позволяет выделить характерные участки работы системы (рис. 1.6), что делает возможным правильную организацию процесса эксплуатации системы.

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

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

Гамма – процентный ресурс (или гарантированный ресурс) – ресурс, которым обладают не менее, чем g – процентов эксплуатируемых систем, где g – гарантированная вероятность

Единицы для измерения ресурса выбираются к каждой отрасли и к каждому классу систем. Так для самолетов и авиационных двигателей мерой ресурса служит налет в часах, для автомобилей – пробег в километрах и т.п.

Срок службы – понятие тесно связанное с ресурсом и определяемое, как календарная продолжительность эксплуатации объекта до перехода его предельное состояние и измеряемое в единицах времени. Связь между гамма-процентным ресурсом и гамма-процентным сроком службы аналогична.

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

Гамма-процентный срок сохраняемости – срок сохраняемости, которым обладают не менее чем g – процентов эксплуатируемых систем.

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

Коэффициент технического использования – отношение ресурса системы к сумме ресурса и времени восстановления работоспособности.

Коэффициент готовности – отношение продолжительности безотказной работы системы за заданный период эксплуатации к сумме этой продолжительности и продолжительности ремонтов за тот же период эксплуатации.

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

Когда на собеседовании тебе показали кто тут Senior

Вопросы

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

block

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

inline

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

inline-block

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

inline-table

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

inline-flex

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

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

list-item

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

run-in

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

table

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

table-caption

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

table-cell

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

table-column

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

table-column-group

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

table-footer-group

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

table-header-group

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

table-row

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

table-row-group

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

box-sizing: border-box

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

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

margin

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

padding

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

:after
:before
:placeholder
:selection

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

cover

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

contain

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

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

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

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

article

section

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

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

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

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

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

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

scss, stylus, less

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

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

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

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

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

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

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

Что такое gracefull degradation?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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