dom

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

Выполните задачи:

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

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

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

Любые вопросы по задачам задавайте в чате учебной группы.

Бонус

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

Давайте поговорим о критическом CSS и блокирующем JavaScript.

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

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

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

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

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

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

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

Узлы

Вы уже знаете, что наиболее важные узлы в DOM — текстовые и HTML-элементы. Все узлы реализуются в интерфейсе 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().