20

ブラウザが色を解析できる速度に違いはありますか？

たとえば、色が赤の場合、次のcssを使用できます。

.red
{
    color:red;
    color:#ff0000;
    color:rgb(255,0,0);
}

これらはすべて同じ結果、テキストの色は赤になりますが、効率の観点から、何を使用するのが最適ですか？

テキスト「赤」を使用するのが最小の文字数であり、選択するのに最適なドキュメントサイズを最小化するために、何が選択を決定する必要があるかを理解しています。

これを尋ねる唯一の理由は、文字通りWebサイトのすべてがさまざまな色を持っていることです。したがって、数ミリ秒に追加される可能性のある小さな変更がある場合は、最良の方法を使用する価値がある可能性があります。

4

3 に答える 3

23

CSSで#rrggbbカラーハッシュを使用すると、ブラウザはページをより速くレンダリングすると言っても過言ではありません。

CSSを介してbody要素に背景色と前景色を配置する非常に簡単なWebページを作成しました。これは、最初のレンダリング時間を出力するためのタイムアウト時にページの下部にある小さなJSです（残念ながら、performance.timingを使用しました）。 msFirstPaint値なので、IEでのみ機能しますが、ここから要点を得ることができます）。ページを10回レンダリングし、平均を取りました。次に、CSSの色名（「緑」と「白」）を変更し、それらを16進値（＃008000と#fff）に変更して、測定を繰り返しました。名前を使用すると、ページは平均41.6msでレンダリングされます。16進値の使用：14.5ms。テストページが2色しかないシンプルさを考えると、それはかなり大きな違いだと思います。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Color name test</title>
    <style>body{background-color:green;color:white;}</style>
</head>
<body>
    <h1 id="foo"></h1>
    <script>
        setTimeout(function ()
        {
            var start = performance.timing.domLoading;
            document.getElementById("foo").innerHtml = 
              performance.timing.msFirstPaint - start;
        }, 1000);
    </script>
</body>
</html>

于 2014-12-17T17:52:49.497 に答える
13

重要なWebページの3つのオプションの違いを測定することはできません。

ページのダウンロード、解析、およびレンダリングのコストと比較して、数バイト多いまたは数少ないバイトのダウンロードおよび解析のコストはごくわずかです。

@Vinnyによって提供されるパフォーマンス測定はそれをサポートします。

これを尋ねる唯一の理由は、文字通りウェブサイト上のすべてのものがさまざまな色を持っていることです

多くの異なる場所で色を指定しないようにCSSを最適化できる場合（可能な場合は継承されたプロパティを使用）、全体的なパフォーマンスに大きな影響を与える可能性があります（ダウンロードおよび解析するCSSが少なくなります）。

于 2012-07-23T21:27:19.697 に答える
9

red解析するのが最も簡単ですが、使用する実際の値を取得するには、テーブルを検索する必要があります。

#ff0000次に解析が簡単なのは、実際の値を取得するために3つのText->Int変換が必要です。

rgb(255,0,0)は解析が最も困難であり、実際の値を取得するには3つのテキスト->Int変換が必要です。

2番目のred方法は、（おそらく）ハッシュ操作（別のText-> Int変換、通常考えていることではない）とルックアップを必要とするため、全体的に最速である可能性があります。また、redトークンは。と比較して任意の長さにすることができます#ff0000。

マイクロ最適化の側面やその知恵についてはコメントしません。

于 2012-07-23T21:29:59.147 に答える