Jon*_*ero 5 xmlhttprequest cross-browser web-optimization preload browser-cache
我希望从登陆页面预加载JS文件和CSS文件,以便在着陆转换后优化主站点负载.我正在寻找有关这方面的信息,最后尝试使用以下方法完成此操作:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'jsUrl');
xhr.send('');
xhr = new XMLHttpRequest();
xhr.open('GET', 'cssUrl');
xhr.send('');
使用Firefox这很棒,但使用Chrome时,似乎XHR调用缓存在与css和js文件不同的缓存中.我们不使用JQuery,登陆页面必须是轻量级的(负载更少,转换率更高).
您是否有其他方法可以解决原始问题？(预加载组件)
您知道如何让Chrome缓存这些请求吗？
这是一个在大容量站点中经过测试且有效的解决方案。
首先，为了避免登陆页面资源和预加载带宽资源之间的竞争，您可以使用 javascript 延迟加载：
var prevOnLoad=window.onload;
function onLoadPreloadComponents() {
if(prevOnLoad) {
try{
prevOnLoad();
}catch(err){
}
}
preloadSiteComponents();
}
window.onload=onLoadPreloadComponents;
这不是我解决这个问题的方法，因为在我的用例中，当最终加载着陆时，Flash 事件（使用 Flash 到 JS 桥）会发出信号。但之前的代码也必须能够正常工作。当浏览器触发加载页面事件时，此函数将执行之前的 onLoad 代码和预加载。
我在将加载 iframe 的地方放置了一个空的 div 硬币容器。
<div id="mainSiteComponentsContainer" style="display: none;">
</div>
其功能代码为：
function preloadSiteComponents() {
try{
document.getElementById('mainSiteComponentsContainer')
.innerHTML=
"<iframe src=\"http://www-components.renxo-cdn.net/preload-site-components-data-url-scheme-version-1.2.84-css-1.0.53.html\" frameborder=\"no\" height=\"0px\" width=\"0px\"></iframe>";
}catch(err) {
}
}
正如您所看到的，iframe 的链接 url 是动态的，它在不同的平台版本（不同的部署）之间变化，以避免新部署产生不需要的浏览器缓存。
iframe 中的 HTML 可能是这样的（例如）：
<html class=" gecko win js" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="noindex,nofollow" name="robots">
<script src="http://www-components.renxo-cdn.net/scripts/lib-1.2.84.js" type="text/javascript">
<link href="http://www-components.renxo-cdn.net/styles/skin-data-url-scheme-1.0.53.css" media="all" type="text/css" rel="stylesheet">
</head>
<body> </body>
</html>
在这里您可以看到我想要预加载的组件的链接。最后，div cointainer 将具有 iframe。onLoad 事件之后：
<div id="mainSiteComponentsContainer" style="display: none;">
<iframe width="0px" height="0px" frameborder="no" src="http://www-components.renxo-cdn.net/preload-site-components-data-url-scheme-version-1.2.84-css-1.0.53.html">
<html class=" gecko win js" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="noindex,nofollow" name="robots">
<script src="http://www-components.renxo-cdn.net/scripts/lib-1.2.84.js" type="text/javascript">
<link href="http://www-components.renxo-cdn.net/styles/skin-data-url-scheme-1.0.53.css" media="all" type="text/css" rel="stylesheet">
</head>
<body> </body>
</html>
</iframe>
</div>
您可以在此处查看有效的解决方案。
使用Firebug查看该组件的延迟加载情况。
| 归档时间： |
|
| 查看次数： |
3436 次 |
| 最近记录： |