Скрипт, що рахує час обробки сторінки браузером клієнта. Автором є Robert Hashemian, всі можливості скрипта описані на сторінці автора. Підключення параметрів і виклик скрипта необхідно розміщувати на початку сторінки, бажано ще до тега <html> :
<!-- EXERCICE 1 -->
<!-- Завдання параметрів -->
<script>
PLT_DisplayFormat = "Your connection took %%S%% seconds to load this page.";
PLT_BackColor = "palegreen";
PLT_ForeColor = "navy";
PLT_FontPix = "12";
PLT_DisplayElementID = "display_here";
</script>
<!-- Ініціалізація скрипта -->
<script language="JavaScript" src="PageLoadTime.js"></script>
<!-- Вивід результату в будь-якому місці сторінки -->
<span id="display_here"></span>
Вивід результату може бути приблизно таким: Your connection took seconds to load this page
Код PageLoadTime.js можна розташувати в директорії з іншими js-скриптами, чи де-інде, вказавши правильне посилання при ініціалізації.
<!-- PageLoadTime.js -->
<script>
if(typeof(PLT_BackColor) == "undefined") PLT_BackColor = "white";
if(typeof(PLT_ForeColor) == "undefined") PLT_ForeColor = "black";
if(typeof(PLT_DisplayFormat) == "undefined") PLT_DisplayFormat = "Your connection took %%S%% seconds to load the page.";
if(typeof(PLT_FontPix) == "undefined") PLT_FontPix = "16";
if(typeof(PLT_DisplayElementID) == "undefined") PLT_DisplayElementID = "";
dt = new Date();
document.onreadystatechange = function() {
if(document.readyState == "complete") {
if((PLT_Span = document.getElementById(PLT_DisplayElementID)) == null) {
document.body.insertBefore(document.createElement("br"));
PLT_Span = document.body.insertBefore(document.createElement("span"));
}
PLT_DisplayFormat = PLT_DisplayFormat.replace(/%%S%%/g, ((new Date() - dt) / 1000));
PLT_Span.style.Color = PLT_ForeColor;
PLT_Span.style.backgroundColor = PLT_BackColor;
PLT_Span.style.fontSize = PLT_FontPix + "px";
PLT_Span.innerText = PLT_DisplayFormat;
}
}
</script>
P.S. На нашу думку, всі елементи в скриптах, які стосуються стилізації, можна видалити і користуватися зовнішніми стилями CSS.
Інший варіант простіший, але з тою ж логікою рахування різниці між двома таймінгами. Скрипта бажано також помістити до тегу <html>, він логчніше і має свої переваги перед варіантом, що обговорювався вище :
<!-- EXERCICE 2 -->
<script>
var before_loadtime = new Date().getTime();
window.onload = Pageloadtime;
function Pageloadtime() {
var aftr_loadtime = new Date().getTime();
// Time calculating in seconds
pgloadtime = (aftr_loadtime - before_loadtime) / 1000
document.getElementById("loadtime").innerHTML = pgloadtime
}
</script>
<!-- Вивід результату в будь-якому місці сторінки -->
<span id="loadtime"></span>
Результат роботи виглядатиме якось так: