Как узнать, когда ресурс веб-страницы кэшируется?

Question

Есть ли в JavaScript способ указать, находится ли ресурс в кэше браузера?

Мы используем часть наших просмотров страниц на стороне клиента, чтобы мы могли получить более точные данные о том, как быстро страницы загружаются для наших пользователей. Когда пользователи впервые приходят на наш сайт, некоторые ресурсы (JS, CSS, изображения) кэшируются браузером, поэтому их начальный просмотр страницы будет медленнее, чем последующие.

В настоящее время эти данные смешиваются вместе, поэтому трудно определить начальную загрузку страницы из последующего просмотра страницы, которая является медленной по какой-либо другой причине. Мне бы хотелось, чтобы кросс-браузерный способ проверял, заполнен ли кэш, чтобы я мог разделить два вида просмотра страниц и проанализировать их по отдельности.

Answer 1

Нет JavaScript API для проверки кэширования ресурса. Я думаю, лучшее, что вы можете сделать, это проверить, сколько времени потребовалось для загрузки ресурсов, и объединить ресурсы с более коротким временем загрузки вместе.

Вверху страницы:

<script>var startPageLoad = new Date().getTime();</script>

На каждом ресурсе:

<img src="foo.gif" onload="var fooLoadTime = startPageLoad - new Date().getTime()">
<script src="bar.js" onload="var barLoadTime = startPageLoad - new Date().getTime()">

При сообщении времени загрузки:

var fooProbablyCached = fooLoadTime < 200; // Took < 200ms to load foo.gif
var barProbablyCached = barLoadTime < 200; // Took < 200ms to load bar.gif

Возможно, вам придется использовать события onreadystatechange вместо onload в IE.

Answer 2

Вам нужен плагин для этого. Firebug может сообщить вам на вкладке "NET", как только вы установите его (для Firefox) Сам JavaScript не может видеть HTTP-трафик браузера.