1. Встроенная поддержка TLS
2. Потоковое мультиплексирование
3. Сервер Push (предварительная загрузка)
4. Подсказки сервера (предварительная выборка)

Помните, в мае 1996 года появилась первая версия протокола HTTP (HTTP / 1.0). Этот протокол описывается как RFC и, более конкретно, под RFC 1945 ,

Но время прошло, и веб-приложения развивались чрезвычайно. Теперь у нас есть интерфейсные приложения, которые вносят все больше логики в браузер, поэтому у нас также есть все больше и больше ресурсов для загрузки: все больше CSS с правилами анимации, иногда сложные операции, определенные в CSS, все больше и больше файлов Javascript, и, наконец, все больше и больше изображений.

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

После первого шага, выполненного Google в 2009 году по протоколу SPDY, именно в этом направлении идет HTTP / 2 и его RFC 7540 ,

Сегодня протокол HTTP / 2 поддерживается большинством браузеров. На момент написания этой статьи, только Opera Mini все еще разыскивается:

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

Действительно, HTTP / 2 позволит вам использовать функции, которые мы опишем позже в этой статье.

Встроенная поддержка TLS

Если шифрование не является обязательным, некоторые браузеры поддерживают только HTTP / 2 с соответствующим методом шифрования TLS, и это не хуже, поскольку его становится все проще и проще получить. Сертификат SSL в настоящее время, так что это не проблема и позволяет защитить ваши приложения.

Если вы не используете шифрование, уменьшительное значение, данное протоколу, равно h2c. Это будет h2, если вы используете шифрование.

Если вы хотите больше информации о настройке протокола TLS для того, чтобы улучшить безопасность обмена SSL Я приглашаю вас прочитать мою статью на эту тему.

Потоковое мультиплексирование

Если HTTP / 1 загружал ресурсы один за другим, как описано в каскаде загрузки ресурсов приложения ниже, HTTP / 2 сэкономит вам время ожидания, потому что несколько ресурсов может быть непосредственно выгружен в тот же поток ответов HTTP.

Здесь время, проведенное зеленым цветом, соответствует времени ожидания до загрузки ресурса, время, потраченное фиолетовым цветом, соответствует времени ожидания загрузки ресурса (TTFB - время до первого байта) и, наконец, времени серого цвета. соответствует времени приема ресурса.

Вот как выглядит загрузка ресурсов по протоколу HTTP / 2:

Здесь мы ясно видим, что время, отведенное на ожидание ресурсов (время, выделенное зеленым), полностью исчезло, и что все ресурсы загружаются «одновременно», используя один и тот же поток.

Кроме того, поскольку поисковые системы все больше и больше полагаются на время загрузки страниц для улучшения их ссылок, переход на HTTP / 2 также является большим плюсом для SEO.

Чтобы полностью понять скорость загрузки ресурсов, предлагаю следующую демонстрацию:

Эта новая версия протокола также поставляется со сжатием заголовков, отправленных сервером для оптимизации обмена потоками.

Итак, если мы сделаем первый запрос на сайте HTTP / 2 и получим следующие заголовки:

: author: vincent.composieux.fr: метод: GET: путь: /: схема: https принимает: текст / html, application / xhtml + xml, application / xml; q = 0,9, image / webp, * / *; q = 0.8 принять кодировку: gzip, deflate, sdch, br

По моему следующему запросу заголовки: полномочия, метод, схема, принятие и принятие-кодирование потенциально не изменятся. HTTP / 2 сожмет их.

Чтобы понять сжатие заголовков, я приглашаю вас использовать инструмент h2load для сравнения вызовов HTTP / 2, выполнив два запроса к вашему приложению здесь:

$ h2load https://vincent.composieux.fr -n 2 | Трафик grep: всего 32,25 КБ (33023), заголовки 650B (650) (экономия места на 25,29%), данные 31,51 КБ (32270)

Здесь мы видим, что мои заголовки сэкономили мне 25,29% обмена заголовками.

Сервер Push (предварительная загрузка)

Это небольшая революция в загрузке ресурсов браузера.

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

Чтобы предварительно загрузить ресурс (preload), просто отправьте HTTP-заголовок следующей формы:

Ссылка: </fonts/myfont.woff2>; rel = "preload"; as = "font"

Конечно, вы можете определить несколько заголовков ссылок, а атрибуты as могут принимать следующие значения: шрифт, изображение, стиль или скрипт.

Также можно использовать разметку HTML для предварительной загрузки ваших ресурсов:

<link rel = "preload" href = "/fonts/myfont.woff2" as = "font">

Также, если вы используете фреймворк PHP Symfony , обратите внимание, что этот интегрировал толчок активов в своей версии 3.3. Для этого просто укажите в Twig:

<link href = "{{preload (asset ('/ fonts / myfont.woff2'), {as: 'font'})}}">

Для получения дополнительной информации посетите: http://symfony.com/blog/new-in-symfony-3-3-asset-preloading-with-http-2-push

Также обратите внимание, что новый компонент Symfony изучается на этот запрос на вытягивание управлять всеми типами ссылок, доступных для предварительной загрузки или отправки (preload, preset, prerender, ...) {: rel = "nofollow noreferrer"}.

Подсказки сервера (предварительная выборка)

Обратите внимание, что этот метод не связан с HTTP / 2, потому что он был доступен ранее, но интересно обсудить разницу между этими двумя методами prefetch и preload.

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

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

Ссылка: </fonts/myfont.woff2>; отн = предвыборки

Если вы используете nginx, протокол HTTP / 2 поддерживается начиная с версии 1.9.5, и вам просто нужно указать атрибут прослушивания, который вы хотите использовать: "http2" Пример:

сервер {слушай 443 ssl http2; ...

Чтобы убедиться, что HTTP / 2 включен на вашем сервере, я приглашаю вас набрать nginx -V, чтобы убедиться, что у вас есть опция сборки --with-http_v2_module, и чтобы убедиться, что ваша версия OpenSSL используется nginx недавно.

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

Примечание. Для информации, если протокол http / 2 недоступен в браузере клиента, веб-сервер выполнит откат по протоколу http / 1.1.

На стороне Apache версии 2.4.12 и более поздние также поддерживают протокол.

В целом, активация протокола HTTP / 2 довольно проста. Если вы пришли из мира Javascript, пакет http2 также доступен экземпляр сервера экспресс с новой версией протокола.

HTTP / 2 может теперь использоваться в ваших веб-приложениях и может принести им пользу только в нескольких аспектах (производительность, SEO, шифрование, ...). Его простота внедрения и поддержка большого количества технологий также является важным преимуществом, которое должно помочь вам пройти курс!

А после? В настоящее время не ведутся никакие работы над HTTP / 3, но будущее и технологии оставят за нами третью версию этого протокола, которая так широко используется!

Похожие

Комментарии