ウェブサイトを高速化する

パフォーマンスは本当に重要ですか?

パフォーマンスは重要であり、誰もがそれを知っています。なぜ私たちは依然として遅いウェブサイトを作り、ユーザーに悪い体験を与えようとするのでしょうか?ああ、本題に入りましょう。

html

1. インライン/埋め込みコードを避ける:

1) インライン: HTML タグの style 属性でスタイルを定義し、onclick などの属性で Javascript コードを定義します。
2) 埋め込み: <style> タグを使用してページ内のスタイルを定義し、<script> タグを使用して Javascript コードを定義します。
3) 外部ファイルを参照する: <style> タグの href 属性を定義して CSS ファイルを参照し、<script> タグの src 属性を定義して Javascript ファイルをインポートします。

1と2はhttpリクエストの数は減りますが、HTMLのサイズは大きくなります。3と比較すると全体のサイズは大幅に小さくなるため、分業やメンテナンスに便利です。

2. スタイルを上に、スクリプトを下に:

 <html>
  <ヘッド>
      <メタ文字セット="UTF-8">
      <title>ブラウザダイエット</title>
      <!-- CSS -->
      <link rel="スタイルシート" href="style.css" media="すべて">
  </head>
  <本文>
     <a>こんにちは</a>
     <!-- JS -->
     <スクリプト非同期src="script.js"></スクリプト>
  </本文>
</html>

1) スタイルはヘッダーにあり、ページはすばやくレンダリングされるため、ユーザーはページの読み込みが速いと感じます。それどころか、乱雑なページレイアウトが最初に表示され、ユーザーに悪い印象を与えます。
2) スクリプトを上部に配置すると、HTML のレンダリングや並列読み込みに影響し、最初の画面が読み込まれ、通常、ユーザーは機能を見る必要がないため、スクリプトを下部に配置することをお勧めします。 async 属性を使用してスクリプトを非同期的にロードしてみます。

3. HTMLを圧縮する

コードを読みやすく保つための最善の方法は、コードにコメントを追加し、インデントを使用することです。

しかし、ブラウザにとっては、これはどれも重要ではありません。このため、自動化ツールを使用して HTML を縮小することは非常に便利です。

余分な空白、コメント、およびコンテンツ構造に関係のない不要な文字を削除することで、バイト数を節約できます。 gzip 圧縮を使用してみてください。

4. DOMノードを減らす

ユニバーサル div の代わりにセマンティックタグを使用します。

5. HTML の記述が gzip 圧縮率に与える影響

タグ属性を記述する場合、複数の同一のタグ属性値を同じ順序に保つことが最適です。 gzip 圧縮を高速化できます。

CS

1. CSSを圧縮する

HTML を圧縮するのと同様に、自動化ツールを使用して CSS を圧縮します。反復的なコードを改良する方法を学びます。

2. 複数のCSSを結合する

通常、CDN マージまたは会社のマージツールを通じてマージされ、HTTP リクエストの数を効果的に削減します。

3. CSS式の適切な使用

誰もが CSS 式を適切に使用できるわけではありません。したがって、すべての機能を JavaScript に任せます。 cssちょっと休憩します。

画像

1. CSSスプライトを使用する

psd内の小さなレイヤーを1つのレイヤーに統合するとレイアウトが完成します。レイアウトはタイトにする必要があります。エッジが粗い写真の場合は、エッジの色を設定できます。 png-8をpng-24に設定することもできます（IE6フィルター処理）

2. 通常のCSSスプライト画像をbase64画像エンコーディングで置き換える

使用前に：

 .img {
  背景画像: url('image.png');
}

使用後：

 .img {
  背景画像: url('data:image/png;base64,iVBORw0KGgo');}

Base64 画像エンコーディングは CSS スプライト画像ではなく個々の画像のみを対象としており、主流のブラウザと IE8 以降をサポートしています。 http リクエストの数を減らすことはできますが、gzip 圧縮されていない HTML および CSS の場合、http リクエストによって取得される大きなファイルを減らすことはお勧めできません。

3. 画像を最適化する

画像フォーマットは適切に管理する必要があります。画質が問題ない場合は、状況に応じて png、jpg、gif 形式を適切に使用できます。一般的に、CSS スプライトには PNG 形式、アニメーション画像には GIF 形式、カラフルな広告画像には JPG 形式が使用されます。

画像サイズを制御し、Web サイトが画像をキャッシュできるようにする必要があります。一般的に、広告画像は 100k 程度にする必要があります。画像が大きすぎる場合は、いくつかの部分に切り分けてつなぎ合わせることもできます。

フロントエンド CSS の Web サイトでは、レイアウトに画像を使用しなければならない人は不正行為をしていると述べています。 CSS3 が普及するにつれて、この文章がモットーになるでしょう。

4. 「プログレッシブJPEG解析」

要約すると、連続した jpg 形式の方がパフォーマンスに優れています。

ジャバスクリプト

1. ファイルの非同期読み込み

var vst = document.createElement('script');
    vst.type = 'text/javascript';
    非同期処理を true に設定します。
    vst.src = srcIndex;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(vst, s);

一部のサードパーティのファイルのダウンロードに問題が発生したり、ページの読み込みが重くなったりする場合。これらのファイルを非同期で読み込む必要がありますが、非同期は良い方法です。

2. ループされたオブジェクトの保存

使用前に：

 var str = "ナナナナナ"; 
(var n = 0; n < str.length; n++) の場合 {}

使用後：

 var str = "ナナナナナ", 
strLgth = str.length; 
(var n = 0; n < strLgth; n++) の場合 {}

ループはパフォーマンスをかなり消費します。ループされたオブジェクトを保存すると、各ループでオブジェクト計算を実行する必要性が減ります。

3. リフローと再描画を最小限に抑える

使用前に：

 var coored = document.getElementById("ctgHotelTab");
    document.getElementById("ctgHotelTab").style.top = coored.offsetTop + 35 + "px";

使用後：

 var coored = document.getElementById("ctgHotelTab"),
    オフセットTop = coored.offsetTop + 35;
    document.getElementById("ctgHotelTab").style.top = offetTop + "px";

要素のレイアウトは変更されないが外観が変化すると、再描画が行われます。

style.top を設定すると、ブラウザはレイアウトを再計算する必要があります。 offsetTop をリクエストするたびに、ブラウザはレイアウトを再計算します。レイアウトを変更すると、リフローが発生します。

4. JavaScriptを圧縮する

自動化ツールを使用して js を圧縮します。 html および css と同じです。

5. 複数のjsファイルを結合する

通常、CDN マージまたは会社のマージツールを通じてマージされ、HTTP リクエストの数を効果的に削減します。

6. ネイティブ js とフレームワーク js を比較すると、for ループはそれぞれよりも優れています。

パフォーマンステストツール

私がよく使うのはYSLOWです。ページスピードも良好です。パフォーマンスに関する提案をいくつか提供します。

要約する

パフォーマンスが重要であることに疑いの余地はありません。参考のためだけに私の作品を共有しています。詳細については、http://browserdiet.com/zh/ をご覧ください。