DOCTYPE — это сокращение от DOCument TYPE (тип документа). DOCTYPE всегда связан с DTD — Document Type Definition (определение типа документа).
DTD определяет как должны быть структурированы документы определенного типа (т.е. тег button может содержать в себе тег span , но не div ), в то время как DOCTYPE объявляет, к какому DTD предположительно относится документ.
Для веб-страниц объявление DOCTYPE необходимо. Он используется для того, чтобы сообщить пользовательскому агенту, к какой версии спецификаций HTML принадлежит ваш документ. Как только пользовательский агент распознал правильный DOCTYPE, он запустит режим no-quirks, соответствующий этому DOCTYPE, для чтения документа. Если пользовательский агент не распознает правильный DOCTYPE, он активирует режим quirks.
DOCTYPE для стандарта HTML5 определяется как .
Вопрос немного расплывчатый. Полагаю, что речь о наиболее частом случае: как показывать страницу, где содержимое доступно на нескольких языках, но отображается на одном определенном.
Когда к серверу делается HTTP-запрос, то браузер пользователя обычно отсылает информацию о предпочитаемом языке в заголовке Accept-Language . Сервер может использовать эту информацию, чтобы вернуть версию документа на подходящем языке, если такая возможность есть. В возвращённом HTML-документе обязательно должен быть указан атрибут lang у тега , к примеру . .
На бэкенде HTML-разметка будет содержать плейсхолдер i18n, а контент для конкретного языка будет храниться в YAML- или JSON-формате. Сервер динамически формирует HTML-страницу с контентом на конкретном языке, чаще всего при помощи бэкенд-фреймворка.
До того, как JavaScript-фреймворки стали популярны, фронтенд-разработчики использовали data- атрибуты чтобы хранить дополнительные данные прямо в DOM без хаков вроде нестандартных атрибутов или дополнительных свойств в DOM. Атрибуты этого семейства предназначены для хранения частных данных пользователя, для которых не существует более подходящих атрибутов или элементов на странице или в приложении.
На сегодняшний день использование data-атрибутов не поощряется. Одной из причин является то, что пользователь может модифицировать данные в атрибуте, используя инспектор кода в браузере. Данные лучше хранить в самом JavaScript и обновлять DOM при помощи связывания данных через библиотеку или фреймворк.
Все вышеупомянутые технологии являются механизмами хранения типа ключ-значение на клиентской стороне. Они могут хранить данные только как строки.
| cookie | localStorage | sessionStorage | |
|---|---|---|---|
| Инициатор | Клиент или сервер. Сервер может использовать заголовок Set-Cookie | Клиент | Клиент |
| Срок хранения | Устанавливается вручную | Всегда | До закрытия вкладки |
| Хранение между сессиями | Зависит от установки срока хранения | Да | Нет |
| Отправка на сервер с каждым HTTP-запросом | автоматически, с помощью заголовка Cookie | Нет | Нет |
| Емкость (на один домен) | 4 КБ | 5 МБ | 5 МБ |
| Доступность | В любом окне | В любом окне | В той же вкладке |
Примечание: Атрибуты async и defer игнорируются, если у тега нет атрибута src .
Размещение внутри тега необходимо при создании оптимизированного веб-сайта. Когда страница загружается впервые, HTML и CSS анализируются одновременно; HTML создает DOM (объектную модель документа), а CSS создает CSSOM (объектную модель CSS). И то, и другое необходимо для создания визуальных элементов на веб-сайте, что позволяет быстро определить время «первого значимого рисования». Этот прогрессивный рендеринг является категорией оптимизации сайтов, которые измеряются в их показателях эффективности. Размещение таблиц стилей в нижней части документа — это то, что препятствует прогрессивной загрузке страницы во многих браузерах. Некоторые браузеры блокируют рендеринг, чтобы избежать перерисовки элементов страницы, если ее стили изменятся. Все это время пользователь будет пялиться на пустую белую страницу. В других случаях может возникать мерцание нестилизованного содержимого (FOUC), на котором может отображаться веб-страница без применения стилей.
Размещение прямо перед
Теги блокируют отрисовку HTML на то время, пока они скачиваются и исполняются. Размещение скриптов внизу позволяет сперва распарсить и показать пользователю весь HTML.
Исключением является случай, когда в вашем скрипте содержится document.write() . Но на сегодняшний день его использование не считается хорошей практикой. К тому же, расположение скриптов внизу разметки означает, что браузер не может начать их скачивать до тех пор, пока не отрисован весь документ. Единственным рабочим способом, при котором будет расположен внутри , является добавление атрибута defer.
Прогрессивный рендеринг — это название технологий, используемых для ускорения отрисовки страниц (в частности, для уменьшения времени загрузки), чтобы показать пользователю контент как можно скорее.
До того, как широкополосный интернет распространился повсеместно, прогрессивный рендеринг встречался довольно часто. Но этот подход по прежнему полезен в современной разработке, поскольку все более популярным (и ненадежным) становится мобильный доступ в интернет.
Примеры подобных технологий:
Вы должны использовать атрибут srcset , когда хотите показывать пользователям разные изображения в зависимости от их ширины дисплея их устройств — предоставление изображений более высокого качества устройствам с retina-дисплеями улучшает работу пользователя, в то время как предоставление изображений с низким разрешением на устройства с низким разрешением повышает производительность и уменьшает объём передаваемых данных (поскольку нет видимой разницы с большими изображениями). Например: указывает браузеру отображать малое, среднее или большое изображение в зависимости от разрешения дисплея пользователя. Первое значение — это имя изображения, а второе — ширина изображения в пикселях. Для ширины устройства 320px выполняются следующие расчеты:
Если у клиента стандартное разрешение 1x, то 1.5625 является ближайшим коэффициентом, и 500w соответствующее small.jpg будет отображено в браузере.
Если же разрешение retina (2x), браузер будет использовать ближайшее разрешение выше минимального. Это означает, что он не выберет 500w (1.5625), потому что оно больше 1 и изображение может выглядеть плохо. Браузер затем выберет изображение с результирующим соотношением ближе к 2, то есть 1000w (3.125).
srcset решает проблему, когда вы хотите показывать файлы изображений меньшего размера для устройств с узким экраном, поскольку они не нуждаются в больших изображениях, как на настольных дисплеях, — а также, при желании, вы можете показывать изображения с различным разрешением для экранов с высокой/низкой плотностью пикселей.
Да, Pug (ранее известный как Jade), ERB, Slim, Handlebars, Jinja, Liquid и это только некоторые из них. По моему мнению, все они более или менее одинаковые и предоставляют одинаковые возможности экранирования контента и полезных фильтров для работы с отображаемыми данными. Большинство шаблонизаторов позволяют вводить собственные фильтры, если вам необходима дополнительная обработка контента перед его отображением.