Рубрики
Без рубрики

Условно объясняется (с node.js)

Этот пост является зеркалом поста, который я написал в своем собственном блоге. Не стесняйтесь проверить это здесь! Я выпускаю искусство … Tagged with Node, JavaScript, WebDev, Tutorial.

Этот пост является зеркалом поста, который я написал в своем собственном блоге. Не стесняйтесь Проверьте это здесь ! Я выпускаю статьи на своем сайте на 2 недели раньше, чем здесь.

—

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

Вы прокручиваете вниз и замечаете обычных подозреваемых, YouTube, Tiktok, еще много чего. Тогда выйдет из синего, вы начинаете видеть кучу приложений, которые кажутся неуместными: газетные приложения, приложения для запасов, даже некоторые банковские приложения! Эти приложения иногда могут использовать большую пропускную способность, чем то, что вы думаете.

Как это могло быть? Оказывается, что многие приложения от New York Times до Robinhood часто переворачивают последнюю информацию от каждых нескольких минут до каждой секунды. Эти постоянные запросы на получение, хотя и маленькие, могут складывать.

В этой статье я объясню вам метод, который многие из этих приложений (надеюсь), которые используют), чтобы уменьшить количество пропускной способности, которую они используют, Условный получен Анкет Conditional Gets может помочь предотвратить получение того же ответа на 20 КБ каждый раз, когда вы пинг на своем сервере.

Гист

Условные получения используются в кэшировании активов, чтобы не допустить, чтобы браузер не получил ту же полезную нагрузку JavaScript/Image/CSS, если браузер кэшировал последнюю копию. Мы должны попытаться использовать Condateally Gets в любом запросе на сервер, когда мы опросили кэшируемый контент.

Давайте посмотрим на типичный поток для условного запроса:

  1. Браузер запрашивает некоторый контент с веб -сайта.
  2. Сервер возвращает контент с одним или обоими из этих заголовков:
    • Полномодированный : Некоторая дата – время (обычно временная метка), что этот контент был последним модифицированный

    • Etag : какое-то сгенерированное значение – Уникальный идентификатор, ссылаясь на ресурс в конкретное состояние вовремя

      • ETAG может быть хэшем содержания, идентификатор, назначенный всякий раз, когда обновляется контент, или уникальная строка, представляющая контент

  3. Браузер запрашивает тот же контент позже; Браузер может пройти немного Условные заголовки запроса :

    • If-модифицированный-синсео : Некоторая дата – Последняя метка времени, спасенная в браузере
    • If-none-match : Некоторое сгенерированное значение – Предыдущий ETAG, сохраненный в браузере
  4. Сервер проверит, удовлетворят ли какое -либо из этих двух значений эти условия:
    • Если контент такой же, сервер вернет 304 статус
    • Если контент отличается, сервер возвращает новые данные с новым Полномодированный и или Etag Анкет

На практике

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

Мы используем атрибут обновляется из SomeUser Чтобы подтвердить «новизна» ответа и вернуть его как Полномодированный Анкет Мы будем работать с Etags потом.

Идет глубже

Больше заголовков!

Спецификация условного запроса дает нам несколько различных кондиционированных тегов заголовка, с которыми мы можем работать помимо If-none-match и If-модифицированный-синсео Анкет Они перечислены ниже:

  • If-match : Если ETAG на сервере соответствует передачи ETAG, сервер должен отправить нам новые данные.
  • If-unmodified-since : Если метка времени на сервере старше, чем метка времени, которую мы передаем, сервер должен отправить нам новые данные.
  • If-range : Если ETAG или временная метка на сервере соответствует диапазону временных метков ETAGS, которые мы передаем, сервер должен отправить нам новые данные.

Сильная и слабая проверка

Спецификация ETAG HTML предоставляет нам две методологии, которые мы можем реализовать для проверки наших ETAG:

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

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

Чтобы попросить сервера выполнить слабую проверку, вы будете подготовить свой ETAG с W/ Анкет

Давайте создадим сервер, который может выполнить как сильную, так и слабую проверку ETAG.

const express = require('express');
const md5 = require('md5');

const server = express();
const port = 3000;

const article = {
  content: 'Hello there! this is an article there!',
  meta: 'Meta content for user',
  adInfo: '349243'
}

// gets an article from "our database"
const getArticle = () => Promise.resolve(article);

const generateETag = (article) => {
  const contentHash = md5(article.content);
  const metaHash = md5(article.meta + article.adInfo);

  return `${contentHash}_${metaHash}`;
}

const validateETag = (etag, article) => {
  const useWeakValidation = etag.includes('W/');
  const parsedTag = etag.replace('W/', '');

  if (useWeakValidation) {
    const weakCompare = md5(article.content);

    return weakCompare === parsedTag.split('_')[0];
  }

  const strongCompare = generateETag(article);

  return strongCompare === parsedTag;
}

server.get('/article', async (req, res) => {
  const etag = req.headers['if-none-match'];

  const article = await getArticle();

  if (!etag || validateETag(etag, article)) {
    res.sendStatus(304);
    return;
  }

  const nextEtag = generateETag(article);
  res.setHeader('ETag', nextEtag);
  res.send({ article });
})

server.listen(port, () => console.log(`App listening at 
    http://localhost:${port}`));

Выше мы создали функцию, называемую Generatetag Это создает ETAG, состоящий из двух частей, а ContentHash и Метахаш . ContentHash является хэш MD5 только содержания статьи. Метахаш является хэшем MD5 всех неконтентных частей этой статьи.

Мы также создали функцию проверки, которая будет:

  • Если Слабая проверка Запрашивается: мы возвращаем новую полезную нагрузку, если статья Контент Хеш MD5 отличается от того, что находится на сервере. Мы отправим 304, если какие -либо другие данные изменились.

  • Если Сильная проверка : Мы вернем контент, если что -нибудь в нашей статье изменилось, мы проверяем обе части хэш -группы MD5.

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

Вывод

Conditional Gets – это простой способ уменьшить пропускную способность, обрабатывающую применение. Экономия полосы пропускания может напрямую снизить ваши сетевые затраты, а также помочь вашим клиентам сократить свои сетевые затраты (если они оплачивают свою пропускную способность).

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

Оригинал: “https://dev.to/4shub/reducing-server-bandwidth-with-conditional-gets-54h6”

Читайте ещё по теме: