PageTransitionEvent: як використовувати його для покращення продуктивності та кешування ресурсів

js 4 бер. 2023 р.
PageTransitionEvent: як використовувати його для покращення продуктивності та кешування ресурсів

PageTransitionEvent - це подія, яка спрацьовує, коли сторінка змінює свій стан, такий як переміщення на іншу сторінку, перехід від одного стану до іншого, оновлення сторінки тощо. Ця подія є частиною API Navigation Timing та може бути корисною для відстеження часу, необхідного для завантаження сторінки.

Для того, щоб працювати з PageTransitionEvent, необхідно спочатку додати прослуховувач подій до об'єкта window, який буде викликатися кожен раз, коли відбудеться перехід на іншу сторінку. Наприклад, так:

window.addEventListener('pagehide', function(event) {
  console.log('The page is being hidden.');
});

window.addEventListener('pageshow', function(event) {
  console.log('The page is being shown.');
});

У прикладі вище ми додали прослуховувачі до подій 'pagehide' та 'pageshow', які спрацьовують при хованні та показі сторінки відповідно. У функції-обробнику події ми використовуємо console.log() для виводу повідомлення у консоль браузера.

Крім того, PageTransitionEvent містить кілька корисних властивостей, які можна використовувати для додаткового відстеження подій. Наприклад, можна використовувати event.persisted для визначення, чи є подія кешованою. Також є можливість використовувати event.target, щоб отримати об'єкт Document, який був використаний для завантаження сторінки.

Одним із застосувань PageTransitionEvent є відстеження часу завантаження сторінки. Наприклад, можна використовувати подію 'load' для відстеження часу, необхідного для завантаження сторінки:

window.addEventListener('load', function(event) {
  console.log('The page is loaded.');
});

У цьому прикладі ми додали прослуховувач до події 'load', який виводить повідомлення у консоль браузера, коли сторінка повністю завантажується.

Також можна використовувати PageTransitionEvent для відстеження незавершених запитів або дій, які користувач розпочав на сторінці, але не завершив. Наприклад, можна використовувати подію 'beforeunload' для відображення повідомлення користувачу, який намагається залишити сторінку, щоб попередити його про можливу втрату даних:

window.addEventListener('beforeunload', function(event) {
  event.returnValue = 'Are you sure you want to leave?';
});

У цьому прикладі ми додали прослуховувач до події 'beforeunload', який встановлює event.returnValue на повідомлення, яке відображатиметься користувачу, який намагається залишити сторінку.

Нарешті, PageTransitionEvent може бути корисним для відстеження використання сторінки. Наприклад, можна використовувати події 'focus' та 'blur' для відстеження того, чи має вікно фокус на сторінці:

window.addEventListener('focus', function(event) {
  console.log('The window has focus.');
});

window.addEventListener('blur', function(event) {
  console.log('The window has lost focus.');
});

У цьому прикладі ми додали прослуховувачі до подій 'focus' та 'blur', які спрацьовують, коли вікно отримує або втрачає фокус на сторінці.

Узагалі, PageTransitionEvent може бути корисним інструментом для відстеження стану сторінки та виконання різних дій в залежності від подій, які відбуваються. Знання того, як користуватися цим API, може допомогти розробникам покращити взаємодію користувачів з їх сторінками та забезпечити більш високу якість веб-додатків.

Звичайно, якщо сторінка містить багато ресурсів, таких як зображення, скрипти або стилі, то може знадобитися кешування, щоб зменшити час завантаження сторінки при повторному відкритті.

Один із способів використання кешування на сторінці - це використання PageTransitionEvent для завантаження ресурсів у кеші. Наприклад, ми можемо завантажити зображення на сторінку та зберегти його у кеші за допомогою методу Cache API:

window.addEventListener('pageshow', function(event) {
  var imgSrc = 'image.jpg';
  var imgRequest = new Request(imgSrc);
  
  caches.open('my-cache').then(function(cache) {
    cache.match(imgRequest).then(function(response) {
      if (!response) {
        fetch(imgRequest).then(function(response) {
          cache.put(imgRequest, response);
        });
      }
    });
  });
});

У цьому прикладі ми додали прослуховувач до події 'pageshow', який запускається кожен раз, коли сторінка показується. Він завантажує зображення зі шляхом 'image.jpg', створює запит за допомогою класу Request і перевіряє, чи збережене зображення у кеші за допомогою методу match(). Якщо зображення не знайдено у кеші, воно завантажується за допомогою методу fetch() і зберігається у кеші за допомогою методу put().

Приклади використання:

Крім кешування ресурсів, PageTransitionEvent може бути використаний для вирішення різних інших задач. Ось декілька прикладів:

  1. Вимкнення анімацій під час переходу на іншу сторінку

window.addEventListener('pagehide', function(event) {
  // Вимкнути анімації перед переходом на іншу сторінку
  $('.animation').stop();
});

Цей приклад додає прослуховувач до події 'pagehide', який запускається перед закриттям сторінки. Він вимикає всі анімації, що можуть впливати на відчуття користувача під час переходу на іншу сторінку.

  1. Показ повідомлення користувачу перед переходом на іншу сторінку

window.addEventListener('beforeunload', function(event) {
  // Відобразити повідомлення перед переходом на іншу сторінку
  event.returnValue = 'Ви впевнені, що хочете залишити цю сторінку?';
});

Цей приклад додає прослуховувач до події 'beforeunload', який запускається перед переходом на іншу сторінку. Він відображає повідомлення користувачу з запитанням про те, чи він впевнений у своєму рішенні перейти на іншу сторінку.

  1. Відправка аналітичних даних перед переходом на іншу сторінку

window.addEventListener('pagehide', function(event) {
  // Відправити аналітичні дані перед переходом на іншу сторінку
  analytics.track('pageview', {
    page: location.pathname,
    referrer: document.referrer
  });
});

Цей приклад додає прослуховувач до події 'pagehide', який запускається перед закриттям сторінки. Він відправляє аналітичні дані про переглядану сторінку на сервер, що дозволяє вивчати поведінку користувачів та покращувати продуктивність сайту.

Враховуючи різноманітні можливості PageTransitionEvent, його вивчення може значно спростити та покращити роботу зі сторінками вебсайт, зменшити час завантаження сторінок та покращити їх продуктивність.

Загалом, PageTransitionEvent - це потужний інструмент, який можна використовувати для розв'язання різноманітних задач, пов'язаних зі сторінками вебсайт. Правильне використання цього інструменту може покращити продуктивність сайту, збільшити його швидкість та покращити користувацький досвід.

Отже, якщо ви розробляєте веб-сайт, рекомендуємо вивчити можливості PageTransitionEvent та поєднувати їх зі своїми потребами та завданнями. Таким чином, ви зможете створити швидкий та продуктивний веб-сайт, який буде задовольняти потреби ваших користувачів та допомагати досягати ваших бізнес-цілей.

Telegram чат