gpt4 book ai didi

cross-browser - 如何在后台预加载 JavaScript 和 CSS 文件,以便在用户进入主页时在浏览器缓存中准备好它们?

转载 作者:行者123 更新时间:2023-12-04 20:23:31 25 4
gpt4 key购买 nike

我想在登陆转换后从登陆页面预加载一个 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com