Lớp học lập trình này sẽ hướng dẫn bạn thực hiện quy trình diễn giải tất cả mạng cho một ứng dụng mẫu hơi phức tạp. Vào cuối bài tập, bạn sẽ có kỹ năng cần thiết để tìm hiểu xem ứng dụng web của mình là gì và khi thực hiện 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 cho bản minh hoạ .
Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó nhấn Toàn màn hình
.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 đã tải sau điều hướng:
Cách diễn giải bài viết
Mỗi hàng lưu lượng truy cập mạng được ghi lại đại diện cho một yêu cầu và phản hồi ghép nối.
Hàng đầu tiên, thuộc loại document, là yêu cầu điều hướng ban đầu cho thuộc tính
HTML của ứng dụng web. Đây là nguồn của thác nước; mỗi thuộc tính tiếp theo
yêu cầu về tài sản bổ sung (được gọi là tài nguyên phụ của tài liệu chính)
thông qua nguồn ban đầu này.
Hàng thứ hai và thứ ba cho thấy CSS stylesheet và tài nguyên phụ script
đ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 chúng chỉ bắt đầu cho đến rất muộn trong quá trình phản hồi với yêu cầu điều hướng.
Các yêu cầu đối với tài liệu HTML, CSS và Cần có JavaScript để hiển thị toàn bộ trang trong điều hướng ban đầu.
Tạo thêm một số yêu cầu thời gian chạy
Khi bảng điều khiển Network (Mạng) vẫn mở và đang ghi hình, đã đến lúc mô phỏng điều gì đó phổ biến đối với nhiều ứng dụng web: các yêu cầu API bổ sung được dùng để thêm dữ liệu vào trên trang sau khi hoàn tất thao tác điều hướng ban đầu.
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 đó Allow (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 thông tin về vị trí hiện tại của bạn:
Khi ứng dụng web có vị trí để làm việc, nhấp vào Tìm lân cận Các mục trên Wikipedia 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 nhập 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 yêu cầu và phản hồi.
Hàng đầu tiên của các mục nhập mới biểu thị một yêu cầu thuộ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.
Tất cả các hàng sau đều là hình ảnh (png hoặc jpeg) được liên kết với
Các mục trên Wikipedia. Mặc dù hơi khó nhìn thấy từ ảnh chụp màn hình,
các mục nhập trong cột Thác nước được chuyển trực tiếp từ phản hồi 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 cách thức bạn đã mở trang trước khi nhấp vào Tìm Wikipedia lân cận Mục nhập. Đ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 thấy điều này từ khoảng cách lớn tồn tại ở màn hình Thác nước thể hiện khoảng thời gian trôi qua giữa 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 đưa ra sau một khoảng thời gian sau khi điều hướng sẽ thuộc danh mục này "yêu cầu về thời gian chạy", khác với tập hợp các yêu cầu ban đầu được dùng để hiển thị trang khi bạn điều hướng đến trang đó lần đầu tiên.
Tổng hợp nội dung
Sau khi đã thực hiện các bước trong lớp học lập trình này, giờ đây bạn đã quen với mà bạn có thể sử dụng để phân tích tải bất kỳ ứng dụng web nào.
Bảng điều khiển Mạng giúp bạn trả lời câu hỏi nội dung đang được tải, thông qua URL trong cột Tên và dữ liệu trong cột Loại, cùng với when quảng cáo đang được tải, thông qua màn hình thác nước.
Bạn cũng nhận thấy rằng các yêu cầu mà một trang web đưa ra (thường) có thể được nhóm thành một trong hai danh mục:
- Các yêu cầu ban đầu, được thực hiện ngay sau khi điều hướng đến một trang mới, cho HTML, JavaScript, CSS (và có thể các nội dung khác).
- Các yêu cầu thời gian chạy được đưa ra do người dùng tương tác với trang. Chiến dịch này thường có thể bắt đầu bằng một yêu cầu tới một API, sau đó chuyển thành các yêu cầu tiếp theo dựa trên dữ liệu API đã truy xuất.