Bagaimana HTTP caching berfungsi dengan aset immutable dan CDN?

Question

IT Interview Practice · Accepted Answer

HTTP caching membolehkan browser dan CDN menggunakan semula respons dan bukannya mengambilnya semula, dikawal oleh header **`Cache-Control`**. Corak yang menang untuk aplikasi web: **hash-kan nama fail aset anda dan cache-kan ia selama-lamanya; kekalkan HTML tidak-boleh-cache.**

## Strategi dua-peringkat

```http
# Aset yang di-hash dan berversi — kandungan tidak pernah berubah untuk sesuatu URL
Cache-Control: public, max-age=31536000, immutable
# cth.  /static/app.9f2c1a.js   (hash berubah apabila kandungan berubah)

# HTML — mesti sentiasa segar supaya ia boleh menunjuk ke hash aset baharu
Cache-Control: no-cache
```

- **`immutable`** memberitahu browser untuk tidak pernah mengesah-semula (revalidate) — tiada permintaan bersyarat langsung, walaupun semasa muat semula. Selamat kerana hash nama fail *ialah* versinya; kandungan baharu = URL baharu.
- **`no-cache`** pada HTML dinamakan secara mengelirukan: ia bermaksud "simpan ia, tetapi sahkan-semula sebelum guna" (304 jika tidak berubah), jadi pengguna sentiasa mendapat HTML yang merujuk hash aset semasa.

## Pengesahan-semula dan CDN

- **`ETag`** / `Last-Modified` membolehkan respons `304 Not Modified` yang murah apabila `max-age` luput.
- Suatu **CDN** cache pada nod tepi (edge) berdekatan pengguna. Guna `s-maxage` untuk cache CDN yang dikongsi dan `stale-while-revalidate` untuk menyajikan kandungan basi serta-merta sambil menyegar di latar belakang:

```http
Cache-Control: public, s-maxage=600, stale-while-revalidate=86400
```

## Perangkap

- Caching HTML dengan `max-age` yang panjang → pengguna terkandas pada versi lama tanpa cara untuk membatalkannya.
- `immutable` pada URL yang tidak di-hash → anda tidak boleh menghantar pembetulan.

## Mengapa ia penting

Caching ialah kemenangan prestasi termurah — ia menjadikan lawatan berulang kos rangkaian sifar dan melepaskan beban origin. Corak aset-immutable-hash + HTML-disahkan-semula ialah standard industri; menjelaskan *mengapa* `no-cache` ≠ "jangan cache" menandakan kedalaman sebenar.

Strategi dua-peringkat

Pengesahan-semula dan CDN

Perangkap

Mengapa ia penting

Soalan berkaitan