如何检测慢速互联网连接？
目前,大多数流行的网站,如谷歌,雅虎检测用户连接速度是否缓慢,然后给出一个选项来加载网站的基本版本而不是高端版本.
有哪些方法可以检测慢速互联网连接？
PS我认为这是通过javascript实现的,所以我会将其标记为javascript问题？但是,我正在寻找更多针对PHP的答案,如果这也是服务器相关的.
Sam*_*nes 69
您可以在内联脚本块中启动超时,<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中无法使用.
Jul*_*lle 11
这是我刚刚为我正在开发的网站完成的完整实现.感觉像分享它.它使用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>
结果应如下所示:
希望能帮助到你.
您可以侦听两个DOM事件DOMContentLoaded和load，并计算这两个事件被分派的时间之间的差。
DOMContentLoaded 在DOM结构准备就绪时分派，但外部资源，图像，CSS等可能没有。
load 一切准备就绪时分派。
http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/