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

これは、動作する大量のサイトでテストされたソリューションです。

まず、ランディングページのリソースとbandwithのプリロードされたリソースとの競合を避けるために、javascriptを使用してロードを遅らせることができます。

var prevOnLoad=window.onload;
function onLoadPreloadComponents() {
    if(prevOnLoad) {
        try{
           prevOnLoad();
        }catch(err){
        }
    }
    preloadSiteComponents();
}

window.onload=onLoadPreloadComponents;

私のユースケースでは、着陸が最終的にロードされたときにフラッシュイベント（Flash to JS brigdeを使用）が通知するため、これは私がこれを解決した方法ではありません。ただし、前のコードも同様に機能する必要があります。ブラウザによってページの読み込みイベントが発生すると、この関数は以前の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>

ここに、プリロードしたいコンポーネントへのリンクが表示されます。最後に、divcointainerは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 に答える