Ta strona została przetłumaczona przez Cloud Translation API.

Zacznij korzystać z funkcji monitorowania wydajności w Internecie

Zanim zaczniesz

Jeśli nie masz jeszcze znaleźć Dodaj Firebase do projektu JavaScript , aby dowiedzieć się, jak:

Utwórz projekt Firebase
Zarejestruj swoją aplikację internetową w Firebase
Aby korzystać Monitorowanie wydajności w aplikacji internetowej, należy dodać swoją aplikację jako Firebase Web App w konsoli Firebase.
Jeśli już używać produktów Firebase w istniejącej aplikacji internetowej i chcesz rozpocząć używanie Monitorowanie wydajności SDK, należy zaktualizować Firebase obiekt config włączenia swoją appID .

Należy pamiętać, że podczas dodawania Firebase do aplikacji, można również wypełnić niektóre z kroków opisanych na tej stronie (na przykład dodanie Firebase SDK i inicjowanie Firebase ).

Krok 1: dodaj Monitorowanie wydajności i zainicjować Firebase

Dodaj pakiet SDK do monitorowania wydajności i zainicjuj Firebase w swojej aplikacji, korzystając z jednej z poniższych opcji. Rozważ następujące kwestie, które pomogą Ci wybrać spośród opcji (patrz poszczególne zakładki, aby uzyskać bardziej szczegółowe informacje):

Z CDN (standalone SDK) - Jeśli Monitorowanie wydajności jest produktem tylko Firebase w swojej aplikacji, ta opcja Obciążenia pojedynczy, lżejsza waga-SDK z CDN.
Z CDN (standard SDK) - W przypadku korzystania z innych produktów Firebase w swojej aplikacji, ta opcja Obciążenia Performance Monitoring SDK wraz z innymi Firebase bibliotek z CDN.
Od Hosting URL - Jeśli używasz Firebase Hosting, opcja ta oferuje wygodę do zarządzania konfiguracją Firebase podczas inicjalizacji Firebase.
Korzystanie bundlers Module - Jeśli używasz Bundler (jak Browserify lub WebPack), użyj tej opcji, aby importować poszczególne moduły, kiedy ich potrzebujesz.

Po dodaniu Performance Monitoring SDK, Firebase automatycznie rozpoczyna zbieranie danych dla Twojej aplikacji ładowania strony i HTTP / S żądania sieciowe .

Z CDN

Możesz skonfigurować częściowy import 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 (sieć dostarczania treści).

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

Autonomiczny SDK - Monitorowanie wydajności jest produktem tylko Firebase że używasz w swojej aplikacji.
standardowy SDK - Używasz Monitorowanie wydajności wraz z innymi produktami Firebase w swojej aplikacji.

samodzielny pakiet SDK

Jeśli Performance Monitoring to jedyny produkt Firebase w Twojej aplikacji, użyj samodzielnego pakietu SDK Performance Monitoring (i zalecanego poniżej skryptu nagłówka), jeśli interesują Cię:

zmniejszenie rozmiaru pakietu SDK
opóźnianie inicjalizacji SDK do czasu załadowania strony

Aby dołączyć do aplikacji samodzielny pakiet SDK do monitorowania wydajności i opóźnić jego inicjalizację do momentu załadowania strony:

Dodaj następujący skrypt do nagłówka pliku indeksu.
Upewnij się, aby dodać swojej aplikacji Firebase obiektu konfiguracji projektu .

