หน้านี้ได้รับการแปลโดย Cloud Translation API
Switch to English

เริ่มต้นด้วยการตรวจสอบประสิทธิภาพสำหรับเว็บ

ก่อนที่คุณจะเริ่ม

หากคุณยังไม่ได้ทำโปรดไปที่ เพิ่ม Firebase ในโครงการ JavaScript ของคุณ เพื่อเรียนรู้วิธีการ:

  • สร้างโครงการ Firebase

  • ลงทะเบียนเว็บแอปของคุณกับ Firebase

โปรดทราบว่าเมื่อคุณเพิ่ม Firebase ลงในแอปคุณอาจทำตามขั้นตอนบางอย่างที่อธิบายไว้ในหน้านี้ (เช่น การเพิ่ม Firebase SDK และการเริ่มต้น Firebase )

ขั้นตอนที่ 1 : เพิ่มการตรวจสอบประสิทธิภาพและเริ่มต้น Firebase

หากคุณยังไม่ได้ดำเนินการให้เพิ่ม SDK การตรวจสอบประสิทธิภาพและเริ่มต้น Firebase ในแอปของคุณโดยใช้ตัวเลือกใดตัวเลือกหนึ่งด้านล่าง พิจารณาสิ่งต่อไปนี้เพื่อช่วยคุณเลือกจากตัวเลือกต่างๆของคุณ (ดูแต่ละแท็บสำหรับข้อมูลเพิ่มเติมโดยละเอียด):

  • จาก CDN (SDK แบบสแตนด์อโลน) - หากการตรวจสอบประสิทธิภาพเป็นผลิตภัณฑ์ Firebase เพียงผลิตภัณฑ์เดียวในแอปของคุณตัวเลือกนี้จะโหลด SDK เดียวที่มีน้ำหนักเบากว่าจาก CDN

  • จาก CDN (SDK มาตรฐาน) - หากคุณใช้ผลิตภัณฑ์ Firebase อื่นในแอปของคุณตัวเลือกนี้จะโหลด SDK การตรวจสอบประสิทธิภาพพร้อมกับไลบรารี Firebase อื่น ๆ จาก CDN

  • จาก Hosting URL - หากคุณใช้ Firebase Hosting ตัวเลือกนี้ช่วยอำนวยความสะดวกในการจัดการการกำหนดค่า 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 แบบสแตนด์อโลน

