6

約 27 MB の JavaScript ファイル、はい 27 MB の JavaScript ファイルがある (Web サーバーではなく) WebKit モバイル ブラウザーでローカルに実行する Web ページがあります。これは、.js ファイル内にカスタムの JSON オブジェクトと配列をハードコーディングしているためです。

完全な JS コンテンツを約 1 MB の 27 個の小さな .js ファイルに分割しました。

問題は、ヘッダー内にこれらの .js ファイルを含めると、ページの読み込み時間が非常に長くなることです。

jsファイルが必要な場合など、ページの読み込み時間を短縮するにはどうすればよいか教えてください。

1) ページが初めてロードされた後、HTML 内に .js ファイルを挿入する方法はありますか? (JavaScript コンテンツは、ページ上でリンクをクリックした後にのみ表示されるため)

2) Web ページ内にこのような大きな JavaScript コンテンツを含めるための最適なソリューションは何でしょうか? ファイルサイズを可能な限り小さくするために、すべてのjsファイルを縮小しました!

前もって感謝します。

更新 1:

ページはローカルで実行され、WEB サーバーは関与しません。最後に、モバイル ブラウザ内で実行されるため、すべての問題が発生しました。つまり、モバイル ブラウザではロード タイミングが非常に高いため、初期ロード時間を短縮したいと考えています。

4

6 に答える 6

6

(注: 以下のほとんどは、Web サーバーを使用せずに HTML ファイルをモバイル ブラウザーでローカルに実行しているとわざわざ言う前に書かれたものです。実際にウェブページを作成している他の人のために残しました。)

1) ページが初めてロードされた後、HTML 内に .js ファイルを挿入する方法はありますか?

はい、実際にはとても簡単です (実際の例: run / edit ):

var script = document.createElement('script');
script.src = "path/to/the/file.js";
document.body.appendChild(script);

appendChildスクリプトは非同期で読み込まれることに注意してください (呼び出し後に読み込まれるとは限りません)。

scriptただし、27MB のファイルをダウンロードしている間にページを表示することが目標である場合は、タグをページの最後、終了タグの直前に置くことができます</body>。更新: Web ページではなく、ローカルの HTML ファイルを実行している場合は、これで十分だと思います。ページの最後にある単一のスクリプト タグで、27 MB の .js ファイルをロードします。

2) Web ページ内にこのような大きな JavaScript コンテンツを含めるための最適なソリューションは何でしょうか?

理想的には、可能であればサイズを小さくしてください。アセットを必要に応じてデマンドロードできる場合 (上記の手法またはajaxを使用)、代わりにそれを実行してください。更新: Web ページではなくローカル ファイルを実行している場合、基本的に ajax を確実に実行することはできません。scriptただし、上記のように要素を追加することで、必要なときに必要なものをデマンドロードできます。

27 個の 1MB .js ファイルについて:scriptそれらのタグをハードコードする場合、27 個の 1MB ファイルよりも 1 つの 27MB ファイルを作成する方がはるかに優れています。サーバーへの HTTP リクエストを最小限に抑えること (理想的には、多くても .js ファイルと 1 つの .css ファイル) は、ページの読み込み時間を改善するための重要な方法の 1 つです。ただし、あなたの場合、さまざまなものがクリックされるまでさまざまな部分は必要ないと言ったので、おそらくメインファイル（できれば27MBよりもはるかに小さい）になり、その後たくさんの必要に応じて（上記のように）ロードを要求するその他のもの。

他にできること:

  • .jsファイルを縮小、圧縮、または「コンパイル」します (通常、これはコメントなどを削除する一方向のプロセスであるため、「ソース」ファイルと「実稼働」ファイルが別々になることを意味します)。
  • サーバーが gzip 圧縮を使用して .js ファイルを提供していることを確認します (たとえば、Apache ではmod_deflateを使用します)。さまざまな ツールで動作することをテストできます

また、非常に読む価値があります:ウェブサイトを高速化するためのベスト プラクティス。これにより、上記のポイントがさらに多くなります。

于 2011-11-10T10:29:05.977 に答える
1

27MB では、デバイスのメモリ制限に達するため、常に遅くなります。

ほとんどのモバイルには大量の RAM がなく、JSON を読み込んで解析すると、27 MB 以上を使用することになります。

縮小化は役に立ちますが、ブラウザーがまだ解凍する必要があるため、gzip は役に立ちません)。

ユーザーのアクションに応じて HTML をレンダリングするだけなら、JSON の代わりに HTML フラグメントを作成し、それらをフェッチして、誰かがリンクをクリックしたときに DOM に挿入してみませんか?

于 2011-11-10T15:44:14.420 に答える
1

その *.js ファイルを 1 つに再度結合する必要があります。これにより、時間のかかるサーバー リクエストが削減されます。

JavaScript コンテンツを次のツールで圧縮します: http://www.refresh-sf.com/yui/またはhttp://closure-compiler.appspot.com/home

また、js ファイルをクライアント ブラウザにダウンロードしている間にページをレンダリングできるようにするには、そのファイルをページ フッターに配置する必要があります。

役立つもう 1 つのことは、ファイルの長時間のキャッシュです。これにより、JavaScript がクライアントの Web ブラウザーのキャッシュに「保存」され、次回は再ダウンロードする必要がなくなります。

最後に、それが役立つかどうかは 100% 確信が持てませんが、JavaScript の遅延読み込みを試してみてください。

Lazy Laod の編集

<script type="text/javascript">

    (
        function()
        {
            var sc = document.createElement('script');
            sc.type = 'text/javascript';
            sc.async = true;
            sc.src = 'http://www.url-to-your-javascript.file/my-javascript.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(sc,s);
        }
    )();

</script>

別の役立つ情報源

http://gtmetrix.com/dashboard.html

Web サイトの速度をテストします。これは、Web サイトの速度を最適化する方法を見つけるのに役立ちます :)

于 2011-11-10T10:32:51.357 に答える
0

ベストプラクティスとして、常にjavascriptを下部のohhtmlファイルにロードする必要があります。cssを上に置き、jsを下に置くと非常に役立ちます。

27MBは大きすぎます。なぜjsでハードコードを使用しているのですか。ajaxを使用できます。専門家の助けを借りてください、彼はあなたのjsを最小化できるかもしれません

于 2011-11-10T10:35:14.857 に答える
0

ハイブリッド（HTML5）テクノロジーを使用するのではなく、モバイルデバイス用のネイティブアプリケーションを作成することで、この問題を最終的に解決しました。つまり、実際のアプリデータを含む27 MBのJSファイルをsqliteファイルに移動し、それを直接使用しました私のAndroidアプリ。

于 2012-09-26T04:59:22.230 に答える
0

ページの読み込み後に ajax でデータを読み込みます。つまり、ページを読み込んだ後、27MB のデータに対して非同期要求を行います。これにより、データの転送中に最終的にロード アニメーションを追加することもできます。これを実装するには、jquery を参照してください。

于 2011-11-10T10:32:19.607 に答える