Скрипт скорости загрузки страницы

Главная » Форум » Программинг, Скрипты, Софт, Сервисы »

Тема: Скрипт скорости загрузки страницы

цитата
09/07/11 в 15:21

ibiz
пользователь грузит страницу и у меня отображается, за сколько времени он загрузил всю страницу со всеми картинками, есть такое, к примеру, на аяксе?

цитата
09/07/11 в 15:55

FXIX
ну в движке в стартовом bootstrap.php пиши в бд date('d.m H:i').
в макете в футере
$(document).ready(function(){
пиши в бд date('d.m H:i') (хз как это на js)
});

ну и потом разницу выводи себе куда надо

цитата
09/07/11 в 16:19

ibiz
FXIX писал:

ну в движке в стартовом bootstrap.php пиши в бд date('d.m H:i').
в макете в футере
$(document).ready(function(){
пиши в бд date('d.m H:i') (хз как это на js)
});

ну и потом разницу выводи себе куда надо

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

цитата
09/07/11 в 17:04

FXIX
ibiz писал:

а если еще подгружаются с различных мест картинки и ембеды, то не срабатывает

http://api.jquery.com/ready/
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received.

попробуй проверить
$(document).ready(function(){
alert('done');
});

цитата
09/07/11 в 17:26

ibiz
FXIX писал:

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

цитата
09/07/11 в 17:44

FXIX
ну тогда хз. я в js не особо...

цитата
09/07/11 в 20:14

LeadFarmer
http://www.reynoldsftw.com/2009/08/javascript-jquery-and-dom-load-time-tester/
вот тут разумная вроде есть мысль по этому поводу и скрипт для jq. обрати внимание, что скрипт end.js ставится непосредственно перед тегом </body>.
судя по логике автора - это дает возможность загрузиться всему коду страницы с картинками и проч. ну это вроде вполне логично. других вариантов вроде бы нет.
второй вариант проверки скорости загрузки страниц (правда, серверное решение) - это спец сервисы типа таких: (10 бесплатных тестеров по ссылке)
http://techpp.com/2009/02/11/10-free-tools-check-website-loading-time/

цитата
09/07/11 в 20:59

ibiz
LeadFarmer писал:

http://www.reynoldsftw.com/2009/08/javascript-jquery-and-dom-load-time-tester/
вот тут разумная вроде есть мысль по этому поводу и скрипт для jq. обрати внимание, что скрипт end.js ставится непосредственно перед тегом </body>.
судя по логике автора - это дает возможность загрузиться всему коду страницы с картинками и проч. ну это вроде вполне логично. других вариантов вроде бы нет.
второй вариант проверки скорости загрузки страниц (правда, серверное решение) - это спец сервисы типа таких: (10 бесплатных тестеров по ссылке)
http://techpp.com/2009/02/11/10-free-tools-check-website-loading-time/

внешние тестеры не нужны...
попробовал скрипт, результата нет

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
/*
jQTester - version 0.1
Created by Steve Reynolds 2009 - http://www.reynoldsftw.com

Instructions:
IMPORTANT: You must be using jQuery! jQuery does not need to be loaded before this file!
Place this file at the start of your HTML document, just after the <head> tag.
*/

var elapsedTime = 0;

function logTime()
{
elapsedTime = elapsedTime + 1;
}

