Lớp học lập trình này sẽ hướng dẫn bạn quy trình diễn giải tất cả lưu lượng truy cập mạng cho một ứng dụng mẫu tương đối phức tạp. Sau khi hoàn thành bài tập này, bạn sẽ có các kỹ năng cần thiết để tìm ra nội dung mà ứng dụng web của bạn đang tải và thời điểm ứng dụng đưa ra từng yêu cầu.
Chuyển đến bảng điều khiển Mạng
Chuyển đến bảng điều khiển Mạng để xem lưu lượng truy cập mạng của ứng dụng minh hoạ.
- Nhấn tổ hợp phím `Control+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở Công cụ cho nhà phát triển.
- Nhấp vào thẻ Mạng.
- Hãy tải lại trang để xem lưu lượng truy cập mạng.
Bảng điều khiển Mạng hiển thị tất cả các thành phần được tải do thao tác điều hướng ban đầu của bạn:
Cách diễn giải các mục nhập
Mỗi hàng lưu lượng truy cập mạng được ghi lại đại diện cho một cặp yêu cầu và phản hồi.
Hàng đầu tiên, có loại document, là yêu cầu điều hướng ban đầu cho HTML của ứng dụng web. Đây là nguồn cho thác nước; mỗi yêu cầu tiếp theo cho các thành phần bổ sung (được gọi là tài nguyên phụ của tài liệu chính) đều bắt nguồn từ nguồn ban đầu này.
Hàng thứ hai và thứ ba, cho thấy một tài nguyên phụ stylesheet và script CSS đang được tải, là các yêu cầu phụ thuộc do tài liệu chính khởi tạo.
Khi xem xét thời điểm các yêu cầu đó được thực hiện, biểu đồ thác nước cho thấy các yêu cầu đó chỉ bắt đầu khi quá trình phản hồi yêu cầu điều hướng đã gần hoàn tất.
Nói chung, các yêu cầu về tài liệu HTML, CSS và JavaScript là cần thiết để hiển thị toàn bộ trang trong quá trình điều hướng ban đầu.
Tạo thêm một số yêu cầu về thời gian chạy
Khi bảng điều khiển Network (Mạng) vẫn mở và ghi lại, đã đến lúc mô phỏng một điều phổ biến đối với nhiều ứng dụng web: các yêu cầu API bổ sung dùng để thêm dữ liệu vào trang sau khi quá trình điều hướng ban đầu hoàn tất.
Kích hoạt các yêu cầu bổ sung này bằng cách nhấp vào Tìm tôi trong ứng dụng, sau đó nhấp vào Cho phép trong cửa sổ bật lên xuất hiện. Thao tác này sẽ cho phép trang web truy cập vào vị trí hiện tại của bạn:
Sau khi ứng dụng web có vị trí để làm việc, việc nhấp vào Tìm mục nhập Wikipedia lân cận sẽ dẫn đến một số yêu cầu mạng bổ sung. Bạn sẽ thấy như sau:
Diễn giải các mục mới
Như trước đây, mỗi hàng lưu lượng truy cập mạng được ghi lại đại diện cho một cặp yêu cầu và phản hồi.
Hàng đầu tiên của các mục mới đại diện cho một yêu cầu có loại fetch, tương ứng với cách ứng dụng web yêu cầu dữ liệu từ API Wikipedia.
Các hàng sau đây đều là hình ảnh (png hoặc jpeg) liên kết với các mục nhập Wikipedia. Mặc dù hơi khó nhìn thấy trong ảnh chụp màn hình, nhưng các mục nhập của chúng trong cột Thác nước trực tiếp xuất phát từ phản hồi của API.
Đối với tất cả các yêu cầu bổ sung này, thời điểm sẽ thay đổi tuỳ theo thời gian bạn mở trang trước khi nhấp vào Tìm mục Wikipedia lân cận. Điều quan trọng nhất ở đây là thời điểm bị ngắt kết nối khỏi yêu cầu điều hướng ban đầu. Bạn có thể nhận biết điều này từ khoảng trống lớn trong màn hình Thác nước, thể hiện khoảng thời gian trôi qua giữa lần tải ban đầu và thời điểm yêu cầu API Wikipedia được thực hiện.
Các yêu cầu được thực hiện sau một khoảng thời gian sau khi điều hướng sẽ thuộc danh mục "yêu cầu thời gian chạy", trái ngược với tập hợp yêu cầu ban đầu dùng để hiển thị trang khi bạn điều hướng đến trang đó lần đầu tiên.
Tóm tắt
Sau khi thực hiện các bước trong lớp học lập trình này, bạn hiện đã quen thuộc với các công cụ mà bạn có thể sử dụng để phân tích nội dung mà bất kỳ ứng dụng web nào tải.
Bảng điều khiển Mạng giúp bạn trả lời câu hỏi về nội dung đang được tải, thông qua các URL trong cột Tên và dữ liệu trong cột Loại, cùng với thời điểm nội dung đó được tải, thông qua màn hình thác nước.
Bạn cũng đã thấy rằng các yêu cầu do một trang web đưa ra (thường) có thể được nhóm vào một trong hai danh mục:
- Yêu cầu ban đầu, được thực hiện ngay sau khi chuyển đến một trang mới, cho HTML, JavaScript, CSS (và có thể là các thành phần khác).
- Yêu cầu trong thời gian chạy được thực hiện do người dùng tương tác với trang. Quá trình này thường bắt đầu bằng một yêu cầu đến API, sau đó chuyển thành một số yêu cầu tiếp theo dựa trên dữ liệu API được truy xuất.