Google is committed to advancing racial equity for Black communities. See how.
Ta strona została przetłumaczona przez Cloud Translation API.
Switch to English

Zacznij korzystać z monitorowania wydajności w sieci Web

Zanim zaczniesz

Jeśli jeszcze tego nie zrobiłeś, odwiedź stronę Dodawanie Firebase do projektu JavaScript, aby dowiedzieć się, jak:

  • Utwórz projekt Firebase

  • Zarejestruj swoją aplikację internetową w Firebase

Pamiętaj, że dodając Firebase do swojej aplikacji, możesz też wykonać niektóre czynności opisane na tej stronie (na przykład dodać pakiety SDK Firebase i zainicjować Firebase ).

Krok 1 : Dodaj monitorowanie wydajności i zainicjuj Firebase

Jeśli jeszcze tego nie zrobiłeś, dodaj pakiet SDK do monitorowania wydajności i zainicjuj Firebase w swojej aplikacji, korzystając z jednej z poniższych opcji. Weź pod uwagę następujące kwestie, które pomogą Ci wybrać jedną z opcji (zobacz poszczególne zakładki, aby uzyskać bardziej szczegółowe informacje):

  • Z CDN (samodzielny pakiet SDK) - jeśli monitorowanie wydajności jest jedynym produktem Firebase w Twojej aplikacji, ta opcja ładuje pojedynczy, lżejszy pakiet SDK z sieci CDN.

  • Z CDN (standardowy SDK) - jeśli używasz innych produktów Firebase w swojej aplikacji, ta opcja ładuje pakiet SDK do monitorowania wydajności wraz z innymi bibliotekami Firebase z CDN.

  • Z adresów URL w hostingu - jeśli korzystasz z hostingu Firebase, ta opcja zapewnia wygodę zarządzania konfiguracją Firebase podczas inicjowania Firebase.

  • Korzystanie z pakietów modułów - jeśli używasz pakietu (takiego jak Browserify lub webpack), użyj tej opcji, aby zaimportować poszczególne moduły, gdy ich potrzebujesz.

Po dodaniu pakietu SDK monitorowania wydajności Firebase automatycznie zaczyna zbierać dane dotyczące ładowania strony aplikacji i żądań sieciowych HTTP / S.

Z CDN

Możesz skonfigurować częściowe importowanie pakietu Firebase JavaScript SDK i ładować tylko te biblioteki Firebase, których potrzebujesz. Firebase przechowuje każdą bibliotekę pakietu Firebase JavaScript SDK w naszej globalnej sieci CDN (sieci dostarczania treści).

Aby dołączyć zestaw SDK monitorowania wydajności z sieci CDN, masz dwie opcje:

  • samodzielny pakiet SDK - monitorowanie wydajności to jedyny produkt Firebase, którego używasz w swojej aplikacji.
  • standardowy pakiet SDK - w swojej aplikacji używasz monitorowania wydajności razem z innymi produktami Firebase.

samodzielny SDK

Jeśli Monitorowanie wydajności to jedyna usługa Firebase w Twojej aplikacji, użyj samodzielnego pakietu SDK monitorowania wydajności (i zalecanego skryptu nagłówka poniżej), jeśli chcesz:

  • zmniejszenie rozmiaru pakietu SDK
  • opóźnienie inicjalizacji pakietu SDK do momentu załadowania strony

Aby dołączyć autonomiczny pakiet SDK do monitorowania wydajności w aplikacji i opóźnić jego inicjalizację po załadowaniu strony:

  1. Dodaj następujący skrypt do nagłówka pliku indeksu.
  2. Pamiętaj, aby dodać obiekt konfiguracji projektu Firebase do swojej aplikacji.
(function(sa,fbc){function load(f,c){var a=document.createElement('script');
a.async=1;a.src=f;var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(a,s);}load(sa);
window.addEventListener('load',function(){firebase.initializeApp(fbc).performance()});
})(performance_standalone, firebaseConfig);

