web-dev-qa-db-ja.com

HTML、CSS、およびJavascriptを縮小することは悪い考えですか？

ウィキペディア 縮小を定義 として...

[...]機能を変更せずにソースコードから不要な文字をすべて削除するプロセス。これらの不要な文字には通常、空白文字、改行文字、コメント、場合によってはブロック区切り文字が含まれます。これらはコードに読みやすさを追加するために使用されますが、実行には必要ありません。

現在、帯域幅を節約するためにHTML、CSS、Javascriptに対してこれを行っていますが、特定のタグ（つまり、ulとliアイテム）。これは本当ですか？

縮小されたコードを処理するときに誤動作する注目すべきブラウザ、プロキシ、またはその他のユーザーエージェントはありますか？

ソースを表示するときに読みやすさが失われる以外に、縮小化の欠点はありますか？

javascripthtmlcsswebminify
22
JohnCand

特定のタグ（つまり、ulアイテムとliアイテム）の間に空白がない場合にブラウザーが誤動作したことを覚えていると誰かが私に言いました。これは本当ですか？

はい、特定の状況では、要素がinline-blockまたはinlineを表示するように設定されている場合などです。

次の2つのリストは、<li>要素間の空白のため、レンダリングが異なります。

html

<ul>
    <li>simple</li>
    <li>list</li>
</ul>

<ul><li>minified</li><li>list</li></ul>

css

li {
    display: inline-block;
    background: blue;
    color: white;
}

レンダリングされた出力

enter image description here

http://jsfiddle.net/Uwv3e/

13
xec

縮小化により、保守性が失われます...通常、サイトサイズで約4〜8kbの節約になります。サイト上の単一のjpgを圧縮し、画像のメタデータを削除することで、さらに節約できます。

大量のページ、サブページ、テンプレート、および5,000行を超えるCSSとJSを含むウェブサイトを構築しているのでない限り、特にメンテナンスが必要な場合は、縮小化は労力の無駄になります。修正、縮小、新しいバージョンでの縮小ファイルの上書きを行うためだけに、ファイルの縮小されていないバージョンを浮かび上がらせ、サイトを維持している次の人が同じワークフローを使用し、縮小されたCSSファイルに変更を加えないように祈ってください。戻ってきて、彼の変更を一掃します...

私はこれが起こるのを見たのでこれを持ち出します。ミニファイの前後のサイトでGTmetricsとPingdomのスコアを実行しましたが、スコアと読み込み速度は、それだけの価値があるほど変化することはほとんどありません。

私はいつもミニファイを「ペニーを節約するためにドルを使う」と呼んでいます。あなたの努力は、開発プロジェクトの他の場所でよりよく費やすことができます。

9
Ben

[〜＃〜] html [〜＃〜]、CSS、およびJavascriptを縮小するのは悪い考えですか？はい、もちろん！

ただし、CSSとJavascriptを縮小することをお勧めします。

どうして？

  • 縮小化は、（a）によって、「mySuperTollesFunctionCall（）」から「m（）」などのコンパクトな名前の人間が読める変数名を置き換え、（ b）空白の削除
  • （a）と（b）の両方から恩恵を受けることができるJavaScript
  • あなたのCSSは（b）からのみ恩恵を受けることができます
  • あなたのHTMLコードは、理論的には（b）からのみ恩恵を受けることができますが、それは試す価値がありません。

シンプルで優れたHTMLエディターであれば、HTMLファイルを適切にフォーマットできます。 「pre」ブロック内の空白に注意し、W3Cコンプライアンスなどのヒントを提供します。

HTMLファイルのサイズが心配な場合は... Webサーバーで静的ファイルのGZIP圧縮を有効にする必要があります。ほとんどの生きている化石がそれを処理し、顧客はそれを高く評価します。

http://www.schroepl.net/projekte/mod_gzip/browser.htm

7
Adrian Salazar

いくつか ブラウザ IEバージョンには縮小されたfont-face宣言に問題があります。以下を参照してください。

4
leo

特定のタグ（つまり、ulアイテムとliアイテム）の間に空白がない場合にブラウザーが誤動作したことを覚えていると誰かが私に言いました。これは本当ですか？

いいえ、その記述は誤りです。これは、 空白に関するHTML仕様 に従ってブラウザがどのように機能するかを示しています。空白のシーケンス（タブ、改行、スペース）は同じことを意味します。

次のマークアップを取ります。

<ul>
    <li>A</li>
    <li>B</li>
</ul>

SGML改行ルール 開始タグの後、終了タグの前の空白を無視できることを示した後のこれの正しい縮小は、次のようになります。

<ul><li>A</li> <li>B</li></ul>

ミニファイツールが次のことを示した場合、ミニファイアが壊れたと言うのが適切でしょう。

<ul><li>A</li><li>B</li></ul>

このルールの例外はPREタグです。これは、事前にフォーマットされたコンテンツを指定し、ブラウザーはすべての空白文字をレンダリングすることになっています。また、技術的にはHTMLコンテンツの一部ではないため、CDATAをそのままにしておく必要があると思います。

1
Dar Brett