0

たとえば、JavaScript を含む HTML ページがあるとします。

<script type="text/javascript" src="http://example.com/code.js" async></script>

そして、いくつかの CSS を追加したいのですが、次の 2 つのオプションのどちらがより高速で、パフォーマンスが優れていますか?

オプション1

(より「ネットワーク負荷が高い」) CSS を別のインライン タグに含めます。たとえば、次のようになります。

<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css">

また

オプション 2

（DOM操作が必要なため、より「JavaScript実行が重い」）たとえば、含まれているJavaScriptファイル内からDOMにCSSを挿入します（https://stackoverflow.com/a/707580/1785003から取得] 1）：

var css = document.createElement("style");
var css = "text/css";
css.innerHTML = "strong { color: red }";
document.body.appendChild(css);

2 番目のオプションは、ページからネットワーク リクエストを削除しますが、DOM 操作が必要であり、モバイル デバイス ブラウザーではコストがかかる可能性があります。

それで、どれが良いですか？

4

3 に答える 3

1

パフォーマンス POV からの回答:

CSSを使用することをお勧めします。

理由
パフォーマンスは、ネットワーク帯域幅の消費だけで測定されるわけではありません。JS は、完全にダウンロードされるまでページのレンダリングをブロックします。

(注: html 5 がサポートされるようになりました

<script type="text/javascript" src="http://example.com/code.js" async></script>

これにより、残りのマークアップの読み込みが並行して解放されます。)

css が初めてフェッチされると、ダウンロードも実行もされません(vs javascript)。これはリピーターにとって嬉しいことです。

解決策
外部 CSS を使用し、それをセマンティクスの先頭に保持します (<head>できればセクション内)。</body>外部 js を使用し、ページの下部 (タグの近く) に保持します。

背景:
Yahoo! ベスト フロントエンド プラクティスを遵守しました。

  • スタイルシートを一番上に置く
  • スクリプトを一番下に置く
于 2013-03-14T09:56:50.877 に答える
1

モバイル デバイスと通常のブラウザーとの間で、ページの読み込みとキャッシュの方法に大きな違いがあるとは思わないので、同じように扱います。

JavaScript に CSS を含めることは、メンテナンスの悪夢になるでしょう。おそらく、わずかな（もしあれば）最適化の利益に値するものではありません。Pekka が指摘したように、初期ロード後にキャッシュされます。

最初に他のパフォーマンスの最適化をターゲットにすることをお勧めします。Minify CSS や JavaScript、CSS スプライトなどのように。yslowなどのツールを使用して、どこでパフォーマンスを最適化できるかを示します。

また、ほとんどのブラウザーは、同じホストに対して少なくとも 4 つの同時要求を行うことができるため、CSS と Javascript 、HTML をすべて同時にダウンロードできます。こちらをご覧ください

于 2013-03-14T09:48:49.067 に答える
0

CSS ファイルは、ブラウザが最適化されているため、ダウンロードして処理すると、明らかに高速にレンダリングされます。JS 経由で適用するということは、ドキュメントが読み込まれるのを待ってから、要素を検索し、スタイルを適用してから、ブラウザーがその魔法を実行できるようにする必要があることを意味します。

私の経験では、動的動作以外の目的で CSS ファイルを追加することは、保守性 (何かを変更するのがいかに簡単か) による「速度」の低下をはるかに上回り、コード部分を編集せずに実際にページのスタイルを変更できるため、物事を壊します (たとえば、スタイルを生成する JS を変更して引用符を忘れると、ページが壊れて、そのページのすべての JS が失われます)。

JS を介したスタイリングが非動的な動作に適している唯一の状況は、全体として数行しかない場合であり、それでも私は慎重です。

于 2013-03-14T09:46:52.813 に答える