วิธีประเมินความเร็วไซต์ด้วย Performance API

เรียนรู้วิธีใช้ API นี้เพื่อวัดประสิทธิภาพของแอปของคุณ

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

Performance API จะบันทึกตัววัดที่คล้ายกับ DevTool จากผู้ใช้จริงขณะที่ผู้ใช้นำทางแอปพลิเคชันของคุณ คุณสามารถโพสต์ข้อมูลที่รวบรวมไปยังบริการ เช่น Asayer.io เช่น

asayer.event('load-performance', {
'os'      : 'Ubuntu',
  'agent'   : 'Firefox 88.0',
  'location': 'US',
  'pageload': 1522.598,
  'paint'   : 5969.123,
  'ajaxinit': 1507.067
});

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

API ประสิทธิภาพคืออะไร

Performance API คือชุดของ API ที่ใช้ในการวัด:

ในอดีต นักพัฒนาซอฟต์แวร์ต้องใช้ฟังก์ชัน Date() เพื่อบันทึกเวลาที่ผ่านไป เช่น

const startTime = new Date();
doSomething();
const elapsedTime = new Date() - startTime;
console.log(`doSomething() took ${ elapsedTime }ms`);

แต่ Performance API คือ:

ความละเอียดที่สูงขึ้น ต่างจาก Date() ตรงที่บันทึกการกำหนดเวลาเป็นเศษส่วนของมิลลิวินาที
น่าเชื่อถือยิ่งกว่า. Date() ใช้เวลาของระบบดังนั้นการกำหนดเวลาอาจไม่ถูกต้องเมื่อระบบปฏิบัติการซิงโครไนซ์นาฬิกา

API มีอยู่ใน JavaScript ฝั่งไคลเอ็นต์ในเบราว์เซอร์รุ่นใหม่ส่วนใหญ่ และสามารถตรวจพบได้ด้วย:

if ('performance' in window) {
  // use Performance APIs
}

ทรัพยากรและเวลาของผู้ใช้ยังมีอยู่ในฝั่งไคลเอ็นต์ Web Workers สิ่งเหล่านี้เป็นวิธีเรียกใช้สคริปต์ที่ทำงานเป็นเวลานานหรือมีราคาแพงในการคำนวณในพื้นหลัง ซึ่งไม่รบกวนเธรดการประมวลผลหลักของเบราว์เซอร์

API การกำหนดเวลาของผู้ใช้ยังมีให้บริการในฝั่งเซิร์ฟเวอร์ด้วย:

แอปพลิเคชัน "Node.js" พร้อมโมดูล performance_hook และ
แอปพลิเคชัน "Deno" ทำงานด้วยตัวเลือก --allow-hrtime

Performance API และเอกสารประกอบอาจเข้าใจยากเล็กน้อยส่วนหนึ่งเนื่องจากมีการพัฒนา ฉันหวังว่าข้อมูลและตัวอย่างในบทความนี้จะช่วยแสดงให้เห็นถึงศักยภาพของมัน

คุณสมบัติการกำหนดเวลาโหลด

หัวข้อด้านล่างจะอธิบาย:

การกำหนดเวลาการนำทางหน้า ซึ่งส่งคืนวัตถุ PerformanceNavigationTiming และ
การกำหนดเวลาทรัพยากร ซึ่งส่งคืนวัตถุ PerformanceResourceTiming

วัตถุทั้งสองมีคุณสมบัติการระบุดังต่อไปนี้:

ชื่อ — URL ทรัพยากร
entryType — ประเภทประสิทธิภาพ ("navigation" สำหรับเพจ, "resource" สำหรับเนื้อหาของเพจ)
initiatorType — ทรัพยากรที่เริ่มต้นรายการประสิทธิภาพ ("navigation" สำหรับเพจ)
serverTiming — อาร์เรย์ของออบเจ็กต์ PerformanceServerTiming ที่มีเมตริก name, description และ duration ที่เขียนโดยเซิร์ฟเวอร์ไปยังส่วนหัว HTTP Server-Timing

วัตถุทั้งสองมีคุณสมบัติการกำหนดเวลาดังต่อไปนี้ซึ่งแสดงไว้ที่นี่ตามลำดับเวลาที่คุณคาดว่าจะเกิดขึ้น การประทับเวลามีหน่วยเป็นมิลลิวินาทีซึ่งสัมพันธ์กับการเริ่มต้นโหลดหน้าเว็บ:

