day-21.md

title	author	date
Debugging vấn đề về performance với PerformanceObserver	Bần làm vườn	12-14-2022

(Disclaimer: Đây không phải là post khuyên bạn từ bỏ console.log đi và xài những công cụ debug advance hơn. In fact, với API này, console.log càng trở nên lợi hại)

Context: PerformanceObserver là một API trong nhóm gọi chung là Performance API. Nếu mọi người cảm thấy nó hơi xa lạ thì here's a tidbit: hàm performance.now() mà mọi người thường dùng để measure task run time là được gọi trên một cái global Performance object. Nếu chưa có dịp xem qua thì highly recommend mọi người dành một buổi để nghía qua hết docs của tụi này. Back to the topic. Các API khác trong nhóm này đóng vài trò record, measure và tạo ra performance events/metrics. Với PerformanceObserver, chúng ta sẽ được notify khi các performance events đó xảy ra. Ngoài việc có thể gửi các metrics đó đến logging service thì chúng ta còn có thể dùng nó để test rằng một interaction nào đó có đang trigger quá nhiều performance event (ví dụ như layout shift) ngoài mong muốn hay không.

Mechanism:

// Create new observer instance
const observer = new PerformanceObserver(callback)
// observe the type of performance metrics we care about
observer.observe(performanceEntryTypes)

Mình sẽ không đi sâu về cách sử dụng chi tiết. Các bạn có thể xem qua docs của PerformanceObserver để biết thêm.

Here's a use case example:

Test for layout shift

let shiftScore = 0;

new PerformanceObserver((entryList) => {
  // Loop through all the layout shift event
  for (const entry of entryList.getEntries()) {
    // Only count if the layout shift occur without immediate user action, the bad kind
    if (!entry.hadRecentInput) {
      // value for the layout entry is sort of like a point of how severe the shift is
      shiftScore += entry.value;
      // shiftScore will increase overtime
      console.log('Current shiftScore:', shiftScore, entry);
    }
 }}).observe({type: 'layout-shift', buffered: true});

Xong thì mọi người đi interact với chỗ mà mọi người đang nghi là tạo ra unnecessary layout shift and watch your console.

Extra note: Có một event type khá juicy là longtask, mình chưa có dịp xài, but you might find a need for it

Extra note 2: For a quick list of supported event (entry) type, run PerformanceObserver.supportedEntryTypes

Extra note 3: Có trong docs nhưng mà mình lôi luôn ra đây. This API can run in Web Worker. If you're gathering real time metrics, consider putting it in here.