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

ウェブサイトデザインフロントエンド戦略シリーズ(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、ウェブマスター、ウェブサイトのプロモーション、収益化

<<:  ウェブサイト分析ツールをより有効に活用するための 10 のヒント (パート 2)

>>:  ホリデー企業サイト:既存ランキング維持に向けた「準備」方法

推薦する

ウェブサイトの販売力とコンバージョン率を効果的に向上させる方法を分析する

インターネットの急速な発展に伴い、電子商取引に従事する人が増えていますが、ウェブサイトの販売力は想像...

テンセントクラウド:12.12フラッシュセール、最低価格から10%オフ、国内ウェブサイト構築におすすめ

ユーザーの促進と拡大、そして国内クラウドとの競争のため、これはテンセントクラウドの今年最後の狂気かも...

SEO三部作のキーワード戦略

企業サイトや個人ブログはそれぞれ異なるユーザー(つまり、異なるオーディエンス)に直面しています。ユー...

Baidu で新しいウェブサイトの内部ページを数秒でインデックスする方法

2018年最もホットなプロジェクト:テレマーケティングロボットがあなたの参加を待っていますBaidu...

解釈: Microsoft Azure China の容量が 2 倍になると、どのような情報が公開されるのでしょうか?

ITマネジメント会社Flexeraがこのほど発表した「2022年クラウドコンピューティング実態調査」...

おすすめ: photonvps-エンタープライズ VPS 50% オフ プロモーション (中国語 + Alipay をサポート)

何ということでしょう?チャンスは一瞬です、ハハハ! photonvps(通称ライスバケット)では、現...

iniz-シンガポール VPS/リースウェブデータセンター/1000mポート/年間支払い18ポンドから

iniz.com のシンガポール VPS は、実は数日前から市場に出回っているのですが、迂回問題のた...

季世三の自己紹介: Guokr.com は一体何をしているのでしょうか?

編集者注: Guokr.com は、近年科学情報コミュニティで活躍しており、メディアとコミュニティの...

hostvdsはどうですか?米国シリコンバレーデータセンターの評価

hostvdsはどうですか? Hostvds は、米国西海岸のシリコンバレー、サンノゼに独自のデータ...

OpenTelemetry 属性の命名に関する 5 つのベスト プラクティス

トラブルシューティングや事後検証の際にデータの価値を高めるには、プロパティ名がすべてのテレメトリ タ...

フォックスコンのメーカー:女性の生産ライン労働者から販売チャンピオンへの成功した転換を達成する方法

2018年最もホットなプロジェクト:テレマーケティングロボットがあなたの参加を待っています彼女はこれ...

タオバオの商人は「タオバオを去った」が、SEOはまだ逃げられないのか?

最近のニュース報道によると、タオバオの商人が毎日タオバオから逃げているそうです。タオバオが広告費を値...

草の根は儲かるが、新浪は損をする。微博は氷と炎の2つの異なる状況に直面している

中国国際放送、北京、8月20日。経済音声「世界企業」の報道によると、新浪微博が儲からないのはもはやニ...

ftrack レビューが Alibaba Cloud Marketplace で利用可能になりました

2018 年 9 月、世界有数の映画およびテレビ番組制作パイプライン管理ソフトウェア企業である ft...

初心者がブログを書き、ブログ投稿を保護する方法を共有する

ブログは今や衰退期を迎え、Weibo などの人気商品に徐々に取って代わられつつありますが、ブログ自体...