%20%E3%81%8C%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%81%AA%E3%81%97%E3%81%A7%E5%A4%96%E9%83%A8%20CSS%20%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%8B%E3%82%89%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%AE%E3%81%AF%E3%81%AA%E3%81%9C%E3%81%A7%E3%81%99%E3%81%8B%3F.png)
私はウェブサイトを作成中で、Google の外部 CSS リンクからいくつかのアイコンをテストしています。外部リンクを index.html ファイルに書き込んだところ、すべて正常に動作しました。その後、インターネットがない場合に何が起こるかをテストするアイデアを思いつきました。アイコンが読み込まれないだろうと予想しました。インターネットにアクセスできないにもかかわらず、アイコンは正常に読み込まれました。なぜこのようなことが起こったのでしょうか。どうしてそんなことが起こり得るのでしょうか。
答え1
これは、ブラウザがファイルをキャッシュしているためです。キャッシュは、表示したデータを一時的にハードドライブに保存します。これには、Web ページ上のテキストや画像、問題のアイコンが含まれます。
データをキャッシュする目的は何でしょうか? スピードです。ファイルをローカルにダウンロードすることで、Web サイトをナビゲートしたり、後日そのサイトに戻ったりするときに、データを繰り返しダウンロードする必要がなくなります。場合によっては、節約できる時間はわずかですが、すでにデータがあるため、ページが瞬時に読み込まれるのが目に見えてわかる場合もあります。
コメントで述べられているように、ブラウザのキャッシュをクリアすると、アイコンは消えます。ただし、別のブラウザを開いてテストすると、そのブラウザではアイコンがキャッシュされていないため、アイコンは表示されません。
ちなみに、ブラウザの中には、まだ見ていないページのデータもキャッシュするものがあります。これはプリフェッチと呼ばれます。Web ページを見ている間、ブラウザはバックグラウンドでリンクをナビゲートし、それらのページをキャッシュにダウンロードし始めます。これにより、リンクをクリックした場合により速く読み込まれます。