如何检测缓慢的互联网连接？答案

【问题标题】：How to detect slow internet connections?如何检测缓慢的互联网连接？
【发布时间】：2020-04-18 17:03:57
【问题描述】：

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

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

_{附注我认为这是通过 javascript 实现的，所以我将其标记为 javascript 问题？但是，如果这也与服务器相关，我正在寻找更多面向 PHP 的答案。}

【问题讨论】：

只是猜测：我可以想象他们使用简单的超时，然后检查页面是否包含某些元素。如果不是，则用户的连接速度一定很慢。
我在 SO 上找到了this 问题。所以，这个问题是一个可能的重复，但仍然没有给出具体的概念。如果你不这么认为，你们可以关闭它。
@Felix Kling，可能是，但是标记元素加载速度更快，在渲染它时会消耗实时时间，例如应用 css、加载图像等。它会给出明确的输出吗？
@Starx 渲染和 css 开销/延迟也适用于在超快速连接上加载时，在这种情况下它们怎么这么快？网络甚至比回流还要慢。网速慢于一切。

标签： javascript

【解决方案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 中运行。

【讨论】：

只是想指出您可能需要使用window.addEventListener。 document.addEventListener 对我不起作用。

【解决方案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>

结果应该是这样的：

希望对你有帮助。

【讨论】：

【解决方案3】：

您可以监听两个 DOM 事件，DOMContentLoaded 和 load，并计算这两个事件被调度的时间差。

DOMContentLoaded 在 DOM 结构准备好时调度，但外部资源、图像、CSS 等可能还没有。

load 会在一切准备就绪后发送。

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

【讨论】：

我读过那篇文章，但有一件事让我印象深刻。要读取连接速度，JS 代码必须等待这两个事件的完成，但这不是 google 或 yahoo 所做的。它们在页面加载时检测速度，并向用户提示...
@Starx：正如文章中所说，内联 JavaScript 可以在文档加载时运行，在 DOMContentLoaded 被触发之前。
那你怎么看，应该是那些内联javascript？
@Startx：是的，那里绝对可行。只需一条短线即可记录当前时间。
但是，要记录这两个事件之间的时间，我们必须等待它们完成。或者我们可以在页面加载期间记录另一个事件。

【解决方案4】：

您可以通过下载一些您知道大小（很容易获得）的测试资源（图像会更合适）并测量下载它所花费的时间来获得连接速度。请记住，测试一次只会为您提供那一刻的连接速度。如果用户使用与图像测试并行的带宽，结果可能会不时变化。这会为您的应用提供可用的带宽，而这正是我们所需要的。

我在某处读到谷歌使用一些 1x1 网格像素图像来测试页面加载时的连接速度，它甚至向您显示类似“连接似乎很慢，尝试 HTML 版本”......或类似的东西。

这是描述相同技术的另一个链接 - http://www.ehow.com/how_5804819_detect-connection-speed-javascript.html

【讨论】：