В настоящее время большинство популярных веб-сайтов, таких как google, yahoo, обнаруживают, что скорость соединения с пользователем медленная, а затем дает возможность загружать базовую версию веб-сайта вместо верхнего.
Какие существуют методы обнаружения медленных интернет-соединений?
<суб > P.S. Я думаю, что это достигается с помощью javascript, поэтому я пометю его как вопрос javascript? Тем не менее, я ищу ответы, ориентированные больше на PHP, если это также связано с сервером.
Вы можете запустить таймаут в встроенном script блоке в <head>, который будет запущен сразу же после его возникновения. Вы бы отменить таймаут, когда срабатывает событие load. Если тайм-аут когда-либо срабатывает, страница медленно загружается. Например:
<script type="text/javascript">
var slowLoad = window.setTimeout( function() {
alert( "the page is taking its sweet time loading" );
}, 10 );
window.addEventListener( 'load', function() {
window.clearTimeout( slowLoad );
}, false );
</script>
Очевидно, вы хотели бы заменить предупреждение чем-то более полезным. Также обратите внимание, что в этом примере используется API событий W3C/Netscape и, следовательно, он не будет работать в Internet Explorer до версии 9.
Здесь полная реализация, которую я только что закончил для сайта, над которым я работаю. Почувствовал, как поделиться им. Он использует cookie для отклонения сообщения (для людей, которые не возражают против того, что сайт занимает много времени, чтобы загрузить.) Сообщение покажет, занимает ли страница более 1 секунды для загрузки. Лучше всего изменить это примерно на 5 секунд или около того.
Код ниже должен быть добавлен сразу после открывающего тега <head>, поскольку он должен быть загружен как можно скорее, но он не может появиться перед тегом html или head, потому что эти теги должны присутствовать в DOM при запуске script. Все это встроенный код, поэтому скрипты и стили загружаются перед любыми другими внешними файлами (css, js или images).
<style>
html { position: relative; }
#slow-notice { width:300px; position: absolute; top:0; left:50%; margin-left: -160px; background-color: #F0DE7D; text-align: center; z-index: 100; padding: 10px; font-family: sans-serif; font-size: 12px; }
#slow-notice a, #slow-notice .dismiss { color: #000; text-decoration: underline; cursor:pointer; }
#slow-notice .dismiss-container { text-align:right; padding-top:10px; font-size: 10px;}
</style>
<script>
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + ";path=/;" + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
if (getCookie('dismissed') != '1') {
var html_node = document.getElementsByTagName('html')[0];
var div = document.createElement('div');
div.setAttribute('id', 'slow-notice');
var slowLoad = window.setTimeout( function() {
var t1 = document.createTextNode("The website is taking a long time to load.");
var br = document.createElement('br');
var t2 = document.createTextNode("You can switch to the ");
var a = document.createElement('a');
a.setAttribute('href', 'http://light-version.mysite.com');
a.innerHTML = 'Light Weight Site';
var dismiss = document.createElement('span');
dismiss.innerHTML = '[x] dismiss';
dismiss.setAttribute('class', 'dismiss');
dismiss.onclick = function() {
setCookie('dismissed', '1', 1);
html_node.removeChild(div);
}
var dismiss_container = document.createElement('div');
dismiss_container.appendChild(dismiss);
dismiss_container.setAttribute('class', 'dismiss-container');
div.appendChild(t1);
div.appendChild(br);
div.appendChild(t2);
div.appendChild(a);
div.appendChild(dismiss_container);
html_node.appendChild(div);
}, 1000 );
window.addEventListener( 'load', function() {
try {
window.clearTimeout( slowLoad );
html_node.removeChild(div);
} catch (e){
// that okay.
}
});
}
</script>
Результат должен выглядеть так:
Надеюсь, что это поможет.
Вы можете прослушать два события DOM, DOMContentLoaded и load, и вычислить разницу между временем отправки этих двух событий.
DOMContentLoaded отправляется, когда структура DOM готова, но внешние ресурсы, изображения, CSS и т.д. не могут быть.
load отправляется, когда все готово.
http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/
Вы можете получить скорость соединения, загрузив некоторый тестовый ресурс (изображение будет более подходящим), размер которого вам известен (что легко получить) и измерение времени, затраченного на его загрузку. Имейте в виду, что однократное тестирование только даст вам скорость соединения в этот момент. Результаты могут время от времени меняться, если пользователь использует пропускную способность параллельно с тестами изображения. Это приводит к тому, что пропускная способность доступна для вашего приложения, и это то, что нам нужно.
Я читал где-то Google делает подобный трюк, используя некоторое пиксельное изображение сетки 1x1 для проверки скорости соединения при загрузке страницы, и даже показывает вам что-то вроде "Соединение кажется медленным, попробуйте HTML-версию"... или аналогично.
Вот еще одна ссылка, описывающая ту же технику - http://www.ehow.com/how_5804819_detect-connection-speed-javascript.html