Wprowadzenie do Monitorowania wydajności w internecie

Zanim zaczniesz

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

  • Tworzenie projektu Firebase

  • Rejestrowanie aplikacji internetowej w Firebase

Podczas dodawania Firebase do aplikacji możesz wykonać niektóre czynności opisane dalej na tej stronie (np. dodanie pakietu SDK i inicjowanie Firebase).

Krok 1. Dodaj i zainicjuj Performance Monitoring.

  1. Jeśli jeszcze tego nie zrobiono, zainstaluj pakiet SDK Firebase JS i zainicjuj Firebase.

  2. Dodaj pakiet SDK JS Performance Monitoring i inicjuj Performance Monitoring:

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 do obsługi opóźnienia pierwszego wejścia

Aby mierzyć dane o czasie oczekiwania na pierwszy element wejścia, musisz dodać bibliotekę polyfill dla tych danych. Instrukcje instalacji znajdziesz w dokumentacji biblioteki.

Dodanie tej biblioteki polyfill nie jest wymagane, aby Performance Monitoring mogła raportować inne dane o aplikacji internetowej.

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

Firebase zaczyna przetwarzać zdarzenia, gdy dodasz pakiet SDK do aplikacji. Jeśli nadal pracujesz nad aplikacją lokalnie, generuj zdarzenia, aby umożliwić początkowe gromadzenie i przetwarzanie danych.

  1. wyświetlać aplikację internetową w środowisku lokalnym;

  2. generować zdarzenia przez wczytywanie podstron witryny, interakcję z aplikacją lub wywoływanie żądań sieci; Pamiętaj, aby karta przeglądarki była otwarta przez co najmniej 10 sekund po załadowaniu strony.

  3. Otwórz panel Wydajność w konsoli Firebase. Po kilku minutach powinny się wyświetlić pierwsze dane.

    Jeśli nie widzisz wyświetlanych danych początkowych, zapoznaj się z wskazówkami dotyczącymi rozwiązywania problemów.

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

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

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

  3. Sprawdź, czy w logach nie ma komunikatów o błędach.

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

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

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

Aby monitorować dane o wydajności powiązane z konkretnym kodem w aplikacji, możesz użyć niestandardowych logów kodu.

Dzięki niestandardowemu śledzeniu kodu możesz mierzyć, ile czasu zajmuje aplikacji wykonanie określonego zadania lub zestawu zadań, takich jak wczytywanie zestawu obrazów czy wysyłanie zapytania do bazy danych. Domyślnym rodzajem danych w przypadku śledzenia kodu niestandardowego jest jego czas trwania, ale możesz też dodać dane niestandardowe, takie jak trafienia do pamięci podręcznej i ostrzeżenia dotyczące pamięci.

W kodzie definiujesz początek i koniec niestandardowego logu czasu (oraz dodajesz dowolne niestandardowe dane) za pomocą interfejsu API udostępnianego przez pakiet SDK Performance Monitoring.

Aby dowiedzieć się więcej o tych funkcjach i sposobie dodawania ich do aplikacji, przeczytaj artykuł Dodawanie monitorowania określonego kodu.

Krok 6. Wdróż aplikację, a potem sprawdź wyniki.

Po zweryfikowaniu Performance Monitoring możesz wdrożyć zaktualizowaną wersję aplikacji dla użytkowników.

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

Dalsze kroki