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
Aby korzystać z monitorowania wydajności w aplikacji internetowej, musisz dodać ją jako aplikację internetową Firebase w konsoli Firebase.
Jeśli korzystasz już z produktów Firebase w swojej istniejącej aplikacji internetowej i chcesz zacząć korzystać z pakietu SDK do monitorowania wydajności, musisz zaktualizować obiekt konfiguracyjny appID aby zawierał appID .

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:

Dodaj następujący skrypt do nagłówka pliku indeksu.
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.

Dowiedz się o autonomicznym zestawie SDK monitorowania wydajności i skrypcie nagłówka

Ten samodzielny pakiet SDK jest zoptymalizowany pod kątem rozmiaru; Spakowany Gzip, zajmuje około 10kb. Posiada wszystkie funkcje monitorowania wydajności Firebase wraz z minimalnym zestawem podstawowych funkcji pakietu SDK Firebase.

Monitorowanie wydajności Firebase korzysta z interfejsów API fetch i Promise które nie są dostępne w starszych przeglądarkach. Wypełnienia dla tych interfejsów API są zawarte w standardowym pakiecie SDK do monitorowania wydajności Firebase, ale zostały pominięte w samodzielnym pakiecie SDK, aby zmniejszyć rozmiar.

Zestaw SDK do monitorowania wydajności polega częściowo na interfejsie API Resource Timing w celu uzyskania metryk ładowania strony z przeglądarki.

Poniższy fragment rozkłada skrypt nagłówka, który zawiera następnie opóźnienia w inicjalizacji SDK:

(function(sdkSource, firebaseConfigObject) {
   function load(f, c) {
       // Creates a script tag to load the standalone SDK
       var sdkScript = document.createElement('script');

       // Sets it to an async script so that it doesn't interfere with page load
       sdkScript.async = 1;

       // Sets the source of the script
       sdkScript.src = f;

       // Inserts the script into the head of the page
       var s = document.getElementsByTagName('script')[0];
       s.parentNode.insertBefore(sdkScript, s);
   }

   // Calls the load method
   load(sdkSource);

   // Initializes the SDK only when the onload method is called
   window.addEventListener('load', function() {
       firebase.initializeApp(firebaseConfigObject).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

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.

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>

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() .

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>

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>

Przetestuj lokalnie integrację monitorowania wydajności, korzystając z zarezerwowanych adresów URL hostingu

Lokalnie przetestować integrację monitorowania wydajności, firebase serve obecnie nie obsługuje inicjowania Firebase dla Monitorowanie wydajności za pośrednictwem /__/firebase/init.js URL. Zamiast tego dołącz obiekt konfiguracyjny Firebase i zainicjuj Firebase w następujący sposób:

  <body>
    <!-- Previously loaded Firebase SDKs (via Hosting URLs) -->

    <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>

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.

Zainstaluj pakiet npm firebase i zapisz go w pliku package.json , uruchamiając:
```
npm install --save firebase
```

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";

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.

Udostępniaj i wyświetlaj swoją aplikację internetową w środowisku lokalnym.
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.
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 .
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

Otwórz narzędzia programistyczne przeglądarki (na przykład kartę Sieć dla narzędzi deweloperskich Chrome lub Monitor sieci dla przeglądarki Firefox ).
Odśwież swoją aplikację internetową w przeglądarce.
Sprawdź komunikaty dziennika pod kątem komunikatów o błędach.
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

Zdobądź praktyczne doświadczenie z monitorowaniem wydajności Firebase dla Web Codelab .
Dowiedz się więcej o danych zbieranych automatycznie przez monitorowanie wydajności:
- Dane do wczytywania strony w Twojej aplikacji
- Dane dotyczące żądań sieciowych HTTP / S wysłanych przez Twoją aplikację
Wyświetlaj, śledź i filtruj dane dotyczące wydajności w konsoli Firebase
Dodaj monitorowanie dla określonych zadań lub przepływów pracy w aplikacji przez instrumentowanie niestandardowych śladów kodu
Użyj atrybutów, aby filtrować dane dotyczące wydajności