Wprowadzenie do Monitorowania wydajności w internecie

Zanim zaczniesz

Odwiedź stronę Dodaj Firebase do projektu JavaScript, aby dowiedzieć się, jak:

  • Tworzenie projektu Firebase

  • Rejestrowanie aplikacji internetowej w Firebase

Pamiętaj, że dodanie Firebase do aplikacji może wymagać wykonania niektórych czynności opisane poniżej (na przykład dodanie pakietu SDK i zainicjowanie Firebase).

Krok 1. Dodaj i zainicjuj Performance Monitoring

  1. zainstaluj pakiet SDK Firebase JS i zainicjuj Firebase.

  2. Dodaj pakiet JS SDK Performance Monitoring i zainicjuj 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 zmierzyć dane opóźnienia przy pierwszym działaniu, musisz dodać bibliotekę polyfill na potrzeby tego rodzaju danych. Do montażu znajdziesz w dokumentacja.

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 początkowego wyświetlania danych

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

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

  2. Generuj zdarzenia, wczytując podstrony witryny, wchodzą w interakcję z lub wywoływania żądań sieciowych. Zachowaj kartę przeglądarki otwarte przez co najmniej 10 sekund po załadowaniu strony.

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

    Jeśli nie widzisz swoich danych początkowych, zapoznaj się z sekcją dotyczącą rozwiązywania problemów .

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

  1. Otwórz w przeglądarce narzędzia dla programistów (na przykład Karta Network (Sieć) w Narzędziach deweloperskich w Chrome lub w Monitorze sieci 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 połączenia sieciowego z firebaselogging.googleapis.com w narzędziach dla programistów w przeglądarce. to wywołanie sieciowe wskazuje, że przeglądarka wysyła dane o wydajności do Firebase.

Jeśli aplikacja nie rejestruje zdarzeń związanych z wydajnością, zapoznaj się z informacjami na temat 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: instrumentów niestandardowych logów czasu.

Dzięki niestandardowemu śledzeniu kodu możesz sprawdzić, ile czasu zajmuje uruchomienie aplikacji określonego zadania lub zestawu zadań, np. wczytanie zestawu obrazów lub wysłanie zapytań; w bazie danych. Domyślnym wskaźnikiem niestandardowego śledzenia kodu jest jego czas trwania, ale możesz też dodawać wskaźniki niestandardowe, takie jak trafienia w pamięci podręcznej i ostrzeżenia związane z pamięcią.

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

Zapoznaj się z artykułem Dodawanie monitorowania pod kątem określonego kodu. , by dowiedzieć się więcej o tych funkcjach i sposobach ich dodawania do aplikacji.

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

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

Dane o skuteczności możesz sprawdzać na stronie Skuteczność. panel konsoli Firebase.

Dalsze kroki