Bảng điều khiển Mạng trong Công cụ cho nhà phát triển của trình duyệt giúp xác định những tài nguyên được tải và thời điểm tải. 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
Để tìm ra các chiến lược lưu vào bộ nhớ đệm phù hợp cho ứng dụng web, bạn cần phải xử lý chính xác nội dung bạn đang tải. Khi xây dựng một ứng dụng web đáng tin cậy, mạng có thể chịu tác động của tất cả các loại lực tối. Bạn cần hiểu các lỗ hổng bảo mật của mạng nếu muốn đối phó với các lỗ hổng đó trong ứng dụng của mình.
Bạn có thể nghĩ rằng mình đã có ý tưởng tốt về những gì mà ứng dụng web của bạn tải. Điều này có thể đúng nếu bạn chỉ sử dụng một số ít các tệp HTML tĩnh, JavaScript, CSS và hình ảnh tĩnh. Tuy nhiên, ngay khi bạn bắt đầu kết hợp 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, hình ảnh 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 số 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 khi nào bạn tải
Một phần khác của hình ảnh tải tổng thể là khi mọi thứ được tải.
Một số yêu cầu đến mạng (chẳng hạn như yêu cầu điều hướng đối với HTML ban đầu) được thực hiện vô điều kiện ngay khi người dùng truy cập một URL nhất định. HTML đó có thể chứa tham chiếu mã cứng đến các tệp CSS hoặc JavaScript quan trọng mà 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 của bạn. Bạn sẽ cần phải lưu trữ nhanh các thông tin này vào bộ nhớ đệm để có tốc độ nhanh và đáng tin cậy.
Các tài nguyên khác, chẳng hạn như các yêu cầu API hoặc thành phần tải từng phần, có thể không bắt đầu tải cho đến khi hoàn tất toàn bộ quá trình tải ban đầu. Nếu những yêu cầu đó chỉ xảy ra sau một chuỗi 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ác cột Tên và Loại giúp giải thích
Các cột Tên và Loại giúp cung cấp thông tin đầy đủ về nội dung đang được tải. Câu trả lời cho câu hỏi "what's loading (đang tải gì)? trong ví dụ trên là tổng cộng 4 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 phần Tên.
Một 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à ánh xạ 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 biểu định 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. Độ dài của mỗi thanh thể hiện tổng thời gian tải từng 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 đường dẫn tải quan trọng và một yêu cầu được kích hoạt động, lâu sau khi lượt tải ban đầu của trang hoàn tất?
Yêu cầu đầu tiên trong thác nước sẽ luôn là cho tài liệu HTML,
ví dụ: v2.html. Tất cả các yêu cầu tiếp theo sẽ di chuyển (như 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 đến.
Thác nước cho biết ngay sau khi v2.html tải xong, các yêu cầu
cho tài sả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à đượ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, main.js bắt đầu
tải sau cùng và nó sẽ tải xong sau khi 3 URL khác
đã hoàn tất.