var pageTimer = setInterval(logTime, 1);
</script>
<title>Javascript and DOM Load Time Tester with jQuery</title>
</head>
<body>
<img src="http://pixelbrush.ru/uploads/posts/2011-05/1304871300_jk-1.jpg" width="150" height="120" alt="" />
<img src="http://kupidon.zurbazar.ru/netcat_files/317/332/mechta_orig.jpg" width="150" height="120" alt="" />
<img src="http://www.zastavki.com/pictures/1280x800/2010/Girls_Guessing_on_a_camomile_022899_.jpg" width="150" height="120" alt="" />
<img src="http://www.nonsolokawaii.com/wp-content/uploads/2009/08/will04.jpg" width="150" height="120" alt="" />
<img src="http://img-fotki.yandex.ru/get/37/yanochka1406.58/0_205f4_5d91ed9c_XL" width="150" height="120" alt="" />
<img src="http://jarskie.wippiespace.com/pics/wallpapers/a4267cc1d0f2a57fe1b926b7a85d4498.png" width="150" height="120" alt="" />
<img src="http://tochpc.ru/uploads/posts/2010-01/1263736977_zakeba_for_fluxbox_by_thrynk.png" width="150" height="120" alt="" />
<img src="http://mythicmktg.fileburst.com/war/us/home/images/wallpaper/WAR_Disciple004_16x9.jpg" width="150" height="120" alt="" />
<img src="http://my-hit.ru/images/star/wall/17461/40296_1600.jpg" width="150" height="120" alt="" />
<img src="http://oxun.ge/uploads/posts/2011-04/1302541554_black_22.jpg" width="150" height="120" alt="" />
<img src="http://www.thewallpapers.org/photo/18953/dom_pit-14.jpg" width="150" height="120" alt="" />
<img src="http://savepic.ru/712396.jpg" width="150" height="120" alt="" />
<img src="http://nevseoboi.com.ua/uploads/posts/2009-12/1259775952_1254007245135.jpg" width="150" height="120" alt="" />
<img src="http://grandwallpapers.net/photo/krilya_belogo_angela-1280x800.jpg" width="150" height="120" alt="" />
<img src="http://olafmenji.free.fr/images/fondnewurl_CFAion.jpg" width="150" height="120" alt="" />
<img src="http://www.gamerinfo.ru/games_img/8513_witcher_the-25.jpg" width="150" height="120" alt="" />
<img src="http://www.myconfinedspace.com/wp-content/uploads/tdomf/117084/Sci-Fi-Spaceship-52174.jpg" width="150" height="120" alt="" />
<img src="http://mymuza.ru/uploads/posts/2011-02/1296723790_1-38.jpg" width="150" height="120" alt="" />
<img src="http://www.goodfon.ru/image/97984-4000x2523.jpg" width="150" height="120" alt="" />
<img src="http://www.wallpampers.ru/pictures/1465/1280_Dead_Space.jpg" width="150" height="120" alt="" />
<img src="http://www.to-look-all.info/d/36112-3/To-look-all_info-000180.jpg" width="150" height="120" alt="" />

<script type="text/javascript" language="javascript">
/*
jQTester - version 0.1
Created by Steve Reynolds 2009 - http://www.reynoldsftw.com

Instructions:
Place this file at the end of your HTML document, just before the </body> tag.
*/

$(document).ready(function(){

clearInterval(pageTimer);
showResults();

});

