Данила Маврин

Как браузер рисует страницы

2023-02-20T10:10:58.300Z

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

Загрузка основного ресурса
Получение внешних ресурсов
Выполнение JavaScript
Построение Render-дерева
Расчёт макета (Layout)
Отрисовка документа (Paint)
Объединение слоёв (Composite)

Загрузка основного ресурса

Под основным ресурсом подразумевается точка входа в веб-приложение. В большинстве случаев это обычный index.html файл.

После загрузки изначального ресурса, браузер начинает парсинг HTML-файла, выделяя "токены", которые представляют собой начало тега, конец тега и его содержание.

Из всего анализа документа, браузер строит так называемое DOM-дерево.

Парсинг HTML в DOM

Получение внешних ресурсов JavaScript

Помимо HTML ресурсов, веб-приложение так-же может задействовать внешние ресурсы, например такие, как CSS или JS файлы, картинки, а так-же аудио-файлы.

Загрузка JavaScript-файлов

Как только браузер доходит до инициализации JavaScript-файлов, он блокирует парсинг HTML. После чего начинается скачивание и выполнение скриптов.

Загрузка скриптов JS во время парсинга HTML файла

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

Одновременная загрузка всех скриптов JS

Почему же загрузка скриптов JS требует остановки парсинга? Дело в document.write, который работает только на этапе парсинга и модифицирует исходный документ в том месте, где был вызван скрипт и заблокирован парсер.

Атрибуты async и defer

Мы можем влиять на порядок загрузки скриптов посредством использования атрибутов async и defer. В случае с async, скрипт будет запрошен сразу и будет блокировать парсинг только на этапе выполнения скрипта. Соответственно остальные асинхронная загрузка скрипта не даёт гарантии, что он загрузится в правильном порядке относительно остальных скриптов.

Загрузка скрипта JS с атрибутом async

При использовании defer, скрипт выполнится сразу после парсинга страницы, не блокируя его. При чём скрипт будет сохранять порядок выполнения для всех остальных defer скриптов в вызываемой последовательности.

Важные особенности:

Каждый предыдущий defer-скрипт будет блокировать следующий.
defer откладывает событие DOMContentLoaded, в отличии от async

Загрузка скрипта JS с атрибутом defer

Получение внешних ресурсов CSS

В отличии от получения JavaScript ресурсов, стили не блокируют парсинг HTML-файла, однако блокируют отрисовку страницы.

Рекомендуется инициализировать CSS-файлы до скриптов, чтобы браузер грузил стили в первую очередь. В противном случае, браузер начнет скачивать стили только после того, как скачает и выполнит JS-код, что соответственно отложит отрисовку.

Загрузка CSS и JS ресурсов во время парсинга HTML

Создание CSSOM

После загрузки стилей, браузер строит из полученных ресурсов так называемый CSSOM (Cascade Style Sheets Object Model). Это что-то похожее на DOM, только для стилей, где для каждого стиля есть соответствующий узел.

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

Преобразования CSS кода в CSSOM

Выполнение JS кода

После переломного момента, когда HTML загружен, преобразован в DOM, а JavaScript спаршен, генерируется так называемое событие DOMContentLoaded.

Остальные ресурсы, такие как картинки, или стили, могут быть ещё не загружены.

Для любого сценария, задействующего модель DOM, рекомендуется сначала дождаться этого события.

document.addEventListener('DOMContentLoaded', () => {
  // Код, задействующий модель DOM
});

После завершения загрузки HTML со всеми внешними ресурсами (картинки, стили, асинхронный JS и т.д.), срабатывает событие браузера, под названием load.

Важно то, что событие load наступает у объекта window.

window.addEventListener('load', () => {
  // Страница полностью загружена
});

Особенности срабатывания событий DOMContentLoaded и window.load()

Помимо этого, мы можем явно проследить за состоянием загрузки страницы с помощью свойства document.readyState. Он имеет 3 возможных значения:

"loading" - документ на стадии загрузки
"interactive" - документ полностью прочитан
"complete" - документ полностью прочитан и внешние ресурсы загружены

document.addEventListener('readystatechange', () => {
 console.log('readyState: ', document.readyState);
});

Важное уточнение, что document.readyState станет "interactive" прямо перед событием DOMContentLoaded. Эти две вещи, на самом деле, обозначают одно и то же. Так-же соответствует "complete" для window.onload.

Жизненный цикл страницы

Построение Render-дерева

После всех вышеизложенных действий, браузер начнет строить так называемое Render-дерево. Оно представляет собой сочетание DOM и CSSOM, однако не все узлы попадут в итоговое рендер дерево.

В него не попадут узлы со свойством display: none, однако узлы со стилями opacity: 0 или visibility: hidden включены будут. Так-же в него не попадут теги, не содержащие визуальной информации, такие как <head />

