JS (jQuery) と CSS を含む HTML ファイルがあります。たとえば、すべてのファイルを変換して最小化し、すべてを index.html に入れるコンバーターが必要です。Google はこれを使用しているようです。外部ファイルはなく、画像もありません。すべてが 1 つのファイルに含まれており、リリース前にプリコンパイルされているはずです。
また、これは良い考えですか？
質問する
1394 次
4 に答える
2
一般的に、これは良い考えではありません。
CSS ファイルと JavaScript ファイルを分割するということは、それらを個別にキャッシュできることを意味します。多くのページで共通の CSS と JavaScript を使用する可能性があります。それらのキャッシュを許可せず、代わりに各ページに保存すると、ユーザーはアクセスするページごとにこれらのファイルの新しいコピーを効果的にダウンロードすることになります。
ここで、これらのファイルの縮小版を提供することをお勧めします。また、圧縮されるように gzip または deflate 転送エンコーディングを必ず追加してください。テキストはうまく圧縮されます...通常は約 1/8 の比率です。
(すべてを 1 つのファイルにロードしたことがあることに注意してください。私は Nintendo Wii 用の単一ページの Web アプリケーションに取り組んでいましたが、キャッシュ機能はまったくありませんでした。すべてを 1 つのファイルに入れることは理にかなっていますが、それでも、サーバー側で自動化する場合にのみ努力する価値があります。)
于 2013-01-26T18:11:55.560 に答える
1
CSS と JS を連結することはお勧めしません。css をページの上部に、js を下部に配置するだけです。
CSS と JS を縮小するには、gruntjsを使用する必要があります
また、この記事を読むことをお勧めします: Web デザイナーとフロントエンド開発者のためのフロントエンド パフォーマンス
于 2013-01-26T18:11:53.957 に答える
1
ページをより速くロードすることが目的の場合:
画像の場合:ブラウザーは 1 つのドメインだけでなく、さまざまなドメインからリソースをダウンロードすることを好むため、さまざまなドメインの画像スプライトまたは画像を使用してみてください。
スクリプトと css の場合:空白を減らしてサイズを縮小できるオンライン ミニファイヤを使用します (Web ホスティングを使用している場合、ホストは gzip などを使用してスクリプトを既に圧縮している可能性があります)。
インデックス ページのようなランディング ページの場合: スタイルが少ない場合は、タグ内にスタイルを挿入してみ
<style></style>てください。これにより、ページの読み込みが非常に高速になります。Facebook モバイルはそのようにします。
于 2013-01-26T18:15:53.590 に答える
-1
もしそれが良い考えでなかったら、Google はそれを使っていませんでした!
すべてを単一のファイルに入れると、ブラウザーが新しいバージョンのファイルが利用可能かどうかを確認するときに、HTTP 要求が少なくなります。
また、一部のリソースが更新されないという問題も読み取れます。これは「通常の」開発者にとっては頭痛の種ですが、AJAX アプリケーションでは大惨事です。
公開されているツールですべてを行っているとは知りませんが、Google が独自のツールを持っていることは確かです。また、たとえば GWT では、そのような埋め込みの多くがコンパイラによって行われたことにも注意してください。
あなたができることは、検索することです：
CSS 画像埋め込み- 画像を CSS にエンコードするための
CSS および JS ミニファイアー- 単一の CSS/JS を構築して最小化するため
そして、それを HTML に埋め込む簡単なツールが必要です。
于 2013-01-26T18:16:47.453 に答える