如何检测缓慢的互联网连接？
目前，大多数stream行的网站，如谷歌，雅虎检测，如果用户连接速度慢，然后给出一个选项，而不是高端的网站的基本版本加载。
有什么方法可以检测到缓慢的互联网连接？
PS我认为这是通过JavaScript实现的，所以我将它标记为JavaScript问题？ 但是，我正在寻找更多面向PHP的答案，如果这也是服务器相关的。
您可以在<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>
显然，你会想用一些更有用的东西来取代警报。 另请注意，该示例使用W3C / Netscape事件API，因此在版本9之前的Internet Explorer中将无法工作。
以下是我刚刚为我正在处理的网站完成的完整实施。 感觉就像分享它。 它使用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>
结果应该是这样的：
希望能帮助到你。
您可以侦听两个DOM事件， DOMContentLoaded和load ，并计算这两个事件分派的时间之间的差异。
当DOM结构准备就绪时， DOMContentLoaded被调度，但是外部资源，图片，CSS等等可能不是。
当一切准备就绪时，调度load 。
http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/
你可以通过下载一些testing资源（图像会更合适）来获得连接速度，这些testing资源的大小是你已知的（这很容易得到）并测量下载它所花费的时间。 请记住，testing一次只会给你在这个瞬间的连接速度。 如果用户使用平行于图像testing的带宽，结果可能会不时变化。 这会为您的应用带来可用的带宽，这正是我们需要的。
我在某处阅读谷歌做相似的伎俩，使用一些1×1网格像素图像来testing页面加载时的连接速度，它甚至会显示“连接似乎很慢，尝试HTML版本”或类似的东西。
这里是另一个链接描述相同的技术 – http://www.ehow.com/how_5804819_detect-connection-speed-javascript.html
