Giới thiệu React Profiler

Thu thập

Trên bộ DevTools sẽ có thêm tab Profiler

React-dom 16.5+ hỗ trợ thu thập dữ liệu khi chạy DEV, để dùng trong production sử dụng react-dom/profiling, Đọc thêm cách sử dụng ở đây https://fb.me/react-profiling

Trên màn hình vừa mở, click nút record để bắt đầu thu thập dữ liệu

record để bắt đầu thu thập dữ liệu

Lúc này, khi một component react chạy render, thông tin sẽ được thu thập. Sử dụng app như bình thường, khi không muốn thu thập dữ liệu nữa, click nút stop

stop record

Đọc hiểu kết quả

Chúng ta quan tâm đến quá trình commit React component - là khi component được insert, update, hoặc remove khỏi DOM.

Ở trên cùng, bên phải, để ý cái bar chart

Mỗi một cột trong cái chart này đại diện cho một commit, commit đang chọn sẽ được tô đen. Độ cao của cột này tương ứng cho thời gian cần để render.

Lọc commit

Thời gian thu thập dữ liệu càng lâu, ứng dụng render càng nhiều lần, sớm muộn số lượng dữ liệu quá lớn như vậy chúng ta cần phải lọc để xem nhanh kết quả cần tìm. Ví dụ ẩn đi toàn bộ commit có thời gian bé hơn giá trị ms nào đó

Flame chart

Flame chart đại diện cho trạng thái của ứng trong một thời điểm commit cụ thể. Mỗi cột đại diện cho một component, kích thước và màu sắc thể hiện thời gian render component và các component con bên trong. Màu xanh thì tốn ít thời gian, màu vàng là nhiều thời gian và màu xám là không render

Flame chart

Ví dụ trên, commit trên tiêu tốn hết 18.4ms để render. Router tốn nhiều nhất thời gian để render: 18.4ms. Phần lớn là do phải render tất cả các component con, Nav (8.4ms), Route (7.9ms)

Click vào từng cột để hiển thị chi tiết các component con

Click vào từng cột để hiển thị chi tiết các component con

Bên cột phải chúng ta có các thông tin như props, state, tổng số lần render.

Trong một số trường hợp, chọn vào component, chuyển qua lại giữa commit, sẽ có thông tin bổ sung tại sao component được render lại

Ranked chart

Ranked chart đại diện cho 1 commit. Mỗi cột trong chart là một component, các cột này được sếp theo thứ tự component nào tốn nhiều thời gian render nhất sẽ lên trên.

Component Chart

Để xem đã bao nhiêu lần 1 component được render. Mỗi cột là mỗi lần component được render.

Double-click vào component này hoặc chọn component và chọn nút blue bar phải góc phải trên. Để xem thêm các thông tin khác

Tương tác

Hiện tại đây đang trong quá trình thử nghiệm cho tính năng này, tracking nguyên nhân gây ra update.

Mỗi dòng là một tương tác đã được track. Nút màu xanh bên cạnh là commit liên quan tới tương tác này.

Kiểm tra một tương tác trong commit cụ thể từ flame chartranked chart

Source code ví dụ

Demo

Link bài gốc