Google is committed to advancing racial equity for Black communities. See how.
Эта страница была переведа с помощью Cloud Translation API.
Switch to English

Начните работу с мониторингом производительности в Интернете

Прежде чем вы начнете

Если вы еще этого не сделали, посетите страницу « Добавить Firebase в свой проект JavaScript», чтобы узнать, как:

  • Создать проект Firebase

  • Зарегистрируйте свое веб-приложение в Firebase

Обратите внимание: когда вы добавляете Firebase в свое приложение, вы также можете выполнить некоторые шаги, описанные на этой странице (например, добавить Firebase SDK и инициализировать Firebase ).

Шаг 1. Добавьте мониторинг производительности и инициализируйте Firebase

Если вы еще этого не сделали, добавьте SDK для мониторинга производительности и инициализируйте Firebase в своем приложении, используя один из вариантов ниже. При выборе одного из вариантов обратите внимание на следующее (см. Отдельные вкладки для получения более подробной информации):

  • Из CDN (автономный SDK) - если Performance Monitoring - единственный продукт Firebase в вашем приложении, этот вариант загружает один более легкий SDK из CDN.

  • Из CDN (стандартный SDK) - если вы используете другие продукты Firebase в своем приложении, этот вариант загружает SDK для мониторинга производительности вместе с другими библиотеками Firebase из CDN.

  • Из URL-адресов хостинга - если вы используете хостинг Firebase, эта опция предлагает удобство управления конфигурацией Firebase при инициализации Firebase.

  • Использование сборщиков модулей - если вы используете сборщик (например, Browserify или webpack), используйте эту опцию для импорта отдельных модулей, когда они вам нужны.

После того, как вы добавили SDK для мониторинга производительности, Firebase автоматически начнет сбор данных для загрузки страницы вашего приложения и сетевых запросов HTTP / S.

Из CDN

Вы можете настроить частичный импорт Firebase JavaScript SDK и загружать только те библиотеки Firebase, которые вам нужны. Firebase хранит каждую библиотеку Firebase JavaScript SDK в нашей глобальной сети доставки контента (CDN).

Чтобы включить SDK для мониторинга производительности из CDN, у вас есть два варианта:

  • автономный SDK. Мониторинг производительности - единственный продукт Firebase, который вы используете в своем приложении.
  • стандартный SDK - вы используете мониторинг производительности вместе с другими продуктами Firebase в своем приложении.

автономный SDK

Если Performance Monitoring - единственный продукт Firebase в вашем приложении, используйте автономный SDK Performance Monitoring (и рекомендуемый ниже сценарий заголовка), если вас интересуют:

  • уменьшение размера пакета SDK
  • отложить инициализацию SDK до загрузки страницы

Чтобы включить автономный SDK для мониторинга производительности в приложение и отложить его инициализацию до загрузки страницы:

  1. Добавьте следующий скрипт в заголовок вашего индексного файла.
  2. Обязательно добавьте объект конфигурации проекта Firebase вашего приложения.
(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);

где,

Вышеупомянутый сценарий асинхронно загружает автономный SDK, а затем инициализирует Firebase после срабатывания события onload окна. Эта тактика снижает влияние SDK на показатели загрузки страницы, поскольку браузер уже сообщил свои показатели загрузки при инициализации SDK.

стандартный SDK