startTime — การประทับเวลาเมื่อเริ่มต้นการดึงข้อมูล (0 สำหรับเพจเนื่องจากเป็นเนื้อหาแรกที่โหลด)
nextHopProtocol — โปรโตคอลเครือข่ายที่ใช้
workerStart — การประทับเวลาก่อนเริ่ม Progressive Web App (PWA) Service Worker (0 หากคำขอไม่ถูกขัดขวางโดย Service Worker)
redirectStart — การประทับเวลาของการดึงข้อมูลที่เริ่มต้นการเปลี่ยนเส้นทาง
redirectEnd — การประทับเวลาหลังจากได้รับไบต์สุดท้ายของการตอบกลับการเปลี่ยนเส้นทางครั้งล่าสุด
fetchStart — การประทับเวลาก่อนการดึงทรัพยากร
domainLookupStart — การประทับเวลาก่อนการค้นหา DNS
domainLookupEnd — การประทับเวลาหลังการค้นหา DNS
connectStart — การประทับเวลาก่อนที่เบราว์เซอร์จะสร้างการเชื่อมต่อเซิร์ฟเวอร์
connectEnd — การประทับเวลาหลังจากสร้างการเชื่อมต่อเซิร์ฟเวอร์
secureConnectionStart — การประทับเวลาก่อนที่เบราว์เซอร์จะเริ่มกระบวนการจับมือ SSL
requestStart — การประทับเวลาก่อนที่เบราว์เซอร์จะร้องขอทรัพยากร
responseStart — การประทับเวลาเมื่อเบราว์เซอร์ได้รับข้อมูลไบต์แรก
responseEnd — การประทับเวลาหลังจากได้รับไบต์สุดท้ายหรือปิดการเชื่อมต่อ
ระยะเวลา — ความแตกต่างระหว่าง เวลาเริ่มต้น และ การตอบกลับ

วัตถุทั้งสองมีคุณสมบัติขนาดการดาวน์โหลดต่อไปนี้:

transferSize — ขนาดทรัพยากรเป็นไบต์ (octets) รวมถึงส่วนหัวและเนื้อหาที่บีบอัด
encodedBodySize — เนื้อหาเพย์โหลดของทรัพยากรเป็นไบต์ (ออคเต็ต) ก่อนถอดรหัส/ไม่บีบอัด
decodedBodySize — เนื้อความของเพย์โหลดของทรัพยากรเป็นไบต์ (ออคเต็ต) หลังจากการถอดรหัส/ไม่บีบอัด

ออบเจ็กต์หน้า PerformanceNavigationTiming ให้การวัดเพิ่มเติมเกี่ยวกับการโหลดและเหตุการณ์ DOM แม้ว่าสิ่งเหล่านี้จะไม่รองรับใน Safari:

redirectCount — จำนวนการเปลี่ยนเส้นทาง
unloadEventStart — การประทับเวลาก่อนเหตุการณ์ unload ของเอกสารก่อนหน้า (ศูนย์หากไม่มีเอกสารก่อนหน้า)
unloadEventEnd — การประทับเวลาหลังเหตุการณ์ unload ของเอกสารก่อนหน้า (ศูนย์หากไม่มีเอกสารก่อนหน้า)
domInteractive — การประทับเวลาก่อนที่เบราว์เซอร์จะตั้งค่าความพร้อมของเอกสารเป็น แบบโต้ตอบ เมื่อการแยกวิเคราะห์ HTML และการสร้าง DOM เสร็จสมบูรณ์
domContentLoadedEventStart — การประทับเวลาก่อนที่เหตุการณ์ DOMContentLoaded ของเอกสารจะเริ่มทำงาน
domContentLoadedEventEnd — การประทับเวลาหลังจากเหตุการณ์ DOMContentLoaded ของเอกสารเสร็จสิ้น
domComplete — การประทับเวลาก่อนที่เบราว์เซอร์จะตั้งค่าความพร้อมของเอกสารเป็น เสร็จสมบูรณ์ เมื่อการสร้าง DOM และ DOMContentLoaded เหตุการณ์เสร็จสมบูรณ์
loadEventStart — การประทับเวลาก่อนที่เหตุการณ์หน้า load จะเริ่มทำงาน
loadEventEnd — การประทับเวลาหลังหน้า load เหตุการณ์และเนื้อหาทั้งหมดพร้อมใช้งาน

กำหนดเวลาการนำทาง

