ページ リファクタリング スキル - Javascript、CSS

ページ リファクタリング スキル - Javascript、CSS

JS、CSSについて

CS: ...

  1. 上部のスタイルシート
  2. CSS式を避ける
  3. 外部JS、CSSの使用
  4. JSとCSSを削減
  5. <link> 、@import
  6. フィルターを避ける

JS:

  1. 下部のスクリプト
  2. 外部JS、CSSの使用
  3. JSとCSSを削減
  4. スクリプトを繰り返す必要はありません
  5. DOMアクセスと操作を減らす
  6. イベント委任

1. スタイルシートが上部に固定されているのはなぜですか?

ブラウザはページを上から下へレンダリングします。<body> 内で <link> や <style> に遭遇すると、ページのレンダリングがブロックされページが再描画されることもあります。グリッドショップのように、すべてが整然と配置されているのに、上司がこれをこう配置しろ、ああ配置しろと言うので、一つ一つ再配置しなければなりません。さらに、必要なスタイルを順番に読み込むことができるように、<head> に追加されます。

2. CSS 式を避けてください。なぜでしょうか?

私も含め、CSS 式を学ぶときに、それを避けるか使用しないようにと言う人が多いので、JS の eval も含めて、私たちは怠けてそれを読みません...

その後、たまたまプロジェクトで一度使用してみたのですが、結果はこうでした。 。 。これが最後に発見されたバグとなりました。 。 。 (IE6はページスタイルに影響します)

実際、CSS 式の主な欠点は、パフォーマンスに影響することです。CSS は時間に敏感であり、スタイルを変更するとすぐに有効になることを知っておく必要があります。

ウィンドウのサイズを変更したり、ページをスクロールしたり、マウスを動かしたりすると、式の評価が頻繁に実行され、重大な影響が生じるため、これを避けるようにしてください。

3. 外部 JS と CSS を使用する理由

外部ファイルを使用すると HTTP リクエストが増加することは誰もが知っていますが、キャッシュにより、ユーザーが再度アクセスしたとき、または他のページで同じファイルにアクセスしたとき、ページの応答速度が大幅に向上します。さらに、外部 JSS と CSS によってページ内のドキュメント サイズを削減できるという利点もあります。

4. JS と CSS を削減します。なぜでしょうか?

言うまでもありませんが…なぜそう思うのですか?

5. <link>、@import を使用する理由

まず、この 2 つの違いを見てみましょう。

違い1:先祖の違い。 @import は CSS で完全に提供されるメソッドです。リンクは XHTML タグです。CSS を読み込むだけでなく、RSS など他のものも定義できます。@import は CSS カテゴリに属し、CSS のみを読み込むことができます。

違い2: 読み込み順序の違い。リンクが CSS を参照する場合、ページの読み込みと同時に読み込まれます。@import では、読み込む前にページが完全に読み込まれる必要があります。

違い3:互換性の違い。リンクは XHTML タグであり、互換性の問題はありません。@import は CSS2.1 で提案されており、それより低いバージョンのブラウザーではサポートされていません。

違い 4: DOM を使用してスタイルを制御する場合の違い。 link は、スタイルを変更するために DOM を制御するための Javascript の使用をサポートしていますが、@import はこれをサポートしていません。

2 つを比較すると、@import は明らかに弱いです...

6. フィルターの使用は避けてください。なぜでしょうか?

IE 固有のプロパティ AlphaImageLoader は、バージョン 7.0 未満で表示される PNG 画像の半透明効果を修正するために使用されます。このフィルターの問題点は、画像の読み込み中にコンテンツのレンダリングが停止し、ブラウザがフリーズしてしまうことです。画像だけでなく各要素ごとに一度計算されるため、メモリ使用量が増加するため、問題は多面的です。
AlphaImageLoader の使用を完全に回避する最善の方法は、代わりに IE で適切に動作する PNG8 形式を使用することです。 AlphaImageLoader を本当に使用する必要がある場合は、アンダースコア フィルターを使用して、IE7 以上のユーザーに対してこれを無効にしてください。

7. スクリプトは下部に配置されています。なぜですか?