Объединение DOM с CSSOM

Расчёт макета (Layout)

После создания Render-дерева, браузер начинает позиционировать элементы на странице. Для этого он раcсчитывает размеры и положение каждого элемента рекурсивно. Расчёт начинается от корневого элемента Render-дерева, размер которого равен размеру viewport'а.

Layout также может быть глобальным, когда требуется расcчитать положение render объектов всего дерева, и инкрементальный, когда требуется рассчитать только часть дерева.

Расчёт макета относительно HTML и CSS кода

Отрисовка (Paint)

Во время этого этапа, браузер наполняет пиксели на экрана цветами в зависимости от контента.

Также, как и расчёт макета, отрисовка бывает глобальной и инкрементальной. Чтобы понять, какую часть viewport'а нужно перерисовать, браузер делить его ан прямоугольные блоки. Если изменения ограничены одним участком, то перерисуется только он.

Объединение слоев (compose)

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

Композитинг - это разделение содержимого страницы на «слои», которые браузер будет перерисовывать. Эти слои друг от друга не зависят, из-за чего изменение элемента в одном слое не затрагивает элементы из других слоёв, и перерисовывать их становится не нужно. А итоговое изображение является объединением всех этих слоев в единой целое, причем данная операция выполняется уже на GPU, а она заточена на такие операции, так что выполнение происходит очень быстро.

Для выделения слоя используются следующие триггеры:

СSS-свойства Perspective или 3D Transform;
CSS Opacity animation;
CSS Transform animation;
Некоторые CSS-фильтры;
Элементы <video /> с ускоренным видео-декодингом
<canvas /> с 3D или ускоренным 2D контекстом

Представление слоёв страницы https://ya.ru/

Заключение

Какие же итоги мы можем подвести? Браузер получает HTML, затем движок читает его и преобразовывает в DOM. После этого он пытается применить к DOM-дереву стили, образуя в следствии Render-дерево, с помощью которого браузер превращает древовидную структуру в пиксели и делит её на слои.

На картинке ниже кратко описан весь процесс загрузки страницы в браузере. Она также содержит JavaScript, так как в нынешних реалиях редко встречаются статичные страницы, и пользователь постоянно взаимодействует с ней при помощи JS.

Процесс загрузки страницы

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

Остались вопросы или есть, чем поделиться? Пиши в комментариях

Что должен уметь Frontend разработчик в 2023 году (+Roadmap)

2023-02-07T09:26:31.340Z

Ситуация на рынке IT

С каждым годом войти в IT становится всё труднее. За счёт высоких зарплат, комфортного образа жизни, амбиций, потребности в специалистах, сейчас чуть ли не каждый второй хочет стать программистом. За счёт этих факторов, рынок труда в IT перенасыщается, из-за чего потребности в навыках специалистов тоже выросли. Теперь от разработчиков даже требуют уметь программировать, я знаю, это ужасно...

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

Как развиваться (Roadmap)

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

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

Beginner (Новичок)

Сейчас мы говорим о человеке, который только начинает вливаться в IT индустрию, а конкретнее в разработку интерфейсов.

Здесь важно выделить, что эти знания - максимальная база. Вы навряд-ли сможете трудоустроиться с этими знаниями, но это даст толчок в развитии.

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

Что такое TCP/IP, из каких уровней состоят и какие протоколы содержит. (В частности Ethernet, IP, UDP, TCP, HTTP1/2/3)
Что такое HTML. Базовые элементы разметки. Семантика SEO-оптимизация и доступность.
Что такое CSS. Базовые свойства стилизации. Позиционирование элементов макета. Flexbox. Grid. Адаптивность посредством составления @media запросов. Анимации и трансформации. Псевдоэлементы и псевдоклассы. Методология БЭМ.
Основы языка программирования JavaScript. Типы данных. Циклы, Условия, Работа с объектами. Функции. Прототипы и наследование. Работа с объектами. Методы массивов.
Выбрать редактор кода. Я лично из своего опыта рекомендую Visual Studio Code или WebStorm (платный).

Trainee (Стажёр)

Если вы знакомы с понятиями описанными выше, вы можете переходить к следующему этапу - Trainee.

Изучив технологии, описанные в данном разделе, вы уже имеете какой-никакой вес в IT мире и даже сможете устроиться на стажировку в IT-компанию.

Стажёр должен быть знаком со следующим перечнем технологий:

