Чем HTML отличается от XHTML?

XHTML представляет собой словарь XML, в то время как HTML - это лишь предшествующий XHTML язык разметки.

Основное различие между ними заключается в обработке документа. Документы XHTML обрабатываются своим модулем (парсером) аналогично документам XML. В процессе этой обработки ошибки, допущенные разработчиками, не исправляются. Более подробно о различиях:

  • Все элементы должны быть закрыты. Теги, которые не имеют закрывающего тега (например, <img> или <br>) должны иметь на конце /, например - <br />.

  • Булевы атрибуты записываются в развёрнутой форме. Например, следует писать <option selected="selected"> или <td nowrap="nowrap">.

  • Имена тегов и атрибутов должны быть записаны строчными буквами (например, <img alt="" /> вместо <IMG ALT="" />).

  • XHTML гораздо строже относится к ошибкам в коде: < и & везде, даже в URL, должны замещаться < и & соответственно. По рекомендации W3C браузеры, встретив ошибку в XHTML, должны сообщить о ней и не обрабатывать документ. Для HTML браузеры должны были попытаться понять, что хотел сказать автор.

  • Кодировкой по умолчанию является UTF-8 (в отличие от HTML, где кодировкой по умолчанию является ISO 8859-1).

Что такое DOCTYPE и зачем он нужен?

DOCTYPE - это определение типа документа (Document Type Definition (DTD)), правила, в соответствии с которыми осуществляется проверка конкретного документа (веб-страницы) XML или (X)HTML. Благодаря этой записи, браузер определяет, какая в данном документе используется версия DTD. А нужен он для того, чтобы браузеры правильно отображали разметку документа.

Ссылки. Как задать адрес документа, на который следует перейти?

<a href="https://alishoff.com/blog/156">Абсолютная ссылка</a>
<a href="../example/index.html">Относительная ссылка</a>

В каком регистре лучше писать HTML-код?

Раньше считалось, что это безразлично. Но с приходом XHTML на этот вопрос появился однозначный ответ - все теги, атрибуты и предопределенные значения пишем в нижнем регистре.

Что такое entities?

Entities - это комбинации знака & и буквенного или цифрового кода после нее, предназначенные для замещения символов, которые не могут встречаться в "чистом" виде в HTML-тексте, например, символа "<".

Как сделать чтобы все гиперссылки сайта открывались в новом окне, т.е чтобы по умолчанию использовался target="_blank"?

Нужно в области head прописать тег base с атрибутом target="_blank":

<head>
    <base target="_blank">
</head>

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

В тег <a> этой ссылки вам уже нужно будет добавить атрибут target="_self", ибо по умолчанию сейчас у нас используется target="_blank".

Что такое стандарты W3C?

Консорциум всемирной паутины (World Wide Web Consortium, W3C) - организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины. W3C разрабатывает для Интернета единые принципы и стандарты, называемые "рекомендациями", которые затем внедряются производителями программ и оборудования. Таким образом достигается совместимость между программными продуктами и аппаратурой различных компаний, что делает Всемирную сеть более совершенной, универсальной и удобной.

Объясните три основных способа применения стилей CSS к веб-странице.

  • Использование встроенного в элемент атрибута Style;
  • Блок <style> в <head>;
  • Подключение файла .css с помощью тега <link>.

Что такое CSS?

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

Что такое DOM (объектная модель документа) и как она связана с CSS?

Объектная модель документа (DOM) - это межплатформенный и независимый от языка интерфейс прикладного программирования, который обрабатывает документ HTML, XHTML или XML как древовидную структуру, где каждый узел является объектом, представляющим часть документа.

Используя объектную модель документа, программисты могут создавать документы, перемещаться по их структуре, а также добавлять, изменять или удалять элементы и содержимое. DOM определяет интерфейсы, которые могут использоваться для управления документами XML или HTML.

