Шляхом Альбірео

НовиниЗаписиJSЧас завантаження сторінки

2021.09.28
Лічильник, який рахує час при завантаженні сторінки в браузер.
Note

Скрипт, що рахує час обробки сторінки браузером клієнта. Автором є 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.

Note

Інший варіант простіший, але з тою ж логікою рахування різниці між двома таймінгами. Скрипта бажано також помістити до тегу <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>

Результат роботи виглядатиме якось так:

Назви директорій і файлів можуть змінюватися, бо доповнення матеріалу впливає на створення нових категорій документів. Саме тому, пропонуємо зберігати посилання тільки на головну сторінку цього ресурсу, а не на конкретну статтю.


CC0  NVkarta SSL E530.12.24 /DS118WD20EFRX 2TБ/ Page 0.054s • 38.45 KB