← Danh mục 100 · Kỹ Thuật Phần Mềm, Cloud & An Ninh Mạng · Hình tương tác #014

Bên Trong Trình Duyệt: Đường Ống Dựng Hình 60fps & JavaScript Event Loop

Ngân sách vàng 16.67 mili-giây của luồng chính (Main Thread) nơi JavaScript, hàng đợi Promise và bộ vẽ khung hình tranh giành từng tích tắc.

Hình 14 · sơ đồ 6 trạm & 8 điểm chọn Mạng Nút Quang Học Đa Tầng

Chọn kịch bản · kéo thanh · chạy mô phỏng · tháo rời
Số nhỏ trên trạm = thứ tự vận hành. Màu xám = tạm bỏ qua. Xem hình lớn ↗
4 chế độ đối chứng
Đường đi đang kích hoạt · theo số trạm
6 ms
Khoảng tối ưu: 2 đến 10 ms. Kéo ra ngoài ngưỡng để quan sát biến đổi.
15 task
Khoảng tối ưu: 5 đến 40 task. Kéo ra ngoài ngưỡng để quan sát biến đổi.
90 %
Khoảng tối ưu: 80 đến 95 %. Kéo ra ngoài ngưỡng để quan sát biến đổi.
Tốc độ khung hình thực tế
60fps
Độ trễ tương tác INP
45ms
Tỷ lệ khung hình bị rớt (Jank)
0,5%
Bấm vào trạm trên hình hoặc nút số bên dưới để đọc vai trò từng bộ phận.