Когда браузер отображает документ, он должен объединить содержимое документа с информацией о его стиле. Браузер преобразует HTML и CSS в DOM (объектную модель документа). DOM представляет документ в памяти компьютера. Он сочетает в себе содержание документа со своим стилем.

В чем разница между классами и идентификаторами в CSS?

Идентификаторы - должны быть уникальными в документе. Элементы могут иметь только один атрибут id.

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

Опишите floats и как они работают?

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

#sidebar {
    float: right; // Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне			
}

Объясните CSS-спрайты, и как бы вы реализовали их на странице или сайте?

CSS-спрайты объединяют несколько изображений в одно большое изображение. Это широко используемая техника для иконок (Gmail использует ее). Используйте генератор спрайтов, который упаковывает несколько изображений в одно и генерирует соответствующий CSS для него. Каждое изображение будет иметь соответствующий класс CSS с определенными свойствами background-image, background-position и background-size. Чтобы использовать это изображение, добавьте соответствующий класс к вашему элементу.

Преимущества:

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

Что такое кроссбраузерность?

Это правильная верстка сайта с помощью которой страницы сайта одинаково отображаются в различных браузерах. Не все правила CSS одинаково поддерживаются всеми браузерами. Используются специальные префиксы для тех браузеров, которые поддерживают свойство с префиксами. Используйте Reset CSS или Normalize.css для постановки автопрефиксов и нормализации CSS.

Что такое CSS препроцессор?

Препроцессор CSS - это программа, которая позволяет генерировать CSS из собственного уникального синтаксиса препроцессора. Есть много CSS-препроцессоров на выбор, однако большинство CSS-препроцессоров добавят некоторые функции, которые не существуют в чистом CSS, такие как миксин, селектор вложенности, селектор наследования и так далее. Эти функции делают структуру CSS более удобочитаемой и легкой в обслуживании.

Вот несколько самых популярных CSS препроцессоров:

  • Sass (SCSS)
  • Less
  • Stylus
  • PostCSS

В чем разница между "сбросом" и "нормализацией" CSS?

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

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

Что такое селекторы CSS? Назовите некоторые.

Селектор CSS является частью набора правил CSS, который выбирает контент, который вы хотите стилизовать.

Рассмотрим некоторые типы селекторов CSS:

Универсальный селектор: *
Селектор типа элемента: ul, td
Селектор идентификатора: #id
Селектор класса: .box
Любой Потомок: #id .box
Дочерний: #id> .box
Брат и сестра: ~

Что такое псевдоэлементы?

Псевдоэлемент CSS - это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определенную часть выделенных элементов. Их можно использовать для оформления (:first-line, :first-letter) или добавления элементов в разметку (в сочетании с content: ...) без необходимости изменять саму разметку (:before, :after).

Что такое грид-система в CSS?

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

В чем разница между относительным, фиксированным, абсолютным и статически расположенным элементом?

Позиционированный элемент - это элемент, чье вычисленное свойство position является относительным, абсолютным, фиксированным или закрепленным.

  • static - положение по умолчанию; элемент попадет на страницу, как обычно. Свойства top, right, bottom, left и z-index не применяются.
  • relative - положение элемента корректируется относительно себя без изменения макета (и, таким образом, остается место для элемента там, где он был бы, если бы он не был расположен).
  • absolute - элемент удаляется из потока страницы и располагается в указанной позиции относительно его ближайшего расположенного предка, если таковой имеется, или иным образом относительно исходного содержащего блока. Абсолютно позиционированные боксы могут иметь поля, и они не разрушаются вместе с другими полями. Эти элементы не влияют на положение других элементов.
  • fixed - элемент удаляется из потока страницы и позиционируется в указанной позиции относительно области просмотра и не перемещается при прокрутке.
  • sticky - это гибрид относительного и фиксированного позиционирования. Элемент обрабатывается как относительное положение до тех пор, пока он не пересекает заданный порог, после чего он рассматривается как фиксированное положение.
  • inherit - значение должно быть унаследовано от элемента родителя.

Для чего нужна очистка float в CSS?

Свойство clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.

