Bắt đầu với Giám sát hiệu suất cho web

Trước khi bắt đầu

Nếu bạn chưa có, hãy truy cập Thêm Firebase vào dự án JavaScript của bạn để tìm hiểu cách:

Tạo dự án Firebase
Đăng ký ứng dụng web của bạn với Firebase
Để sử dụng Giám sát hiệu suất trong một ứng dụng web, bạn phải thêm ứng dụng của mình làm Ứng dụng web Firebase trong bảng điều khiển Firebase.
Nếu bạn đã sử dụng các sản phẩm Firebase trong ứng dụng web hiện có của mình và bạn muốn bắt đầu sử dụng SDK theo dõi hiệu suất, bạn phải cập nhật đối tượng cấu hình Firebase để bao gồm appID của bạn.

Lưu ý rằng khi bạn thêm Firebase vào ứng dụng của mình, bạn cũng có thể hoàn thành một số bước được mô tả trên trang này (ví dụ: thêm SDK Firebase và khởi chạy Firebase ).

Bước 1 : Thêm Giám sát hiệu suất và khởi chạy Firebase

Nếu bạn chưa có, hãy thêm SDK theo dõi hiệu suất và khởi chạy Firebase trong ứng dụng của bạn bằng một trong các tùy chọn bên dưới. Hãy xem xét những điều sau để giúp bạn chọn trong số các tùy chọn của mình (xem các tab riêng lẻ để biết thêm thông tin chi tiết):

Từ CDN (SDK độc lập) - Nếu Giám sát hiệu suất là sản phẩm Firebase duy nhất trong ứng dụng của bạn, thì tùy chọn này sẽ tải một SDK đơn lẻ, nhẹ hơn từ CDN.
Từ CDN (SDK chuẩn) - Nếu bạn sử dụng các sản phẩm Firebase khác trong ứng dụng của mình, tùy chọn này sẽ tải SDK theo dõi hiệu suất cùng với các thư viện Firebase khác từ CDN.
Từ URL lưu trữ - Nếu bạn đang sử dụng Lưu trữ Firebase, tùy chọn này mang lại sự thuận tiện cho việc quản lý cấu hình Firebase của bạn khi khởi chạy Firebase.
Sử dụng gói mô-đun - Nếu bạn sử dụng trình gói (như Browserify hoặc webpack), hãy sử dụng tùy chọn này để nhập các mô-đun riêng lẻ khi bạn cần.

Sau khi bạn đã thêm SDK theo dõi hiệu suất, Firebase tự động bắt đầu thu thập dữ liệu cho các yêu cầu mạng HTTP / S tải trang của ứng dụng của bạn.

Từ CDN

Bạn có thể định cấu hình nhập một phần SDK JavaScript của Firebase và chỉ tải các thư viện Firebase mà bạn cần. Firebase lưu trữ từng thư viện của SDK JavaScript Firebase trên CDN toàn cầu của chúng tôi (mạng phân phối nội dung).

Để bao gồm SDK giám sát hiệu suất từ CDN, bạn có hai tùy chọn:

SDK độc lập - Giám sát hiệu suất là sản phẩm Firebase duy nhất mà bạn sử dụng trong ứng dụng của mình.
SDK chuẩn - Bạn đang sử dụng Giám sát hiệu suất cùng với các sản phẩm Firebase khác trong ứng dụng của mình.

SDK độc lập

Nếu Giám sát hiệu suất là sản phẩm Firebase duy nhất trong ứng dụng của bạn, hãy sử dụng SDK theo dõi hiệu suất độc lập (và tập lệnh tiêu đề được đề xuất bên dưới) nếu bạn quan tâm đến:

giảm kích thước gói SDK của bạn
trì hoãn việc khởi chạy SDK cho đến khi trang của bạn tải

Để bao gồm SDK theo dõi hiệu suất độc lập trong ứng dụng của bạn và trì hoãn việc khởi chạy nó sau khi tải trang của bạn:

Thêm tập lệnh sau vào tiêu đề của tệp chỉ mục của bạn.
Đảm bảo thêm đối tượng cấu hình dự án Firebase của ứng dụng.

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

Ở đâu,

performance_standalone là 'https://www.gstatic.com/firebasejs/8.1.1/firebase-performance-standalone.js'
firebaseConfig là đối tượng cấu hình Firebase của ứng dụng của bạn

Các kịch bản trên tải không đồng bộ SDK độc lập sau đó khởi căn cứ hỏa lực sau của cửa sổ onload kiện cháy. Chiến thuật này làm giảm tác động mà SDK có thể có đối với chỉ số tải trang vì trình duyệt đã báo cáo các chỉ số tải khi bạn khởi chạy SDK.

Tìm hiểu về SDK giám sát hiệu suất độc lập và tập lệnh tiêu đề

