web cache - TECH-SHARING-STUDY/FE_STUDY GitHub Wiki
μμΈ μ€ μμ 20% κ° μ 체 κ²°κ³Όμ 80% λ₯Ό λ§λ λ€
μ΅κ·Ό μ κ·Όν λ°μ΄ν°λ λ€μ μ κ·Όν νλ₯ μ΄ ν¬λ€
μ΅κ·Ό μ κ·Όν λ°μ΄ν° μ£Όλ³ κ³΅κ°μ λ€μ μ κ·Όν νλ₯ μ΄ ν¬λ€
/*
μκ° μ§μμ± - λ°°μ΄μ μμμ μ κ·Όνλ μΈλ±μ€λ‘ μ¬μ©λλ λ³μ i
κ³΅κ° μ§μμ± - λ°°μ΄μ 0 ~ 9 λ² μ§Έ μμ
*/
const arr = [];
for (let i = 0 ; i < 10 ; i++) {
arr[i] = i;
}
μΊμλ CPU μΉ© μμ λ€μ΄κ°λ μκ³ λΉ λ₯Έ λ©λͺ¨λ¦¬λ€. νλ‘μΈμ€κ° λ§€λ² λ©μΈ λ©λͺ¨λ¦¬μ μ κ·Όν΄ λ°μ΄ν°λ₯Ό λ°μμ€λ©΄ μκ°μ΄ μ€λ 걸리기 λλ¬Έμ, μΊμμ μμ£Ό μ¬μ©νλ λ°μ΄ν°λ₯Ό λ΄μλκ³ , ν΄λΉ λ°μ΄ν°κ° νμν λ νλ‘μΈμκ° λ©μΈ λ©λͺ¨λ¦¬ λμ μΊμμ μ κ·Όνλλ‘ ν΄ μ²λ¦¬ μλλ₯Ό λμΈλ€.
μμ£Ό μ°Ύμ κ² κ°μ λ°μ΄ν°λ₯Ό μ΄λκ°μ μ μ₯ν΄μ μκ°μ μ μ½νμ!
ν΅μμ μΌλ‘ μλμ λ°μ΄ν° μ μ₯μλ³΄λ€ λΉ λ₯΄κ³ , μμ£Ό μ‘μΈμ€λλ λ°μ΄ν°λ₯Ό 보μ
νλμ¨μ΄, μ΄μ체μ , μΉ λΈλΌμ°μ , μΉ μ ν리μΌμ΄μ λ±μμ λ€μνκ² μ¬μ©
μΊμ±μ μΉ λΈλΌμ°μ λΆν° μΉμλ²μ νλλμ€ν¬ λ° CPUμ μ΄λ₯΄κΈ°κΉμ§ λͺ¨λ κ³³μ μ μ©λλ€.
λ€νΈμν¬λ₯Ό ν΅ν΄ 무μΈκ°λ₯Ό κ°μ Έμ€λ μμ
μ λλ¦° λμμ λΉμ©λ λ§μ΄ λ λ€. ν΄λΌμ΄μΈνΈμ μμ²κ³Ό μλ΅μ 볡μ¬λ³Έμ μ μ₯νλ€κ° λμΌν URLμ λν μμ²μ΄ μμΌλ©΄ μλ²μ λ€μ μμ²νμ§ μκ³ , μ μ₯ν΄ λ 리μμ€λ₯Ό μλΉνκ±°λ μ¬μ¬μ©νλ κ²μ μΉ μΊμ(web cache)
λΌ νλ€
- latency μ μ½ - μλ²μ μμ²μ νκ³ κΈ°λ€λ¦΄ νμκ° μκΈ° λλ¬Έμ μκ°μ΄ μ μ½λλ€.
- λ€νΈμν¬ νΈλν½ μ μ½ - 리μμ€λ₯Ό μ¬μ¬μ©νκΈ° λλ¬Έμ ν΄λΌμ΄μΈνΈκ° μ¬μ©νλ λμνμ΄ μ€μ΄λ λ€. λ§μ½ λ°μ΄ν° ν΅μ μ λΉμ©μ΄ λ λ€λ©΄, λΉμ©μ μ κ°ν μ μλ€.
CDN (Contents Delivery Network), Proxy Server (Forward Proxy, Reverse Proxy, web accelerator Β·Β·Β·. ), load balancer, browser cacheΒ·Β·Β·.
λ¨μΌ μ¬μ©μλ₯Ό μν μΊμμ΄λ€. λΈλΌμ°μ μ μ μ₯λλ μΊμλ‘, λ€λ‘ κ°κΈ°, μμΌλ‘ κ°κΈ°, μλ‘ κ³ μΉ¨λ± λ°©λ¬Ένλ νμ΄μ§μ μ¬μ©λλ€.
λ€μμ μ¬μ©μλ₯Ό μν μΊμμ΄λ€. μΈκΈ°κΈ κ°μ΄ λ§μ΄ μ‘°νκ° λλ 리μμ€λ€μ μ μ₯νλ€.
μΊμ ν€ : μμ² λ©μλ + λμ URI γ γ GET /files
- GET μμ²μ μ±κ³΅ν κ²°κ³Ό: HTML, JS, CSS, μ΄λ―Έμ§ λ± μ μ 리μμ€ νμΌμ λν
GET
μμ²μ΄ μ±κ³΅νμ λμ κ²°κ³Ό200 OK
- μꡬμ μΈ λ¦¬λ€μ΄λ νΈ:
301
μλ΅ - νμ΄μ§λ₯Ό μ°Ύμ μ μμ:
404
μλ΅ - μμ νμ§ μμ κ²°κ³Ό :
206
(λΆλΆμ μΈ μ»¨ν μΈ ) μλ΅ - μΊμ ν€λ‘ μ¬μ©νκΈ°μ μ μ ν 무μΈκ°κ° μ μλ κ²½μ°μ
GET
μ΄μΈμ μλ΅ (?)
λΈλΌμ°μ μΊμλ νλ λμ€ν¬λ λ©λͺ¨λ¦¬μ ν λΆλΆμ μ μ₯νλ€. λΈλΌμ°μ κ° μννλ λͺ¨λ HTTP μμ²μ λ¨Όμ μμ²νκΈ° μ μ μ¬μ©ν μ μλ μ ν¨ν μΊμλ μλ΅μ΄ μλμ§ νμΈνκΈ° μν΄ λΈλΌμ°μ μΊμλ‘ μ μ‘νλ€. μΌμΉνλ μλ΅μ΄ μμΌλ©΄ μΊμμμ μ½λλ€.
μΊμμ μ¬μ©νλ λ€μμ APIλ λͺ¨λ λΈλΌμ°μ μμ μ§μλλ€.
- Cache-Control : μ΄λ»κ², μΌλ§λ, λκ° μΊμν μ§
- ETag : λΈλΌμ°μ μμ λ§λ£λ μλ΅μ λν΄ λ¦¬μμ€κ° λ°λμλμ§μ λν μ ν¨μ± κ²μ¬
- Last-Modified : ETagμ λμΌ. νμ§λ§ ν ν°μ΄ μλ μκ°μ κΈ°μ€μΌλ‘ μ ν¨μ± κ²μ¬
μ΄μ
- μλ² μΈ‘μμλ ν΄λΉ μμ²μ λν μλ΅ λ¦¬μμ€λ₯Ό λ€ λ³΄λ΄μ£Όμ§ μμλ λλ€
- λΈλΌμ°μ λ μμ²μ λν μλ΅μ κΈ°λ€λ¦¬μ§ μμλ λλ€
- λ°μ΄ν° ν΅μ μ λλ λΉμ©μ μ κ°ν μ μλ€
λ©λͺ¨λ¦¬ μΊμλ λΈλΌμ°μ λ₯Ό λ«μ λκΉμ§ 컨ν μΈ μ¬μ©νκ³ , λμ€ν¬ μΊμλ μꡬμ μΌλ‘ λμνλ€.
π λΈλΌμ°μ κ° μ΄λ»κ² μ νλμ§λ λͺ¨λ₯΄κ² μ
λΈλΌμ°μ κ° λ§λλ λͺ¨λ HTTP μμ²μ λ¨Όμ λΈλΌμ°μ μΊμλ‘ λΌμ°ν λμ΄, λ€νΈμν¬ μμ² μ μ¬μ©ν μ μλ μΊμλ μλ΅μ΄ μλμ§ νμΈνλ€. μΊμλ μλ΅μ΄ μκ³ , μ ν¨νλ€λ©΄ μμ²μ 보λ΄μ§ μκ³ ν΄λΉ μλ΅μ μ½μ΄ μ¬μ©νλ€ β λ μ΄ν΄μ λ° νΈλν½ μ κ°
- μλ΅ ν€λκ° μΊμμ 보κ΄νμ§ λ§λΌκ³ μ§μνλ©΄ μΊμνμ§ μλλ€.
- μμ²μ΄ μΈμ¦ λλ 보μ (μ : HTTPS) μΈ κ²½μ°, 곡μ μΊμμ μΊμνμ§ μλλ€.
- λ€μκ³Ό κ°μ κ²½μ°μλ μΊμν 리μμ€λ₯Ό μ¬μ©νλ€.
- λ§λ£ μκ°μ΄λ μ ν¨ μκ°μ΄ ν€λμ μκ³ , μ¬μ ν μΊμμ μ ν¨ μκ°μ΄ λ¨μμμ λ
- μΊμκ° μ΅κ·Όμ νμλ₯Όλ³΄κ³ λΉκ΅μ μ€λ μ μ μμ λ κ²½μ° (?)
- 리μμ€μ μΊμκ° λ§λ£λμ λ, μλ²λ μ΄λ₯Ό κ²μ¦νμ¬ μ¬μ ν μ¬μ©ν΄λ λλμ§ μλ €μ€λ€.
- νΉμ μν© (μ : λ€νΈμν¬μμ μ°κ²°μ΄ λμ΄μ§ κ²½μ°)μμ μΊμλ μλ²μ κ²μ¦νμ§ μκ³ , λ§λ£λ μΊμλ₯Ό μ¬μ©νλ€.
ETagλ Last-modified κ° μλ΅ ν€λμ μλ€λ©΄, μΌλ°μ μΌλ‘ μΊμν μ μλ€κ³ κ°μ£Όλλ€. (νμ κ·Έλ°κ±΄ μλ)
μΊμμμ μ ν¨ μκ°κ³Ό κ²μ¦μ 컨ν μΈ λ₯Ό μ¬μ¬μ©μ μμ΄ μ€μνλ€. μΊμμμ μ ν¨κΈ°κ°μ΄ λ§λ£λμμ κ²½μ°, μλ²μμ μλ‘μ΄ λ¦¬μμ€λ₯Ό μλ΅λ°μ μ¬μ©ν μ μμ§λ§, μ ν¨μ± κ²μ¬λ₯Ό ν΅ν΄ 리μμ€κ° λ³κ²½λμ§ μμμ κ²½μ° μΊμλ μλ΅μ μ¬μ©νλ€.
HTTP/1.1 μ€νμμ μμ² ν€λμ μλ΅ ν€λμ μ‘°ν©μΌλ‘ μ μ΄νλ€.
Cache-Control: no-store
Cache-Control: no-cache, no-store, must-revalidate
Cache-Control: no-cache
-
no-store: μ΄λμλ μΊμνμ§ λ§λΌ
맀 μμ²μ΄ μλ²λ‘ μ μ‘λκ³ μλ΅ λ°μ
-
no-cache: λ§€λ² μ¬μ©νκΈ° μ μλ²μ μ¬μ©ν΄λ λλκ³ λ¬Όμ΄λ΄λΌ
Etagκ° μμ κ²½μ°, μΊμλ μλ΅μ μ ν¨μ±μ κ²μ¬νλ λ° ν λ² ν΅μ νμ§λ§, 리μμ€κ° λ³κ²½λμ§ μμ κ²½μ° λ€μ΄λ‘λλ°μ§ μμ μ μλ€.
-
must-revalidate : λ§λ£λ μΊμλ§ λ¬Όμ΄λ΄λΌ
Cache-Control: private
Cache-Control: public
-
public μλ΅μ λͺ¨λ κ³³μμ μ μ₯λ μ μλ€.
λ³΄ν΅ λͺ μμ μΈ μΊμ± μ 보
max-age
κ° μλ΅μ΄ μ΄λ κ²½μ°μλ μΊμ κ°λ₯νλ€κ³ λνλ΄λ―λ‘, λͺ μνμ§ μμλ λλ€. HTTP μΈμ¦μΌλ‘ 보νΈλ νμ΄μ§λ privateλ‘ μ€μ λμ΄ κ³΅μ μΊμμ μ μ₯λμ§ μλλ€. μ΄ κ²½μ°μ publicμΌλ‘ λͺ μμ μΌλ‘ μ€μ νλ©΄ μΈμ¦μ΄ λ μνμλ μΊμνλ€. -
private
λΈλΌμ°μ λ§ μΊμνλλ‘ μ€μ νλ€. μ΄ κ²½μ°μ 곡μ μΊμ (ex, proxy) μμλ μΊμν μ μλ€.
Cache-Control: max-age=60
μΊμν μλ΅μ μ¬μ©ν μ μλ μ΅λ μκ° (μ΄)μ΄λ€. μμ κ²½μ° 60μ΄ λμ μΊμλμ΄ μ¬μ¬μ©ν μ μλ€.
Etagμ Last-Modified λ₯Ό μ΄μ©ν΄ λ§λ£λ 리μμ€μ λν΄ μ¬κ²μ¦μ μμ²νλ€.
μ²μ μμ² ν 120μ΄κ° μ§λ νμ λμΌν 리μμ€μ λν΄ μ μμ²μ νλ€κ³ κ°μ ν΄λ³΄μ. λΈλΌμ°μ λ λ‘컬 μΊμλ₯Ό νμΈνκ³ μ΄μ μλ΅μ μ°Ύλλ€. νμ§λ§ λΈλΌμ°μ λ μ΄μ μλ΅μ΄ λ§λ£λμ΄ μ¬μ©ν μ μλ€. μ΄ μμ μμ λΈλΌμ°μ λ μ μμ²μ 보λ΄κ³ μ 체 리μμ€λ₯Ό λ€μ λ€μ΄λ‘λν μ μλ€. νμ§λ§, 리μμ€κ° λ³κ²½λμ§ μμ κ²½μ° μ΄λ―Έ μΊμμ μλ λμΌν μ 보λ₯Ό λ€μ΄λ‘λ ν μ΄μ κ° μκΈ°μ μ΄ μμ μ λΉν¨μ¨μ μ΄λ€.
Etag μ μ ν¨μ± κ²μ¬ ν ν°μ μ΄ λ¬Έμ λ₯Ό ν΄κ²°νκΈ° μν΄ λμλ€. μλ²λ μΌλ°μ μΌλ‘ 리μμ€μ ν΄μλ ν ν°μ μμ±νκ³ λ°ννλ€. ν ν°μ΄ μ ν¨νλ€λ©΄, 리μμ€κ° λ³κ²½λμ§ μμκΈ° λλ¬Έμ λ€μ΄λ‘λλ₯Ό 건λ λΈ μ μλ€.
If-None-Match: ν΄λΉ 리μμ€μ Etag κ°
λΈλΌμ°μ λ λ§λ£λ 리μμ€λ₯Ό μ¬ μμ²μ, HTTP μμ² ν€λμ ETag ν ν°μ μλμΌλ‘ μΆκ°νλ€. μλ²λ νμ¬ λ¦¬μμ€μ λΉκ΅νμ¬ ν ν°μ κ²μ¬νκ³ , ν ν°μ΄ λ³κ²½λμ§ μμλ€λ©΄ μΊμν 리μμ€λ₯Ό κ³μ μ¬μ©νλΌλ 304 Not Modified
μλ΅μ λ°ννλ€. μλ΅μ μ μ‘μμ μ μ‘ν λ°μ΄ν°κ° κ±°μ μμΌλ―λ‘, μμ²λ 리μμ€λ₯Ό λ€μ 보λ΄λ κ²λ³΄λ€ ν¨μ¬ λΉ λ₯΄κ³ , ν΅μ λΉμ©μ μ κ°ν μ μλ€.
Cache-control: max-age=N
μμ κ²½μ° μΊμμ μ ν¨ μλͺ μ Nκ³Ό λμΌνλ€. λ§μ½ μ΄ ν€λκ° μλ€λ©΄, Expires ν€λλ₯Ό κ²μ¬νλ€. Expires ν€λλ μλ€λ©΄ Last-Modified ν€λλ₯Ό μ°Ύλλ€. μ ν¨ μλͺ μ λ€μκ³Ό κ°μ΄ κ³μ°λλ€. μμ μμμλ‘ μ°μ μμκ° λλ€.
μ ν¨ μλͺ
= max-age
= Expires ν€λ - Date ν€λ
= ( Date ν€λ - Last-Modified ν€λ ) / 10
μ΅λν λ§μ μλ΅μ μ΅λν κΈΈκ² μΊμνκ³ , κ° μλ΅μ μ¬κ²μ¦μ΄ κ°λ₯νλλ‘ μ ν¨μ± κ²μ¬λ₯Ό νμ!
π γ μ΅λν μΊμλ 리μμ€λ₯Ό μ¬μ©νλ©΄μ, μΉνμ΄μ§ μ λ°μ΄νΈμ μΊμλ μλ΅μ 무μνκ³ μΆλ€
Cache-Control: max-age=31536000
μΊμλ 리μμ€λ μΊμ μ ν¨ μλͺ λ§νΌ λ³λ€λ₯Έ μ΄μ (μ¬μ©μκ° λΈλΌμ°μ μΊμλ₯Ό μ§μ)κ° μμ λκΉμ§ ν΄λΉ μΊμλ₯Ό μ¬μ¬μ©νλ€. ν¨μ¨μ μΌλ‘ μλΉνκΈ° μν΄ μΊμ κΈ°κ°μ κΈΈκ² μ‘μλλ°, μΉνμ΄μ§λ₯Ό μμ νλ€λ©΄ μ΄λ¨κΉ? μλ²λ μμ²μ λ°μ§ μλ μ΄μ, ν΄λΌμ΄μΈνΈμκ² μ λ°μ΄νΈλ μ¬μ€μ μ릴 μ μλ€. μ΄ κ²½μ°μλ μΊμλμ§ μμ λΈλΌμ°μ λ μ λ°μ΄νΈλ μΉνμ΄μ§λ₯Ό μ¬μ©νμ§λ§, μΊμλ λΈλΌμ°μ λ μ΄μ λ²μ μ νμΌμ μ¬μ©ν΄ μ λ°μ΄νΈ λμ§ μμ μΉ μ¬μ΄νΈλ₯Ό λ³΄κ² λ μ μλ€. μ΅λν κΈΈκ² μΊμνλ©΄μ, λΉ λ₯Έ μ λ°μ΄νΈλ₯Ό ν μ μμκΉ? νμΌμ λ΄μ©μ΄ λ³κ²½λλ©΄ λΈλΌμ°μ κ° μΊμλ κΈ°μ‘΄ νμΌμ μ¬μ©νμ§ μκ³ μλ‘μ΄ νμΌμ λ΄λ €λ°λλ‘ ν΄μΌ νλ€.
리μμ€μ URLμ λ³κ²½νκ³ , 컨ν μΈ κ° λ³κ²½λ λλ§λ€ μ¬μ©μκ° μμλ΅μ λ€μ΄λ°λλ‘ νλ©΄ λλ€.
-
HTML
no-cache
μ€μ μ 맀 μμ²λ§λ€ μ¬κ²μ¦μ ν΅ν΄ 컨ν μΈ κ° λ³κ²½λ κ²½μ°μλ§ μ΅μ λ²μ μ κ°μ Έμ€κ² νλ€. html μμ linkλ script νκ·Έ μμ μλ css, js νμΌ κ²½λ‘κ° ν¬ν¨λκΈ° λλ¬Έμ μ΄ νμΌλ€μ 컨ν μΈ κ° λ³κ²½λλ©΄, νμ΄μ§μ HTML λν λ³κ²½λμ΄ μμ²μ μ λ°μ΄νΈ λ λ΄μ©μ λ€μ΄λ‘λνκ² λλ€. -
CSS, JS
CDN λ±μ΄ μΊμν μ μλ€. μμ κ²½μ°μ CSSκ° μ λ°μ΄νΈλλ©΄ html λ΄μ URLλ λ³κ²½λκΈ° λλ¬Έμ 1λ μ΄λΌλ κΈ΄ μκ°νμ λ§λ£λλλ‘ μ€μ ν μ μλ€.
λΈλΌμ°μ μ_μΊμ_맀컀λμ¦
μΉ μΊμ¬- κ°λν¬μ μμ곡κ°
μΉ μΊμ±μ μ¨κ²¨μ§ μμλ€
μΉ μΊμ(WEB Cache)λ 무μμΈκ°?
The hidden components of Web Caching
[10λΆ ν μ½ν‘] π»ν°κ³°μ Cache