Надежные концепции для вашего следующего собеседования
1. Что такое прогрессивный рендеринг?
Под прогрессивным рендерингом понимаются методы, которые используются для повышения производительности веб-страницы, такие как максимально быстрое отображение содержимого. Веб-разработчики всегда должны изучать такие методы для создания веб-страниц, которые более удобны для пользователя и совместимы с медленным интернет-соединением.
Например:
- Ленивая загрузка изображений с использованием JavaScript может использоваться для загрузки изображений, когда пользователь прокручивает страницу вниз.
- Использование только минимального количества сценариев CSS для количества страниц, которые будут отображаться в браузере пользователя как можно быстрее.
2. Объясните атрибут srcset в теге изображения.
Тег srcset срабатывает, когда вы хотите предоставить пользователям разные изображения в соответствии с шириной экрана их устройства. Передача изображений более высокого качества на устройства с высоким разрешением или наоборот увеличивает производительность и позволяет избежать потери данных.
Например:
- Допустим, вы используете изображение с несколькими разрешениями. С помощью тега srcset вы можете указать браузеру отображать маленькое, среднее, большое изображение в зависимости от разрешения клиента. Также обратите внимание, что при использовании тега srcset вам необходимо определить соответствующую ширину, чтобы выполнить работу.
3. Опишите разницу между ‹script async› & ‹script defer›
- В случае ‹script async›, сценарий извлекается параллельно с анализом HTML и выполняется, как только он становится доступным.
- Но в случае ‹отложенного выполнения сценария›, сценарий также извлекается параллельно с анализом HTML, но выполнение выполняется, когда страница завершает работу. парсинг.
- Также обратите внимание, что при наличии нескольких сценариев каждый сценарий выполняется в том порядке, в котором они были встречены в документе.
Примечание: атрибуты async и defer игнорируются для скриптов без атрибута src.
4. Перечислите некоторые передовые методы разработки многоязычных сайтов.
- Атрибут lang: всегда используйте атрибут lang в своем HTML.
- Направление чтения на языке. Позаботьтесь о языковом направлении, которое вы используете, поскольку в английском мы читаем слева направо. вправо & вверх до внизу. Но в традиционном японском тексте вверх до вниз и вправо до влево. .
- Форматирование дат и валют. При разработке многоязычных сайтов необходимо убедиться, что вы используете правильные форматы даты и валюты в соответствии с регионами. Например, даты представлены как «4 апреля 2001 г.» в США, но в Европа, это будет что-то вроде «4 апреля 2001 года».
- Длина предложений. Одна из самых больших ошибок, которую вы можете сделать, - это проблемы с переполнением на ваших сайтах, когда предложение переводится на другой язык. Чтобы избежать этой проблемы, вы всегда должны использовать более короткие предложения.
5. Как работает специфичность селектора CSS?
Специфичность с использованием четырех значений, разделенных запятыми a, b, c, d, рассчитывается на основе следующего:
- a - это везде, где используются встроенные стили, и если объявление свойства является встроенным стилем для элемента, a равно 1, в противном случае - 0.
- b - количество селекторов идентификаторов.
- c - количество псевдоклассов, атрибутов и классов.
- d - количество тегов и селекторов псевдоэлемента.
Специфика в CSS работает на основе значений матрицы, которые позже сравниваются столбец за столбцом. Чтобы найти наивысшую специфичность, посмотрите от левого к правому и сравните наибольшее значение в каждом столбце.
Примечание. Значение в столбце b будет иметь приоритет над значениями в столбцах c и d, независимо от того, какая ценность у нас есть. Например, специфичность 0,1,0,0 будет больше, чем 0,0,10,10 .
6. Что такое CSS-спрайты? & Как использовать их на веб-странице?
CSS-спрайты используются для объединения нескольких изображений в одно более крупное изображение, которое обычно используется для значков на веб-страницах.
- Чтобы использовать их, мы должны использовать генератор спрайтов, который упаковывает несколько изображений в одно и генерирует соответствующий CSS.
- Поскольку каждое изображение имеет соответствующий класс CSS с определенными свойствами background-image, background-position и background-size, нам просто нужно добавить соответствующий класс вашему элементу для использования изображения.
Больше контента на plainenglish.io
