48 lines
4.7 KiB
XML
48 lines
4.7 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 1160" role="img" aria-labelledby="title desc">
|
||
<title id="title">Путь HTTP-ответа для HTML, asset и API</title>
|
||
<desc id="desc">Вертикальная схема показывает, как браузер проверяет HTML с no-cache и ETag, получает новый URL версионированного JavaScript и отдельно применяет короткую свежесть к API.</desc>
|
||
<rect width="720" height="1160" fill="#f8fafc"/>
|
||
<rect x="44" y="34" width="632" height="110" rx="18" fill="#172554"/>
|
||
<text x="360" y="78" text-anchor="middle" fill="#fff" font-size="28" font-family="Arial, sans-serif" font-weight="700">Один домен — три контракта ответа</text>
|
||
<text x="360" y="112" text-anchor="middle" fill="#cbd5e1" font-size="20" font-family="Arial, sans-serif">Сначала тип ресурса, потом TTL</text>
|
||
|
||
<rect x="140" y="188" width="440" height="110" rx="16" fill="#e0f2fe" stroke="#0284c7" stroke-width="3"/>
|
||
<text x="360" y="232" text-anchor="middle" fill="#0c4a6e" font-size="27" font-family="Arial, sans-serif" font-weight="700">HTML /catalog</text>
|
||
<text x="360" y="267" text-anchor="middle" fill="#0c4a6e" font-size="21" font-family="Arial, sans-serif">no-cache + ETag</text>
|
||
<path d="M360 298v52" stroke="#334155" stroke-width="5" marker-end="url(#arrow)"/>
|
||
|
||
<rect x="90" y="354" width="540" height="136" rx="16" fill="#fef3c7" stroke="#d97706" stroke-width="3"/>
|
||
<text x="360" y="397" text-anchor="middle" fill="#78350f" font-size="26" font-family="Arial, sans-serif" font-weight="700">Кэш проверяет сохранённый HTML</text>
|
||
<text x="360" y="431" text-anchor="middle" fill="#78350f" font-size="20" font-family="Arial, sans-serif">свежий — использует; устаревший —</text>
|
||
<text x="360" y="460" text-anchor="middle" fill="#78350f" font-size="20" font-family="Arial, sans-serif">отправляет If-None-Match к origin</text>
|
||
<path d="M360 490v52" stroke="#334155" stroke-width="5" marker-end="url(#arrow)"/>
|
||
|
||
<rect x="90" y="546" width="250" height="108" rx="16" fill="#dcfce7" stroke="#16a34a" stroke-width="3"/>
|
||
<text x="215" y="588" text-anchor="middle" fill="#14532d" font-size="27" font-family="Arial, sans-serif" font-weight="700">304</text>
|
||
<text x="215" y="621" text-anchor="middle" fill="#14532d" font-size="19" font-family="Arial, sans-serif">тело остаётся</text>
|
||
<rect x="380" y="546" width="250" height="108" rx="16" fill="#fee2e2" stroke="#dc2626" stroke-width="3"/>
|
||
<text x="505" y="588" text-anchor="middle" fill="#7f1d1d" font-size="27" font-family="Arial, sans-serif" font-weight="700">200</text>
|
||
<text x="505" y="621" text-anchor="middle" fill="#7f1d1d" font-size="19" font-family="Arial, sans-serif">новый HTML</text>
|
||
<path d="M505 654v50" stroke="#334155" stroke-width="5" marker-end="url(#arrow)"/>
|
||
|
||
<rect x="110" y="708" width="500" height="120" rx="16" fill="#ede9fe" stroke="#7c3aed" stroke-width="3"/>
|
||
<text x="360" y="752" text-anchor="middle" fill="#4c1d95" font-size="25" font-family="Arial, sans-serif" font-weight="700">HTML ссылается на новый asset URL</text>
|
||
<text x="360" y="789" text-anchor="middle" fill="#4c1d95" font-size="20" font-family="Arial, sans-serif">/assets/app.4f91.js вместо app.1120.js</text>
|
||
<path d="M360 828v52" stroke="#334155" stroke-width="5" marker-end="url(#arrow)"/>
|
||
|
||
<rect x="110" y="884" width="500" height="102" rx="16" fill="#e0f2fe" stroke="#0284c7" stroke-width="3"/>
|
||
<text x="360" y="925" text-anchor="middle" fill="#0c4a6e" font-size="25" font-family="Arial, sans-serif" font-weight="700">Asset: public, max-age=31536000</text>
|
||
<text x="360" y="957" text-anchor="middle" fill="#0c4a6e" font-size="19" font-family="Arial, sans-serif">длинный TTL безопасен из-за нового ключа</text>
|
||
|
||
<rect x="110" y="1028" width="500" height="92" rx="16" fill="#ecfccb" stroke="#65a30d" stroke-width="3"/>
|
||
<text x="360" y="1058" text-anchor="middle" fill="#365314" font-size="24" font-family="Arial, sans-serif" font-weight="700">API: короткая свежесть</text>
|
||
<text x="360" y="1084" text-anchor="middle" fill="#365314" font-size="22" font-family="Arial, sans-serif" font-weight="700">по допустимой давности</text>
|
||
<text x="360" y="1110" text-anchor="middle" fill="#365314" font-size="18" font-family="Arial, sans-serif">не смешивать с персональным ответом</text>
|
||
|
||
<defs>
|
||
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
|
||
<path d="M0 0L10 5L0 10z" fill="#334155"/>
|
||
</marker>
|
||
</defs>
|
||
</svg>
|