ウェブサイトコードの最適化_html/css_WEB-ITnose

モバイル コードに焦点を当て、インタビュー中にまとめた Web サイト最適化情報をメモします。

html

1: タグのネストレベルは深すぎてはならず、タグはできるだけ簡潔である必要があります。たとえば、遅延読み込み後に data 属性を削除します

2: DNS 前処理 dns-prefetch、ページに異なるアドレスへの参照が複数ある場合、DNS 事前解決が非常に役立ちます。ページはリンク タグのプリフェッチを前処理します

3: 多数の画像の遅延読み込み戦略、および一部の要素は onload 後の遅延読み込みを実装するために ajax を使用します

4: 一部の js の非同期読み込み

css

1: ネストレベルなし 深すぎます。通常は 3 層が最も多くなります。これは主にチームのプロジェクト構造に依存します。これにはトレードオフがあります。重複のない長い名前にするか、より使いやすい名前にするか、より深いネストにするかです。右から左にあるので、右側のものが比較的少ないはずです。たとえば、.on.li_lick は .li_click.on よりも優れています (.on が多い場合)

3: HTML が Base64 img を使用している場合。 、キャッシュされません。これをbase64にすることができます。画像はCSSファイルに配置され、CSSがキャッシュされ、画像もキャッシュされます

4: 子孫要素セレクターを使用しないようにしてください。また、右端のレイヤーは使用しないでください。 be タグ、特に div のような非常に一般的に使用されるタグ

5 : 書くたびにすべてを書き直すのではなく、CSS 継承をもっと使用します。複数のcss属性を記述する場合、まとめて記述できる場合はまとめて記述します。例: background: #fff url() center center no-repeat

javascript

for ループを使用して DOM ドキュメントを構築する例 (jquery を使用)

// var lis = document.getElementsByTagName("li" )

var lis = [1, "2", "3", "4"];

var ulObj = $("ul");

var lisLength = lis.length;

var html = "" ;

for (var i = 0; i

if (lis[i] === 1) {

html += '

' + lis[i] + '

';

} else {

html += '

' + lis[i] + '

';

}

}

ulObj.html(html);

01. キャッシュ変数。 $("ul") jquery などのステートメントを使用する場合は、すべての $() 文を変数に格納することを忘れないでください。できるだけ使用しないようにしてください。

02. getElementsByTagName などの LIVE タイプのコレクションを使用する場合は、その長さのキャッシュにさらに注意してください

03。 値を割り当てるときは、リテラル

04 を使用します。実際にやってみると、下降ループの方が増加ループよりわずかに速いことが証明されています。

05. 実行中にページが停止する可能性がある大規模な for ループの場合は、配列ブロック技術を使用してループを複数のループに分割し、部分ごとに実行することを検討できます

06。 lis.length は確実でなければならないということです。変数にキャッシュする必要があります。そうでない場合は、長さを毎回クエリする必要があります。

07. DOM 構造を構築します。一般に 3 つの方法があります:

①: ノード関係の createElement と appendChild を使用してノード関係を構築および生成します。

②: ドキュメントフラグメント documentFragment を使用します。

③: 文字列の直接スプライシング: 直接 + 符号スプライシングと配列結合スプライシングの 2 つのタイプに分けられます。 3 番目の速度が最も効率的です。 3 番目のタイプでは、モバイル側で + 記号を使用すると、PC 側で配列を使用するよりもはるかに高速になります。ブラウザーとバージョンが異なると、これら 2 つの方法が異なる方法で最適化されます。

08. DOM ドキュメントに挿入: innerHTML を使用する方が appendChild よりも効率的です。要約すると、モバイル端末は引き続き + 記号を使用して文字列を結合し、最終的には innerHTML を使用します。DOM に挿入するときは、必ず挿入結果を変数に入れ、for ループが終了した後に挿入してください。ファイル内で挿入操作を実行すると、大量の再描画と再配置が発生します。 DOM での操作を最小限に抑える

10. この例では動的追加と動的削除が必要であり、各 li タグにはクリック イベントがあります。 li を DOM に挿入するたびにクリック イベントを追加する場合、削除時に li に登録されているクリック イベントをクリアする必要があります。とても面倒です。したがって、イベント委任メカニズムを使用してイベントを ul にバインドし、ターゲット属性を通じて判断します

11. 条件判断: == と ===、== は型変換と比較する必要があり、これは追加の手順です。非効率です

12. $.ajax() や他の $.get() などの関数の代わりに直接関数を使用すると、最終的に $.ajax() が呼び出され、冗長な呼び出しが発生することになります。効率が比較的低い

13. セレクター: getElementById() や getElementsByTagName() などのメソッドはコンパイル言語で記述されているため、最も高速なメソッドを使用する必要があります。したがって、jqueryの$("li")タグセレクタの効率は非常に高いので、$(".my_li")よりも$("li .my_li")を記述する方が効率的です

14.委任: イベントをバインドするための同様の構造が多数ある場合は、イベント バブリング メカニズムを使用して上位要素にイベントをバインドします

15. 配列を使用して、次のような複数条件の判断代入ステートメントを作成します。

switch(a ) {

ケース 0:

result = "one";

break;

case 1:

result = "two";

break;

}

に変更されました:

var arr = ["zero", "one "];

result = arr[a]

16. 複雑なアニメーションを含むモジュールの場合は、ドキュメント フローの外に配置するようにしてください。 CSS3 を使用して実装されたアニメーションの場合、translate3d(0, 0, 0) またはその他の 3D 変換を呼び出すと、ハードウェア アクセラレーションが有効になり、このページの他のアニメーションにもハードウェア アクセラレーションの効果が適用されます。ローエンド モデルを検討する場合は、注意して使用してください

17. 関数をできるだけ単純にし、ネストされたオブジェクト メンバーの使用もパフォーマンスに影響します。可能であればレイヤー

18. スクロールによってトリガーされる関数など、非常に頻繁に呼び出される関数の場合は、関数スロットル、デバウンス、スロットルの使用を検討できます

転載元: https://segmentfault.com/a/1190000004223993

著者: zzzddd

この記事は HTML5 DreamWorks の編集者が他のメディアからフロントエンド関連の記事を選択し、ネチズンの学習とコミュニケーションのみを目的として転載しています。編集者の作品があなたの権利を侵害している場合は、 にご連絡ください。編集者 QQ: 123464386 までに連絡していただければ、できるだけ早く対応させていただきます。投稿や協力については、tommy@html5dw.com までメールをお送りください