SDK độc lập này được tối ưu hóa cho kích thước; Gzipped, nó khoảng 10kb. Nó cũng có tất cả các chức năng của Giám sát hiệu suất Firebase cùng với một tập hợp tối thiểu các chức năng SDK cốt lõi của Firebase.

Giám sát hiệu suất Firebase sử dụng API fetch và Promise không có sẵn trên các trình duyệt cũ hơn. Các polyfills cho các API này được bao gồm trong SDK JS theo dõi hiệu suất Firebase tiêu chuẩn, nhưng chúng được bỏ qua khỏi SDK độc lập để giảm kích thước.

SDK giám sát hiệu suất một phần dựa vào API thời gian tài nguyên để lấy số liệu tải trang từ trình duyệt.

Đoạn mã sau chia nhỏ tập lệnh tiêu đề bao gồm sau đó làm chậm quá trình khởi chạy 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);

Ở đâu,

performance_standalone là 'https://www.gstatic.com/firebasejs/8.1.1/firebase-performance-standalone.js'
firebaseConfig là đối tượng cấu hình Firebase của ứng dụng của bạn

SDK tiêu chuẩn

Nếu bạn đang sử dụng các sản phẩm Firebase khác (như Xác thực hoặc Cloud Firestore trong ứng dụng của mình, hãy bao gồm SDK giám sát hiệu suất tiêu chuẩn.

Lưu ý rằng SDK này yêu cầu bạn bao gồm SDK lõi Firebase tiêu chuẩn riêng và khởi chạy Firebase và Giám sát hiệu suất trong một tập lệnh riêng.

Để bao gồm SDK theo dõi hiệu suất tiêu chuẩn, hãy thêm các tập lệnh sau vào cuối <body> của bạn, nhưng trước khi bạn sử dụng bất kỳ dịch vụ Firebase nào:

<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.1.1/firebase-app.js"></script>

  <!-- Add the standard Performance Monitoring library -->
  <script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-performance.js"></script>
<body>

Khởi tạo Firebase và Giám sát hiệu suất trong ứng dụng của bạn:

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

Từ URL lưu trữ

Khi sử dụng Lưu trữ Firebase, bạn có thể định cấu hình ứng dụng của mình để tải động các thư viện SDK JavaScript của Firebase từ các URL dành riêng. Tìm hiểu thêm về cách thêm SDK qua URL Lưu trữ dành riêng .

Với tùy chọn thiết lập này, sau khi bạn triển khai tới Firebase , ứng dụng của bạn sẽ tự động kéo đối tượng cấu hình Firebase từ dự án Firebase mà bạn đã triển khai. Bạn có thể triển khai cùng một cơ sở mã cho nhiều dự án Firebase, nhưng bạn không phải theo dõi cấu hình Firebase mà bạn đang sử dụng cho firebase.initializeApp() .

Để bao gồm SDK theo dõi hiệu suất, hãy thêm các tập lệnh sau vào cuối <body> của bạn, nhưng trước khi bạn sử dụng bất kỳ dịch vụ Firebase nào:

<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.1.1/firebase-app.js"></script>

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

Khởi tạo Firebase và Giám sát hiệu suất trong ứng dụng của bạn (không cần bao gồm đối tượng cấu hình Firebase khi sử dụng URL lưu trữ dành riêng):

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

Kiểm tra cục bộ tích hợp Giám sát hiệu suất của bạn khi sử dụng URL lưu trữ dành riêng

Để kiểm tra cục bộ tích hợp Giám sát hiệu suất của bạn, phân phối firebase serve hiện không hỗ trợ khởi chạy Firebase để Giám sát hiệu suất qua URL /__/firebase/init.js . Thay vào đó, hãy bao gồm đối tượng cấu hình Firebase của bạn và khởi chạy Firebase như sau:

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

Sử dụng gói mô-đun

Bạn có thể định cấu hình nhập một phần SDK JavaScript của Firebase và chỉ tải các sản phẩm Firebase mà bạn cần. Nếu bạn đang sử dụng một gói (như Browserify hoặc webpack), bạn có thể import từng sản phẩm Firebase khi cần.

Cài đặt gói firebase npm và lưu vào tệp package.json của bạn bằng cách chạy:
```
npm install --save firebase
```

Để bao gồm SDK giám sát hiệu suất, hãy import các mô-đun Firebase:

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

Khởi tạo Firebase và Giám sát hiệu suất trong ứng dụng của bạn:

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

Bước 2 : Thêm thư viện polyfill trễ đầu vào đầu tiên

Để đo lường chỉ số độ trễ đầu vào đầu tiên , bạn cần thêm thư viện polyfill cho chỉ số này. Để biết hướng dẫn cài đặt, hãy tham khảo tài liệu của thư viện.

Không cần thêm thư viện polyfill này để Giám sát hiệu suất báo cáo các chỉ số ứng dụng web khác.

Bước 3 : Tạo các sự kiện hiệu suất để hiển thị dữ liệu ban đầu

Firebase có thể phát hiện ra rằng bạn đã thêm thành công SDK vào ứng dụng của mình khi nó nhận được thông tin sự kiện (như tương tác với ứng dụng) từ ứng dụng của bạn. Nếu bạn vẫn đang phát triển cục bộ, hãy tương tác với ứng dụng của bạn để tạo các sự kiện nhằm phát hiện SDK cũng như thu thập và xử lý dữ liệu ban đầu.

Cung cấp và xem ứng dụng web của bạn trong môi trường cục bộ.
Tạo sự kiện bằng cách tải các trang con cho trang web của bạn, tương tác với ứng dụng của bạn và / hoặc kích hoạt các yêu cầu mạng. Đảm bảo giữ tab trình duyệt mở trong ít nhất 10 giây sau khi tải trang.
Chuyển đến Trang tổng quan về hiệu suất của bảng điều khiển Firebase để xem liệu Firebase có phát hiện thấy SDK hay không.
Nếu bạn không thấy thông báo "Đã phát hiện SDK", hãy xem lại các mẹo khắc phục sự cố .
Giám sát hiệu suất xử lý dữ liệu sự kiện hiệu suất trước khi hiển thị trong bảng điều khiển Hiệu suất . Bạn sẽ thấy hiển thị dữ liệu ban đầu của mình trong vòng 24 giờ sau khi thấy thông báo phát hiện SDK.
Nếu bạn không thấy hiển thị dữ liệu ban đầu của mình, hãy xem lại các mẹo khắc phục sự cố .

Bước 4 : (Tùy chọn) Xem thông báo nhật ký cho các sự kiện hiệu suất

Mở các công cụ dành cho nhà phát triển của trình duyệt của bạn (ví dụ: tab Mạng cho Công cụ Chrome Dev hoặc trong Trình giám sát mạng cho Firefox ).
Làm mới ứng dụng web của bạn trong trình duyệt.
Kiểm tra thông báo nhật ký của bạn để tìm bất kỳ thông báo lỗi nào.
Sau một vài giây, hãy tìm một cuộc gọi mạng tới firebaselogging.googleapis.com trong các công cụ dành cho nhà phát triển của trình duyệt của bạn. Sự hiện diện của cuộc gọi mạng đó cho thấy rằng trình duyệt đang gửi dữ liệu hiệu suất đến Firebase.

Nếu ứng dụng của bạn không ghi lại các sự kiện hiệu suất, hãy xem lại các mẹo gỡ rối .

Bước 5 : (Tùy chọn) Thêm giám sát tùy chỉnh cho mã cụ thể

Để theo dõi dữ liệu hiệu suất được liên kết với mã cụ thể trong ứng dụng của bạn, bạn có thể tạo công cụ theo dõi mã tùy chỉnh .

Với dấu vết mã tùy chỉnh, bạn có thể đo lường thời gian ứng dụng của mình hoàn thành một nhiệm vụ cụ thể hoặc một tập hợp các nhiệm vụ, chẳng hạn như tải một tập hợp hình ảnh hoặc truy vấn cơ sở dữ liệu của bạn. Số liệu mặc định cho dấu vết mã tùy chỉnh là thời lượng của nó, nhưng bạn cũng có thể thêm số liệu tùy chỉnh, chẳng hạn như số lần truy cập bộ nhớ cache và cảnh báo bộ nhớ.

Trong mã của mình, bạn xác định phần đầu và phần cuối của một dấu vết mã tùy chỉnh (và thêm bất kỳ chỉ số tùy chỉnh mong muốn nào) bằng cách sử dụng API do SDK giám sát hiệu suất cung cấp.

Truy cập Thêm giám sát để biết mã cụ thể để tìm hiểu thêm về các tính năng này và cách thêm chúng vào ứng dụng của bạn.

Bước 6 : Triển khai ứng dụng của bạn sau đó xem xét kết quả

Sau khi xác thực Giám sát hiệu suất, bạn có thể triển khai phiên bản cập nhật của ứng dụng cho người dùng của mình.

Bạn có thể theo dõi dữ liệu hiệu suất trong Bảng điều khiển hiệu suất của bảng điều khiển Firebase.

Bước tiếp theo

Có được kinh nghiệm thực tế với Giám sát hiệu suất Firebase cho Web Codelab .
Tìm hiểu thêm về dữ liệu do Giám sát hiệu suất tự động thu thập:
- Dữ liệu để tải trang trong ứng dụng của bạn
- Dữ liệu cho các yêu cầu mạng HTTP / S do ứng dụng của bạn cấp
Xem, theo dõi và lọc dữ liệu hiệu suất của bạn trong bảng điều khiển Firebase
Thêm giám sát cho các nhiệm vụ hoặc quy trình công việc cụ thể trong ứng dụng của bạn bằng cách đánh dấu vết mã tùy chỉnh
Sử dụng các thuộc tính để lọc dữ liệu hiệu suất