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 コードを実行しているとき、つまり、毎回 cb4f5111ec229b7e3fd0ab46c6ef51f3 タグの前に配置することをお勧めします。これにより、JavaScript のブロックを効果的に防ぐだけでなく、ページの HTML 構造をより速く解放できるようになります。

HTML 仕様では、CSS をページの 93f0f5c25f18dab9d176bd4f6de5d30e 領域に含める必要があると明記されているため、ここでは説明しません。

8. CSS および JS ファイルを合理化する

基本原則:

これまで言及されていない非常に重要な原則があります。それは、CSS と JavaScript の圧縮であり、ダウンロードされるファイルのサイズを直接削減します。私が個人的によく使用する方法は、YUI Compressor を使用することです。これには、コメントの削除、微妙な識別子の置換が含まれます。

YUI Compressor は Java プログラムです。Java に慣れている場合は、yuicompressor.jar を使用してすぐに始めることができます。Java を初めて使用する場合でも、YUI Compressor を使用することもできます。これを使って。

YUI Compressor の設定と使用:

まず使用環境を設定します:

1. まず、JDK がコンピューターにインストールされていることを確認します

2. 次に、必要な環境変数を設定します (詳細は説明できません)。文が少ないので、設定方法や検索方法がわかりません)

3. cmd インターフェイスで、javac と入力して、インストールが成功したかどうかをテストします

使用方法は、yuicompressor.jar が保存されているディスクに移動することです。例として独自の yuicompressor-2.4.2.jar を使用します。

1. JS を圧縮します

java -jar yuicompressor-2.4.2.jar api.js > . CSS を圧縮します

java -jar yuicompressor-2.4.2.jar style.css > ; style.min.css

もちろん、興味がある人は、もっと確実な使用方法もあります。それは自分自身です。

9. 画像の圧縮と画像スプライト技術の使用

基本原則:

注: 実際には、画像の圧縮と画像スプライトは 2 つの技術ですが、これらはすべて画像の最適化に関するものなので、まとめてみましょう。

現在、仕事の細分化により、プロのフロントエンド エンジニアが画像をカットする機会はほとんどありませんが、画像圧縮について少し知る必要があります。 一般的な画像圧縮方法は次のとおりです。

1.解像度;

2 .画像の保存品質を変更します。

画像スプライト (Sprite) テクノロジーについては、CSS 内の画像であっても、HTML 構造内の画像であっても、生成される HTTP リクエストを削減することです。リクエストの数。これが最も直接的で効果的です。その方法は、画像スプライト (CSS スプライト) を使用することです。画像ウィザードは、大きな画像にたくさんの画像を配置し、CSS を通じて画像の一部を表示するものです。

画像ウィザードの操作の詳細については、インターネット上に関連するコンテンツがたくさんありますので、詳しくは紹介しません。

10. Cookie のサイズと汚染の制御に注意してください

基本原理と使用法:

Cookie に関する基本的および高度な知識については、私が書いた記事「JavaScript 操作 Cookie」を参照してください。

Cookie はローカル ディスク ファイルであるため、ブラウザは対応する Cookie を毎回読み取るため、ユーザーの応答への影響を軽減するために、不要な Cookie を削除し、Cookie のサイズをできるだけ小さくすることをお勧めします。 -ドメイン操作 サブドメインが影響を受けないように、アダプティブ ドメイン名に Cookie を設定することに常に注意してください。

Cookie にはライフサイクルがあるため、適切な有効期限と有効期限の設定に注意し、有効期限をクリアしないでください。 Cookie が早すぎるため、ユーザーの応答時間が短縮されます。

記事の出典: Acee Resource Network

記事リンク: http://www.aseoe.com/show-41-631-1.html

このサイトの記事はすべて、 HTML5 DreamWorks の編集者 関連記事はネチズンの研究と交換のためにのみ転載されます。私たちの作品があなたの権利を侵害している場合は、時間内に編集者 QQ: 123464386 にご連絡ください。できるだけ早く対処します。投稿や協力については、tommy@html5dw.com までメールをお送りください