Javascript 如何检测慢速internet连接？

目前，大多数流行的网站，如谷歌、雅虎，都会检测用户连接速度是否慢，然后选择加载网站的基本版本，而不是高端版本

有哪些方法可以检测慢速internet连接

---

另外，我认为这是通过javascript实现的，所以我将其标记为javascript问题？但是，如果这也是与服务器相关的，我正在寻找更倾向于PHP的答案。

您可以收听两个DOM事件，

DOMContentLoaded

和

load

，并计算这两个事件的调度时间差

DOMContentLoaded

在DOM结构就绪时被调度，但外部资源、图像、CSS等可能无法调度

load

在一切就绪时调度

---

您可以下载一些已知大小的测试资源（图像更合适）并测量下载时间，从而获得连接速度。请记住，测试一次只会在那一瞬间为您提供连接速度。如果用户使用与图像测试并行的带宽，结果可能会不时变化。这将为您的应用程序提供可用带宽，这正是我们所需要的

我在某个地方读到过谷歌使用一些1x1网格像素图像来测试页面加载时的连接速度的类似技巧，它甚至会向你显示“连接似乎很慢，试试HTML版本”。。。或类似的

下面是另一个描述相同技术的链接-

您可以在

中的内联脚本块中找到它，它将在遇到它时立即运行。然后，当

加载

事件触发时，您将看到。如果超时触发，则页面加载缓慢。例如：

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

var slowLoad=window.setTimeout（函数（）{
警报（“页面正在进行最快的加载”）；
}, 10 );
addEventListener（'load'，function（）{
窗口清除超时（慢加载）；
}，假）；

---

显然，您希望用更有用的东西来替换警报。还请注意，该示例使用W3C/Netscape事件API，因此在版本9之前的Internet Explorer中不起作用

这是我刚刚完成的一个站点的完整实现。我想分享一下。它使用cookie来删除消息（适用于不介意网站加载时间过长的人）。如果页面加载时间超过1秒，消息将显示出来。最好将此更改为5秒左右

下面的代码应该添加在打开的

标记之后，因为它必须尽快加载，但不能出现在html或head标记之前，因为在运行脚本时，这些标记需要出现在DOM中。它都是内联代码，所以脚本和样式在加载任何其他外部文件（css、js或图像）之前加载

html{position:relative；}
#慢速通知{宽度：300px；位置：绝对；顶部：0；左侧：50%；左边距：-160px；背景色：#F0DE7D；文本对齐：中心；z索引：100；填充：10px；字体系列：无衬线；字体大小：12px；}
#慢速通知a，#慢速通知。取消{color:#000；文本装饰：下划线；光标：指针；}
#慢注意。取消容器{文本对齐：右；填充顶部：10px；字体大小：10px；}
函数setCookie（cname、cvalue、exdays）{
var d=新日期（）；
d、 设置时间（d.getTime（）+（exdays*24*60*60*1000））；
var expires=“expires=“+d.togmString（）；
document.cookie=cname+“=”+cvalue+“path=/；”+过期；
}
函数getCookie（cname）{
变量名称=cname+“=”；
var ca=document.cookie.split（“；”）；
对于（var i=0；我只是猜测：我可以想象他们使用一个简单的超时，然后检查页面是否包含某些元素。如果没有，用户的连接速度一定很慢。我在这里发现了这样一个问题。所以，这个问题可能是重复的，但仍然没有给出具体的概念。你们可以关闭它，如果你们认为的话否则。@Felix Kling可能会，但标记元素加载速度相当快，在应用css、加载图像等渲染时会消耗实时时间。它会给出定义的输出吗？我读了那篇文章，但有一件事让我震惊。要读取连接速度，JS代码必须等待这两个事件的完成，但不是这样的ogle或yahoo会。他们会在页面加载时检测速度，并向用户提示…@Starx：正如文章中所说，在触发
DOMContentLoaded
之前，可以在文档加载时运行内联JavaScript。那么，你认为应该是那些内联JavaScript吗？@Startx：是的，它在那里是绝对可行的。只是一个例子短行记录当前时间。但是，要记录这两个事件之间的时间，我们必须等待这两个事件都完成。或者，在页面加载期间，我们是否可以记录其他事件…只是想指出，您可能需要使用
窗口。addEventListener
文档。addEventListener
对我不起作用。
<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>