(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 jest 'https://www.gstatic.com/firebasejs/8.8.0/firebase-performance-standalone.js'
firebaseConfig jest z aplikacji Firebase config przedmiot

Powyższy skrypt asynchronicznie wczytuje SDK samodzielny następnie inicjuje Firebase po okna onload pożary zdarzeń. Taktyka ta zmniejsza wpływ, jaki może mieć na SDK metryk strona załadowała ponieważ przeglądarka ma już zgłoszone do jego ładowania metryki kiedy zainicjować SDK.

Dowiedz się więcej o samodzielnym pakiecie SDK do monitorowania wydajności i skrypcie nagłówka

Ten samodzielny pakiet SDK jest zoptymalizowany pod kątem rozmiaru; Spakowany gzipem, ma około 10kb. Posiada wszystkie funkcje Firebase Performance Monitoring wraz z minimalnym zestawem podstawowych funkcji Firebase SDK.

Firebase wydajności zastosowań monitoringu fetch i Promise API, które nie są dostępne w starszych przeglądarkach. Wypełnienia dla tych interfejsów API są zawarte w standardowym pakiecie SDK Firebase Performance Monitoring JS, ale są pomijane w samodzielnym pakiecie SDK, aby zmniejszyć rozmiar.

Performance Monitoring SDK opiera się po części na Timing API zasobów w celu uzyskania metryki ładowania strony w przeglądarce.

Poniższy fragment kodu przedstawia opis skryptu nagłówka, który następnie opóźnia inicjalizację pakietu 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 jest 'https://www.gstatic.com/firebasejs/8.8.0/firebase-performance-standalone.js'
firebaseConfig jest z aplikacji Firebase config przedmiot

standardowy pakiet SDK

Jeśli w swojej aplikacji używasz 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ć Standard Performance Monitoring SDK, należy dodać następujące skrypty do dołu <body> tagu, 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/8.8.0/firebase-app.js"></script>

  <!-- Add the standard Performance Monitoring library -->
  <script src="https://www.gstatic.com/firebasejs/8.8.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 hostujących adresów URL

Korzystając z Hostingu Firebase, możesz skonfigurować swoją aplikację tak, aby dynamicznie ładowała biblioteki Firebase JavaScript SDK z zarezerwowanych adresów URL. Dowiedz się więcej o dodaniu SDK poprzez zastrzeżone Hosting URL .

Dzięki tej opcji konfiguracji, po wdrożeniu do Firebase , aplikacja automatycznie pobiera obiekt konfiguracji Firebase z projektu Firebase do którego już wdrożony. Można wdrożyć ten sam codebase do wielu projektów Firebase, ale nie masz do śledzenia konfiguracji Firebase że używasz do firebase.initializeApp() .

Aby dołączyć Monitorowanie wydajności SDK, należy dodać następujące skrypty do dołu <body> tagu, 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/8.8.0/firebase-app.js"></script>

  <!-- Add the Performance Monitoring library -->
  <script src="/__/firebase/8.8.0/firebase-performance.js"></script>
</body>

Zainicjuj Firebase i monitorowanie wydajności w swojej aplikacji (nie musisz dołączać obiektu konfiguracyjnego Firebase, gdy używasz zarezerwowanych adresów URL w 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 podczas korzystania 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ęściowy import pakietu Firebase JavaScript SDK i ładować tylko te produkty Firebase, których potrzebujesz. Jeśli używasz Bundler (jak Browserify lub WebPACK), można import poszczególne produkty Firebase kiedy ich potrzebujesz.

Zainstalować firebase pakiet npm i zapisać go na dysku package.json pliku za pomocą polecenia:
```
npm install --save firebase
```

Aby dołączyć Monitorowanie wydajności SDK, import z Firebase moduły:

// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";

// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// 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 pierwsze wejście bibliotekę opóźnienie PolyFill

Aby zmierzyć pierwsze opóźnienie wejścia metrykę , trzeba dodać bibliotekę PolyFill na to metryka. Instrukcje instalacji znajdują się biblioteki dokumentacji .

Dodanie tej biblioteki wypełnienia nie jest wymagane, aby funkcja monitorowania wydajności mogła raportować inne metryki aplikacji sieci Web.

Krok 3: Generowanie zdarzeń osiągi początkowym wyświetlaniem danych

Firebase rozpocznie przetwarzanie zdarzeń po pomyślnym dodaniu pakietu SDK do aplikacji. Jeśli nadal programujesz lokalnie, wejdź w interakcję z aplikacją, aby wygenerować zdarzenia do wstępnego gromadzenia i przetwarzania danych.

Udostępniaj i wyświetlaj swoją aplikację internetową w środowisku lokalnym.
Generuj zdarzenia, ładując podstrony Twojej witryny, wchodząc w interakcję z Twoją aplikacją i/lub wywołując żądania sieciowe. Upewnij się, że karta przeglądarki jest otwarta przez co najmniej 10 sekund po załadowaniu strony.
Idź na desce rozdzielczej wydajności konsoli Firebase. Powinieneś zobaczyć swoje początkowe dane w ciągu kilku minut.
Jeśli nie pojawi się ekran swojego wstępnych danych, przejrzeć wskazówki dotyczące rozwiązywania problemów .

Krok 4: (opcjonalnie) Przeglądanie wiadomości dziennika zdarzeń dla wydajności

Otwórz narzędzia dla programistów w przeglądarce (na przykład, zakładka dla Chrome Dev Narzędzia sieciowe lub w Monitorze sieci dla Firefoksa ).
Odśwież swoją aplikację internetową w przeglądarce.
Sprawdź komunikaty dziennika pod kątem komunikatów o błędach.
Po kilku sekundach, szukać połączenia sieciowego firebaselogging.googleapis.com w dostarczaniu narzędzi programistycznych w Twojej przeglądarce. Obecność tego połączenia sieciowego wskazuje, że przeglądarka wysyła dane o wydajności do Firebase.

Jeśli aplikacja nie jest rejestrowanie zdarzeń z wydajnością, przejrzeć wskazówki dotyczące rozwiązywania problemów .

Krok 5: (opcjonalnie) Dodaj własny monitoring dla kodu specyficznego

Monitorować dane dotyczące wydajności związanych z kodem określonego w swojej aplikacji, MOŻESZ przyrządów kod zwyczaj ślady .

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

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

Wizyta Dodaj monitorowania specyficzny kod , aby dowiedzieć się więcej na temat tych funkcji i jak je dodać do swojej aplikacji.

Krok 6: Rozmieszczanie app następnie powodowało

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

Można monitorować dane dotyczące wydajności w desce rozdzielczej wydajności konsoli Firebase.

Następne kroki

Zdobądź praktyczne doświadczenie z monitoringu Firebase Wyniki dla Web Codelab .
Dowiedz się więcej o danych zbieranych automatycznie przez Performance Monitoring:
- Dane dla ładowania strony w swojej aplikacji
- Dane dla HTTP / S żądania sieciowe wydane przez aplikację
Zobacz, śledzenie i filtr dane skuteczności w konsoli Firebase
Dodaj monitorowania dla konkretnych zadań lub przepływów pracy w swojej aplikacji przez instrumentacji własnych śladów kodu
Użyj atrybutów do filtrowania danych o wydajności