15

クロムで、画像をbase64文字列としてロードし、ページのその部分をスクロールすると速度が低下することに気付きました。

また、Javascript を含むタブから移動してからそのタブに戻ると、V8 が js を再コンパイルしているかのように数秒間遅くなることにも気付きました。

考えられる3つのオプションがありますが、どれが最適かはわかりません。

  1. 小さな読み込みページを最初に読み込み、その後の読み込みを雄弁に処理する
  2. すべてを含む1つの巨大なjsまたはcssファイルをロードします（jquery + my code + etc）
  3. 特定のコードをまとめます (jquery cdn を使用しますが、コードをグループ化します)

js を可能な限り迅速かつ雄弁にロードするための最良の方法は何ですか?

4

5 に答える 5

14

一般に、より多くのファイルをロードすると、それらを結合して少数のファイルにするよりも HTTP でのオーバーヘッドが大きくなります。あらゆる種類のコンテンツのファイルを結合する方法があります。

于 2013-02-23T17:27:15.837 に答える
8

これには保証された解決策を持たせるにはあまりにも多くの可能性がありますが、ここに行きます：

1) 上部に CSS をロードします。複数のページを持つサイトを作成している場合は、そこにすべてをロードします。1 ページのアプリケーション (ギャラリー、Twitter フィード、記事などを同じページで実行し、さまざまなセクションを開いたり閉じたりできる) を構築している場合は、ウィジェット固有の CSS の読み込みを検討できます。ウィジェットをロードしている時間 (起動時に必要でない場合)。

CSS をすばやくロードしたい場合は、CSS で @import を使用しないでください (使用します)。

2) JS の大部分をページの下部にロードします。
DOM の準備ができた後、遅延ロードできないもの、または少なくともページの下部で初期化できないものは実質的に何もありません。ページを参照し、それらへの依存を減らすためにどのように書き直すかを検討してください。

3) タイマーには注意してください -- 特に setInterval... ...管理が不十分なタイマーを使用すると、ページのパフォーマンスが大幅に低下する可能性があります。

4) ウィンドウのスクロール、サイズ変更、マウスの移動、キーダウンなどのイベント ハンドラーにはさらに注意してください。これらは 1 秒間に何度も起動するので、それらに依存する手の込んだプログラムを作成した場合は、プログラムの起動方法を再考する必要があります (つまり、ハンドラがオフになるたびにプログラムを実行しないでください)。

5) JS ファイルの提供はトレードオフです: JS のコンパイルには時間がかかります。したがって、1 つのファイルに 40,000 行をロードしている場合、ブラウザーはそのすべてをコンパイルするため、しばらくの間停止します。
18 の個別のファイルを提供する場合、18 の異なるサーバー呼び出しを行う必要があります。
それもかっこよくない。

したがって、適切なバランスは、そのページに必要になることがわかっているファイルを連結してから、ページでオプションであるすべてのもの (コメントを追加するためのウィジェット、またはライトボックス ウィジェットなど) を遅延ロードすることです。 .
そして、すべての主要な製品が起動して実行された後にそれらを遅延ロードするか、可能な限り最後の 1 秒でロードします (ユーザーが「コメントを追加」ボタンを押したときなど)。

アプリに 40,000 行をロードする必要がある場合は、開始したらすぐにヒットを取得するか、各行をロードできる順序を決定し、「ロード」インジケーターを提供します (これは遅延ロードで行う必要があります)。各ウィジェットの準備が整うまで (一度に 1 つずつ JS をロードします)。

これらは、一般的なパフォーマンスの問題を回避するためのガイドラインです。
目の前にサイトがある場合でも、具体的なことは答えにくいです。プロファイリング情報とネットワーク パフォーマンス、レンダリング パフォーマンスなどには、Chrome 開発コンソールを使用します。

于 2013-02-23T17:45:12.430 に答える
2

連結と呼ばれる非常に人気のある概念があります。アイデアは、サーバーへの HTTP リクエストをできるだけ少なくすることです。各要求は DNS ルックアップが発生する新しい接続を意味するため、ハンドシェイクがネゴシエートされ、さらにいくつかのプロトコルベースの手順の後、サーバーは要求されたファイルを応答として送信します。

パフォーマンスのベスト プラクティスのリストについては、http-archiveを確認してください。

そうです、すべての JS ファイルを 1 つに結合する必要があります (先頭の js とフッターの js など、特定の例外があります)。

これは、質問のタイトルとポイント 2 と 3 に対する回答です。

他の部分については、あなたが話しているシナリオについて明確ではありません。

于 2013-02-23T17:25:34.240 に答える
1

私は最近同じ問題を抱えていたので、これを行うために JS ライブラリ (MIT ライセンス) を開発してリリースしました。基本的に、すべてのもの (js、画像、css ...) を標準の tar アーカイブ (サーバー側で作成できます) に入れることができ、ライブラリはそれを読み取り、ファイルを簡単に使用できるようにします。

ここにあります：https://github.com/sebcap26/FileLoader.js

最近のすべてのブラウザーと IE >= 10 で動作します。

于 2013-12-26T10:51:25.913 に答える
0

ロードするファイルの数は、サイト全体のロード速度に影響します。Web サイトを適切に表示するために必要なすべての機能を 1 つの JavaScript ファイルにまとめることをお勧めします。

于 2013-02-23T17:31:18.210 に答える