我想在登陆转换后从登陆页面预加载一个 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 brigde)在着陆最终加载时发出信号。但是之前的代码必须也能正常工作。当加载页面 事件由浏览器触发，此函数将执行先前的 onLoad 代码和预加载。
我将一个空的 div cointainer 放在将加载 iframe 的位置。
<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>
您可以看到工作解决方案 here .
使用 Firebug 查看该组件的延迟加载。
关于cross-browser - 如何在后台预加载 JavaScript 和 CSS 文件，以便在用户进入主页时在浏览器缓存中准备好它们？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3627981/