ウェブサイトデザインフロントエンド戦略シリーズ（I）：さまざまなフロントエンド最適化

2012年まであと1時間あるので、愚痴を書く時間も少しあると思います。笑 2011年12月は間違いなく私のキャリアの中で最もストレスの多い月でした。忙しすぎて、睡眠時間も少なく、余暇に読書をする時間もありませんでした。体が警告を発し始め、肩にかかる責任のプレッシャーで呼吸が苦しくなってきました。北京の普通の出稼ぎ労働者として、特に私たちの業界には私のような人がたくさんいます。

私は人生が大好きで、人生の一分一秒が貴重です。たとえ疲れ果てても、今やっていることはすべて大好きです（そのため、ブログは一時的にストレス解消の手段として使っています）。

私の考えでは、人生はこうあるべきです。生まれ変わるときに生き残りモードか困難モードを選ぶので、どんな困難も起こるのは当然です。だから私は不満を言うためにここにいるのではなく、自分自身とみんなに「どんなに忙しくても、どんなに疲れていても、自分の夢と目標を忘れないで」ということを思い出させるためにここにいるのです。

突然、話さずにはいられない例を思い出しました。それは、80年代に生まれた私たちならプレイしたことがあるはずのスーパーマリオです。命やコインがいくつあっても、結局はただの雲に過ぎません。ゲームでは、数え切れないほどの敵（カメ、トビウオ、ピラニア植物など）や数え切れないほどの危険（落とし穴、下水道、火の海など）に遭遇しますが、レベルを通過する方法は1つしかなく、それは王女を救うことです。これが目標です。

幸せな人生を送りたいなら、それを人や物ではなく、目標に結び付けてください。

幸せな人生を送りたいなら、他人や物質的なものではなく、目的に沿って生きましょう。

ポップアップするまでに時間がかかるので、文句を言わずにはいられません。上記の文章が気に入らない場合は、楽しみのために見てください。それでは、本題に入りましょう。

2011年最後の記事として、まとめを書いてみます^_^... 最近は新入生にフロントエンドの研修をしたり、会社のフロントエンド採用にも参加したりしているので、効率的で役立つ知識がデータベースに整理・分類されているので、フロントエンドの最適化についてまとめます。さらに、春節が過ぎると、再び採用のピークを迎えます。学生、転職希望者、せっかちな人たちが次々と面接に向かいます。フロントエンドの最適化も、フロントエンドの面接でよく聞かれる質問なので、皆さんの参考になれば幸いです。

フロントエンドパフォーマンスの最適化

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

基本原則:

ブラウザ（クライアント）とサーバーが通信する際に多くの時間が消費され、特にネットワーク状況が悪い場合には、この問題が顕著になります。

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

要求する Web ページ ファイルに大量の画像、CSS、JS、さらには音楽が含まれている場合、サーバーとの接続の確立と解放が頻繁に行われ、必然的にリソースの浪費が発生し、各 HTTP 要求がサーバーとブラウザーにパフォーマンス上の負担をかけることになります。

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

解決：

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

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

注: Repaint と Reflow は、再描画と再フローを意味します。私が知っているいくつかの英語の単語を披露させてください...囧

基本原則:

再描画は、可視性、アウトライン、背景色などの変更など、レイアウト (幅と高さ) を変更せずに要素の外観が変更されたときに発生します。

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

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

前述のように、スタイル属性を設定してノードのスタイルを変更すると、設定ごとにリフローが発生するため、クラスごとに設定することをお勧めします。アニメーション効果のある要素の場合、その位置属性を固定または絶対に設定する必要があります。これにより、他の要素のレイアウトに影響が及ぶことはありません。機能要件により位置を固定または絶対に設定できない場合は、速度と滑らかさを比較検討してください。

つまり、リフローは避けられないこともあるため、リフローの影響を可能な限り制限することしかできません。

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

基本原則:

DOM の操作はコストがかかり、Web アプリケーションではパフォーマンスのボトルネックになることがよくあります。

当然遅いです。 「High Performance JavaScript」には、「DOM を 1 つの島、JavaScript (ECMAScript) を別の島と考え、2 つの島を有料橋でつなぐ」という比喩があります。したがって、DOM を訪れるたびに橋の通行料がわかり、訪れる回数が増えるほど支払う金額も増えます。したがって、一般的には橋を渡る回数を最小限に抑えることが推奨されます。

解決：

DOM 要素を変更したりアクセスしたりすると、ページの再描画とリフローが発生し、DOM 操作のループは危険な動作になります。したがって、JavaScript 変数を使用してコンテンツを適切に保存し、多数の DOM 要素をループする際のパフォーマンスのオーバーヘッドを考慮し、ループの最後にすべてを一度に書き込むようにしてください。

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

注意: IE では、ホバーすると応答が遅くなります。

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

基本原則:

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

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

JS は JSON を操作します:

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

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

var obj={"name":"ダレン","age":24,"location":"北京"}

2. 配列は順序付けられた値の集合です。配列は「[」で始まり、「]」で終わります。値を区切るには「,」（カンマ）を使用します。のように：

var jsonlist=[{"name":"darren","age":24,"location":"北京"},{"name":"weidong.nie","age":24,"location":"湖南省"}];

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

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

基本原則:

HTML は、Web ページを記述するために使用される言語です。マークアップ タグを使用して Web ページを記述します。有能なフロントエンド開発者として、よく使用されるタグの意味 (SEO) と属性 (表現) を知っておく必要があります。

CSS は Cascading Style Sheets の略です。Web ページを人間に例えると、HTML は骨組み、CSS は服装です。服装を見れば、その人の趣味が一目でわかります。

プロのフロントエンド開発者は、ページ内にさまざまな不合理なネストや繰り返し定義された CSS スタイルが存在することが多いため、リファクタリングも得意です。ページをリファクタリングして欲しいわけではありませんが、このような状況に遭遇したときにこれらの問題を解決できることを願うばかりです。たとえば、次のような HTML です。

<テーブル><tr><td>
<テーブル><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 セレクターをコストが最小から最大の順に並べます。

IDセレクター #box クラスセレクター .box タグ div 疑似クラスと疑似要素 a:hover

ページがリフローするようにトリガーされると、非効率的なセレクターによって依然として高いオーバーヘッドが発生するため、非効率性を回避するようにしてください。

原題：ウェブサイトデザインフロントエンド戦略シリーズ（I）：フロントエンドの最適化のいろいろ

キーワード: ウェブサイト、事前設計、エンドアタック、戦略シリーズ、フロントエンド、さまざまな、最適化、1、時間、20、ウェブマスター、ウェブサイトのプロモーション、収益化