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

JS、CSSについて

CS: ...

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

JS:

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

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> の上に配置する必要があります。