Autodesk / Autodesk/react-base-table

Heavy Recalculate style stack in performance on scroll

Đang mở
#415 0 bình luận 1 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
TypeScript
Star
1.5k
Fork
170
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

We are using react-base-table in our tables, the scroll virtualised performance seems laggy.
The "Recalculate Style" stack in Chrome performance tab reaches 50ms+, for unknown reason.
Chrome also shows "Forced reflow" warning in console and in the Performance tab.
Using react/react-dom v18.
Any way to overcome/debug the issue?
Screenshot 2023-05-17 at 5 28 22 PM

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Không có tệp mã nguồn hoặc bài kiểm thử nào được nêu. Hãy bắt đầu bằng cách tái hiện thao tác cuộn một bảng lớn với React 18 và ghi lại Chrome Performance panel, sau đó truy vết các mục Recalculate Style và forced-reflow vào react-base-table. Công việc được xem là hoàn tất khi đã xác định được nguyên nhân và chứng minh rằng thao tác cuộn không còn phát sinh phần xử lý style 50ms+ đã được báo cáo.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react, typescript
Lĩnh vực
frontend, performance
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Cần làm rõ
Mức phù hợp với người mới
25/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.