Как адаптировать страницу для печати?

Добавить медиазапрос (@media print { ... }) и класс со свойством page-break-before: always; (Добавляет разрыв страницы при печати документа перед заданным элементом).

Опишите действие z-index.

Свойство z-index в CSS управляет вертикальным порядком расположения элементов, которые перекрываются. z-index влияет только на элементы, которые имеют значение позиции, которое не является статическим.

Без какого-либо значения z-index элементы складываются в том порядке, в котором они появляются в DOM (самый нижний элемент на том же уровне иерархии отображается сверху). Элементы с нестатическим позиционированием (и их дочерние элементы) всегда будут отображаться поверх элементов со статическим позиционированием по умолчанию, независимо от иерархии HTML.

Контекст стека - это элемент, который содержит набор слоев. Для каждой веб-страницы создается отдельный контекст стека по умолчанию. Корнем этого контекста (таблицы) является элемент html. Или это может быть локальный контекст стека, созданный с помощью определенных свойств и значений. Внутри локального контекста стека значения z-index его дочерних элементов устанавливаются относительно этого элемента, а не корня документа.

Что значит * { box-sizing: border-box; }, каковы его преимущества?

По умолчанию элементы имеют box-sizing: content-box; учитывается только размер содержимого.

Высота элемента теперь вычисляется по высоте содержимого + вертикальные паддинги + ширина вертикального бордера.

Ширина элемента теперь рассчитывается по ширине содержимого + горизонтальные паддинги + горизонтальные бордеры.

box-sizing: border-box изменяет способ вычисления: ширины и высоты элементов, границы и отступы также включаются в расчет.

Пример:

div {
	width: 160px;
	height: 80px;
	padding: 20px;
	border: 8px solid red;
	background: yellow;
}

.content-box { 
	box-sizing: content-box; 
	/*
		Итоговая ширина элемента: 160px + (2 * 20px) + (2 * 8px) = 216px
		Итоговая высота элемента: 80px + (2 * 20px) + (2 * 8px) = 136px
		Ширина контента: 160px
		Высота контента: 80px
	*/
}

.border-box { 
	box-sizing: border-box;
	/*
		Итоговая ширина элемента: 160px
		Итоговая высота элемента: 80px
		Ширина контента: 160px - (2 * 20px) - (2 * 8px) = 104px
		Высота контента: 80px - (2 * 20px) - (2 * 8px) = 24px
	*/
}

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>

Какая связь между SGML, HTML, XML и XHTML?

SGML (Standard Generalized Markup Language - стандартный обобщённый язык разметки) – это стандарт, который определяет разметку документа.

HTML – это язык разметки, который описывается с помощью SGML.

Итак, с помощью SGML было создано DTD (определение типа документа), на которое ссылается и которого должен придерживаться HTML. Поэтому вы всегда можете найти декларацию «DOCTYPE» в начале страницы HTML, которая определяет, какое DTD будет использовать браузер при разборе кода страницы.

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

XHTML был создан из XML и использовался в HTML 4.0.

Вкратце, SGML стоит в основе всего. Старые версии HTML основаны на SGML, а HTML 4.0 использует XHTML, построенный на основе XML.

Что такое HTML 5?

HTML 5 – это новый стандарт HTML, главной целью которого является предоставление любого контента без использования дополнительных плагинов, таких как Flash, Silverlight и т.д. Он содержит всё необходимое для отображения анимации, видео, богатого графического интерфейса и прочего.

HTML5 – это результат совместной работы World Wide Web Consortium (W3C) и Web Hypertext Application Technology Working Group (WHATWG).

В HTML 5 нам не нужно DTD. Почему?

HTML 5 не использует SGML или XHTML. Это полностью новая разработка, поэтому вам не нужно ссылаться на DTD. В HTML 5 вам нужно использовать следующую декларацию doctype, которая позволяет браузеру идентифицировать документ как HTML 5:

<!DOCTYPE html>

