⭐ 0
🔍
văn bản Hình ảnh PDF & Tài liệu Âm thanh Âm nhạc Điện tử Thời gian Tiện ích Trình xác nhận Huyền học Trò chơi

Trình phân tích Waterfall tệp HAR

Tải lên tệp .har xuất từ DevTools của trình duyệt để xem waterfall yêu cầu thực tế dựng từ dữ liệu thời gian của từng yêu cầu, kèm kiểm tra thiếu header cache, phản hồi không nén và script chặn render.

🔒 Được xử lý hoàn toàn trong trình duyệt của bạn — không có nội dung nào bạn nhập ở đây được tải lên.

Kéo & thả tệp tại đây hoặc nhấp để duyệt

Xuất tệp HAR từ DevTools → tab Network của trình duyệt (nhấp chuột phải vào danh sách yêu cầu → "Save all as HAR with content") và thả vào đây. Mọi thứ được phân tích và dựng cục bộ – tệp không bao giờ được tải lên đâu cả.

Đang xử lý... 0%
Đang phân tích tệp HAR
Đang dựng waterfall
Đang phân tích các yêu cầu
Hoàn tất

Kết quả

Tệp HAR (HTTP Archive) là bản xuất JSON chứa mọi thứ mà bảng Network của DevTools trình duyệt ghi lại trong quá trình tải trang: mọi header của yêu cầu và phản hồi, kích thước chính xác và kiểu MIME của từng body phản hồi, cùng phân tích chi tiết thời gian cho từng yêu cầu. Bạn có thể tạo tệp này từ Chrome, Firefox, Edge hoặc Safari bằng cách mở DevTools, tải lại trang trên tab Network, sau đó nhấp chuột phải vào danh sách yêu cầu và chọn "Save all as HAR with content". Công cụ này đọc trực tiếp tệp xuất ra – không có gì được tải lại hay gửi yêu cầu mới.

Biểu đồ waterfall được dựng hoàn toàn từ dữ liệu có sẵn trong tệp: đối tượng timings của mỗi mục nhập phân tách một yêu cầu thành các pha blocked, tra cứu DNS, connect, thương lượng SSL/TLS, send, wait (thời gian đến byte đầu tiên) và receive, và mỗi pha được vẽ thành một đoạn màu riêng. Theo đặc tả HAR, thời gian SSL cũng được bao gồm trong connect, vì vậy nó được trừ ngược trở ra trước – nếu không phần TLS sẽ bị tính hai lần và độ rộng thanh sẽ không còn khớp với thời lượng thực của yêu cầu. Các mốc đứng đứt nét hiển thị DOMContentLoaded và Load, được đọc trực tiếp từ page timings của chính tệp, để bạn có thể thấy chính xác yêu cầu nào hoàn thành trước khi trang trở nên tương tác được.

Ngoài biểu đồ, công cụ chạy ba luật kiểm tra trên các trường mà định dạng HAR đã ghi lại. Luật đánh dấu các phản hồi có thể cache (trạng thái 200, 203 hoặc 206) không có header Cache-Control hay Expires, nghĩa là lần truy cập lại phải tải lại từ đầu. Luật đánh dấu các phản hồi dạng văn bản – HTML, CSS, JavaScript, JSON, SVG và tương tự – lớn hơn 1 KB được gửi mà không có Content-Encoding, một cơ hội nén dễ dàng mà hầu hết máy chủ có thể bật chỉ với một dòng cấu hình. Và luật đánh dấu các yêu cầu CSS hoặc JavaScript bắt đầu trước thời điểm DOMContentLoaded của trang – dấu hiệu điển hình của tài nguyên chặn render.

Tất cả quá trình này chạy trên dữ liệu đã có sẵn trong tệp bạn tải lên – không có truy cập mạng, không có dịch vụ tra cứu bên ngoài, và không tải lại trang gốc. Tệp HAR được đọc, phân tích và dựng hoàn toàn trong tab trình duyệt của bạn và không bao giờ được tải lên nơi nào khác.

Thích công cụ này? Nghĩ sản phẩm này hữu ích? Thấy tiềm năng và muốn ủng hộ?

🛡️
Thực thi trong Trình duyệt

File và dữ liệu đầu vào của bạn không bao giờ rời khỏi thiết bị này. Xử lý hoàn toàn ngoại tuyến. Bảo mật 100%.

Định dạng & Quy tắc chấp nhận

  • Biểu đồ waterfall yêu cầu được vẽ bằng canvas, tô màu theo pha thời gian, có đánh dấu sự kiện DOMContentLoaded và Load.
  • Ba nhóm phát hiện dựa trên luật: thiếu header cache, phản hồi văn bản không nén và ứng viên chặn render.
  • Hoàn toàn ngoại tuyến: tệp .har tải lên được phân tích và xử lý hoàn toàn trong trình duyệt của bạn – không có gì được gửi đi đâu cả.

Lợi ích chính

✓ Waterfall thực tế từ dữ liệu thời gian thực: Mỗi thanh được vẽ trực tiếp từ từng pha blocked/DNS/connect/SSL/send/wait/receive của yêu cầu – không ước lượng hay đo lại.
✓ Phát hiện thiếu cache: Đánh dấu các phản hồi 200/203/206 được gửi đi mà không có header Cache-Control hay Expires, khiến các lần truy cập lại phải tải lại vô ích.
✓ Tìm phản hồi không nén: Đánh dấu các phản hồi dạng văn bản trên 1 KB được gửi không có Content-Encoding – một cơ hội cải thiện nén dễ dàng.
✓ Ứng viên chặn render: Đối chiếu các yêu cầu CSS/JS với thời điểm DOMContentLoaded của trang để đánh dấu các script và stylesheet được tải trước khi trang có thể render.

Trường hợp sử dụng

  • • Chẩn đoán vì sao một trang web có cảm giác chậm bằng cách tải tệp HAR đã xuất lên và đọc chi tiết thời gian thực tế của từng yêu cầu, thay vì phỏng đoán từ bản ghi màn hình.
  • • Đánh giá chiến lược lưu đệm của một trang web bằng cách tìm mọi phản hồi được gửi về mà không có header Cache-Control hoặc Expires và sẽ bị tải lại trong mỗi lần truy cập lặp lại.
  • • Phát hiện CSS hoặc JavaScript gây chặn hiển thị trước khi chạy một đợt đánh giá hiệu năng đầy đủ bằng cách kiểm tra những yêu cầu nào đã bắt đầu trước sự kiện DOMContentLoaded trong tệp HAR đã ghi lại.