WEB フロントエンド最適化に関する経験のヒント_html/css_WEB-ITnose

引用:

1. ページが遅いと、Web サイトのユーザーが失われる可能性があります。

2. 500 ミリ秒の遅さは、ユーザーの 20% が (Google) へのアクセスを放棄することを意味します

3. 100 ミリ秒の遅さ。ユーザーの 1% がトランザクションを放棄することを意味します (amazon)

少し前に、フロントエンドの最適化に関する 2 つの記事を偶然目にしました。これらのテクニックのほとんどは Yahoo の最適化原則から来ています。以下にその抜粋と要約を示します。 2つの記事のうち。

HTTP リクエストを減らす

一般的に、データは変動性の観点から変化するデータと変化しないデータの 2 つのタイプに分けられ、変化しないデータはキャッシュでき、変化するデータはキャッシュされません。これは常識、つまり目標です。 http リクエストの数を減らすということは、データを変更部分と変更しない部分に分割することに変換できるため、変更されないデータは再度リクエストする必要がないため、以下でデータを説明します。分類の方法

1. ファイルを結合する

スクリプト、スタイル ファイル、画像を選択的に 1 つのファイルに結合でき、一部の画像は CSS スプライト テクノロジーを使用できます。その理由は何でしょうか? Web 開発を行ったことがある人なら、js と css は基本的に変更されず、画像と同様に静的ファイルであることを知っています。では、変更されていないファイルが適切にマージされた場合、どのような効果があるでしょうか?リクエスト数が複数回から 1 回に変わるため、http リクエストの数が削減されます。結合後、ファイル サイズは大きくなりましたが、速度に影響はありますか? 回答: 確かに、ここにはトレードオフがあります。たとえば、100 個の静的ファイルを 10 個のコピーに結合するかどうかは、ユーザー次第です。具体的な状況。

2. Expires または Cache-Control を指定します。
静的コンテンツの場合: ファイル ヘッダーの有効期限の値を「Never Expires」 (期限切れになりません) に設定します。
動的ページの場合、コードにキャッシュ コントロールを追加して時間を指定します。期限切れになります。例:
response.setHeader("Cache-Control", "max-age=3600");
Expires ファイル ヘッダーを使用する場合、ページ コンテンツの更新時にコンテンツのファイル名を変更する必要があります。変化します。通常、バージョン番号はファイルの内容の後に追加されます
この点は、多くの人が以前にフォーラムで独自の小さなシステムやデモを公開して、駆け寄って見てみました。これらの js と css は適切にマージされておらず、有効期限も設定されていないため、ページを更新するたびに大量の http リクエストが必要になります。

これは、エンタープライズ アプリケーション システムでも時々発生します。たとえば、ページが開かれるたびに 400k を超える extjs がインポートされ、ダウンロードされます。この JS は十分に退屈です。それでは、静的ファイルに Apache や lighttpd などを使用しないのかと尋ねる必要があるかもしれません。Expiry や max-age を設定しない場合はどうなるでしょうか。最善の方法は、フィルターを作成し、URL が特定の条件 (構成ファイル内の正規表現と一致するなど) を満たしているかどうかを判断し、max-age を設定することです。それはとても簡単です。わずか数行のコードで実行できます。

3. Ajax リクエストのキャッシュ方法は、get メソッドを使用する必要があります。 URL の長さは 2k (ie) に制限されています (post リクエストには 2 つのプロセスがあり、1 つはリクエスト ヘッダーの送信、2 つはリクエスト データの送信です。http 仕様によると、get リクエストは A tcp パッケージのみを送信します)。 ----この段落は Yahoo からのものです。それが真実かどうかに関係なく、なぜ get メソッドを使用するのが最適なのかを別の側面から考えてみましょう。ahuaxuan が以前に経験したことについて話しましょう。 post メソッドを使用していましたが、後でエラーが頻繁に発生し、Squid エラーがスローされることが判明しました。私たちの Web サイトは Squid を使用しているため、問題はここにあります。http プロトコルから、method=post はサーバーへのデータの送信を参照していることがわかります。 Squid の特徴は、post リクエストをキャッシュしないことです (実際には、http プロトコルのセマンティクスに違反するため、実際にはキャッシュすべきではありません)。ajax リクエストを get メソッドに変更すると、すべてがキャッシュされます。いつものように復元しました

4. 重複した js を削除します

重複した js インポートにより、IE がスクリプトを再読み込みする可能性もあります。

5. リダイレクトを避ける

Web 開発者によって無視されることが多いジャンプ現象がありますが、応答時間が無駄になることがよくあります。この現象は、URL にスラッシュ (/) が必要であるにもかかわらず無視された場合に発生します。このとき、301 ステータス コードが返され、ブラウザはリクエストを再開始します。エンタープライズ アプリケーションでは、リダイレクトは一般的に使用されるテクノロジですが、Web サイト プロジェクトで使用する場合は注意が必要です。通常、リダイレクトは、サーバーが応答ヘッダーで http status=302 を設定するため、それを受信すると、それが 302 であると判断し、ターゲット アドレスは以前の応答で指定されたアドレスを再送信します。 Web サイトのプロジェクトでは、リダイレクトが必要ない場合は使用しないでください。エンタープライズ アプリケーションのプロジェクトを実行している場合は、問題なく、安心して「設定」することができます。