Если я не вставлю в документ <!DOCTYPE html>, будет ли работать HTML 5? Нет, браузер не сможет идентифицировать документ как HTML 5, и теги HTML 5 не будут работать корректно.

Какие браузеры поддерживают HTML 5?

Практически все браузеры, как Safari, Google Chrome, Firefox, Opera, Internet Explorer поддерживают HTML 5.

Как изменилась структура страницы при переходе с HTML 4 или предыдущих версий на HTML 5?

Обычно веб-страница содержит заголовки, подвал, навигацию, основной контент и боковой блок. Поэтому когда мы хотим представить эти блоки в HTML 4 с подходящим наименованием, мы, скорее всего, будем использовать теги DIV. Но в HTML 5 введены более понятные элементы для этих блоков, что позволило сделать код HTML более читаемым.

Ниже приведено описание этих элементов HTML 5:

  • <header>: Представляет блок заголовка страницы;
  • <footer>: Подвал страницы;
  • <nav>: Навигационные элементы страницы;
  • <article>: Основной контент страницы (статья);
  • <section>: Используется внутри статьи, чтобы разделить статью на секции;
  • <aside>: Представляет боковой блок страницы.

Что такое элемент datalist в HTML 5?

Элемент datalist в HTML 5 помогает реализовать функцию автозаполнения в поле для ввода. Ниже приведён код HTML для элемента DataList:

<input list="Country">
<datalist id="Country">
	<option value="India">
	<option value="Italy">
	<option value="Iran">
	<option value="Israel">
	<option value="Indonesia">
</datalist>

Что такое SVG?

SVG означает Scalable Vector Graphics (масштабируемая векторная графика). Это текстовой язык графики, с помощью которого можно рисовать изображения в виде текста, линий, точек и т.п., что позволяет создавать лёгкие и быстро обрабатываемые браузером изображения.

Что такое canvas в HTML 5?

Canvas – это область HTML документа, в которой вы можете рисовать.

В чём разница между canvas и SVG?

SVG:

  • SVG действует по принципу «нарисовал и запомнил». Другими словами любая фигура, нарисованная с помощью SVG, запоминается, допускает манипуляции над собой, и браузер может нарисовать её снова.
  • SVG подходит для создания графики такой, как в программах CAD, где пользователь может манипулировать однажды нарисованным изображением.
  • Медленный формат, т.к. ему требуется запоминать координаты для будущих манипуляций.
  • Мы можем создать обработчик событий, связанный с нарисованным объектом.
  • Не зависит от разрешения.

Canvas:

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

Расскажите о блочной модели CSS.

Блочная модель CSS – это прямоугольное пространство вокруг элемента HTML, в котором определяются границы, поля и отступы.

  • Границы – определяют максимальную область, в которой будет содержаться элемент. Мы можем сделать границу видимой, невидимой, определить высоту и ширину элемента и т.п.

  • Поля – определяют расстояния между границами и элементом.

  • Отступы – определяют расстояния между границами и соседними элементами.

Что такое web workers и зачем они нужны?

Рассмотрим следующий «тяжёлый» цикл for, который выполняется миллиард раз:

function SomeHeavyFunction() {
    for (i = 0; i < 1000000000; i++) {
        x = i + x;
    }
}

Допустим, этот код исполняется при нажатии на кнопку HTML формы. Исполнение этой функции синхронное. Другими словами браузер будет ждать окончания цикла.

<input type="button" onclick="SomeHeavyFunction();" />

В итоге это может привести к зависанию браузера и сообщению об ошибке.

Поэтому если бы мы могли поместить этот тяжёлый цикл в файл JavaScript и запустить его асинхронно, тогда браузеру не пришлось бы ждать его завершения, и мы бы получили более отзывчивое приложение. Для этого и предназначена технология web workers, позволяющая исполнять файлы JavaScript асинхронно.

Расскажите о концепции локального хранилища в HTML 5

