Как обнаружить медленные интернет-соединения?

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

Какие существуют методы обнаружения медленных интернет-соединений?

<суб > P.S. Я думаю, что это достигается с помощью javascript, поэтому я пометю его как вопрос javascript? Тем не менее, я ищу ответы, ориентированные больше на PHP, если это также связано с сервером.

Ответы

Ответ 1

Вы можете запустить таймаут в встроенном 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.

Ответ 2

Здесь полная реализация, которую я только что закончил для сайта, над которым я работаю. Почувствовал, как поделиться им. Он использует 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>

Результат должен выглядеть так:

Надеюсь, что это поможет.

Ответ 3

Вы можете прослушать два события DOM, DOMContentLoaded и load, и вычислить разницу между временем отправки этих двух событий.

DOMContentLoaded отправляется, когда структура DOM готова, но внешние ресурсы, изображения, CSS и т.д. не могут быть.

load отправляется, когда все готово.

http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/

Ответ 4

Вы можете получить скорость соединения, загрузив некоторый тестовый ресурс (изображение будет более подходящим), размер которого вам известен (что легко получить) и измерение времени, затраченного на его загрузку. Имейте в виду, что однократное тестирование только даст вам скорость соединения в этот момент. Результаты могут время от времени меняться, если пользователь использует пропускную способность параллельно с тестами изображения. Это приводит к тому, что пропускная способность доступна для вашего приложения, и это то, что нам нужно.

Я читал где-то Google делает подобный трюк, используя некоторое пиксельное изображение сетки 1x1 для проверки скорости соединения при загрузке страницы, и даже показывает вам что-то вроде "Соединение кажется медленным, попробуйте HTML-версию"... или аналогично.

Вот еще одна ссылка, описывающая ту же технику - http://www.ehow.com/how_5804819_detect-connection-speed-javascript.html