5

我想在登陆转换后从登陆页面预加载一个 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 缓存这些请求吗？

4

3 回答 3

3

这是在大容量站点中经过测试的解决方案。

首先，为了避免登录页面资源和带宽的预加载资源之间的竞争，您可以使用 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 硬币容器将拥有 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 查看此组件的延迟加载。

于 2012-01-29T13:52:52.953 回答
2

随意的想法：

也许你可以在你的登陆页面中包含一个隐藏的 IFrame，它加载一个除了包含你的 javascript 和 CSS 文件之外什么都不做的页面。如果您在 javascript 中触发该 IFrame 的加载，则它不应阻止登录页面的加载或呈现，但浏览器将像加载任何其他页面一样加载脚本和 css 文件。

于 2010-09-02T14:42:51.603 回答
0

没有尝试过，但是将其添加到着陆 HTML 的底部应该可以：

<!-- Preload -->
<img src="/path/to/preload.js" style="display:none">
<img src="/path/to/preload.css" style="display:none">

浏览器实际上并不关心资源不是图像，它无论如何都应该获取和缓存它们。浏览器通常按页面顺序加载资源，因此您不会延迟其他元素，并且display:none您可能也不会阻止渲染。

缺点是您不会预加载 CSS 中定义的图像，或者@imports除非您手动预加载它们。

于 2012-01-28T10:53:15.877 回答