0
因此，每個請求21秒，snippet.json和圖像。我的小部件在42秒內加載。一致。這似乎很奇怪。API請求一致每個請求需要21秒
widget.js
<script type="text/javascript">
function fetchJSONFile(path, callback) {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
var data = JSON.parse(httpRequest.responseText);
if (callback) callback(data);
};
};
};
httpRequest.open('GET', path);
httpRequest.send();
}
// this requires the file and executes a callback with the parsed result once available
fetchJSONFile('http://ecorebox.com/companies/1/snippet.json', function(data){
// do what you do
var trees = data['trees'];
var water = data['water'];
var energy = data['electricity'];
var widget = document.createElement("div");
widget.id = 'erb_widget';
widget.style.width = "200px";
widget.style.height = "400px";
widget.style.font = '14px';
widget.style.src = "local('Oswald Light'), local('Oswald-Light'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff')";
widget.style.color = '#666';
widget.style.border = 'solid 1px #666';
var logo = document.createElement("div");
logo.id = 'erbw_logo';
logo.style.background = "url(http://ecorebox.com/assets/narrow_200px_logo.png) no-repeat";
logo.style.height = '29px';
logo.style.width = '109px';
logo.style.margin = '20px auto';
var txt = document.createElement("div");
txt.id = 'erbw_txt';
txt.style.font = 'bold 13px';
txt.style.margin = '5px';
var cs_trees = document.createElement("div");
cs_trees.id = 'erbw_cs_trees';
cs_trees.style.background = "url(http://ecorebox.com/assets/erbw_ico_tree.png) no-repeat";
cs_trees.style.height = '61px';
cs_trees.style.margin = '20px';
cs_trees.innerHTML = "<div style='margin: 12px auto auto 62px; font: 14px bold;'><span style='font: 22px bolder'>" + trees + "</span><br/>Trees Saved</div>";
var cs_water = document.createElement("div");
cs_water.id = 'erbw_cs_water';
cs_water.style.background = "url(http://ecorebox.com/assets/erbw_ico_water.png) no-repeat";
cs_water.style.height = '61px';
cs_water.style.margin = '20px';
cs_water.innerHTML = "<div style='margin: 12px auto auto 62px; font: 14px bold;'><span style='font: 22px bolder'>" + water + "</span><br/>Gallons of Water Conserved</div>";
var cs_energy = document.createElement("div");
cs_energy.id = 'erbw_cs_energy';
cs_energy.style.background = "url(http://ecorebox.com/assets/erbw_ico_energy.png) no-repeat";
cs_energy.style.height = '61px';
cs_energy.style.margin = '20px';
cs_energy.innerHTML = "<div style='margin: 12px auto auto 62px; font: 14px bold;'><span style='font: 22px bolder'>" + energy + "</span><br/>kWh Energy Saved</div>";
var footer = document.createElement("div");
footer.id = 'erbw_footer';
footer.style.font = 'bolder 14px';
footer.style.textAlign = 'center';
footer.style.padding = '10px';
footer.style.margin = '10px';
footer.innerHTML = "Learn more at<br/><a href='http://www.ecorebox.com' target='_blank'>www.ecorebox.com</a><br/>(877) REBOX IT";
// this appends the div to the site. will be different for each client
$('.content').append(widget);
document.getElementById('erb_widget').appendChild(logo);
document.getElementById('erb_widget').appendChild(txt);
document.getElementById('erb_widget').appendChild(cs_trees);
document.getElementById('erb_widget').appendChild(cs_water);
document.getElementById('erb_widget').appendChild(cs_energy);
document.getElementById('erb_widget').appendChild(footer);
});
</script>
要看到它在行動，檢查出http://alphabeticdesign.com/test - 生態REBOX是託管在Heroku上一個Rails應用程序。我不確定哪些代碼我不得不從那裏告訴你，因爲這是有道理的...讓我知道，我會把它拉起來。
響應時間通常與客戶端無關。您是否嘗試過使用Chrome開發人員工具聯網時間線來確定導致延遲的原因？ – adamb
Chrome開發工具告訴我這需要21秒。如果你直接進入'json'，那麼它就是瞬間的。 – Dudo
加載此頁面需要1.0x秒。不知道問題出在哪裏。 – kobaltz