1

仕事で管理しているWebサイトを変換する方法を確認するために、LESSを少しいじっています。

cssの機能について学んでいたときbehavior: url(...blah)、パフォーマンス上の理由から、css をできるだけ使用しないことが最善であると読んだことがあると思いました (今はどこにも見つからないので、それがまだ有効かどうかはわかりません)。

したがって、その仮定を念頭に置いて、その CSS を LESS Mixin に変換することに少し不安があります。これは本当にパフォーマンス ヒットですか? それとも、サイトの UI の速度低下を気にせずに安全に実行できますか?

私が変換するものの例...

.FullRoundedBorder
{
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;
    behavior: url(/Content/CSS/PIE/PIE.htc);
}

まだ見ていない方のために説明すると、PIEはラウンド ボーダー クロス ブラウザー機能用の素晴らしいプラグインです (主に IE 6-8 を修正します)。

4

3 に答える 3

2

'behavior' プロパティ自体の使用はパフォーマンス上の大きな問題ではありません。'expression' について考えたことがあるかもしれませんが、これは実際にはパフォーマンスに非常に悪いものです。

ただし、プルする特定の .htc のパフォーマンスを調べる必要があります。基本的に、.htc ファイルは、CSS セレクターが要素に一致したときに実行される JavaScript の一部です。これは、セレクターに一致する要素が多いほど、スクリプトが実行される回数が増えることを意味します。

PIE.htc のような複雑なスクリプトの場合、あまりにも多くの要素で使用するのは非常に簡単で、実行中に顕著な遅延が発生します。他のスクリプトと同様に、適用範囲を慎重に検討する必要があります。もちろん、適用後にサイトのパフォーマンスをテストする必要があります。

PIE.htc での私の経験では、約 15 個以下の要素で使用すると目立ちませんが、それを超えると遅延に気付き始めます。-pie-lazy-initを使用するなど、影響を軽減するためにできることがよくあります。

于 2012-10-04T21:03:17.267 に答える
0

はい、PIE は IE6-8 の UI を遅くします。重ねる効果が多いほど、効果が大きくなります。他のブラウザには影響しません。

私は昨年、(大きな!) プロジェクトで PIE を使用して IE6-8 でいくつかの効果を得ましたが、今年そのプロジェクトを再検討したときに、PIE の使用をすべて破棄することにしました。不安定で一貫性がないことがわかりました。たとえば、「今すぐ支払う」ボタンのレンダリングにランダムに失敗します。したがって、IE ユーザーはランダムに請求書を支払うことができなくなります。IE 9 未満のイメージ フォールバックを使用して Modernizr に切り替えました。この話の教訓は次のとおりです。うまくいかないときのデバッグは困難です。

UI が遅すぎる場合は、簡単に試して無効にすることもできます。ミックスインが優れていれば、数行のコードで十分です。

于 2012-10-04T21:03:02.167 に答える
-1

私は Less と幅広く仕事をしてきました。大きな CSS をより論理的で読みやすいチャンクに分割する方法が気に入っています。考慮すべき点がいくつかあります。

1) Less サーバー側またはクライアント側のどちらで処理しますか? 私は、ユーザーが実行しているマシンやブラウザーの種類を制御できず、UI 実装の障害点が増えるため、UI/ブラウザーの負荷を減らすことをより支持しています。シンプルな方が常に優れています。UI が少人数のユーザー向けである場合、パフォーマンスの低下は見られないはずです。ほとんどの場合、プレーンな CSS が大きすぎて保守や読み取りが容易ではない場合に Less を使用し、特にユーザー ベースが些細な場合は、わずかなパフォーマンス ヒットを許容します。トラフィックの多いサイトの場合は、おそらく CSS に書き直すか変換して、そのままの CSS を公開します。

2) Less は本当に必要ですか? 大量の翻訳コードをロードしたり、サーバーで余分なプロセスを実行したりして、余分な CSS を数行書く必要がないようにしていますか? これは私の意見では十分に正当化できません。「getElementByID()」純粋なネイティブ JavaScript を書きたくないという理由だけでライブラリ全体をロードしている開発者を見ると、JQuery のような他の「生活を楽にする」ライブラリ/ツールの使用についてよく疑問に思います。

すべてにその場所があり、プロジェクト/実装で使用されます。利点のリストを作成してから、ネイティブ ブラウザー機能 (プレーンな CSS と JS) で簡単に実装できるものを除外することをお勧めします。特にモバイルやレガシー プラットフォームでも実行している場合は、小型で軽量なほど、常に優れた速度で動作します。

これが役に立ったことを願っています。

于 2012-10-04T20:57:28.683 に答える