Làm cách nào để biết hình ảnh được lấy từ bộ nhớ cache web của người dùng hay cách tải thời gian tải chính xác?

Question

Tôi đang sử dụng tập lệnh JavaScript cho tôi biết liệu các URL hình ảnh cụ thể có được lưu trong bộ nhớ cache của trình duyệt của người dùng hay không. Tôi đang sử dụng điều này bởi vì tôi xây dựng một loạt các hình ảnh không được lưu trữ sẽ được tải riêng, sau khi quá trình quan trọng hơn được thực hiện. Tập lệnh này được viết riêng cho Google Chrome nên tôi không cần giải pháp trình duyệt chéo.

Chức năng hiện tại của tôi kiểm tra thời gian đã tải hình ảnh và nếu nó nhỏ hơn vài phần nghìn giây (hiện tại là 25ms), tôi cho rằng nó được lấy từ bộ nhớ cache.

Sự khác biệt giữa hình ảnh được lưu trong bộ nhớ cache và không được lưu vào bộ nhớ cache dễ dàng phát hiện thủ công bằng cách kiểm tra Bảng điều khiển tài nguyên trong Công cụ nhà phát triển của Chrome. Khi lơ lửng thời gian tải, Chrome cho biết tệp có được lấy từ bộ nhớ cache hay không bằng cách in đầu công cụ như sau: xx ms Latency, xx ms Download (from cache). Tôi nhận thấy rằng trong một số trường hợp, thời gian trễ là khá dài (ví dụ: 64ms chỉ có thời gian tải xuống 2ms) và làm cho chức năng phát hiện của tôi vô ích khi tổng thời gian tải vượt quá ngưỡng của tôi. Việc tăng ngưỡng là không thể vì hình ảnh nhỏ và không được lưu trong bộ nhớ cache cũng có thể được tải trong cùng một khoảng thời gian.

Bây giờ bạn có vấn đề của tôi, ở đây đi câu hỏi của tôi:

-là nó có thể kiểm tra một cách chính xác 100% (ví dụ như bảng điều khiển nguồn chrome của) tập tin đó xuất phát từ bộ nhớ cache? (Tôi đoán nếu bảng nào đó, có phải là một cách nhưng tôi không thể tìm thấy nó trên mạng Internet)

Hoặc

-là Có cách nào để tách hai sự chậm trễ (tức là trễ so với Tải xuống) để chỉ có thể kiểm tra thời gian tải xuống thực sự? Tính thời gian giữa việc bắt đầu tải hình ảnh và sự kiện onload trả về tổng thời gian.

---

Tôi cảm ơn bạn đã đọc câu hỏi của mình và ngay cả khi bạn không có giải pháp, ý tưởng, ý tưởng chính xác, được hoan nghênh nhất!

(PS: Tôi không phải là người nói tiếng Anh bản địa vì vậy xin đừng đổ lỗi cho tôi để thực hiện điều sai lầm!)

Gaël

Answer 1

Xin lỗi vì đã nhầm lẫn câu trả lời của bạn.

Tôi đã thực hiện một số thử nghiệm và tìm thấy các kết quả sau: Tiêu đề 304 not modified chỉ xuất hiện khi tài nguyên cũ và được xác thực bởi máy chủ qua If-None-Match/If-Modified-Since. Khi tài nguyên vẫn còn mới và không yêu cầu xác thực, mã trạng thái được trả lại là 200 Ok.

Tuy nhiên, có vẻ như có tiêu đề Độ tuổi cho biết tài nguyên đang được lưu vào bộ nhớ cache. Vì vậy, tôi đoán tôi có thể chuyển sang PHP và làm điều gì đó như if status code is 304 or Age header exists then resource is cached. Nhưng nếu không có tiêu đề Cache-Control: max-age=xx thì sao? Có tiêu đề Độ tuổi nào ngay khi tài nguyên được lưu trữ và làm mới không?

Sẽ điều tra thêm vào Thứ Hai và tiếp tục cập nhật tại đây.

Answer 2

Bạn cần phải kiểm tra các tiêu đề HTTP khi hình ảnh được phục vụ lên là chắc chắn 100. Rất tiếc, JavaScript không có quyền truy cập vào dữ liệu này.

Xem: Accessing the web page's HTTP Headers in JavaScript