Bảng điều khiển Mạng trong DevTools của trình duyệt giúp xác định tài nguyên nào được tải và thời điểm tải tài nguyên đó. Mỗi hàng trong bảng điều khiển Mạng tương ứng với một URL cụ thể mà ứng dụng web của bạn đã tải.
Biết nội dung bạn tải
Để đưa ra chiến lược lưu vào bộ nhớ đệm phù hợp cho ứng dụng web, bạn cần xử lý chính xác nội dung mà bạn đang tải. Khi xây dựng một ứng dụng web đáng tin cậy, mạng có thể phải chịu mọi loại thế lực đen tối. Bạn cần hiểu rõ các lỗ hổng của mạng nếu muốn xử lý các lỗ hổng đó trong ứng dụng.
Bạn có thể nghĩ rằng mình đã biết khá rõ về nội dung mà ứng dụng web của mình tải. Điều này có thể đúng nếu bạn chỉ sử dụng một lượng nhỏ HTML tĩnh, JavaScript, CSS và tệp hình ảnh. Tuy nhiên, ngay khi bạn bắt đầu kết hợp các tài nguyên của bên thứ ba được lưu trữ trên mạng phân phối nội dung, sử dụng các yêu cầu API động và phản hồi do máy chủ tạo, bức tranh sẽ nhanh chóng trở nên mờ hơn.
Ví dụ: chiến lược lưu vào bộ nhớ đệm phù hợp với một vài tệp CSS nhỏ có thể sẽ không phù hợp với hàng trăm hình ảnh lớn.
Biết thời điểm bạn tải
Một phần khác của bức tranh tải tổng thể là thời điểm mọi thứ được tải.
Một số yêu cầu gửi đến mạng, chẳng hạn như yêu cầu điều hướng cho HTML ban đầu, được thực hiện vô điều kiện ngay khi người dùng truy cập vào một URL nhất định. HTML đó có thể chứa các tệp tham chiếu được mã hoá cứng đến các tệp CSS hoặc JavaScript quan trọng cũng phải tải để hiển thị trang tương tác của bạn. Tất cả các yêu cầu này đều nằm trong đường dẫn tải quan trọng. Bạn sẽ cần phải lưu các tệp này vào bộ nhớ đệm một cách mạnh mẽ để có tốc độ nhanh và đáng tin cậy.
Các tài nguyên khác, chẳng hạn như yêu cầu API hoặc thành phần tải lười, có thể không bắt đầu tải cho đến khi tất cả quá trình tải ban đầu hoàn tất. Nếu các yêu cầu đó chỉ xảy ra sau một trình tự tương tác cụ thể của người dùng, thì một nhóm tài nguyên hoàn toàn khác có thể được yêu cầu trong nhiều lượt truy cập vào cùng một trang. Chiến lược lưu vào bộ nhớ đệm ít tích cực hơn thường phù hợp với nội dung mà bạn xác định là nằm ngoài đường dẫn tải quan trọng.
Cột Tên và Loại giúp bạn biết
Cột Tên và Loại giúp cung cấp thông tin có ý nghĩa về nội dung đang được tải. Câu trả lời cho câu hỏi "nội dung nào đang tải?" trong ví dụ trên là tổng cộng bốn URL, mỗi URL đại diện cho một loại nội dung riêng biệt.
Tên đại diện cho URL mà trình duyệt của bạn đã yêu cầu, mặc dù bạn sẽ chỉ thấy phần cuối cùng của đường dẫn URL được liệt kê. Ví dụ: nếu https://example.com/main.css được tải, bạn sẽ chỉ thấy main.css được liệt kê trong Tên.
Vài ký tự cuối cùng của đường dẫn URL, theo sau dấu chấm (ví dụ: "css"), được gọi là phần mở rộng của URL.
Tiện ích của URL thường cho bạn biết loại tài nguyên đang được yêu cầu và liên kết trực tiếp đến thông tin hiển thị trong cột Loại. Ví dụ: v2.html là một tài liệu và main.css là một tệp kiểu.
Cột Thác nước giúp xác định thời điểm
Kiểm tra cột Thác nước, bắt đầu từ trên cùng và di chuyển xuống dưới. Chiều dài của mỗi thanh thể hiện tổng thời gian tải mỗi tài nguyên. Làm cách nào để bạn có thể phân biệt giữa một yêu cầu được thực hiện trong luồng tải quan trọng và một yêu cầu được kích hoạt một cách linh động, sau khi quá trình tải ban đầu của trang hoàn tất?
Yêu cầu đầu tiên trong thác nước luôn dành cho tài liệu HTML, ví dụ: v2.html. Tất cả các yêu cầu tiếp theo sẽ được thực hiện (như một thác nước!) từ yêu cầu điều hướng ban đầu này, dựa trên hình ảnh, tập lệnh và kiểu mà tài liệu HTML tham chiếu.
Thác nước cho thấy rằng ngay khi v2.html tải xong, các yêu cầu cho các thành phần mà nó tham chiếu (còn gọi là tài nguyên phụ) sẽ bắt đầu. Trình duyệt có thể yêu cầu nhiều tài nguyên phụ cùng một lúc và điều đó được biểu thị bằng các thanh chồng chéo trong cột Thác nước cho main.css và logo.svg. Cuối cùng, bạn có thể thấy trong ảnh chụp màn hình rằng main.js bắt đầu tải sau cùng và hoàn tất quá trình tải sau khi ba URL còn lại cũng hoàn tất.