📂 Напоминалка по HTTP/2 и HTTP/3!

Например HTTP/2 работает поверх TCP: потеря одного пакета может задержать передачу данных сразу для всех потоков, а HTTP/3 использует QUIC (UDP), где потоки независимы, поэтому потеря пакета влияет только на один из них.

На картинке — наглядное сравнение HTTP/2 и HTTP/3 с их основными отличиями.

Сохрани, чтобы не потерять!

📣 JS Ready | #ресурс

📂 Шпаргалка: что происходит, когда вводишь URL в браузере!

Например, когда открываешь https://example.com, браузер сначала проверяет DNS-кэш и получает IP-адрес сервера, затем устанавливает защищённое HTTPS-соединение, отправляет HTTP-запрос и получает ответ с HTML, CSS и JavaScript.

На картинке показан полный путь загрузки веб-страницы:
DNS resolution — TCP/TLS handshake — HTTP request/response — обработка HTML/CSS/JS — построение DOM и CSSOM — рендеринг страницы в браузере.

Сохрани, чтобы не потерять!

📣 JS Ready | #ресурс

performance.now() — измерение времени выполнения кода!

performance.now() — это Web API для измерения продолжительности выполнения операций с высоким временным разрешением. В отличие от Date.now(), он использует монотонные часы, поэтому отлично подходит для профилирования и измерения производительности.

Метод возвращает DOMHighResTimeStamp — количество миллисекунд, прошедших с момента performance.timeOrigin. В некоторых браузерах разрешение таймера может искусственно снижаться по соображениям безопасности.

Быстрый замер выполнения кода:

const start = performance.now();

doHeavyWork();

console.log(`Время выполнения: ${performance.now() - start} ms`);

Такой способ отлично подходит для поиска узких мест в синхронном коде.

Для удобства можно сделать универсальную функцию:

function measure(fn) {
  const start = performance.now();
  const result = fn();

  return {
    result,
    duration: performance.now() - start,
  };
}

console.log(measure(runA));
console.log(measure(runB));

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

performance.now() полезен и для асинхронных операций:

async function measureAsync(fn) {
  const start = performance.now();
  const result = await fn();

  return {
    result,
    duration: performance.now() - start,
  };
}

measureAsync(fetchData)
  .then(({ duration }) => console.log(`${duration} ms`));

В этом случае измеряется общее время выполнения операции, включая ожидание Promise, сетевых запросов и таймеров.

API также позволяет быстро оценить продолжительность синхронного участка:

const start = performance.now();

renderLargeList();

const duration = performance.now() - start;

if (duration > 16.7) {
  console.warn("Синхронный код выполняется слишком долго");
}

Такой замер обычно не включает последующие этапы отрисовки (layout, paint, compositing), хотя принудительный синхронный layout, например при чтении offsetWidth или getBoundingClientRect(), попадет в результат.

При 60 Hz на кадр приходится около 16.7 ms, при 120 Hz — около 8.3 ms. Это бюджет всего кадра, а не только JavaScript, поэтому синхронный код должен занимать лишь часть этого времени.

Главное отличие от Date.now():

console.log(Date.now());        // системное время
console.log(performance.now()); // монотонное время

Date.now() зависит от системных часов, а performance.now() — нет. Именно поэтому для измерения производительности используют performance.now().

🔥 performance.now() — один из самых полезных инструментов для ручного профилирования и анализа производительности JavaScript.

📣 JS Ready | #практика

Недавно на Хабре вышла годная статья: «Что происходит внутри Angular и React при решении одних и тех же задач»!

В этой статье:
• Сравнивается, как React и Angular работают с DOM, состоянием, жизненным циклом компонентов и асинхронностью;
• Показывается, что происходит «под капотом» при рендеринге, обновлении интерфейса и обработке изменений;
• Разбираются различия в архитектуре, производительности и подходах к оптимизации, чтобы лучше понимать сильные стороны каждого инструмента.

🔊 Продолжайте читать на Habr!

📣 JS Ready | #статья

📂 Напоминалка по безопасности API!

Например, OAuth 2.0 помогает безопасно выдавать доступ к ресурсам без передачи паролей, а Rate Limiting защищает API от перегрузок и злоупотреблений.

На картинке — 12 важных принципов защиты API: HTTPS, OAuth, WebAuthn, управление ключами, авторизация, версионирование, API Gateway, валидация данных и проверка рисков по OWASP.

Сохрани, чтобы не потерять!

📣 JS Ready | #ресурс

📂 Не экранируйте обратный слэш вручную — используйте String.raw!

Например, при работе с путями Windows или динамическими регулярными выражениями вместо постоянного написания двойных \\ можно использовать String.raw, который сохраняет обратные слэши в исходном виде.

На картинке показано, как String.raw помогает работать со старыми строками без лишнего экранирования:String.raw — это тег-функция для шаблонных литералов, которая возвращает строку без обработки escape-последовательностей. Символы вроде \n, \t и \\ остаются как есть.

Сохрани, чтобы не потерять!

📣 JS Ready | #ресурс

📂 Напоминалка по URL, URI и URN в веб-разработке!

Например, URL (Uniform Resource Locator) используется для указания адреса ресурса и способа его получения (https://example.com/page), а URI (Uniform Resource Identifier) является общим идентификатором ресурса, который включает в себя URL и URN.

На картинке — сравнение трёх понятий, которые часто используют при работе с веб-технологиями, API и распределёнными системами.

Сохрани, чтобы не потерять!

📣 JS Ready | #ресурс

URLPattern — нативное сопоставление URL без ручных регулярных выражений!

Во многих проектах приходится разбирать URL: определять маршруты, извлекать параметры, проверять соответствие шаблону. Чаще всего для этого используют регулярные выражения или вручную разбирают строку, хотя современные браузеры предоставляют для этого встроенный API — URLPattern.

Создадим шаблон маршрута для страницы пользователя:

const pattern = new URLPattern({
  pathname: "/users/:id"
});

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

Проверим, соответствует ли URL заданному шаблону:

const result = pattern.exec(
  "https://site.com/users/42"
);

console.log(!!result); // true

Если совпадение найдено, exec() возвращает объект с подробной информацией о результате. Если маршрут не подходит — вернётся null.

Получим параметр маршрута:

if (result) {
  console.log(
    result.pathname.groups.id
  );

  // "42"
}

Все именованные параметры автоматически попадают в объект groups. Больше не нужно самостоятельно искать совпадения, работать с индексами или писать регулярные выражения.

URLPattern умеет сопоставлять не только путь. При необходимости можно одновременно проверять домен, протокол, порт, имя пользователя и другие части адреса.

Например, можно сразу описать шаблон для версии API:

const api = new URLPattern({
  hostname: "api.example.com",
  pathname: "/v:version/users/:id"
});

Теперь один шаблон одновременно проверяет хост и извлекает несколько параметров из пути.

Получим результат сопоставления:

const match = api.exec(
  "https://api.example.com/v2/users/15"
);

console.log(match.pathname.groups);

На выходе получим уже готовый объект:

// {
//   version: "2",
//   id: "15"
// }

URLPattern поддерживается современными браузерами, но если нужна совместимость со старыми версиями, заранее проверьте наличие API.

🔥 URLPattern — позволяет отказаться от значительной части ручного разбора URL и сделать код сопоставления маршрутов заметно чище.

📣 JS Ready | #практика