モバイル コードに焦点を当て、インタビュー中にまとめた Web サイト最適化情報をメモします。
1: タグのネストレベルは深すぎてはならず、タグはできるだけ簡潔である必要があります。たとえば、遅延読み込み後に data 属性を削除します
2: DNS 前処理 dns-prefetch、ページに異なるアドレスへの参照が複数ある場合、DNS 事前解決が非常に役立ちます。ページはリンク タグのプリフェッチを前処理します
3: 多数の画像の遅延読み込み戦略、および一部の要素は onload 後の遅延読み込みを実装するために ajax を使用します
4: 一部の js の非同期読み込み
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
// 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 += '
} else {
html += '
}
}
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 までメールをお送りください