Đo thời gian render bằng Chrome

Bài viết được sự cho phép của tác giả Lưu Bình An

Để thực hành bài này, bạn có thể sử dụng source code có sẵn này

Trên tab Performance của DevTools chúng ta có

  8 câu điều kiện khi render trong React
  Câu hỏi phỏng vấn mẹo về React: Component hay element được render trong browser?

https://github.com/nolanlawson/measure-style-and-layout

Đây là giá trị CPU đã tiêu tốn để render component, theo đơn vị là mili giây. Nó sẽ được thực hiện 4 bước

  • Thực thi javascript
  • Apply các format bằng CSS
  • Tính layout, trình duyệt tiếp tục tính toán để “đặt” các element trên màn hình ở chỗ nào
  • Render được thực hiện trên một thread riêng

Đa phần mọi người sẽ bỏ qua các bước 2, 3, 4 khi đo, chỉ tính toán thời gian thực thi javascript

Đo thời gian render bằng Chrome

Bước render rất khó có thể đo được chính xác, nó được thực hiện trên threat riêng và dùng GPU

Phần style và layout thì có thể đo chính xác hơn vì nó block lại main thread

Đo gì?

Chúng ta sẽ đánh dấu từ khi javascript bắt đầu chạy, đến hết phần render

Sử dụng requestAnimationFrame là chính, nó được gọi trước quá trình style và layout, nhưng thực tế trước Edge v18 và một số bản Safari thì không đúng, nên cũng có thể có chút sai xót

Đo thời gian render bằng Chrome

requestAnimationFrame(() => {
  setTimeout(() => {
    performance.mark('end')
  })
})

Phần code trong setTimeOut được gọi ngay sau bước paint

Đo thời gian render bằng Chrome

Đo thời gian render bằng Chrome

Một số vấn đề

  • setTimeOut đôi khi có sai lệch tầm 4ms trên một số trình duyệt
  • Nếu có một setTimeOut callback khác trong code, có thể không còn đúng
  • Sau này khi các trình duyệt đã hỗ trợ cách tốt hơn thì setTimeOut kiểu này là dư thừa

Accurately measuring layout on the web

Bài viết gốc được đăng tải tại vuilaptrinh.com

Có thể bạn quan tâm:

Xem thêm các việc làm Developer hấp dẫn tại TopDev