gdzie,

  • performance_standalone to 'https://www.gstatic.com/firebasejs/7.21.0/firebase-performance-standalone.js'
  • firebaseConfig to obiekt konfiguracyjny Firebase Twojej aplikacji

Powyższy skrypt asynchronicznie ładuje autonomiczny pakiet SDK, a następnie inicjuje Firebase po uruchomieniu zdarzenia onload okna. Ta taktyka zmniejsza wpływ, jaki SDK może mieć na wskaźniki ładowania strony, ponieważ przeglądarka zgłosiła już swoje dane ładowania podczas inicjowania pakietu SDK.

standardowy zestaw SDK

Jeśli używasz w swojej aplikacji innych produktów Firebase (takich jak Uwierzytelnianie lub Cloud Firestore, dołącz standardowy pakiet SDK do monitorowania wydajności.

Pamiętaj, że ten pakiet SDK wymaga dołączenia oddzielnego standardowego podstawowego pakietu SDK Firebase oraz zainicjowania Firebase i monitorowania wydajności w osobnym skrypcie.

  1. Aby dołączyć standardowy pakiet SDK do monitorowania wydajności, dodaj następujące skrypty na dole tagu <body> , ale przed użyciem jakichkolwiek usług Firebase:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-performance.js"></script>
    <body>
    
  2. Zainicjuj Firebase i monitorowanie wydajności w swojej aplikacji:

    <body>
    <!-- Previously loaded Firebase SDKs -->
    
    <script>
      // TODO: Replace the following with your app's Firebase project configuration
      var firebaseConfig = {
        // ...
      };
    
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    
      // Initialize Performance Monitoring and get a reference to the service
      var perf = firebase.performance();
    </script>
    </body>
    

Z adresów URL hostingu

Korzystając z Hostingu Firebase, możesz skonfigurować aplikację tak, aby ładowała biblioteki Firebase JavaScript SDK dynamicznie z zarezerwowanych adresów URL. Dowiedz się więcej o dodawaniu pakietów SDK za pośrednictwem zarezerwowanych adresów URL hostingu .

W przypadku tej opcji konfiguracji po wdrożeniu w Firebase aplikacja automatycznie pobiera obiekt konfiguracyjny Firebase z projektu Firebase, w którym został wdrożony. Możesz wdrożyć tę samą bazę kodu w wielu projektach Firebase, ale nie musisz śledzić konfiguracji Firebase, której używasz dla firebase.initializeApp() .

  1. Aby dołączyć pakiet SDK do monitorowania wydajności, dodaj następujące skrypty na dole tagu <body> , ale przed użyciem jakichkolwiek usług Firebase:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/7.21.0/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/7.21.0/firebase-performance.js"></script>
    </body>
    
  2. Zainicjuj Firebase i monitorowanie wydajności w swojej aplikacji (nie musisz dołączać obiektu konfiguracyjnego Firebase w przypadku korzystania z zarezerwowanych adresów URL hostingu):

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    
      <!-- Initialize Performance Monitoring and get a reference to the service -->
      <script>
        var perf = firebase.performance();
        // ...
      </script>
    </body>
    

Korzystanie z pakietu modułów

Możesz skonfigurować częściowe importowanie pakietu Firebase JavaScript SDK i ładować tylko te produkty Firebase, których potrzebujesz. Jeśli korzystasz z pakietu (takiego jak Browserify lub webpack), możesz import poszczególne produkty Firebase, kiedy ich potrzebujesz.

  1. Zainstaluj pakiet npm firebase i zapisz go w pliku package.json , uruchamiając:

    npm install --save firebase
  2. Aby dołączyć pakiet SDK do monitorowania wydajności, import moduły Firebase:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import * as firebase from "firebase/app";
    
    // Add the Performance Monitoring library
    import "firebase/performance";
    
  3. Zainicjuj Firebase i monitorowanie wydajności w swojej aplikacji:

    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    
    // Initialize Performance Monitoring and get a reference to the service
    const perf = firebase.performance();
    

Krok 2 : Dodaj pierwszą bibliotekę wypełniania opóźnienia wejściowego

Aby zmierzyć pierwszą metrykę opóźnienia wejściowego , należy dodać bibliotekę wypełniaczy dla tej metryki. Instrukcje dotyczące instalacji można znaleźć w dokumentacji biblioteki.

Dodanie tej biblioteki polyfill nie jest wymagane do monitorowania wydajności do raportowania innych metryk aplikacji sieci web.

Krok 3 : Wygeneruj zdarzenia dotyczące wydajności do początkowego wyświetlenia danych

Firebase może wykryć, że pakiet SDK został pomyślnie dodany do aplikacji, gdy otrzymuje informacje o zdarzeniach (np. O interakcjach w aplikacji) z Twojej aplikacji. Jeśli nadal tworzysz lokalnie, korzystaj z aplikacji, aby generować zdarzenia do wykrywania SDK, a także początkowe zbieranie i przetwarzanie danych.

  1. Udostępniaj i wyświetlaj swoją aplikację internetową w środowisku lokalnym.

  2. Generuj zdarzenia, ładując podstrony swojej witryny, wchodząc w interakcję z Twoją aplikacją i / lub uruchamiając żądania sieciowe. Upewnij się, że karta przeglądarki jest otwarta przez co najmniej 10 sekund po załadowaniu strony.

  3. Przejdź do panelu Wydajność w konsoli Firebase, aby sprawdzić, czy Firebase wykrył pakiet SDK.

    Jeśli nie widzisz komunikatu „Wykryto pakiet SDK”, zapoznaj się ze wskazówkami dotyczącymi rozwiązywania problemów .

  4. Monitorowanie wydajności przetwarza dane dotyczące zdarzeń wydajności przed wyświetleniem ich na pulpicie nawigacyjnym wydajności . Początkowe dane powinny zostać wyświetlone w ciągu 24 godzin od wyświetlenia komunikatu o wykryciu pakietu SDK.

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

Krok 4 : (Opcjonalnie) Wyświetl komunikaty dziennika dotyczące zdarzeń dotyczących wydajności

  1. Otwórz narzędzia programistyczne przeglądarki (na przykład kartę Sieć dla narzędzi deweloperskich Chrome lub Monitor sieci dla przeglądarki Firefox ).

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

  3. Sprawdź komunikaty dziennika pod kątem komunikatów o błędach.

  4. Po kilku sekundach poszukaj połączenia sieciowego do firebaselogging.googleapis.com w narzędziach programistycznych przeglądarki. Obecność tego połączenia sieciowego wskazuje, że przeglądarka wysyła dane o wydajności do Firebase.

Jeśli Twoja 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 dotyczące wydajności skojarzone z określonym kodem w aplikacji, możesz instrumentować niestandardowe ślady kodu .

Dzięki niestandardowemu śledzeniu kodu możesz zmierzyć, ile czasu zajmuje aplikacji wykonanie określonego zadania lub zestawu zadań, takich jak ładowanie zestawu obrazów lub wysyłanie zapytań do bazy danych. Metryką domyślną dla śledzenia kodu niestandardowego jest jego czas trwania, ale można również dodać metryki niestandardowe, takie jak trafienia w pamięci podręcznej i ostrzeżenia dotyczące pamięci.

W kodzie definiujesz początek i koniec niestandardowego śledzenia kodu (i dodajesz dowolne metryki niestandardowe) za pomocą interfejsu API dostarczonego przez zestaw SDK monitorowania wydajności.

Odwiedź stronę Dodaj monitorowanie dla określonego kodu, aby dowiedzieć się więcej o tych funkcjach i o tym, jak dodać je do swojej aplikacji.

Krok 6 : Wdróż aplikację i przejrzyj wyniki

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

Dane o wydajności można monitorować w panelu Wydajność w konsoli Firebase.

Następne kroki