Уметь работать с браузерным окружением и DOM (Document Object Model). Браузерные события. Обработка ошибок (Try/Catch). Пользовательские ошибки. ООП. Модульная система. Экспорт и импорт. Динамические импорты. Web API.
Что делает JavaScript - асинхронным. Что такое Event Loop. Микро и макро задачи. Промисы. Fetch API. Синтаксический сахар - Async и Await.
Что такое DNS-зоны и домены. Cross-Origin Resource Sharing (CORS). Preflight Requests. No-CORS mode. Request & Response Headers.
Что такое линтеры. Настройка ESLint и подключение плагинов. Настройка Prettier и Stylelint. Pre-commit Check.
Как работает система управления версиями (Git). Регистрация на GitHub. Коммиты. Репозитории. Форки. Merge Requests. Checkout. Ветки.
Что такое Node.js. Как работает менеджер пакетов Npm. package.json и package-lock.json. npm install, npm uninstall. Dependencies & Development Dependenices. Создание своего пакета.
Что такое препроцессор. SASS и SCSS. Переменные. Импорты. Вложенность. Модули. Миксины.

Junior (Младший разработчик)

Изучив следующий перечень технологий, по моему опыту, вы уже можете стать младшим разработчиком в IT-компании:

Что такое сборщик модулей. Babel. Настройка Webpack. Правила. Модули. Плагины. DevServer. Переход к Vite.
Что такое React и какие проблемы он решает. Жизненный цикл компонентов. Особенности виртуального DOM-дерева. React компоненты. Базовые хуки и разработка собственных. React Portals. React Refs. JSX синтаксис. Props & State.
Особенности FLUX архитектуры. Reducers. Actions. Хук useContext. Redux и Redux Toolkit. Redux Thunk. RTK Query. (По желанию можно изучить MobX и/или Zustand)
Что такое роут. Из чего состоит объект Location. Как манипулировать историей сессии через History. Библиотека React Router.
Как повысить эффективность стилизации. Что такое PostCSS. Плагин CSS Modules. Библиотека TailwindCSS. Что такое UI библиотека. MUI. Ant Design.
Что такое VPS/VDS. Базовые команды терминала Linux систем. Права доступа. Ununtu. Nginx. Базовая настрока веб-сервера. SSH. Ассиметричное шифрование.
Что такое CI/CD. Интеграция. Доставка. Развертывание. Структура и настройка. Пайплайны. Артефакты. Этапы. Переменные.

Middle (Средний специалист)

Если вы изучили все предыдущие темы, по моему мнению, вы уже можете называть себя Junior Front-end Developer. Но на этом останавливаться рано.

Чтобы вырасти до Middle Front-end разработчика, вам необходимо изучить следующий перечень технологий:

Что такое TypeScript и какие проблемы он решает. Интерфейсы. Типы. Дженерики. Enum. Интеграция с технологиями. Типизация React-приложения.
Что такое авторизация? Идентификация. Аутентификация. Методы аутентификации. Bearer Token. JWT. Защита роутов. Протокол OAuth. Интеграция с сервисами.
Что такое оффлайн. Как работают Web & Service Workers. Регистрация сервисов. Жизненный цикл Service Worker'ов. Cache API. Методы Cache API. Как кэшировать выборку запросов.
Что такое PWA (Progressive Web Application). Надежность. Быстрота. Привлекательность. Favicon. Настройка Manifest'а.
Как настроить доступность приложения. Что такое Screen Readers и Voice Over. Доступность с клавиатуры. Библиотека Focus Trap. Семантика. Анализ доступности через Lighthouse.
Как локализировать приложение. Объект navigator. Intl. Плюрализация и Интернационализация. Библиотека l18next. Localazy.
Что такое Next.js и какие проблемы он решает. Что такое SSG, SSR, ISR и в чем между ними разница. Роутинг Next.js приложения. Оптимизация. SEO.
Почему тормозят сайты. Основные метрики Web Vitals. Анализ производительности. Методы оптимизации. Tree Shaking. React.lazy и React.Suspense. Как браузер рисует страницы. Layout. Paint. Compose. Rendering Pipeline. Парсинг HTML и CSS. Объединение DOM и CSSOM. Render-дерево. Мемоизация. useMemo и useCallback. Оптимизация изображений. Houdini Paint API.
Из чего состоит тестирование приложений. Мониторинг ошибок. Sentry Service. Что такое E2E, Unit и интеграционное тестирование. Пирамида тестирования. Библиотека Jest. Таймеры Jest. Мок-функции. TDD. Тестирование React-приложения через React Testing Library. Методы поиска элементов на странице. Тестирование событий. E2E тестирование с помощью Cypress.

Senior (Старший разработчик)

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

GraphQL, Apollo, PostgreSQL, Fastify, Vue, Angular, Svelte, Remix, Astro, React Native, Relay Modern, Redux Saga, Web 3.0

Это лишь часть того, что вы можете изучить и это лишь то, что относится к Front-end разработке. После изучения всех вышеописанных технологий, вы можете идти в Full-stack разработку или же в другую специализацию в целом. Главное, чтобы вам нравилось то, чем вы занимаетесь.

Заключение

