Web フロントエンドのパフォーマンスの最適化_html/css_WEB-ITnose

1. HTTP リクエストを減らしてください

基本原則:

ブラウザ (クライアント) がサーバーと通信する際、特にネットワーク状態が悪い場合に、この問題が発生します。目立つ。

通常の HTTP リクエストのプロセスの簡単な説明: たとえば、ブラウザに「www.xxxxxx.com」と入力して Enter キーを押すと、ブラウザはこの URL が指すサーバーとの接続を確立し、その後、ブラウザはサーバー情報にリクエストを送信でき、サーバーはリクエストされた情報を受信した後、対応する情報を返します。ブラウザはサーバーから応答情報を受信した後、データを解釈して実行します。

リクエストする Web ページ ファイルに大量の画像、CSS、JS、さらには音楽が含まれている場合、サーバーとの接続が頻繁に確立および解放されるため、確実にリソースの無駄が発生し、各 HTTP リクエストでパフォーマンスが発生します。サーバーやブラウザに負担がかかります。

同じネットワーク速度では、100 KB の画像をダウンロードする方が、50 KB の画像を 2 つダウンロードするよりも高速です。したがって、HTTP リクエストを減らしてください。

解決策:

画像 (CSS スプライト) を結合し、CSS ファイルと JS ファイルを結合します。多くの画像を含むページは、lazyLoad などのテクノロジーを使用して最適化することもできます。

2. リペイントとリフローを正しく理解してください

注: リペイントとリフローは、私が知っているいくつかの英語の単語を披露させてください...囧

基本原則:

リペイントは次の場合に発生します。レイアウト (幅と高さ) を変更せずに、要素の外観を変更します。たとえば、可視性、輪郭、背景色の変更などです。

リフロー (リフロー) とは、DOM の変更が要素の幾何学的属性 (幅と高さ) に影響を与えることを意味し、ブラウザーは要素の幾何学的属性を再計算し、レンダリング ツリーの影響を受ける部分を無効にします。 DOM ツリー上の他のすべてのノードの可視性属性を確認します。これが、リフローが非効率である理由でもあります。例: ウィンドウ サイズの変更、テキスト サイズの変更、コンテンツの変更、ブラウザ ウィンドウの変更、スタイル属性の変更など。リフローが頻繁すぎるとCPU使用率が急激に上昇するため、フロントエンドもリペイントとリフローの知識が必要になります。

パフォーマンスへの影響を軽減する方法:

前述のように、style 属性を設定してノード スタイルを変更すると、各設定でリフローが発生するため、アニメーション効果を備えたクラス要素を設定するのが最善です。他の要素のレイアウトに影響を与えないように、位置属性は固定または絶対に設定する必要があります。機能要件により位置を固定または絶対に設定できない場合は、速度の滑らかさを重視する必要があります。

つまり、リフローは場合によっては避けられないため、リフローの影響範囲は可能な限り限定するしかありません。

3. DOM 上の操作を減らしてください

基本原則:

DOM 操作のコストは高く、通常、Web アプリケーションではパフォーマンスのボトルネックになります。

ゆっくり生まれた。この比喩は、「ハイパフォーマンス JavaScript」で使用されています。「DOM を 1 つの島、JavaScript (ECMAScript) を別の島と考えてください。この 2 つは有料橋で接続されています。」そのため、DOMを訪問するたびに通行料がかかり、訪問回数が増えるほど料金も高くなります。したがって、一般的には、橋を渡る回数を最小限に抑えることが推奨されます。

解決策:

DOM 要素を変更してアクセスすると、ページの再描画とリフローが発生し、DOM 操作のループはさらに罪深い動作です。したがって、JavaScript 変数を使用してコンテンツを合理的に保存し、多数の DOM 要素でのループによるパフォーマンスのオーバーヘッドを考慮して、ループの最後に 1 回だけ記述してください。

DOM 要素のクエリと変更を削減し、クエリ中にそれらをローカル変数に割り当てます。

注: IE では、ホバーすると応答速度が低下します。

4. データ交換には JSON 形式を使用します

基本原則:

JSON は、完全に言語に依存しないテキスト形式を使用する軽量のデータ交換形式であり、理想的なデータ交換形式です。同時に、JSON は JavaScript ネイティブ形式であるため、JavaScript での JSON データの処理には特別な API やツールキットは必要ありません。

XML シリアル化と比較して、JSON シリアル化後に生成されるデータは一般に XML シリアル化後のデータよりも小さいため、JSON は Facebook などの有名な Web サイトでデータ交換方法として使用されます。

JS は JSON を操作します:

JSON には、オブジェクトと配列という 2 つの構造があります。

1. オブジェクトは「{」で始まり「}」で終わります。各「名前」の後には「:」が続き、「名前と値のペア」は「,」（カンマ）で区切られます。 名前は引用符で囲みます。値が文字列の場合は引用符で囲む必要がありますが、数値の場合は囲む必要はありません。例:

var obj={"name":"darren","age":24,"location":"beijing"}

