2

モジュールで拡張可能な大規模なプロジェクトに取り組んでいます。すべてのモジュールには、1 つのページ、このモジュールを使用する複数のページ、またはグローバル拡張の場合はすべてのページでのみ必要な独自の javascript ファイルを含めることができます。

現在、すべての .js ファイルが更新されるか、新しいモジュールがインストールされるたびに、すべての .js ファイルを 1 つのファイルに結合しています。クライアントは 1 つの「大きな」.js ファイルをロードするだけで済みますが、ページごとに解析する必要があります。誰かが多くのモジュールをインストールし、.js ファイルが 1MB から 2MB に成長したと仮定しましょう。このルートを継続することは理にかなっていますか、それとも必要なときにすべての .js を含める必要がありますか。

これにより、ページごとにおそらく 10 ～ 15 個の HTTP リクエストが増えることになります。同時に、.js ファイルの解析時間は短縮されます。これは、ページごとに小さな部分をロードするだけでよいためです。同時に、ブラウザーは、現在のページに必要ではない、または実行することさえできない js コードを実行しようとしません。

多くのコードを書き直さなければならないため、両方のシナリオを比較するのはかなり困難です。続行する前に、誰かが同様の問題に遭遇したかどうか、またどのように解決したかを知りたいです。私の最大の懸念は、js ファイルの解析時間が長くなりすぎることです。通常、ネットワーク遅延が最大の懸念事項ですが、これほど多くの可能なモジュール/拡張機能 -> js ファイルに対処する必要はありませんでした。

4

2 に答える 2

1

これらの 2 つの条件が true の場合、要件 (下記) を実行する限り、どちらの道をたどっても問題ありません。

条件 1: JavaScript ファイルは標準ブラウザ内で実行されています。つまり、Apple ios uiWebView アプリ (html5 iphone/ipad アプリ) 内では実行されません。

条件 2: 最初のページ読み込み時間はそれほど重要ではありません。つまり、これは Web ページというよりも Web アプリケーションに近いものです。そのため、ユーザーは毎日ログインし、長時間ログインしたままで、多くのことを行います...ログアウト...次の日に戻ってきます...

要件：

JavaScript ファイル、css ファイル、およびすべての画像を Web サーバーの /cache ディレクトリに配置します。ヘッダーで 1 年の max-age を送信するように Web サーバーに指示します (このディレクトリとサブディレクトリのみ)。ブラウザがファイルをダウンロードすると、最新バージョンがあるかどうかを確認する Web サーバーへのラウンド トリップが無駄になることはありません。

次に、JavaScript のバージョン管理を実装する必要があります。通常、これは、js の include 行に「?jsver=1」を追加することによって行われます。次に、変更ごとにバージョンを増やします。

chrome インスペクタを使用して、これが正しく設定されていることを確認してください。最初の要求の後、ブラウザーは Etag を送信したり、Web サーバーにファイルを要求したりすることは 1 年間ありません。(ハード リロードはファイルを再度ダウンロードします...そのため、リンクと、ユーザーが通常使用する標準的なナビゲーション パスを使用してテストします。また、Web サーバー ログを監視して、どの要求が切断されているかを確認します。

優れたブラウザは JavaScript をマシン コードにコンパイルし、コンパイルされたコードはブラウザのキャッシュで実行を待機します。そのため、条件 1 が重要です。現在、js コードを JIT コンパイルしない唯一のブラウザーは、Apple アプリ内で html/js を実行している (そしてアプリがアプリ ストアからダウンロードされている) 場合にのみ発生する uiWebView 内の Apple Safari です。

これが理にかなっていることを願っています。私はこれらのことを行い、ネットワークの往復を大幅に減らしました。Etags と、ブラウザが現在のバージョンの js/css/images を使用しているかどうかを判断するためにどのように往復するかを調べてください。

一方、Web サイトを構築していて、初めての訪問者向けに最適化したい場合は、少ないほうがよいでしょう。最初のページ ビューに絶対に必要なものだけをブラウザーにダウンロードさせます。

于 2013-08-05T01:29:39.317 に答える
0

オンデマンド JavaScript を使用する必要があります。ユーザーの 90% が使用するものだけをロードします。ほとんどの人が使用しないものについては、別々に保管し、必要に応じてロードします。また、圧縮後の JavaScript のサイズが 2 メガバイトを超える場合は、何をしているのかを真剣に再考する必要があります。

function ondemand(url,f,exe)
{
 if (eval('typeof ' + f)=='function') {eval(f+'();');}
 else
 {
  var h = document.getElementsByTagName('head')[0];
  var js = document.createElement('script');
  js.setAttribute('defer','defer');
  js.setAttribute('src','scripts/'+url+'.js');
  js.setAttribute('type',document.getElementsByTagName('script')[0].getAttribute('type'));
  h.appendChild(js);
  ondemand_poll(f,0,exe);
  h.appendChild(document.createTextNode('\n'));
 }
}


function ondemand_poll(f,i,exe)
{
 if (i<200) {setTimeout(function() {if (eval('typeof ' + f)=='function') {if (exe==1) {eval(f+'();');}} else {i++; ondemand_poll(f,i,exe);}},50);}
 else {alert('Error: could not load \''+f+'\', certain features on this page may not work as intended.\n\nReloading the page may correct the problem, if it does not check your internet connection.');}
}

使用例: load example.js(最初のパラメーター)、関数のポーリングexample_init1()(2 番目のパラメーター)、および1(3 番目のパラメーター) は、ポーリングが見つかったらその関数を実行することを意味します...

function example() {ondemand('example','example_init1',1);}
于 2013-08-04T18:47:34.960 に答える