Как вы поняли по этой статье, путь в IT совсем не легкий и требует много времени. Этот путь отнюдь не простой и быстрый. Скорость развития зависит напрямую от вас и вашего стремления. В моём окружении есть мидлы, которым по 18-19 лет. Вы должны посвятить этому свою жизнь. Сделать работу частью себя. Вы должны получать кайф от своей работы. В любом случае, попробовать стоит, возможно в этом вы найдёте себя.

Пишите ваше мнение и вопросы в комментариях.

Полезные материалы:

TypeScript для начинающих: преимущества языка и первый код

2023-02-02T20:06:45.991Z

TypeScript — то же самое, что и JavaScript, но переменные не могут менять типы.

Цель создания TypeScript — сделать JavaScript лучше. TypeScript добавляет в JavaScript типы, позволяя явно задавать их для всех структур данных. Это увеличивает читаемость кода и уменьшает количество ошибок в финальной сборке приложения.
Еще у TypeScript есть компилятор (транспайлер), который проверяет код на ошибки и помогает их исправить до выхода в продакшен.
TypeScript использует последние возможности JavaScript, которые поддерживают не все браузеры. Но при этом в TypeScript можно безопасно использовать весь потенциал JavaScript, не переживая за совместимость: в результате код будет скомпилирован в максимально совместимый со всеми браузерами JavaScript.
TypeScript легко начать применять в существующем проекте на JavaScript, постепенно обновляя старый код. Это позволяет легко перенести код на TypeScript, не уходя в затяжной рефакторинг. Такая опция критически важна в продуктовых командах, которые постоянно балансируют между выпуском новых фич и рефакторингом старого кода.

С момента разработки TypeScript активно развивался, сегодня это один из самых популярных языков программирования. По данным опроса сообщества StackOverflow в 2022 году, TypeScript занимает 3 место в рейтинге самых любимых языков программирований.

Stack Overflow Developer Survey 2022 - Рейтинг самых любимых языков программирования

В этой небольшой статье я хотел бы изложить основные особенности и преимущества TypeScript.

Как установить и настроить TypeScript

Часто, фреймворки уже имеют поддержку шаблона на базе TypeScript, однако бывают случаи, когда мы начинаем разработку с чистого листа, в таком случае вам понадобится Node.js. После чего вам необходимо установить соответствующий npm пакет с помощью команды:

npm install -g typescript

Дальше для компиляции кода на языке TypeScript в JavaScript необходимо использовать префикс tsc, например:

tsc my-first-typescript-app.ts

После чего код из файла my-first-typescript-app.ts компилируется в файл формата JavaScript. Важно, что любой код TypeScript в любом случае компилируется в JavaScript.

Как работает TypeScript

Типы переменных

При объявлении переменной можно явно указать её тип. В ином случае TypeScript сам узнает тип из значения.

const value: string = "Данила вещает...";
const value = "Данила вещает...";

Массивы

Так же, как и для переменных, TypeScript позволяет объявить типы для массивов.

const array: string[] = ['A', 'B', 'C']

Объекты

TypeScript может вывести тип объекта из значений его полей.

const user: {
  id: number;
  name: string;
  role: 'student' | 'teacher';
  password: string;
} = {
  id: 1,
  name: 'Данила',
  role: 'teacher',
  password: 'Frontend'
}

Типы и интерфейсы

В TypeScript мы можем выносить типизацию отдельно с помощью type и interface

type RoleType = 'student' | 'teacher';

interface UserType {
  id: number;
  name: string;
  role: RoleType;
  password: string;
}

const user: UserType = {
  id: 1,
  name: 'Данила',
  role: 'teacher',
  password: 'Frontend'
}

Функции

TypeScript умеет типизировать передаваемые в функцию значения, а так же ответ функции.

const multiplication = (a: number, b: number): number => {
  return a * b;
}

Дженерики

Generics, или же обобщенные типы, полезны в случаях, когда может работать с разными типами. Таким образом тип можно будет задать позднее, во время вызова функции.

const convert = <T>(value: T): Array<T> => {
  return [value];
}

convert<string>('Данила вещает...'); // [ 'Данила вещает...' ]
// За место T в функции convert подставился тип 'string'

Enum

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

enum Roles {
  Student, // 0
  Teacher, // 1
}

// или

enum Roles {
  Student = 'student', // 'student'
  Teacher = 'teacher' // 'teacher'
}

interface UserType {
  id: number;
  name: string;
  role: Roles;
  password: string;
}

const user: UserType {
  id: 1,
  name: 'Данила',
  role: Roles.Student, // 'student'
  password: 'Frontend'
}

Завершение

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

TypeScript - активно развивающийся и популярный язык программирования, который стоил и стоит внимания в 2023 году.

В будущих статьях я покажу вам Best Practices, как правильно типизировать различные элементы на React, Redux Toolkit, NestJS и прочих поддерживаемых технологиях.

Спасибо за просмотр🥴