私のウェブサイトには、いくつかのページを除いて、すべてjQueryとJSON、および同じCSSを使用するページがいくつかあります。最初のページはユーザーログインです。ユーザーはユーザー名とパスワードの入力に時間がかかるため、ログイン時にユーザーセッション全体で必要なすべてのJavaScriptファイルとCSSファイルをダウンロードしたいと思います。これはどのように行うことができますか?ヘッダーはすべてのページで同じです。どうすれば最適化できますか?
4 に答える
私の考えは、 の後に 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
- ログインページにすべてのcss/javascriptを追加します。
- すべてのCSSをHEADセクションの上部に配置します。
- すべてのJavascriptを一番下に置きます。
また、JavascriptsとCSSは、(ページにインラインjavascriptとcssを書き込むのではなく)ブラウザーによってキャッシュされるため、外部ファイルとして作成します。
JavascriptとCSSを縮小する
更新2
JSとCSSのポストロードは、 YUIGETUTILITYを使用して実行することもできます。
詳細については、このYahoo:Webサイトを最適化するためのベストプラクティスを参照してください。
ログイン中にユーザー セッション全体に必要なすべての 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">
requireJSなどの非同期ローダーをお勧めします。
javascriptとcssを作成して圧縮したら、たとえばユーザーがユーザー名フィールドにフォーカスした場合などに、その読み込みをイベントに割り当てます。
Facebookは、先行入力クエリで同様のトリックを使用します。検索ボックスがフォーカスを取得したときに、ユーザーに関連するデータをロードします。