CSS式のパフォーマンス



FAQ「主なものについて簡単に」



CSS式とは何ですか?


CSS Expressionsは、Microsoft独自のテクノロジーであり、Internet Explorerブラウザー(5〜7番目のバージョンを含む)のCSSコードでJavaScriptを使用できます。

CSS式は良いですか、悪いですか?


これは両刃の剣です。 式を使用すると、誤ったIEブロックモデルとTridentエンジンの欠点に関するさまざまな問題を解決できます。
一方、パフォーマンスに大きく影響します。

「パフォーマンスに影響する」とはどういう意味ですか? この「パフォーマンス」はどこでも、インターネット上でどれだけ聞こえますか!


これは、式の計算が毎秒行われ、ユーザーがブラウザでアクションを実行することを意味します。マウスの移動、入力フィールドへの入力、スクロール、またはウィンドウのサイズ変更を禁止します。 タスクマネージャーを確認するまで、これは明らかではありませんが、仕事や目でブレーキに気付く人もいます。

そうですね。 このスケジュールは何ですか?


グラフは、このレイアウトが読み込まれた6番目のIEのProcessExplorerによって描画されました(プロジェクトはまだ開発中です。サイトが誰であるかはまだ明らかにできません)。



お客様の要件:「ゴム」。 ラバーに加えて、最大幅を制限し、最小幅を設定する必要があります。 max/min-widthルール、ただしIEにはありません。 したがって、条件付きコメントを使用して、スタイルを接続します。

* html #wrapper,
* html #footer {
width: expression(
(document.compatMode && document.compatMode == 'CSS1Compat') ?
(document.documentElement.clientWidth < 950 ? "950px" :
(document.documentElement.clientWidth > 1300 ? "1300px" : "auto")) :
(document.body.clientWidth > 950 ? "950px" :
(document.body.clientWidth < 1300 ? "1300px" : "auto")));
}


そして、私たちはすべての方向にサイトをジャークし始めます。 IEのボラシティを示すグラフが添付されています。

わあ そして今何? まあ、彼らはお風呂に入っています、これらは特急です、私は顧客と一緒に修正についてより良いアイデアを得るために行きます...


抜け道があります。 でも2。 それらのみが個々のケースに適しています。 これらは1回限りのキャッシュ可能な式です。 簡単に説明すると、値はページがロードされるときに一度だけ計算されます。 DOMへの要素の追加、または問題のある要素の1回限りのスタイルに適しています。 簡単に言うと、値は変更する必要があるまで一度計算されます。 両方の詳細:Vitaliy Kharisov によるプレゼンテーションと、同じビデオバージョン(2番目が望ましい)。

うわー、クール、ありがとう。 やってみます! これ、おそらく他のいくつかの推奨事項?


CSS式の使用を最小限に抑えるようにしますが、他に方法がない場合(何も起こらない場合)は、可能であれば最適化します。 必要な場合にのみ、条件付きコメントを使用してそれらを接続します。さらに良いことに、慎重に考えてください。おそらく、それらを使用せずに実行できます。

PSピープル、私はすでにこれを知っている多くの専門家がいることを知っています。 ぼろきれを投げて「ボタンアコーディオン」と叫ばないようにしましょう。 このリソースはあなただけではありません。若者に学んでもらいましょう:)

Source: https://habr.com/ru/post/J68898/


All Articles