このスクリプトの問題は、レンダリング中にブラウザが <script> に遭遇すると、内部の JS をダウンロードして実行することです。この期間中、ページはブロックされ、完了するまで待機してから実行を続行します。したがって、できるだけ早くユーザーにページを表示するには、JS を </body> の上に配置する必要があります。

8. DOM へのアクセスと操作を減らす理由は何ですか?

参照: 「High Performance JavaScript」には、「DOM を島、JS を有料橋でつながれた別の島と考えてください」という比喩があります。

操作: DOM 要素を変更およびアクセスすると、ページが再描画され、リフローされます。つまり、再描画され、リフローされます。

つまり、問題は明らかです。

解決策: 訪問した要素をキャッシュする

ノードを更新したら、それらをドキュメントツリーに一度に追加します

9. イベント委任の理由は何ですか?

イベント委任、つまりイベント バブリング メカニズムを使用すると、イベントが要素オブジェクトの親要素にバインドされます。

たとえば、行プロンプト効果を持つ複数行のテーブルでは、ページ区切りによってテーブルが変更されます。

分析: 上記の項目 7 を考慮すると、変更された行要素ごとにイベントをバインドするためにパフォーマンスを犠牲にすることはできません。

解決策:イベントをテーブルの親要素にバインドし、e.target (e.secElement) のノード タイプに基づいて操作を実行します。

<<:  docker-compose を使用して mongodb と mysql を構築する詳細なプロセス

>>:  HTML 縦列表示テキストを使用してテキストを縦列で表示します

推薦する

CSS変数を使用してスタイルを変更する方法の例

質問js を使用して CSS 疑似クラス スタイルを変更するにはどうすればよいでしょうか?しかし、j...

Vue 名前付きスロットの基本的な使用例

序文名前付きスロットは、スロット内の「name」属性を使用して要素にバインドされます。知らせ: 1....

CSS を使用して複数の方法で等幅レイアウトを実装するサンプルコード

この記事で説明する等幅レイアウトでは、純粋な CSS を使用して、要素の幅を手動で設定することなく、...

CentOS 上の Docker に Jupyter をインストールしてポートを開く方法

目次jupyterをインストールするDocker ポートマッピングjupyterをインストールするp...

JavaScriptスコープについての簡単な説明

目次1. 範囲1. グローバルな範囲2. ローカルスコープ2. 変数のスコープ1. グローバル変数2...

favico.ico---ウェブサイトicoアイコン設定手順

1. 正常に生成されたアイコン ファイルをダウンロードし、名前を favico.ico に変更して、...

offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft などのプロパティの図。

注 1: 上の画像の背景全体がこの Web ページのフルサイズであり、中央の小さなボックスがブラウザ...

CSS を使用して適応型の幅と高さを持つ 16:9 の長方形を実装する例

先ほど、適応幅と高さが1:1の正方形を作成する方法について説明しました。 https://www.j...

Docker初心者が初めてよく使うコマンドを試してみる練習記録

Docker を正式に使用する前に、まず Docker でよく使用されるコマンドに慣れておきましょう...

MySQL 5.7.20 圧縮版のダウンロードとインストールの簡単なチュートリアル

1. ダウンロードアドレス:参考: http://dev.mysql.com/downloads/m...

MySQLデータベースのリアルタイムバックアップの知識ポイントを詳しく解説

序文リアルタイムのデータベース バックアップの必要性は非常に一般的です。MySQL 自体はレプリケー...

自動開始および停止コマンドを適用するには、Docker サービスを再起動します (推奨)

Docker サービス アプリケーションを再起動するコマンドを見てみましょう。具体的な内容は次のと...

HTMLヘッダータグの使用に関する詳細な説明

HTMLはヘッドとボディの2つの部分で構成されています** ヘッド内のタグはヘッドタグです** タイ...

HTML に埋め込まれた MP4 形式のビデオが再生できないのはなぜですか?

次のコードは、私の test.html にあります。ビデオは、c:\test.html などの絶対パ...

vue3.0共通コンポーネントの自動インポート方法の例

1. 前提条件インポートには require.context メソッドを使用します。vite で作成...