Turbolinks - это оптимизация, которая увеличивает воспринимаемую производительность за счет разумного переключения страниц и перезагрузки ресурсов в вашем приложении. В отличие от условных запросов GET, он не требует никаких изменений кода Ruby в самом приложении Rails. Turbolinks 5 - это библиотека JavaScript, которая работает везде (даже без Rails, например, на статических страницах) и постепенно ухудшается в неподдерживаемых браузерах.

Турболинки 5

Turbolinks был связан с Rails и включался в новые приложения по умолчанию, начиная с Rails 4. Rails 5 поставляется с Turbolinks 5, который является переработкой того, что сейчас называется Turbolinks Classic.

Несмотря на то, что она поставляется с Rails, новая версия Turbolinks представляет собой чистую библиотеку JavaScript, которую можно использовать на любой HTML-странице, поместив ее в тег <script> на странице или включив в пакет JavaScript приложения.

При включении Turbolinks автоматически найдет все ссылки, указывающие на один и тот же домен, и подключит прослушиватель событий щелчка. Любые переходы по этим ссылкам будут перехвачены. Вместо того, чтобы переходить по ссылкам, как обычно, он запрашивает связанную страницу в фоновом режиме через JavaScript, используя XMLHttpRequest. Затем происходят четыре вещи:

  1. Копия текущей страницы сохраняется в кеше Turbolinks, чтобы использовать ее позже.
  2. Он заменяет <body> текущей страницы на <body> из результата XHR.
  3. Он объединяет <head> текущей страницы с <head> из результата XHR.
  4. Он изменяет URL-адрес в браузере с помощью History API.

Благодаря объединению тегов <head> браузеру не нужно перезагружать и повторно отображать ресурсы, такие как файлы CSS и JavaScript, которые присутствуют на обеих страницах. Это может значительно ускорить работу вашего приложения, особенно если у вас много ресурсов, которые повторно используются на большинстве ваших страниц.

В новом приложении Rails 5 с некоторыми представлениями вы можете увидеть Turbolinks в действии, перемещаясь по ссылкам и нажимая кнопку «Назад». На вкладке сети вашего браузера вы увидите запросы страниц, загружаемых через Turbolinks, отмеченные как «xhr». Кроме того, ваши активы не будут перезагружаться при каждом запросе.

Кеширование и предварительный просмотр страниц

Чтобы ускорить последующие запросы к той же странице, Turbolinks поддерживает кеш недавно посещенных страниц. Это позволяет отображать предыдущую страницу сразу же, например, при нажатии кнопки «Назад».

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

Предостережения

Turbolinks повторно реализует некоторые функции вашего браузера по умолчанию, поэтому некоторые функции с включенным Turbolinks работают иначе, чем без него.

Теги turbolinks:load и <script>

Поскольку страница не обновляется после каждого щелчка по ссылке, загрузка JavaScript при загрузке страницы с использованием window.onload или DOMContentLoaded больше не работает. Чтобы исправить это, Turbolinks предоставляет событие turbolinks:load, которое вы можете использовать вместо этого:

document.addEventListener("turbolinks:load", function() { 
  // ...
})

Состояния загрузки браузера

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

В попытке исправить это Turbolinks покажет синюю полосу (которая может быть стилизована с помощью CSS) вверху страницы через 500 миллисекунд, чтобы указать, что страница загружается.

Turbolinks 5 прошел долгий путь со времен Turbolinks Classic, когда казалось, что Turbolinks - это то, что вы пропускали при создании нового приложения Rails. Будучи изящно деградирующим плагином на чистом JavaScript, который теперь не зависит от Rails, он работает из коробки для большинства приложений, если вы помните о предостережениях.

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

На этом мы завершаем обзор Turbolinks. Вы используете Turbolinks в каком-либо из своих приложений? Мы хотели бы услышать от вас! Кроме того, нам интересно, как вам понравилась эта и предыдущие статьи в AppSignal Academy или что вы хотели бы прочитать в следующей статье в @AppSignal.

Первоначально опубликовано на blog.appsignal.com 23 мая 2018 г.