Question

目前，大多数热门网站，如google，yahoo检测用户连接速度是否较慢，然后选择加载网站的基本版本而不是高端版本。

有哪些方法可用于检测慢速互联网连接？

<子> P.S。我认为这是通过javascript实现的，所以我会将其标记为javascript问题？但是，我正在寻找更多针对PHP的答案，如果这也与服务器相关。

Answer 1

您可以在<head>中的内联脚本块中start a timeout，它会在遇到后立即运行。然后，当load事件触发时，您将cancel the timeout。如果超时发生，则页面加载缓慢。例如：

<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>

显然，您希望将警报替换为更有用的警报。另请注意，该示例使用W3C / Netscape事件API，因此在版本9之前无法在Internet Explorer中使用。

Answer 2

这是我刚刚为我正在开发的网站完成的完整实施。感觉像分享它。它使用cookie来消除消息（对于那些不介意该站点需要很长时间才能加载的人。）如果页面加载时间超过1秒，则会显示该消息。最好将此更改为大约5秒左右。

下面的代码应该在打开<head>标记之后添加，因为它必须尽快加载，但它不能出现在html或head标记之前，因为这些标记需要是脚本运行时出现在DOM中。它是所有内联代码，因此脚本和样式在任何其他外部文件（css，js或图像）之前加载。

<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's okay.
            }

        });
    }

</script>

结果应如下所示：

enter image description here