หากการตรวจสอบประสิทธิภาพเป็นผลิตภัณฑ์ Firebase เพียงผลิตภัณฑ์เดียวในแอปของคุณให้ใช้ SDK การตรวจสอบประสิทธิภาพแบบสแตนด์อโลน (และสคริปต์ส่วนหัวที่แนะนำด้านล่าง) หากคุณสนใจ:

  • ลดขนาดแพ็คเกจ 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 อื่น ๆ (เช่นการตรวจสอบสิทธิ์หรือ 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.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. เริ่มต้น 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 ผ่าน Hosting 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.0/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/7.21.0/firebase-performance.js"></script>
    </body>
    
  2. เริ่มต้น Firebase และการตรวจสอบประสิทธิภาพในแอปของคุณ (ไม่จำเป็นต้องรวมออบเจ็กต์การกำหนดค่า Firebase ของคุณเมื่อใช้ Hosting 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 : เพิ่มไลบรารี polyfill หน่วงเวลาอินพุตแรก

หากต้องการวัด เมตริกความล่าช้าในการป้อนข้อมูลแรก คุณต้องเพิ่มไลบรารี polyfill สำหรับเมตริกนี้ สำหรับคำแนะนำในการติดตั้งโปรดดู เอกสาร ของไลบรารี

การเพิ่มไลบรารี polyfill นี้ไม่จำเป็นสำหรับการตรวจสอบประสิทธิภาพเพื่อรายงานเมตริกเว็บแอปอื่น ๆ

ขั้นตอนที่ 3 : สร้างเหตุการณ์ประสิทธิภาพสำหรับการแสดงข้อมูลเริ่มต้น

Firebase ตรวจพบว่าคุณได้เพิ่ม SDK ลงในแอปสำเร็จแล้วเมื่อได้รับข้อมูลเหตุการณ์ (เช่นการโต้ตอบกับแอป) จากแอปของคุณ หากคุณยังคงพัฒนาในพื้นที่ให้โต้ตอบกับแอปของคุณเพื่อสร้างเหตุการณ์สำหรับการตรวจจับ SDK ตลอดจนการรวบรวมและประมวลผลข้อมูลเบื้องต้น

  1. ให้บริการและดูเว็บแอปของคุณในสภาพแวดล้อมท้องถิ่น

  2. สร้างเหตุการณ์โดยการโหลดหน้าย่อยสำหรับไซต์ของคุณโต้ตอบกับแอปของคุณและ / หรือเรียกใช้คำขอเครือข่าย ตรวจสอบให้แน่ใจว่าได้เปิดแท็บเบราว์เซอร์ไว้อย่างน้อย 10 วินาทีหลังจากโหลดหน้าเว็บ

  3. ไปที่ แดชบอร์ด ประสิทธิภาพ ของคอนโซล Firebase เพื่อดูว่า Firebase ตรวจพบ SDK หรือไม่

    หากคุณไม่เห็นข้อความ "ตรวจพบ SDK" ให้อ่าน เคล็ดลับการแก้ปัญหา

  4. การตรวจสอบประสิทธิภาพประมวลผลข้อมูลเหตุการณ์ประสิทธิภาพก่อนที่จะแสดงใน แดชบอร์ด ประสิทธิภาพ คุณควรจะเห็นข้อมูลเริ่มต้นของคุณแสดงภายใน 24 ชั่วโมงหลังจากเห็นข้อความการตรวจจับ SDK

    หากคุณไม่เห็นการแสดงข้อมูลเริ่มต้นของคุณให้อ่าน คำแนะนำ ในการ แก้ปัญหา

ขั้นตอนที่ 4 : (ไม่บังคับ) ดูข้อความบันทึกสำหรับเหตุการณ์ประสิทธิภาพ

  1. เปิดเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ (ตัวอย่างเช่น แท็บเครือข่ายสำหรับ Chrome Dev Tools หรือใน Network Monitor สำหรับ Firefox )

  2. รีเฟรชเว็บแอปของคุณในเบราว์เซอร์

  3. ตรวจสอบข้อความบันทึกของคุณเพื่อหาข้อความแสดงข้อผิดพลาด

  4. หลังจากนั้นไม่กี่วินาทีให้มองหาการเรียกเครือข่ายไป firebaselogging.googleapis.com ในเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ของคุณ การมีสายเครือข่ายนั้นแสดงว่าเบราว์เซอร์กำลังส่งข้อมูลประสิทธิภาพไปยัง Firebase

หากแอปของคุณไม่ได้บันทึกเหตุการณ์ประสิทธิภาพโปรดอ่าน เคล็ดลับการแก้ปัญหา

ขั้นตอนที่ 5 : (ไม่บังคับ) เพิ่มการตรวจสอบที่กำหนดเองสำหรับรหัสเฉพาะ

หากต้องการตรวจสอบข้อมูลประสิทธิภาพที่เกี่ยวข้องกับโค้ดเฉพาะในแอปของคุณคุณสามารถใช้การ ติดตามโค้ดที่กำหนดเอง ได้

ด้วยการติดตามโค้ดที่กำหนดเองคุณสามารถวัดได้ว่าแอปของคุณใช้เวลานานแค่ไหนในการทำงานหรือชุดงานที่ต้องการเช่นการโหลดชุดรูปภาพหรือการสืบค้นฐานข้อมูลของคุณ เมตริกเริ่มต้นสำหรับการติดตามโค้ดที่กำหนดเองคือระยะเวลา แต่คุณยังสามารถเพิ่มเมตริกที่กำหนดเองได้เช่นการเข้าถึงแคชและคำเตือนเกี่ยวกับหน่วยความจำ

ในโค้ดของคุณคุณกำหนดจุดเริ่มต้นและจุดสิ้นสุดของการติดตามโค้ดที่กำหนดเอง (และเพิ่มเมตริกที่กำหนดเองที่ต้องการ) โดยใช้ API ที่จัดเตรียมโดย Performance Monitoring SDK

ไปที่ เพิ่มการตรวจสอบสำหรับรหัสเฉพาะ เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติเหล่านี้และวิธีเพิ่มลงในแอปของคุณ

ขั้นตอนที่ 6 : ปรับใช้แอปของคุณจากนั้นตรวจสอบผลลัพธ์

หลังจากที่คุณตรวจสอบการตรวจสอบประสิทธิภาพแล้วคุณสามารถปรับใช้แอปเวอร์ชันอัปเดตให้กับผู้ใช้ของคุณได้

คุณตรวจสอบข้อมูลประสิทธิภาพได้ใน แดชบอร์ด ประสิทธิภาพ ของคอนโซล Firebase

ขั้นตอนถัดไป