2. 配列は、順序付けられた値のコレクションです。配列は「[」で始まり「]」で終わります。値は「,」（カンマ）で区切ります。例:

var jsonlist=[{"名前":"ダレン","年齢":24,"場所":"北京"},{"名前":"微東ニー","年齢":24,"場所": "hunan"}];

このような配列やオブジェクト リテラルの操作は非常に便利で効率的です。 JSON 構造を事前に知っていれば、データ転送に JSON を使用すると、非常に実用的で美しく読みやすいコードを作成できます。あなたが純粋なフロントエンド開発者であれば、間違いなく JSON をとても気に入るはずです。

5. HTML タグと CSS スタイルを効率的に使用する

基本原則:

HTML は、Web ページを記述するためにマークアップ タグを使用します。よく使われるタグの意味（SEO）と属性（表現）を知る必要があります。

CSS は Cascading Style Sheets のことを指します。ページを人物に例えると、HTML はその人の骨格であり、CSS はその人の服装からその人の好みがはっきりとわかります。

プロのフロントエンド開発者は優れたリファクタラーでもあります。ページにはさまざまな不合理な CSS スタイルがネストされ、繰り返し定義されていることがよくあります。私はあなたにページのリファクタリングを求めているのではなく、あなたがそれを解決することを願っています。これが起こると、これらの問題が発生します。たとえば、次の HTML:

<table><tr><td>   <table><tr><td>      ...   </td></tr></table></td></tr></table>

またはこの CSS:

body .box .border ul li p Strong span{color:#000}

上記は、HTML と CSS の非常に悪い使用方法です。

正しい理解:

HTML はマークアップ言語です。適切な HTML タグを使用する前に、フロー要素、メタデータ要素、フレージング要素などの属性を理解する必要があります。より基本的なものは、ブロックレベルの要素とインライン要素、ボックスモデル、SEO について知ることです。

CSSはページのレンダリングに使用されており、レンダリング効率の問題もあります。 CSS セレクターは右から左に照合されます。ここでは、CSS セレクターをコストの小さいものから大きいものの順に並べ替えます。 hover

ページがリフローを引き起こすためにトリガーされるとき、非効率なセレクターは依然として高いオーバーヘッドを引き起こすため、非効率を避けてください。

6. CDN アクセラレーション (コンテンツ配信ネットワーク) を使用する

基本原則:

CDN の正式名は Content Delivery Network で、コンテンツ配信ネットワークです。

「基本的な考え方は、データ伝送の速度と安定性に影響を与える可能性のあるインターネット上のボトルネックやリンクを可能な限り回避し、コンテンツをより速く、より安定して伝送できるようにすることです。今日の世界では、それが形成されています。 CDN システムは、インターネットをベースとしたインテリジェントな仮想ネットワークの層であるネットワーク全体にノード サーバーを配置することで、ネットワーク トラフィックや各ネットワークの接続などの包括的な情報に基づいて、ユーザーのリクエストをユーザーに最も近い場所にリアルタイムでリダイレクトできます。サービス ノード、負荷ステータス、ユーザーまでの距離、応答時間。」 - Baidu 百科事典。

上記の文章をどれだけ安心して読めるかというと、またストーリーを交えて紹介します^_^: 古代については誰もが知っているはずです。戦争では、中国の交通手段は非常に未発達であったため、外国人が攻撃しても、朝廷が軍隊を募集し国境に送り込むまでに、侵略者はとうに姿を消していた。古代の皇帝はとても落ち込んでいました。その後、皇帝は賢明に学び、事前に大量の兵士を国境に派遣し、平時は畑で働き、戦争では兵士として活躍できるようにしました。この戦略は非常に重要な役割を果たしました。

短所:

リアルタイム パフォーマンスが低いことは、CDN の致命的な欠陥です。この欠陥は、CDN への需要が徐々に高まり、リモート サーバーの Web コンテンツ ページをレプリカ サーバーまたはキャッシュ内のページと同期できるようになるにつれて改善される予定です。解決策は、ネットワーク コンテンツが変更されたときに新しいネットワーク コンテンツをサーバー側からキャッシュに直接転送するか、ネットワーク コンテンツにアクセスするときにデータ ソース サーバーのネットワーク コンテンツをできるだけリアルタイムでキャッシュ サーバーにコピーすることです。が増加します。

7. 参照用に CSS と JS を外部ファイルに置きます。CSS を先頭に置き、JS を最後に置きます

基本原則:

注: これは従う必要がある非常に基本的な知識ポイントですが、実行するのは困難です。記事を完全にするために付け加えます。お入りください、ふふ。

外部ファイルを導入する利点は明らかであり、プロジェクトがもう少し複雑になった場合には外部ファイルを導入する必要があります。

保守、拡張、管理、再利用が簡単です。

正しい方法:

JavaScript はブラウザーの支配者です。なぜそう言えるのでしょうか? ブラウザーは JavaScript コードを実行しているとき、つまり、毎回 <script><p>このブロック機能により、JavaScript コードを </script>