Navigation Timing API เทียบเวลาสำหรับการยกเลิกการโหลดหน้าก่อนหน้า การเปลี่ยนเส้นทาง การค้นหา DNS การโหลดหน้า ขนาดไฟล์ กิจกรรมการโหลด และอื่นๆ ข้อมูลคงเป็นเรื่องยากที่จะระบุได้อย่างน่าเชื่อถือด้วยวิธีอื่น

การกำหนดเวลาการนำทางพร้อมใช้งานสำหรับหน้าต่าง JavaScript ฝั่งไคลเอ็นต์และฟังก์ชัน Web Worker ส่งประเภท "navigation" ไปที่ performance.getEntriesByType():

const pageTiming = performance.getEntriesByType('navigation');

หรือ URL ของเพจไปที่ performance.getEntriesByName():

const pageTiming = performance.getEntriesByName(window.location);

ตัวเลือกใดตัวเลือกหนึ่งจะส่งคืนอาร์เรย์ที่มีองค์ประกอบเดียวที่มีวัตถุ PerformanceNavigationTiming (ดูที่ คุณสมบัติเวลาในการโหลด) มีคุณสมบัติอ่านอย่างเดียวเกี่ยวกับเวลาในการโหลดทรัพยากร เช่น

{
  connectEnd: 139
  connectStart: 103
  decodedBodySize: 72325
  domComplete: 771
  domContentLoadedEventEnd: 634
  domContentLoadedEventStart: 630
  domInteractive: 421
  domainLookupEnd: 103
  domainLookupStart: 87
  duration: 771
  encodedBodySize: 13091
  entryType: "navigation"
  fetchStart: 0
  initiatorType: "navigation"
  loadEventEnd: 771
  loadEventStart: 771
  name: "https://domain.com/"
  nextHopProtocol: "h2"
  redirectCount: 0
  redirectEnd: 0
  redirectStart: 0
  requestStart: 140
  responseEnd: 154
  responseStart: 154
  secureConnectionStart: 115
  serverTiming: Array []
  startTime: 0
  transferSize: 13735
  type: "reload"
  unloadEventEnd: 171
  unloadEventStart: 169
  workerStart: 0
}

คุณสามารถใช้มันเพื่อคำนวณเมตริกการโหลดหน้าเว็บที่เป็นประโยชน์จากผู้ใช้ เช่น

if ('performance' in window) {
const
    pageTiming      = performance.getEntriesByName(window.location)[0],
    pageDownload    = pageTiming.duration,
    pageDomReady    = pageTiming.domContentLoadedEventStart,
    pageFullyReady  = pageTiming.loadEventEnd;
}

ระยะเวลาของทรัพยากร

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

การกำหนดเวลาทรัพยากรพร้อมใช้งานสำหรับหน้าต่าง JavaScript ฝั่งไคลเอ็นต์และฟังก์ชัน Web Worker ส่งประเภท "resource" ไปที่ performance.getEntriesByType() เพื่อส่งคืนอาร์เรย์ แต่ละองค์ประกอบเป็นออบเจ็กต์ PerformanceResourceTiming (ดู คุณสมบัติเวลาในการโหลด) ซึ่งแสดงถึงทรัพยากรที่โหลดโดยเพจ (แต่ไม่ใช่ตัวเพจเอง):

const resourceTiming = performance.getEntriesByType('resource');

ผลลัพธ์ตัวอย่าง:

[
  {
    name: "https://domain.com/script1.js",
    entryType: "resource",
    initiatorType: "script",
    fetchStart: 102,
    duration: 51
    ...etc...
  },
  {
    name: "https://domain.com/style1.css",
    entryType: "resource",
    initiatorType: "link",
    fetchStart: 323,
    duration: 54
    ...etc...
  },
  {
    name: "https://domain.com/service/",
    entryType: "resource",
    initiatorType: "xmlhttprequest",
    fetchStart: 598,
    duration: 30
    ...etc...
  },
  ...etc...
]

คุณยังสามารถดึงข้อมูลทรัพยากรได้โดยส่ง URL ที่แน่นอน ไปที่ performance.getEntriesByName():

const resourceTiming = performance.getEntriesByName('https://domain.com/style1.css');

สิ่งนี้จะส่งคืนอาร์เรย์ที่มีองค์ประกอบเดียว:

[
  {
    name: "https://domain.com/style1.css",
    entryType: "resource",
    initiatorType: "link",
    fetchStart: 323,
    duration: 54
    ...etc...
  }
]