Часто нам нужно хранить информацию о пользователе на его локальном компьютере. Допустим, пользователь наполовину заполнил большую форму, и неожиданно пропадает интернет соединение. Поэтому хорошо было бы хранить эту информацию локально у пользователя, а когда интернет соединение восстановится, пользователь использовал бы её и отправил на сервер.

Современные браузеры имеют хранилище, называемое «Локальным хранилищем» («Local storage»), где вы можете хранить эту информацию.

- Как мы можем добавлять и удалять данные из локального хранилища?

Данные добавляются и удаляются из локального хранилища с помощью пары «ключ-значение». Ниже приведён пример кода добавления страны «India» с ключом «Key001»:

localStorage.setItem("Key001", "India");

Получить данные из локального хранилища можно с помощью метода «getItem», передав ему значение ключа:

var country = localStorage.getItem("Key001");

Также вы можете хранить объекты JavaScript, как показано ниже:

var country = {};
country.name = "India";
country.code = "001";
localStorage.setItem("001", country);

var country1 = localStorage.getItem("001");

Если вы хотите хранить данные в формате JSON, вы можете использовать функцию «JSON.stringify»:

localStorage.setItem("001", JSON.stringify(country));

- Какой срок жизни у локального хранилища?

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

- В чём разница между локальным хранилищем и cookies?

Cookies:

  • Данные доступны как на стороне клиента, так и на стороне сервера. Cookies пересылаются на сервер при каждом запросе;
  • 4095 байт для каждой cookie;
  • Cookies имеют срок хранения. После истечения этого срока, cookie удаляются;

Локальное хранилище:

  • Данные доступны только на стороне браузера клиента. Сервер не может получить доступ к данным локального хранилища до тех пор, пока они не отправлены на сервер методом POST или GET;
  • 5 Мб для каждого домена;
  • Срока хранения не существует. Данные будут храниться до тех пор, пока пользователь не удалит их из своего браузера, либо вы не удалите их, используя код JavaScript;

Что такое хранилище сессии и как его создать?

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

Чтобы создать хранилище сессии, вам нужно использовать конструкцию «sessionStorage.имяпеременной». В следующем коде мы создаём переменную «clickcount». Если вы обновите страницу в браузере, счётчик увеличится. Но если вы закроете браузер и откроете его снова, переменная «clickcount» снова установится в ноль:

if(sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 0;
}

- В чём разница между хранилищем сессии и локальным хранилищем?

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

Что такое WebSQL?

WebSQL – это реляционная база данных, работающая на стороне браузера клиента. Внутри браузера есть реляционная СУБД, в которой вы можете выполнять SQL запросы.

- Является ли WebSQL частью спецификации HTML 5?

Нет. Многие относят его к HTML 5, но WebSQL не является частью спецификации HTML 5. Спецификация основана на SQLite.

- Так как же можно использовать WebSQL?

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

var db = openDatabase('dbCustomer', '1.0', 'Customer app’, 2 * 1024 * 1024);

Выполнять запросы можно с помощью функции «transaction», вызывая внутри неё метод «executeSql»:

db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS tblCust (id unique, customername)');
    tx.executeSql('INSERT INTO tblcust (id, customername) VALUES (1, "john")');
    tx.executeSql('INSERT INTO tblcust (id, customername) VALUES (2, "doe")');
}

В случае если вы выполняете запрос «select», вы получаете данные в коллекцию «results», которую можно обходить и отображать результаты на странице:

