Wprowadzenie do Monitorowania wydajności w internecie

Zanim zaczniesz

Jeśli jeszcze nie masz tego za sobą, zapoznaj się z artykułem Dodawanie Firebase do projektu JavaScript, aby dowiedzieć się, jak:

  • Tworzenie projektu Firebase

  • Zarejestruj swoją aplikację internetową w Firebase

Pamiętaj, że po dodaniu Firebase do aplikacji możesz wykonać niektóre kroki opisane poniżej na tej stronie (np. dodać pakiet SDK i zainicjować Firebase).

Krok 1. Dodaj i zainicjuj Monitorowanie wydajności

  1. Jeśli jeszcze nie masz tego za sobą, zainstaluj pakiet SDK Firebase JS i zainicjuj Firebase.

  2. Dodaj pakiet SDK Performance Monitoring JS i zainicjuj monitorowanie wydajności:

Web 

import { initializeApp } from "firebase/app";
import { getPerformance } from "firebase/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = getPerformance(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = firebase.performance();

Krok 2. Dodaj bibliotekę polyfill na potrzeby pierwszego opóźnienia wejściowego

Aby mierzyć dane opóźnienia przy pierwszym działaniu, musisz dodać do nich bibliotekę polyfill. Instrukcje instalacji znajdziesz w dokumentacji biblioteki.

Dodanie tej biblioteki polyfill nie jest wymagane, aby Monitorowanie wydajności mogło raportować inne dane dotyczące aplikacji internetowej.

Krok 3. Wygeneruj zdarzenia dotyczące skuteczności na potrzeby początkowego wyświetlania danych

Firebase rozpocznie przetwarzanie zdarzeń, gdy dodasz pakiet SDK do aplikacji. Jeśli nadal tworzysz aplikację lokalnie, użyj jej, aby wygenerować zdarzenia do wstępnego zbierania i przetwarzania danych.

  1. Udostępnianie i wyświetlanie aplikacji internetowej w środowisku lokalnym.

  2. Zdarzenia możesz generować przez wczytywanie podstron witryny, interakcję z aplikacją lub wywoływanie żądań sieciowych. Karta przeglądarki musi być otwarta przez co najmniej 10 sekund po załadowaniu strony.

  3. Otwórz panel Skuteczność w konsoli Firebase. Pierwsze dane powinny wyświetlić się w ciągu kilku minut.

    Jeśli nie widzisz swoich danych początkowych, przeczytaj wskazówki dotyczące rozwiązywania problemów.

Krok 4. (Opcjonalnie) Wyświetl komunikaty z dziennika dotyczące zdarzeń związanych z wydajnością

  1. Otwórz narzędzia dla programistów w przeglądarce (np. kartę Network (Sieć) w Narzędziach deweloperskich w Chrome lub Network Monitor w Firefoksie).

  2. Odśwież aplikację internetową w przeglądarce.

  3. Sprawdź, czy w komunikatach logu nie ma żadnych komunikatów o błędach.

  4. Po kilku sekundach poszukaj w narzędziach dla programistów w przeglądarce wywołania sieciowego do firebaselogging.googleapis.com. Obecność tego wywołania sieci wskazuje, że przeglądarka wysyła dane dotyczące wydajności do Firebase.

Jeśli aplikacja nie rejestruje zdarzeń dotyczących wydajności, zapoznaj się ze wskazówkami dotyczącymi rozwiązywania problemów.

Krok 5. (Opcjonalnie) Dodaj niestandardowe monitorowanie dla określonego kodu

Aby monitorować dane o wydajności powiązane z określonym kodem w aplikacji, możesz skorzystać z niestandardowych logów czasu.

Niestandardowy ślad kodu pozwala sprawdzić, ile czasu zajmuje aplikacji wykonanie określonego zadania lub zestawu zadań, takich jak wczytanie zestawu obrazów czy wysłanie zapytania do bazy danych. Domyślnym wskaźnikiem niestandardowego śledzenia kodu jest jego czas trwania, ale możesz też dodać wskaźniki niestandardowe, takie jak trafienia w pamięci podręcznej i ostrzeżenia dotyczące pamięci.

W swoim kodzie definiujesz początek i koniec niestandardowego logu czasu (oraz dodajesz dowolne odpowiednie dane niestandardowe) za pomocą interfejsu API dostępnego w pakiecie SDK Performance Monitoring.

Więcej informacji o tych funkcjach i dodawaniu ich do aplikacji znajdziesz w artykule Dodawanie monitorowania na potrzeby określonego kodu.

Krok 6. Wdróż aplikację i sprawdź jej wyniki

Po sprawdzeniu monitorowania wydajności możesz wdrożyć u użytkowników zaktualizowaną wersję aplikacji.

Dane o skuteczności możesz sprawdzać w panelu Wydajność w konsoli Firebase.

Dalsze kroki