JS、CSSについてCS: ...
JS:
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 画像の半透明効果を修正するために使用されます。このフィルターの問題点は、画像の読み込み中にコンテンツのレンダリングが停止し、ブラウザがフリーズしてしまうことです。画像だけでなく各要素ごとに一度計算されるため、メモリ使用量が増加するため、問題は多面的です。 7. スクリプトは下部に配置されています。なぜですか?このスクリプトの問題は、レンダリング中にブラウザが <script> に遭遇すると、内部の JS をダウンロードして実行することです。この期間中、ページはブロックされ、完了するまで待機してから実行を続行します。したがって、できるだけ早くユーザーにページを表示するには、JS を </body> の上に配置する必要があります。 8. DOM へのアクセスと操作を減らす理由は何ですか?参照: 「High Performance JavaScript」には、「DOM を島、JS を有料橋でつながれた別の島と考えてください」という比喩があります。 操作: DOM 要素を変更およびアクセスすると、ページが再描画され、リフローされます。つまり、再描画され、リフローされます。 つまり、問題は明らかです。 解決策: 訪問した要素をキャッシュする ノードを更新したら、それらをドキュメントツリーに一度に追加します 9. イベント委任の理由は何ですか?イベント委任、つまりイベント バブリング メカニズムを使用すると、イベントが要素オブジェクトの親要素にバインドされます。 たとえば、行プロンプト効果を持つ複数行のテーブルでは、ページ区切りによってテーブルが変更されます。 分析: 上記の項目 7 を考慮すると、変更された行要素ごとにイベントをバインドするためにパフォーマンスを犠牲にすることはできません。 解決策:イベントをテーブルの親要素にバインドし、e.target (e.secElement) のノード タイプに基づいて操作を実行します。 |
<<: docker-compose を使用して mongodb と mysql を構築する詳細なプロセス
>>: HTML 縦列表示テキストを使用してテキストを縦列で表示します
質問js を使用して CSS 疑似クラス スタイルを変更するにはどうすればよいでしょうか?しかし、j...
序文名前付きスロットは、スロット内の「name」属性を使用して要素にバインドされます。知らせ: 1....
この記事で説明する等幅レイアウトでは、純粋な CSS を使用して、要素の幅を手動で設定することなく、...
目次jupyterをインストールするDocker ポートマッピングjupyterをインストールするp...
目次1. 範囲1. グローバルな範囲2. ローカルスコープ2. 変数のスコープ1. グローバル変数2...
1. 正常に生成されたアイコン ファイルをダウンロードし、名前を favico.ico に変更して、...
注 1: 上の画像の背景全体がこの Web ページのフルサイズであり、中央の小さなボックスがブラウザ...
先ほど、適応幅と高さが1:1の正方形を作成する方法について説明しました。 https://www.j...
Docker を正式に使用する前に、まず Docker でよく使用されるコマンドに慣れておきましょう...
1. ダウンロードアドレス:参考: http://dev.mysql.com/downloads/m...
序文リアルタイムのデータベース バックアップの必要性は非常に一般的です。MySQL 自体はレプリケー...
Docker サービス アプリケーションを再起動するコマンドを見てみましょう。具体的な内容は次のと...
HTMLはヘッドとボディの2つの部分で構成されています** ヘッド内のタグはヘッドタグです** タイ...
次のコードは、私の test.html にあります。ビデオは、c:\test.html などの絶対パ...
1. 前提条件インポートには require.context メソッドを使用します。vite で作成...