Bộ đếm FPS
Dùng bộ đếm FPS này để đo trình duyệt đang dựng trang hiện tại mượt tới đâu. Công cụ lấy mẫu khung hình bằng requestAnimationFrame, báo FPS hiện tại, trung bình, thấp nhất và cao nhất, đồng thời có thể vẽ một biểu đồ ngắn để bạn thấy những cú tụt do tab nặng, hiệu ứng động, tiện ích mở rộng, throttling hoặc thiết lập màn hình gây ra.
Cách đo FPS của trình duyệt
-
1
Chọn thời lượng lấy mẫu
Năm giây là mức mặc định hợp lý. Hãy lấy mẫu dài hơn khi bạn muốn bắt các pha giật lặp lại hoặc thay đổi tải nền.
-
2
Đặt mức làm mượt và ngưỡng cảnh báo
Cửa sổ làm mượt lấy trung bình các khung hình gần nhất, còn ngưỡng đánh dấu mức FPS mà bạn coi là chấp nhận được trên thiết bị đang thử.
-
3
Chạy bộ đếm và đọc độ chênh lệch
FPS hiện tại cho biết tốc độ dựng hình gần đây. Giá trị trung bình, thấp nhất và cao nhất cho thấy phiên đo có mượt đều hay đã tụt rõ rệt.
Bộ đếm FPS đo cái gì
Công cụ này đo nhịp dựng hình của trình duyệt, không phải hiệu năng benchmark của card đồ họa. Mỗi lần trình duyệt sẵn sàng vẽ khung hình tiếp theo, requestAnimationFrame sẽ gọi bộ lấy mẫu. Khoảng thời gian giữa hai lần gọi cho ra tốc độ khung hình tức thời:
FPS = 1000 / frame_time_in_ms
FPS hiện tại hiển thị trên màn hình là trung bình trượt trong cửa sổ làm mượt. Cửa sổ 60 khung hình hợp với màn hình 60 Hz thông thường vì nó dịu bớt các đỉnh nhọn một khung mà vẫn không che giấu những cú tụt kéo dài. Cửa sổ nhỏ hơn phản ứng nhanh hơn, cửa sổ lớn hơn trông ổn định hơn.
Ví dụ cụ thể
Giả sử một lần lấy mẫu năm giây ghi nhận các khoảng cách khung hình đơn giản hóa sau:
| Khoảng cách giữa hai khung | FPS tức thời | Điều đó cho thấy |
|---|---|---|
| 16,7 ms | 59,9 FPS | Dựng hình điển hình ở 60 Hz |
| 8,3 ms | 120,5 FPS | Dựng hình điển hình ở 120 Hz |
| 25,0 ms | 40,0 FPS | Chậm thấy rõ trên nhiều màn hình |
| 33,3 ms | 30,0 FPS | Tải nặng hoặc bị throttling |
Nếu ngưỡng cảnh báo của bạn là 50 FPS mà trung bình trượt đo được dừng ở 47 FPS thì kết quả vẫn dưới mục tiêu, dù có vài khung hình nhanh hơn. Nếu nó dừng gần 60 FPS và thỉnh thoảng tụt xuống 45 FPS thì mức trung bình vẫn tốt, nhưng giá trị thấp nhất cho thấy đã có những pha giật đáng tìm hiểu.
Đọc kết quả
| Kiểu kết quả | Ý nghĩa có thể | Việc cần kiểm tra tiếp |
|---|---|---|
| Trung bình sát tần số quét, hiếm khi tụt | Việc dựng hình đang tốt | Chỉ so sánh với trình duyệt khác khi cần |
| Trung bình tốt, giá trị thấp nhất kém xa | Giật theo chu kỳ | Đóng bớt tab nặng hoặc soi lại hiệu ứng động |
| Trung bình dưới ngưỡng | Tải dựng hình kéo dài | Kiểm tra mức dùng CPU, tiện ích mở rộng và script của trang |
| FPS bị chặn quanh 30 | Chế độ tiết kiệm điện hoặc throttling | Kiểm tra chế độ pin và thiết lập màn hình |
FPS trong trình duyệt chịu ảnh hưởng của tần số quét màn hình, bộ hợp thành của hệ điều hành, chế độ pin, throttling do nhiệt, các tab đang mở và chính trang web đó. Hãy chạy thử trước trong một tab yên tĩnh, rồi lặp lại khi trang hoặc ứng dụng bạn đang chẩn đoán hoạt động.
Câu hỏi thường gặp
Không. Bộ đếm này đo tần suất trình duyệt nhận các lệnh gọi lại requestAnimationFrame. Nó hữu ích để kiểm tra hiệu ứng động web và độ mượt của trang, nhưng không phải một bài benchmark GPU đầy đủ cho game chạy trực tiếp trên máy.
Phần lớn trình duyệt đồng bộ khung hình động với tần số quét của màn hình. Màn hình 60 Hz thường báo gần 60 FPS, còn màn hình 120 Hz hoặc 144 Hz có thể báo cao hơn khi trình duyệt và hệ điều hành cho phép.
Dùng 50 FPS cho một lần kiểm tra độ mượt thông thường ở 60 Hz. Với màn hình tần số quét cao, hãy đặt ngưỡng gần với trải nghiệm bạn mong đợi, chẳng hạn 90 FPS hoặc 120 FPS.
Không. Phép đo chạy ngay trong trình duyệt của bạn bằng các API đo thời gian cục bộ. Công cụ không gửi dữ liệu khung hình, ảnh chụp màn hình hay thông tin thiết bị tới bất kỳ API bên ngoài nào.
Công cụ liên quan
Trình tạo màu ngẫu nhiên
Tạo từ 1 đến 50 màu HEX ngẫu nhiên kèm mẫu màu để xem trước, sao chép và dùng trong CSS, kiểm thử hoặc khám phá bảng màu.
Trình tạo bảng màu
Tạo bảng màu đơn sắc, tương đồng, bổ túc, bộ ba hoặc bộ bốn từ màu HEX gốc và xuất các biến CSS sẵn sàng sao chép.
Trình chuyển đổi Binary sang Hex
Chuyển input binary thành giá trị hexadecimal chữ hoa đơn giản. Ký tự không phải 0 hoặc 1 bị bỏ qua và số 0 ở đầu không được giữ lại.
Trình tạo bảng màu ngẫu nhiên
Tạo bảng màu ngẫu nhiên từ 2 đến 15 mẫu màu, chọn phong cách rực rỡ, pastel, dịu hoặc tối, rồi sao chép mã HEX hoặc biến CSS.
Bộ chuyển đổi ASCII sang nhị phân
Chuyển bất kỳ chuỗi ASCII nào sang biểu diễn nhị phân. Mỗi ký tự thành tám bit, phân tách bằng khoảng trắng, sẵn để dán vào trace giao thức hoặc bài tập.
Bộ chuyển đổi ASCII sang Hex
Chuyển văn bản ASCII sang giá trị byte hệ thập lục phân. Đầu ra dùng hai chữ số hex cho mỗi ký tự, sẵn cho memory dump, packet trace hoặc bảng firmware.