db.transaction(function (tx) {
	tx.executeSql('SELECT * FROM tblcust', [], function (tx, results) {
		for (i = 0; i < len; i++) {
			msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
			document.querySelector('#customer).innerHTML +=  msg;
		}
	}, null);
});

Объясните разницу между cookie, sessionStorage и localStorage.

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

Cookie:

  • Инициатор: клиент или сервер. Сервер может использовать заголовок Set-Cookie.
  • Срок хранения: устанавливается вручную.
  • Хранение между сессиями: зависит от установки срока хранения.
  • Связь с доменом: да.
  • Отправка на сервер с каждым HTTP-запросом: автоматически, с помощью заголовка Cookie.
  • Емкость, на один домен: 4 КБ.
  • Доступность: в любом окне.

Local Storage:

  • Инициатор: клиент.
  • Срок хранения: всегда.
  • Хранение между сессиями: да.
  • Связь с доменом: нет.
  • Отправка на сервер с каждым HTTP-запросом: нет.
  • Емкость, на один домен: 5 МБ.
  • Доступность: в любом окне.

Session Storage:

  • Инициатор: клиент.
  • Срок хранения: до закрытия вкладки.
  • Хранение между сессиями: нет.
  • Связь с доменом: нет.
  • Отправка на сервер с каждым HTTP-запросом: нет.
  • Емкость, на один домен: 5 МБ.
  • Доступность: в той же вкладке.

Разница между <script>, <script async> и <script defer>?

  • <script> - отрисовка HTML блокируется, скрипт извлекается и выполняется немедленно, отрисовка HTML возобновляется после окончания выполнения скрипта.
  • <script async> - скрипт будет извлечен и обработан параллельно с отрисовкой HTML, его выполнение закончится как только это будет возможно (обычно до того, как закончилась отрисовка HTML). Используйте async тогда, когда скрипт не зависит от других скриптов на странице, например для аналитики.
  • <script defer> - скрипт будет извлечен параллельно с отрисовкой HTML, его выполнение произойдет после того, как вся страница будет загружена. Если таких скриптов несколько, то каждый из них будет исполнятся в том порядке, в котором они расположены в документе. Если скрипту нужен полностью распарсеный DOM, то атрибут defer обеспечит уверенность в том, что на момент отработки скрипта весь HTML отрисован. Нет особой разницы со скриптами, расположенными перед тегом <body>. Отложенный скрипт не должен содержать document.write.

Атрибуты async и defer игнорируются, если у тега <script> нет атрибута src.

Почему хорошей практикой считается располагать <link> для подключения CSS между <head></head>, а <script> для подключения JS ставить перед </body>, знаете ли вы исключения?

- Размещение <link> внутри <head>

Необходимость помещать теги <link> внутри шапки сайта описана в спецификации. Кроме того, размещение в верхней части разметки позволяет загружать страницу постепенно, что хорошо отражается на опыте использования. Проблема, возникающая при размещении таблиц стилей в нижней части страницы, заключается в том, что этот порядок препятствует прогрессивной загрузке страницы во многих браузерах. В том числе в Internet Explorer. Некоторые браузеры блокируют загрузку страницы, чтобы избежать перерисовки элемента, если его стили изменятся. Все это время пользователь будет видеть белый экран. Такое поведение браузеров предотвращает мерцание или отрисовку нестилизованых элементов.

- Размещение <script> прямо перед </body>

Теги <script> блокируют отрисовку HTML на то время, пока они скачиваются и исполняются. Скачивание скриптов в конце позволяет сперва распарсить и показать пользователю весь HTML.

Исключением является случай, когда в вашем скрипте содержится document.write(). Но на сегодняшний день его использование не считается хорошей практикой. К тому же, расположение скриптов внизу разметки означает, что браузер не может начать их скачивать до тех пор, пока не отрисован весь документ. Единственным рабочим способом, при котором <script> будет расположен внутри <head>, является добавление атрибута defer.

Что такое прогрессивный рендеринг?

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

Примеры технологий:

  • Ленивая загрузка картинок. Картинки на странице не загружаются все разом. JavaScript подгрузит картинки тогда, когда пользователь доскроллит до той части страницы, на которой они расположены.
  • Приоритизация видимого контента. Только минимум CSS, контента, скриптов, необходимых для отрисовки той части страницы, которую пользователь увидит первой. Вы можете использовать отложенные скрипты или слушать события DOMContentLoaded или load, чтобы загрузить остальные ресурсы и контент.
  • Асинхронные фрагменты HTML. Отправка в браузер частей HTML-страницы, созданной на бэкенде.