คุณสามารถใช้สิ่งนี้เพื่อรายงานเพื่อคำนวณเวลาในการโหลดและขนาดของทรัพยากร JavaScript แต่ละรายการ รวมถึงผลรวมทั้งหมด:

if ('performance' in window) {
  // total size of all JavaScript files
  let scriptTotalSize = 0;
  // array of script names, load times, and uncompressed file sizes
  const script = performance.getEntriesByType('resource')
    .filter( r => r.initiatorType === 'script')
    .map( r => {
  let size = r.decodedBodySize;
    scriptTotalSize += size;
  return {
    name: r.name,
    load: r.duration,
    size
   };
  });
}

Performance API บันทึกเมตริกทรัพยากรอย่างน้อย 150 รายการ แต่คุณสามารถกำหนดตัวเลขเฉพาะด้วย performance.setResourceTimingBufferSize(N) เช่น

// record metrics for 300 page resources
performance.setResourceTimingBufferSize(300);

คุณสามารถล้างเมตริกที่มีอยู่ได้ด้วย performance.clearResourceTimings() วิธีนี้อาจใช้ได้จริงเมื่อคุณไม่ต้องการข้อมูลทรัพยากรของเพจอีกต่อไป แต่ต้องการบันทึกคำขอ Ajax:

// clear timings
performance.clearResourceTimings();
// API Fetch request
const res = await Fetch('/service1/');
// one resource returned
const resourceTiming = performance.getEntriesByType('resource');

กำหนดเวลาการทาสี

Paint Timing API พร้อมใช้งานสำหรับฟังก์ชันหน้าต่าง JavaScript ฝั่งไคลเอ็นต์ และบันทึกการดำเนินการเรนเดอร์สองครั้งที่สังเกตได้ระหว่างการสร้างเพจ

ส่งประเภท "paint" ไปที่ performance.getEntriesByType() เพื่อส่งคืนอาร์เรย์ที่มีวัตถุ PerformancePaintTiming สองรายการ:

const paintTiming = performance.getEntriesByType('paint');

ผลลัพธ์:

[
  {
    "name": "first-paint",
    "entryType": "paint",
    "startTime": 242,
    "duration": 0
  },
  {
    "name": "first-contentful-paint",
    "entryType": "paint",
    "startTime": 243,
    "duration": 0
  }
]

ที่ไหน:

สีแรก: เบราว์เซอร์ได้ทาสีพิกเซลแรกบนหน้าแล้ว และ
สีเนื้อหาแรก: เบราว์เซอร์ได้ทาสีรายการแรกของเนื้อหา DOM เช่น ข้อความหรือรูปภาพ

โปรดทราบว่า "duration" จะเป็นศูนย์เสมอ

ประสิทธิภาพตอนนี้()

performance.now() ส่งคืนการประทับเวลาที่มีความละเอียดสูงเป็นเศษส่วนของมิลลิวินาทีนับตั้งแต่เริ่มต้นอายุการใช้งานของกระบวนการ วิธีการนี้มีอยู่ใน JavaScript ฝั่งไคลเอ็นต์, Web Workers, Node.js และ Deno

ใน JavaScript ฝั่งไคลเอ็นต์ ตัวจับเวลา performance.now() เริ่มต้นที่ศูนย์เมื่อกระบวนการที่รับผิดชอบในการสร้าง document เริ่มต้นขึ้น ตัวจับเวลา Web Worker, Node.js และ Deno เริ่มต้นเมื่อกระบวนการสคริปต์เริ่มดำเนินการ

โปรดทราบว่าสคริปต์ Node.js ต้องโหลด "โมดูล Performance hooks (perf_hooks)" เพื่อใช้ Performance API ใน CommonJS:

const { performance } = require('perf_hooks');

หรือเป็นโมดูล ES:

import { performance } from 'perf_hooks';

คุณสามารถใช้ performance.now() กับสคริปต์เวลาได้ เช่น

const doSomethingStart = performance.now();
doSomething();
const doSomethingElapsed = performance.now() - doSomethingStart;

คุณสมบัติ timeOrigin ที่ไม่เป็นไปตามมาตรฐานเพิ่มเติมจะส่งคืนการประทับเวลาที่กระบวนการปัจจุบันเริ่มต้นขึ้น สิ่งนี้วัดตามเวลา Unix ตั้งแต่วันที่ 1 มกราคม 1970 และมีให้บริการใน Node.js และ JavaScript ของเบราว์เซอร์ (ไม่ใช่ IE หรือ Safari):

