12

私のウェブサイトには、いくつかのページを除いて、すべてjQueryとJSON、および同じCSSを使用するページがいくつかあります。最初のページはユーザーログインです。ユーザーはユーザー名とパスワードの入力に時間がかかるため、ログイン時にユーザーセッション全体で必要なすべてのJavaScriptファイルとCSSファイルをダウンロードしたいと思います。これはどのように行うことができますか？ヘッダーはすべてのページで同じです。どうすれば最適化できますか？

4

4 に答える 4

15

私の考えは、 の後に js および css ファイルを動的にロードすることですdocument.load。これは、ログイン ページの読み込み時間には影響しませんが、ユーザーがログインすると、js ファイルと css ファイルもキャッシュされます。

document.ready読み込みが速い場合は、これを簡単に変更することもできます。

このようなものはどうですか？

$(document).load(function() {
    function preloadFile(filename, filetype){

        //For javascript files
        if (filetype=="js"){
            var fileref=document.createElement('script');
            fileref.setAttribute("type","text/javascript");
            fileref.setAttribute("src", filename);
        }

        //For CSS files
        else if (filetype=="css") {
            var fileref=document.createElement("link");
            fileref.setAttribute("rel", "stylesheet");
            fileref.setAttribute("type", "text/css");
            fileref.setAttribute("href", filename);
        }

        document.getElementsByTagName("head")[0].appendChild(fileref)
    }

    //Examples of how to use below
    preloadFile("myscript.js", "js"); 
    preloadFile("javascript.php", "js");
    preloadFile("mystyle.css", "css");
});

参考文献

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

于 2012-07-31T08:31:41.697 に答える
6
  • ログインページにすべてのcss/javascriptを追加します。
  • すべてのCSSをHEADセクションの上部に配置します。
  • すべてのJavascriptを一番下に置きます。

  • また、JavascriptsとCSSは、（ページにインラインjavascriptとcssを書き込むのではなく）ブラウザーによってキャッシュされるため、外部ファイルとして作成します。

  • JavascriptとCSSを縮小する

更新2

JSとCSSのポストロードは、 YUIGETUTILITYを使用して実行することもできます。

詳細については、このYahoo：Webサイトを最適化するためのベストプラクティスを参照してください。

于 2012-07-31T08:28:53.477 に答える
3

ログイン中にユーザー セッション全体に必要なすべての JavaScript ファイルと CSS ファイルをダウンロードしたい

<title>Login</title>
<script src="foo.js"></script> <!-- This line might be better placed just before </body> -->
<link rel="stylesheet" type="text/css" href="foo.css">
于 2012-07-31T08:25:13.210 に答える
2

requireJSなどの非同期ローダーをお勧めします。

javascriptとcssを作成して圧縮したら、たとえばユーザーがユーザー名フィールドにフォーカスした場合などに、その読み込みをイベントに割り当てます。

Facebookは、先行入力クエリで同様のトリックを使用します。検索ボックスがフォーカスを取得したときに、ユーザーに関連するデータをロードします。

于 2012-07-31T08:34:16.000 に答える