2011-01-31 6 views
7

処理の点では、CSS text-transformは高価ですか?ブラウザでは通常は必要ない仕事をすることを余儀なくされているようです(なら、を変換しませんでした)が、それはかなりの処理量ですか?パフォーマンスにはまったく影響がありますか?CSSのテキスト変換が "高価"

+0

なぜテキスト変換は高価だと思いますか?どのように測定しましたか? –

+7

私はそれが高価だったとは言わなかった - 私はちょうど質問をした... – Hogsmill

答えて

15

クライアントのブラウザからもう少し処理がかかるかもしれませんが、ページやテキストページを変換しない限り、これはまったく重要ではありません。

また、スタイルシート(重いファイル)にCSSプロパティを書き込むのにオーバーヘッドがありますが、もう一度それはほんの少しの文字ですから違いはありません。


私はいくつかの基本的なベンチマークを実行しました。 Firefox 3では、Lorem Lipsumの200段落のページが表示されました。私は、任意の有意差は見ないtext-transform:noneを追加する場合

0.175sと0.150s 間がかかりますレンダリング

text-transform:lowercaseを追加する場合text-transform:uppercaseを追加することが今text-transform:capitalizeを追加する場合、それは今

0.320s 間及び0.350sをとり0.350sと0.380s間

をとることが今0.320sかかりと0.350s

私たちは明らかにこれを処理するいくつかのオーバーヘッドがありますが、もう一度私は大文字にしています何百もの線があり、0.2秒しかかかりません。したがって、もし私があなただったら、巨大なテキストをテキストに変換しない限り、パフォーマンスについてあまり考えないで使っています。

+0

まあ、それは*重要です*。スタイルシートでパフォーマンスが重要な理由の良い例です(あなたが要約的な側面を考慮した場合)。 – Boldewyn

+0

@boldewynテキスト全体を大文字にしようとすると意味がありますが、 "古典的な"目的でのみ使用する場合は、心配する必要はありません。 – marcgg

+0

@marcgg:意味は、要約です。多くの人が悪いセレクタスタイルに関する記事に笑顔を見せていますが、わかるように、CSSの1行でレンダリングのスピードを倍増させることができます。 – Boldewyn

2

他のCSSスタイルよりも「高価」になる理由はありません。文字列を大文字/小文字に変換するだけで、コンピューターに求められる処理のほとんどを課すことはほとんどありません。

イタリック体または太字で表示すると比較します。これらのスタイルは両方とも効果的に文字列全体のフォントを変更しますが、ブラウザにプロセッサーを集中的に使用する場合には使用しないでください。

text-transformは大文字と小文字の変換が意味をなさないことがある非ラテン文字セットを使用している場合には苦労するかもしれません。しかし、あなたは、ブラウザーメーカーがそれをカバーしていることをかなり確信することができます。 (とにかく、あなたがそのポジションにいるなら、なぜtext-transformを使用したいのですか?)

+1

'font-style:italic'と' text-transform-uppercase'の違いは、後者は表示する実際の文字データを変更する必要があることです。別のフォントを選択して、フォントレンダラーにその作業をさせるだけではありません。 – Boldewyn

+2

@ Boldewynおそらく、ブラウザの実装の詳細を知っているかもしれません。私は関連する細部を知らないので、フォントを変更するよりも安くなるように文字コードを変更することになります。フォントを変更すると、おそらく最初に、何らかの種類のフォントの変更、おそらくメモリの割り当てを導入する必要があります。 1文字のコードを上書きすることは、先験的に私にとっては安価に見えます。 –

4

あなたがモバイル用に設計しているなら、少しずつ役立ちます。動的でない場合は、大文字で入力してください。

関連する問題