ระยะเวลาของผู้ใช้

performance.now() จะยุ่งยากเมื่อทำการวัดจังหวะมากกว่าสองสามครั้ง วิธีการ performance.mark() เพิ่มวัตถุ PerformanceMark object ที่มีชื่อพร้อมการประทับเวลาลงในบัฟเฟอร์ประสิทธิภาพ มีอยู่ใน JavaScript ฝั่งไคลเอ็นต์, Web Workers, Node.js และ Deno:

// Node.js scripts require:
// CommonJS: const { performance } = require('perf_hooks');
// or ESM  : import { performance } from 'perf_hooks';
performance.mark('script:start');
performance.mark('doSomething1:start');
doSomething1();
performance.mark('doSomething1:end');
performance.mark('doSomething2:start');
doSomething2();
performance.mark('doSomething2:end');
performance.mark('script:end');

ส่งประเภท "mark" ไปที่ performance.getEntriesByType() เพื่อส่งคืนอาร์เรย์ของเครื่องหมาย:

const userTiming = performance.getEntriesByType('mark');

อาร์เรย์ผลลัพธ์ประกอบด้วยวัตถุที่มีคุณสมบัติ name และ startTime:

[
  {
    detail: null
    duration: 0
    entryType: "mark"
    name: "script:start"
    startTime: 100
  },
  {
    detail: null
    duration: 0
    entryType: "mark"
    name: "doSomething1:start"
    startTime: 100
  },
  {
    detail: null
    duration: 0
    entryType: "mark"
    name: "doSomething1:end"
    startTime: 123
  },
  ...etc...
]

วิธี performance.measure() คำนวณเวลาที่ผ่านไประหว่างสองเครื่องหมาย โดยส่งผ่านชื่อหน่วยวัด ชื่อเครื่องหมายเริ่มต้น (หรือค่าเท็จเพื่อใช้เวลาโหลดเพจ/สคริปต์) และชื่อเครื่องหมายสิ้นสุด (หรือค่าเท็จเพื่อใช้เวลาปัจจุบัน) เช่น

performance.measure('doSomething1', 'doSomething1:start', 'doSomething1:end');
performance.measure('script', null, 'doSomething1:end');

สิ่งนี้จะเพิ่มออบเจ็กต์ PerformanceMeasure ให้กับบัฟเฟอร์ประสิทธิภาพด้วยระยะเวลาที่คำนวณได้ ส่งประเภท "measure" ไปที่ performance.getEntriesByType() เพื่อส่งคืนอาร์เรย์ของการวัด:

const userTiming = performance.getEntriesByType('measure');

อาร์เรย์ผลลัพธ์:

[
  {
    detail: null
    duration: 211
    entryType: "measure"
    name: "doSomething1"
    startTime: 100
  },
  {
    detail: null
    duration: 551
    entryType: "measure"
    name: "script"
    startTime: 100
  }
]

คุณยังสามารถดึงข้อมูลเครื่องหมายและวัดรายการตามชื่อโดยใช้ performance.getEntriesByName():

performance.getEntriesByName('doSomething1');

วิธีการที่เป็นประโยชน์อื่นๆ ได้แก่:

performance.getEntries() — ส่งคืนอาร์เรย์ของรายการประสิทธิภาพทั้งหมด รวมถึงเครื่องหมาย การวัด กำหนดเวลาการนำทาง กำหนดเวลาทรัพยากร และกำหนดเวลาทาสี
performance.clearMarks( [name] ) — ล้างเครื่องหมายที่มีชื่อ หรือละเว้นชื่อเพื่อล้างเครื่องหมายทั้งหมด
performance.clearMeasures( [name] ) — ล้างหน่วยวัดที่มีชื่อ หรือละเว้นชื่อเพื่อล้างหน่วยวัดทั้งหมด

การตรวจสอบส่วนหน้า

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

การแก้ไขจุดบกพร่องอย่างมีความสุขสำหรับทีมส่วนหน้าสมัยใหม่ — เริ่มตรวจสอบแอปพลิเคชันเว็บของคุณได้ฟรี

ผู้สังเกตการณ์ประสิทธิภาพ

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

ขั้นแรก ให้กำหนดฟังก์ชันผู้สังเกตการณ์ ซึ่งอาจบันทึกเหตุการณ์หรือโพสต์ข้อมูลไปยังจุดสิ้นสุดของสถิติ:

