最適化の問題があります。私のサイトでは 2 つの (かなり大きな) JavaScript リソースを使用しています。
- application.js (最小化された jquery、jquery-ui、underscore-js、および一部の共有スクリプト、合計 120KB)
- コントローラー固有のファイル (ページ + インタラクションに必要ないくつかのモジュール、合計 4KB)
JavaScript でマークアップをフォーマット/変換するビューにいくつかのスクリプトがあるため (jQuery とコントローラー固有の JS コードの両方に依存)、$(document).ready または head.ready のいずれかを待つ必要があり、それはスタイル設定されていないコンテンツのフラッシュを防ぐためにウェブサイトを非表示にします :(
ここで私の質問があります: head.js を使用する必要がありますか、それとも「前の」スクリプトに固執する必要がありますか? この場合、ページの読み込み時間を短縮するスマートな方法はありますか?
更新: コードの一部は次のとおりです (完全なコード、ランディング ページについては、vsio.com を参照してください)。
<html>
<head>
... usual stuff
<link (css stuff) />
<script src="head.js"></script>
<script>
// Here some global variables are set like cache keys, actual locale code etc., not dependable on jQuery or any other JS code from the JS assets
</script>
</head>
<body>
... page content
<div id="search">!-- here some code with the "display: none" style to prevent flash of unstyled content</div>
<script>
// Here is code that positions and processes some styles and adds some interactions to the #search div
Application.Position.In.Center($(#search), $(document));
</script>
... more page content
... another "display: none" div and accompanying script
... rest of the page content
<script type="text/javascript">head.js( { 'application': 'application.js' }, { 'landing': 'landing.js' } );</script>
</body>
</html>