Xác định các tài nguyên được tải từ mạng

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 nào là 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.

Công cụ của Chrome cho nhà phát triển bảng điều khiển mạng.

Biết nội dung bạn tải

Việc tìm ra các chiến lược lưu vào bộ nhớ đệm phù hợp cho ứng dụng web của bạn đòi hỏi xử lý chính xác nội dung bạn đang tải. Khi xây dựng một môi trường web đáng tin cậy mạng, mạng có thể phải chịu tất cả các loại lực tối. Bạn cần tìm hiểu các lỗ hổng bảo mật của mạng lưới nếu bạn hy vọng ứng phó với những lỗ hổng này trong .

Bạn có thể nghĩ rằng mình đã có ý tưởng khá tốt về những gì trang web ứng dụng sẽ tải. Nếu bạn chỉ sử dụng một phần nhỏ của HTML tĩnh, JavaScript, CSS và tệp hình ảnh. thì điều đó có thể đúng. Nhưng 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, hình ảnh nhanh chóng trở nên murkier.

Chiến lược lưu vào bộ nhớ đệm có ý nghĩa đối với một số tệp CSS nhỏ có thể sẽ không có ý nghĩa đối với hàng trăm hình ảnh lớn chẳng hạn.

Biết thời điểm bạn tải

Một phần khác của hình ảnh đang tải tổng thể là khi mọi thứ được tải.

Một số yêu cầu đối với mạng, chẳng hạn như yêu cầu chỉ đường cho HTML ban đầu của bạn, được tạo vô điều kiện ngay khi người dùng truy cập vào URL. HTML đó có thể chứa các tham chiếu được cố định giá trị trong mã đến CSS hoặc JavaScript quan trọng tệp cũng phải tải để hiển thị trang tương tác của bạn. Các đều nằm trong đường dẫn tải quan trọng của bạn. Bạn sẽ cần phải tích cực lưu chúng vào bộ nhớ đệm một cách nhanh chóng 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 từng phần, có thể không bắt đầu tải cho đến khi tất cả các lần tải ban đầu hoàn tất. 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 trên nhiều lượt truy cập vào cùng một trang. Một chiến lược lưu vào bộ nhớ đệm ít linh hoạt hơn thường phù hợp với nội dung mà bạn đã xác định là ở bên ngoài đường dẫn tải quan trọng.

Cột Tên và Loại giúp

Các cột Tên và Loại giúp cung cấp hình ảnh có ý nghĩa về việc đang diễn ra đã tải xong. 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 4 URL, mỗi URL đại diện cho một loại nội dung duy nhất.

Công cụ của Chrome cho nhà phát triển bảng điều khiển mạng hiển thị bốn tệp đang tải.

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ỉ nhìn 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 nên bạn sẽ chỉ thấy main.css được liệt kê dưới Tên.

Một vài ký tự cuối cùng trong đường dẫn của URL, theo sau dấu chấm (ví dụ: "css"), được gọi là phần mở rộng của URL. Đuôi của URL thường cho bạn biết loại tài nguyên nào đang được yêu cầu, và ánh xạ trực tiếp tới thông tin được 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 xuống và di chuyển xuống dưới. Chiến lược phát hành đĩa đơn độ dài của mỗi thanh biểu thị tổng thời gian tải từng tài nguyên. Làm cách nào để phân biệt giữa một yêu cầu được đưa ra dưới dạng của một phần đườ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 hoàn tất tải ban đầu của trang?

Yêu cầu đầu tiên trong thác nước sẽ luôn là 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ẽ lưu chuyển (chẳng hạ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à tạo kiểu cho các tham chiếu tài liệu HTML.

Công cụ của Chrome cho nhà phát triển chế độ xem thác nước.

Thác nước cho thấy ngay khi v2.html tải xong, các yêu cầu cho các tài sản mà nó tham chiếu (còn gọi là tài nguyên phụ). Chiến lược phát hành đĩa đơn trình duyệt có thể yêu cầu nhiều tài nguyên phụ cùng một lúc và đó là được thể hiện bằng các thanh chồng chéo trong cột Thác nước cho main.csslogo.svg Cuối cùng, bạn có thể thấy trên ảnh chụp màn hình rằng main.js bắt đầu và nó tải xong sau khi ba URL khác đã hoàn tất của Google.