function showResults()
{

var windowWidth;
var windowHeight;
var popupHeight = 80;
var popupWidth = 300;

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined')
{
         windowWidth = window.innerWidth,
         windowHeight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
{
   windowWidth = document.documentElement.clientWidth,
   windowHeight = document.documentElement.clientHeight
}

// older versions of IE
else
{
         windowWidth = document.getElementsByTagName('body')[0].clientWidth,
         windowHeight = document.getElementsByTagName('body')[0].clientHeight
}

$("<div id=\"jQTesterBG\"></div>").appendTo("body");
$("<div id=\"jQTesterPopup\"><h2>Javascript/DOM Load Time</h2><P><B>" + elapsedTime + " milliseconds</B></P></div>").appendTo("body");

$("#jQTesterBG").css({
"position": "absolute",
"z-index": "100000",
"top": "0",
"left": "0",
"width": windowWidth,
"height": windowHeight,
"background-color": "#000000",
"opacity": "0"});

$("#jQTesterPopup").css({
"position": "absolute",
"z-index": "100001",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2,
"width": popupWidth,
"height": popupHeight,
"background-color": "#FFFFFF",
"opacity": "0",
"padding": "20px"
});

$("#jQTesterBG").animate({"opacity": "0.7"}, 500, function(){
      $("#jQTesterPopup").animate({"opacity": "1"}, 500);
});

}
</script>
</body>
</html>

цитата
09/07/11 в 21:05

LeadFarmer
не так делаешь.
код start.js надо всявлять именно как код <script src="./start.js"> непосредственно в head страницы.
а end.js - прямо перед </body> таким же образом. иначе картина неверная будет.
если что - пиши в лс - помогу

цитата
09/07/11 в 21:30

ibiz
LeadFarmer писал:

не так делаешь.
код start.js надо всявлять именно как код <script src="./start.js"> непосредственно в head страницы.
а end.js - прямо перед </body> таким же образом. иначе картина неверная будет.
если что - пиши в лс - помогу

вынес, табличка вылетела, а картинки еще подгружаются
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="./start.js"></script>
<title>Javascript and DOM Load Time Tester with jQuery</title>
</head>
<body>
<img src="http://pixelbrush.ru/uploads/posts/2011-05/1304871300_jk-1.jpg" width="150" height="120" alt="" />
<img src="http://kupidon.zurbazar.ru/netcat_files/317/332/mechta_orig.jpg" width="150" height="120" alt="" />
<img src="http://www.zastavki.com/pictures/1280x800/2010/Girls_Guessing_on_a_camomile_022899_.jpg" width="150" height="120" alt="" />
<img src="http://www.nonsolokawaii.com/wp-content/uploads/2009/08/will04.jpg" width="150" height="120" alt="" />
<img src="http://img-fotki.yandex.ru/get/37/yanochka1406.58/0_205f4_5d91ed9c_XL" width="150" height="120" alt="" />
<img src="http://jarskie.wippiespace.com/pics/wallpapers/a4267cc1d0f2a57fe1b926b7a85d4498.png" width="150" height="120" alt="" />
<img src="http://tochpc.ru/uploads/posts/2010-01/1263736977_zakeba_for_fluxbox_by_thrynk.png" width="150" height="120" alt="" />
<img src="http://mythicmktg.fileburst.com/war/us/home/images/wallpaper/WAR_Disciple004_16x9.jpg" width="150" height="120" alt="" />
<img src="http://my-hit.ru/images/star/wall/17461/40296_1600.jpg" width="150" height="120" alt="" />
<img src="http://oxun.ge/uploads/posts/2011-04/1302541554_black_22.jpg" width="150" height="120" alt="" />
<img src="http://www.thewallpapers.org/photo/18953/dom_pit-14.jpg" width="150" height="120" alt="" />
<img src="http://savepic.ru/712396.jpg" width="150" height="120" alt="" />
<img src="http://nevseoboi.com.ua/uploads/posts/2009-12/1259775952_1254007245135.jpg" width="150" height="120" alt="" />
<img src="http://grandwallpapers.net/photo/krilya_belogo_angela-1280x800.jpg" width="150" height="120" alt="" />
<img src="http://olafmenji.free.fr/images/fondnewurl_CFAion.jpg" width="150" height="120" alt="" />
<img src="http://www.gamerinfo.ru/games_img/8513_witcher_the-25.jpg" width="150" height="120" alt="" />
<img src="http://www.myconfinedspace.com/wp-content/uploads/tdomf/117084/Sci-Fi-Spaceship-52174.jpg" width="150" height="120" alt="" />
<img src="http://mymuza.ru/uploads/posts/2011-02/1296723790_1-38.jpg" width="150" height="120" alt="" />
<img src="http://www.goodfon.ru/image/97984-4000x2523.jpg" width="150" height="120" alt="" />
<img src="http://www.wallpampers.ru/pictures/1465/1280_Dead_Space.jpg" width="150" height="120" alt="" />
<img src="http://www.to-look-all.info/d/36112-3/To-look-all_info-000180.jpg" width="150" height="120" alt="" />

<script type="text/javascript" src="./end.js"></script>
</body>
</html>

цитата
09/07/11 в 21:35

LeadFarmer
ага у меня то же самое. значит никак не получится точно узнать скорость подгрузки картинок.
остаются либо сторонние ресурсы, которые могут показывать скорость загрузки каждой картинки, ну либо самому ставить такой софт на свои сервера и с них тестировать.

цитата
09/07/11 в 21:37

kit
А чего бы вам не использовать функцию Гугл Аналитика?
Он показывает теперь скорость загрузки страниц.

цитата
09/07/11 в 22:06

ibiz
kit писал:

А чего бы вам не использовать функцию Гугл Аналитика?
Он показывает теперь скорость загрузки страниц.

а где такая функция и как использовать ее отдельно для каждого пользователя?
например у кого-то оптика и загрузка страницы 1сек, а кто-то сидит через модем 9600 бит/с и страница загружается 30сек

цитата
09/07/11 в 22:31

webboxxx
эмм.. а про window.onload почему забыли? он как раз для этого и сделан.
ну или <body onload="..."> если статично.

цитата
09/07/11 в 23:14

ibiz
webboxxx писал:

эмм.. а про window.onload почему забыли? он как раз для этого и сделан.
ну или <body onload="..."> если статично.

то что нужно!

Новая тема Ответить

Эта страница в полной версии