Если вы используете другие продукты Firebase (например, Authentication или Cloud Firestore в своем приложении, включите стандартный SDK для мониторинга производительности.

Обратите внимание, что этот SDK требует, чтобы вы включили отдельный стандартный SDK ядра Firebase и инициализировали Firebase и мониторинг производительности в отдельном скрипте.

  1. Чтобы включить стандартный SDK для мониторинга производительности, добавьте следующие сценарии в конец <body> , но перед использованием каких-либо служб 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.1/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/7.21.1/firebase-performance.js"></script>
    <body>
    
  2. Инициализируйте Firebase и мониторинг производительности в своем приложении:

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

Из URL-адресов хостинга

Когда вы используете Firebase Hosting, вы можете настроить приложение для динамической загрузки библиотек Firebase JavaScript SDK с зарезервированных URL-адресов. Узнайте больше о добавлении SDK через зарезервированные URL-адреса хостинга .

При таком варианте настройки после развертывания в Firebase ваше приложение автоматически извлекает объект конфигурации Firebase из проекта Firebase, в котором вы развернули. Вы можете развернуть одну и ту же кодовую базу в нескольких проектах Firebase, но вам не нужно отслеживать конфигурацию Firebase, которую вы используете для firebase.initializeApp() .

  1. Чтобы включить SDK для мониторинга производительности, добавьте следующие сценарии в конец <body> , но перед использованием каких-либо служб 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.1/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/7.21.1/firebase-performance.js"></script>
    </body>
    
  2. Инициализируйте Firebase и мониторинг производительности в своем приложении (не нужно включать объект конфигурации Firebase при использовании зарезервированных URL-адресов хостинга):

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

Использование сборщика модулей

Вы можете настроить частичный импорт Firebase JavaScript SDK и загружать только те продукты Firebase, которые вам нужны. Если вы используете сборщик (например, Browserify или webpack), вы можете import отдельные продукты Firebase, когда они вам нужны.

  1. Установите пакет firebase npm и сохраните его в файле package.json , запустив:

    npm install --save firebase
  2. Чтобы включить SDK для мониторинга производительности, import модули 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. Инициализируйте Firebase и мониторинг производительности в своем приложении:

    // 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();
    

Шаг 2 : Добавьте первую библиотеку полифиллов задержки ввода

Чтобы измерить первую метрику задержки ввода , вам необходимо добавить библиотеку полифиллов для этой метрики. Инструкции по установке см. В документации библиотеки.

Добавление этой библиотеки полифиллов не требуется для мониторинга производительности для отчетов о других показателях веб-приложения.

Шаг 3. Создание событий производительности для отображения исходных данных

Firebase может определить, что вы успешно добавили SDK в свое приложение, когда получает информацию о событиях (например, о взаимодействиях с приложением) от вашего приложения. Если вы все еще разрабатываете локально, взаимодействуйте со своим приложением, чтобы генерировать события для обнаружения SDK, а также для первоначального сбора и обработки данных.

  1. Обслуживайте и просматривайте свое веб-приложение в локальной среде.

  2. Создавайте события, загружая подстраницы вашего сайта, взаимодействуя с вашим приложением и / или инициируя сетевые запросы. Убедитесь, что вкладка браузера открыта не менее 10 секунд после загрузки страницы.

  3. Перейти к приборной панели Performance консоли Firebase , чтобы увидеть , если Firebase распознал SDK.

    Если вы не видите сообщение «SDK обнаружен», просмотрите советы по устранению неполадок .

  4. Мониторинг производительности обрабатывает данные о событиях производительности перед отображением на приборной панели Performance . Вы должны увидеть начальное отображение данных в течение 24 часов после появления сообщения об обнаружении SDK.

    Если вы не видите отображение исходных данных, просмотрите советы по устранению неполадок .

Шаг 4. (Необязательно) Просмотрите сообщения журнала для событий производительности

  1. Откройте инструменты разработчика своего браузера (например, вкладку «Сеть» для инструментов разработчика Chrome или в « Мониторе сети» для Firefox ).

  2. Обновите свое веб-приложение в браузере.

  3. Проверьте сообщения журнала на наличие сообщений об ошибках.

  4. Через несколько секунд найдите сетевой вызов firebaselogging.googleapis.com в инструментах разработчика вашего браузера. Наличие этого сетевого вызова показывает, что браузер отправляет данные о производительности в Firebase.

Если ваше приложение не регистрирует события производительности, просмотрите советы по устранению неполадок .

Шаг 5. (Необязательно) Добавьте настраиваемый мониторинг для определенного кода

Чтобы отслеживать данные о производительности, связанные с конкретным кодом в вашем приложении, вы можете инструментировать трассировки настраиваемого кода .

С помощью настраиваемой трассировки кода вы можете измерить, сколько времени требуется вашему приложению для выполнения определенной задачи или набора задач, таких как загрузка набора изображений или запрос к базе данных. Метрикой по умолчанию для пользовательской трассировки кода является ее продолжительность, но вы также можете добавить пользовательские метрики, такие как попадания в кеш и предупреждения о памяти.

В коде вы определяете начало и конец пользовательской трассировки кода (и добавляете любые желаемые пользовательские метрики) с помощью API, предоставляемого SDK для мониторинга производительности.

Посетите раздел Добавление мониторинга для конкретного кода, чтобы узнать больше об этих функциях и о том, как добавить их в свое приложение.

Шаг 6. Разверните приложение и просмотрите результаты.

После проверки мониторинга производительности вы можете развернуть обновленную версию приложения для своих пользователей.

Вы можете отслеживать данные о производительности на панели управления производительностью консоли Firebase.

Следующие шаги