function performanceObserver(list, observer) {
  list.getEntries().forEach(entry => {
  console.log('---');
    console.log(`name    : ${ entry.name }`);
    console.log(`type    : ${ entry.type }`);
    console.log(`start   : ${ entry.startTime }`);
    console.log(`duration: ${ entry.duration }`);
  });
}

ฟังก์ชั่นมีพารามิเตอร์ดังต่อไปนี้:

ส่งฟังก์ชันนี้เมื่อสร้างอ็อบเจ็กต์ PerformanceObserver ใหม่ จากนั้นเรียกใช้เมธอด observe() ด้วย entryTypes เพื่อสังเกต:

การเพิ่มเครื่องหมายหรือการวัดใหม่จะเรียกใช้ฟังก์ชัน performanceObserver() และแสดงรายละเอียดเกี่ยวกับการวัดนั้น

ตัวเลือกประสิทธิภาพในอนาคต

เบราว์เซอร์ที่ใช้ Chrome นำเสนอคุณสมบัติ performance.memory_ คุณสมบัติ ที่ไม่ได้มาตรฐานซึ่งส่งคืนออบเจ็กต์ MemoryInfo เดียว:

ที่ไหน:

jsHeapSizeLimit — ขนาดสูงสุดของฮีปในหน่วยไบต์
totalJSHeapSize — ขนาดฮีปที่จัดสรรทั้งหมดเป็นไบต์ และ
usedJSHeapSize — ส่วนที่ใช้งานอยู่ในปัจจุบันของฮีป JS ในหน่วยไบต์

Frame timing API ไม่ได้ถูกนำมาใช้ในเบราว์เซอร์ใดๆ แต่จะบันทึกจำนวนการทำงานของเบราว์เซอร์ในการวนซ้ำเหตุการณ์เดียว ซึ่งรวมถึงการประมวลผลเหตุการณ์ DOM, ภาพเคลื่อนไหว CSS, การเรนเดอร์, การเลื่อน, การปรับขนาด ฯลฯ API ควรสามารถรายงานการกระตุกที่อาจเกิดขึ้นได้เมื่อเฟรมใช้เวลานานกว่า 16.7 มิลลิวินาที ดังนั้นการอัปเดตจึงลดลงต่ำกว่า 60 เฟรมต่อวินาที

สุดท้ายนี้ Self-Profiling API คือ ฟีเจอร์ทดลองที่อยู่ระหว่างการพัฒนาใน Chrome เมื่อพิจารณาจากอัตราตัวอย่าง API จะช่วยค้นหาโค้ดที่ช้าหรือไม่จำเป็นในลักษณะเดียวกันกับ DevTools รายงานประสิทธิภาพ:

// define a new profiler with 10ms sample rate
const profile = await performance.profile({ sampleInterval: 10 });
// run code
doSomething();
// stop the profiler and capture a trace
const trace = await profile.stop();

ระบุปัญหาด้านประสิทธิภาพ

เป็นเรื่องง่ายที่จะสันนิษฐานว่าแอปพลิเคชันของคุณทำงานได้ดีเมื่อคุณพัฒนาบนพีซีเครื่องใหม่ที่เชื่อมต่อกับเครือข่ายที่รวดเร็ว API ประสิทธิภาพเสนอวิธีในการพิสูจน์ หรือปฏิเสธ — ปัญหาด้านประสิทธิภาพโดยการรวบรวมตัวชี้วัดผู้ใช้จริงตามอุปกรณ์ การเชื่อมต่อ และตำแหน่งของพวกเขา

เผยแพร่ครั้งแรกที่ https://blog.asayer.io เมื่อวันที่ 12 พฤษภาคม 2021

วิธีประเมินความเร็วไซต์ด้วย Performance API

เรียนรู้วิธีใช้ API นี้เพื่อวัดประสิทธิภาพของแอปของคุณ

API ประสิทธิภาพคืออะไร

คุณสมบัติการกำหนดเวลาโหลด

กำหนดเวลาการนำทาง

ระยะเวลาของทรัพยากร

กำหนดเวลาการทาสี

ประสิทธิภาพตอนนี้()

ระยะเวลาของผู้ใช้

การตรวจสอบส่วนหน้า

ผู้สังเกตการณ์ประสิทธิภาพ

ตัวเลือกประสิทธิภาพในอนาคต

ระบุปัญหาด้านประสิทธิภาพ

คำถามในหัวข้อ