情况是:
Javascript回旋镖.js用作客户端网速的测试,问题是html内容由浏览器执行,而不是等待回旋镖结果。但是回旋镖结果是必需的,因为 html 内容有一些变化。
怎么可能在回旋镖之前不执行html内容.js结果?
编辑:经过少量谷歌搜索,不可能阻止浏览器在javascript完成之前不加载html内容,因为回旋镖不会阻止此内容,即使我们在BOOMR.init中设置了autorun:false,然后通过BOOMR.page_ready()调用它。这是原生的JavaScript异步行为。
所以我们不能使用以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel='stylesheet' type='text/css' media='all' href='css/style.css' />
<link rel='stylesheet' type='text/css' media='all' href='css/colorbox.css' />
<script type="text/javascript" src="js/speedtest/boomerang.min.js"></script>
<script>
BOOMR.init({ beacon_url: "http://www.zzz.xx", user_ip: '10.0.0.1', site_domain: "http://www.zzz.xx", BW: { nruns: 3, base_url: 'http://www.zzz.xx/test_images/', cookie: 'SPEED-test'}});
</script>
<script type="text/javascript" src="js/preload.js"></script>
预加载.js只是检查cookie,如果存在,则不要再次进行测试,如果没有,则通过BOOMR.subscribe运行速度测试
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 "";
}
var version_set=getCookie("speedtest_version_set");
if (version_set == "low"){
$(document).ready(website_init_low);
} else if (version_set == "high"){
$(document).ready(website_init_high);
} else {
BOOMR.subscribe('before_beacon', function(o) {
if(o.bw) {
netspeed = Math.abs(parseInt(o.bw*8/1024));
var netspeed_limit = 5000;
if (netspeed < netspeed_limit) {
document.cookie="speedtest_version_set = low";
$(document).ready(website_init_low);
} else {
document.cookie="speedtest_version_set = high";
$(document).ready(website_init_high);
}
}
});
}
我们唯一能做的就是制作单独的索引.php文件,然后调用index_low.html或index_high.html,如下所示:
<?php
echo "<script type='text/javascript' src='js/speedtest/boomerang.min.js'></script>";
echo "<script type='text/javascript' src='js/speedtest/bw.js'></script>";
echo "<script type='text/javascript'>BOOMR.init({ beacon_url: 'xxx', user_ip: '10.0.0.1', site_domain: 'xxxxxx', autorun: false, BW: { nruns: 3, base_url: 'js/speedtest/test_images/', cookie: 'xxxxx'}})</script>";
echo "<script type='text/javascript'>
function getCookie(cname) //read cookie by javascript
{
var name = cname + '=';
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
if(typeof String.prototype.trim !== 'function') { //IE bug fix -IE not support trim();
String.prototype.trim = function() {
return this.replace(/^s+|s+$/g, '');
}
}
var c = ca[i].trim(); //IE bug fix -IE not support trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return '';
}
var netspeed;
var netspeed_limit = 5000;
var version_set=getCookie('speedtest_version_set');
if (version_set == 'low'){
window.location = 'index_low.html'
} else if (version_set == 'high'){
window.location = 'index_hight.html'
} else{
BOOMR.page_ready(); //fire BOOMR only from this place
BOOMR.subscribe('before_beacon', function(o) {
if(o.bw) {
netspeed = Math.abs(parseInt(o.bw*8/1024));
if (netspeed < netspeed_limit) {
document.cookie='speedtest_version_set = low';
window.location = 'index_low.html'
} else {
document.cookie='speedtest_version_set = high';
window.location = 'index_high.html'
}
}
});
}
</script>";
?>
当然,更好的做法是在PHP中通过$_COOKIE变量检查cookie,而不是通过javascript。
在回旋镖问题页面上得到了回答:https://github.com/lognormal/boomerang/issues/27