setTimeOut có hiệu suất 233 fps trong khi requestAnimationTỷ lệ khung hình 61

Question

Tôi đã thực hiện một số thử nghiệm trên Chrome và requestAnimationFrame mang lại 61 khung hình/giây trong khi setTimeOut(callback, 0), mang lại 233 khung hình/giây.
Nếu bạn muốn có nhiều hơn 61 khung hình/giây (tôi không chắc chắn điều gì cho) nhưng sẽ không tốt hơn khi kết xuất với setTimeOut và chỉ cần sử dụng requestAnimationFrame để phát hiện khi cửa sổ bị mất tiêu điểm và sau đó dừng hết thời gian chờ trọng tâm trở lại?

Và một câu hỏi phụ: có cách nào khác để phát hiện khi cửa sổ bị mất tiêu điểm khác với requestAnimationFrame không gọi hàm gọi lại không?

Answer 1

khung Yêu cầu hình ảnh động là đồng bộ với màn hình của bạn refresh rate (không có sử dụng để animate nhiều khung hơn bạn đang thực sự hiển thị trên màn hình)

Đây là một tài liệu tham khảo từ các tài liệu mozilla: https://developer.mozilla.org/en/DOM/Animations_using_MozBeforePaint

Điều khiển tốc độ khung hình

MozBeforePaint sẽ không cháy nhiều hơn số lần cố định trên mỗi giây, ví dụ: 50 hoặc 60. Đây là chủ ý, bởi vì hệ điều hành và phần cứng hiện đại sẽ không cho phép trình duyệt hiển thị nhiều khung hơn . Hạn chế tốc độ khung hình tránh làm việc lãng phí, do đó tiết kiệm mức sử dụng và sức mạnh của CPU và cải thiện hiệu suất hệ thống tổng thể.