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 opóźnienia przy pierwszym działaniu, musisz dodać do nich bibliotekę polyfill. Instrukcje instalacji znajdziesz w dokumentacji biblioteki.

Dodanie tej biblioteki polyfill nie jest konieczne, aby usługa Performance Monitoring mogła raportować inne dane dotyczące 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 tworzysz 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 Twojej 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. Pierwsze dane powinny się wyświetlić w ciągu kilku minut.

    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 monitor sieci 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 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 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 zapytanie 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 swoim kodzie definiujesz początek i koniec niestandardowego logu czasu (oraz dodajesz dowolne niestandardowe dane) za pomocą interfejsu API dostępnego w pakiecie SDK Performance Monitoring.

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

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

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

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

Dalsze kroki