目前，大多数流行的网站，如谷歌，雅虎检测如果用户连接速度慢，然后给予一个选项，以加载基本版本的网站，而不是高端的。有哪些方法可用于检测慢速Internet连接？我认为这是通过javascript实现的，所以我会把它标记为javascript问题？然而，我正在寻找更多面向PHP的答案，如果这也是服务器相关的话。
xnifntxz1#
您可以在<head>中的内联脚本块中执行start a timeout，一旦遇到它，就会立即运行。然后，当load事件触发时，您将执行cancel the timeout。如果触发超时，则页面加载缓慢。例如：
<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，因此在InternetExplorer 9之前的版本中是不起作用的。
liwlm1x92#
这是一个完整的实现，我刚刚完成了一个网站，我的工作。感觉像分享它。它使用一个cookie来消除消息（对于那些不介意网站需要很长时间加载的人）。消息将显示页面是否需要超过1秒的时间来加载。最好将其更改为大约5秒左右。下面的代码应该添加在<head>标签之后，因为它必须尽快加载，但不能出现在html或head标签之前，因为当脚本运行时，这些标签需要出现在DOM中。它都是内联代码，所以脚本和样式在任何其他外部文件（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's okay. } }); } </script>
结果应如下所示：
希望有帮助。
arknldoa3#
您可以侦听两个DOM事件DOMContentLoaded和load，并计算这两个事件被调度的时间差。DOMContentLoaded在DOM结构准备就绪时被调度，但外部资源、图像、CSS等可能未被调度。load在一切就绪时被调度。How Javascript Loading Works - DOMContentLoaded and OnLoad (Wayback Link)
DOMContentLoaded
czfnxgou4#
您可以通过下载一些测试资源来获得连接速度（图像更合适），您知道其大小（很容易获得），并测量下载所需的时间。请记住，测试一次只会给你当时的连接速度。如果用户使用的带宽与图像测试并行，结果可能会不时变化。这将为您的应用提供可用带宽，这正是我们所需要的。我读到谷歌做类似的伎俩使用一些1x 1网格像素图像测试连接速度在页面加载，它甚至显示你像'连接似乎很慢，尝试HTML版本'...或类似的东西.下面是描述相同技术的另一个链接-http://www.ehow.com/how_5804819_detect-connection-speed-javascript.html
2vuwiymt5#
较新的Network Information API在浏览器window.navigator.connection.effectiveTypewill return a string that is either 'slow-2g', '2g', '3g', or '4g'中提供了这些信息（以及更多信息）。下面是一个简单的方法，可以用来检测慢速连接：
window.navigator.connection.effectiveType
if (window.navigator.connection.effectiveType.endsWith("2g") { // user is on a 2g connection }
请注意，这是一个实验性的API，浏览器支持有限（在撰写本文时仅支持Chromium）。
5条答案
按热度按时间xnifntxz1#
您可以在
<head>中的内联脚本块中执行start a timeout，一旦遇到它，就会立即运行。然后，当load事件触发时，您将执行cancel the timeout。如果触发超时，则页面加载缓慢。例如：显然你会想用一些更有用的东西来代替这个警告，还要注意这个例子使用的是W3C/Netscape事件API，因此在InternetExplorer 9之前的版本中是不起作用的。
liwlm1x92#
这是一个完整的实现，我刚刚完成了一个网站，我的工作。感觉像分享它。它使用一个cookie来消除消息（对于那些不介意网站需要很长时间加载的人）。消息将显示页面是否需要超过1秒的时间来加载。最好将其更改为大约5秒左右。
下面的代码应该添加在
<head>标签之后，因为它必须尽快加载，但不能出现在html或head标签之前，因为当脚本运行时，这些标签需要出现在DOM中。它都是内联代码，所以脚本和样式在任何其他外部文件（css，js或images）之前加载。结果应如下所示：
希望有帮助。
arknldoa3#
您可以侦听两个DOM事件
DOMContentLoaded和load，并计算这两个事件被调度的时间差。DOMContentLoaded在DOM结构准备就绪时被调度，但外部资源、图像、CSS等可能未被调度。load在一切就绪时被调度。How Javascript Loading Works - DOMContentLoaded and OnLoad (Wayback Link)
czfnxgou4#
您可以通过下载一些测试资源来获得连接速度（图像更合适），您知道其大小（很容易获得），并测量下载所需的时间。请记住，测试一次只会给你当时的连接速度。如果用户使用的带宽与图像测试并行，结果可能会不时变化。这将为您的应用提供可用带宽，这正是我们所需要的。
我读到谷歌做类似的伎俩使用一些1x 1网格像素图像测试连接速度在页面加载，它甚至显示你像'连接似乎很慢，尝试HTML版本'...或类似的东西.
下面是描述相同技术的另一个链接-http://www.ehow.com/how_5804819_detect-connection-speed-javascript.html
2vuwiymt5#
较新的Network Information API在浏览器
window.navigator.connection.effectiveTypewill return a string that is either 'slow-2g', '2g', '3g', or '4g'中提供了这些信息（以及更多信息）。下面是一个简单的方法，可以用来检测慢速连接：请注意，这是一个实验性的API，浏览器支持有限（在撰写本文时仅支持Chromium）。