kecilust / dom

Домашнее задание к лекции «DOM»

Необходимо выполнить и предоставить на проверку следующие задачи:

1. Появление элементов при прокрутке
2. Ротатор рекламы
3. Онлайн-читалка

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

Работы должны соответствовать принятому стилю оформления кода.

Любые вопросы по решению задач задавайте в Slack-канале.

Бонус

Загрузка страницы

Помните, мы когда-то говорили о процессе загрузки страницы? Самое время поговорить о критическом CSS и блокирующем JavaScript.

Статьи о критическом CSS:

1. Разбираемся с критичным CSS
2. Критический CSS + прогрессивный CSS = ?

Для ускорения страниц в настоящий момент в теге link применяется дополнительный атрибут rel со значением preload.

Более подробно вы можете ознакомиться с информацией в этой статье: Предварительная загрузка контента при помощи rel="preload"

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

1. Remove Render-Blocking JavaScript
2. Оптимизация JavaScript для быстрой визуализации страницы
3. The Cost Of JavaScript In 2018

Также рекоендуем изучить презентацию: Critical JavaScript Path

Узлы

Вы уже знаете, что наиболее важными узлами в DOM являются текстовые и HTML-элементы. Реализация вообще всех узлов представлена интерфейсом Node. Текстовые узлы также представлены интерфейсом Node. Реализация HTML-элементов (наследуют свойства и методы от Node) представлена интерфейсом Element.

Несмотря на то, что мы говорим преимущественно о 2 типах узлов, в DOM представлено аж 12 типов, почти половина из которых порицается.

Подробнее о DOM

Часть из этих статей вы также можете найти в конце презентации к лекции.

1. Атрибуты и DOM-свойства
2. Использование data-* атрибутов
3. Координаты в окне
4. Element.getBoundingClientRect()
5. Translating Viewport Coordinates Into Element-Local Coordinates Using Element.getBoundingClientRect()