Я хочу рассчитать время загрузки страницы; Это означает от секунды 0 (был загружен небольшой фрагмент jquery) до секунды x, когда загружается вся страница.
Интересно, есть ли у кого-нибудь опыт с этим, также будут реализованы идеи, как правильно его реализовать.
пожалуйста, мне не нужно расширение, у меня уже есть firebug, мне нужно решение js
Благодарность :)
Как уже упоминали другие, это не будет очень точным. Но это должно работать разумно.
В вашем <head>, т. е. как можно раньше:
<script>
var startTime = (new Date()).getTime();
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(window).load(function () {
var endTime = (new Date()).getTime();
var millisecondsLoading = endTime - startTime;
// Put millisecondsLoading in a hidden form field
// or Ajax it back to the server or whatever.
});
</script>
Ключевым моментом является это поведение, из документов jQuery:
При привязке к элементу окна событие срабатывает, когда пользовательский агент заканчивает загрузку всего содержимого в документе, включая окно, фреймы, объекты и изображения.
Поскольку скрипты выполняются, как только они анализируются, я предлагаю вам поместить один тег скрипта прямо в заголовок, а затем скрипт для перехвата события загрузки страницы после загрузки jQuery:
<html>
<head>
<script>
// Capture start time
</script>
...
<script src="jquery.js" />
<script>
$(window).load(function() {
// Capture end time
});
</script>
...
Таким образом, вы сможете поймать как можно больше времени загрузки страницы.
Может быть, вам лучше использовать плагин для браузера? Вычисление с помощью JavaScript будет необходимо недооценивать время загрузки страницы, поскольку оно не будет включать время загрузки фрагмента jQuery и не будет включать время между отправкой браузером запроса и ответом веб-сервера?
Для Firefox существует плагин Load Time Analyzer.
Если вы делаете это с целью оптимизации, то я предлагаю вам использовать Yslow< /а>. Это расширение Firebug-Firefox. Он может показать вам время загрузки страницы и много другой полезной информации.
Ознакомьтесь с рекомендацией W3C по времени навигации.
Примечательно:
Например, в следующем скрипте показана наивная попытка измерить время, необходимое для полной загрузки страницы:
<html>
<head>
<script type="text/javascript">
var start = new Date().getTime();
function onLoad() {
var now = new Date().getTime();
var latency = now - start;
alert("page loading time: " + latency);
}
</script>
</head>
<body onload="onLoad()">
<!- Main page body goes from here. -->
</body>
</html>
Скрипт вычисляет время, необходимое для загрузки страницы после выполнения первого бита JavaScript в голове, но не дает никакой информации о времени, необходимом для получения страницы с сервера.
Чтобы удовлетворить потребность в полной информации о взаимодействии с пользователем, в этом документе представлены интерфейсы PerformanceTiming. Этот интерфейс позволяет механизмам JavaScript обеспечивать полные измерения задержки на стороне клиента в приложениях. С предложенным интерфейсом предыдущий пример можно изменить для измерения воспринимаемого пользователем времени загрузки страницы.
Следующий скрипт вычисляет время загрузки страницы с момента последней навигации.
<html>
<head>
<script type="text/javascript">
function onLoad() {
var now = new Date().getTime();
var page_load_time = now - performance.timing.navigationStart;
alert("User-perceived page loading time: " + page_load_time);
}
</script>
</head>
<body onload="onLoad()">
<!- Main page body goes from here. -->
</body>
</html>
Вы не можете сделать это с помощью jQuery, так как $(document).ready(); срабатывает при загрузке страницы.
Вы можете сделать это с помощью YSlow плагин Firebug для Firfox. Если вы хотите, чтобы это работало во всех браузерах, вам нужно будет добавить серверный код, чтобы показать, сколько времени потребовалось, чтобы первый элемент записался в нижний элемент.
Если это не то, что вам нужно, вы можете использовать такой инструмент, как Selenium, и написать тест, чтобы зафиксировать время с open до конца waitForPageToLoad. Selenium работает во всех браузерах
