47 lines
4.3 KiB
XML
47 lines
4.3 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 760" role="img" aria-labelledby="title desc">
|
|
<title id="title">Критический путь первого экрана</title>
|
|
<desc id="desc">Схема показывает, как начальный HTML открывает обнаружение CSS, JavaScript и hero-изображения, а затем свободный главный поток и готовые стили позволяют нарисовать полезный экран.</desc>
|
|
<defs>
|
|
<linearGradient id="background" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0" stop-color="#111b30"/>
|
|
<stop offset="1" stop-color="#243350"/>
|
|
</linearGradient>
|
|
<marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#a7bad7"/>
|
|
</marker>
|
|
</defs>
|
|
<rect width="1000" height="760" fill="url(#background)"/>
|
|
<g font-family="Arial, sans-serif">
|
|
<text x="70" y="68" fill="#f8fbff" font-size="34" font-weight="700">Критический путь полезного экрана</text>
|
|
<text x="70" y="104" fill="#c1cee2" font-size="20">Быстрый ответ HTML полезен, но не завершает визуальную работу браузера.</text>
|
|
<rect x="70" y="156" width="260" height="110" rx="20" fill="#4a93e9"/>
|
|
<text x="200" y="202" text-anchor="middle" fill="#0e2038" font-size="25" font-weight="700">HTML</text>
|
|
<text x="200" y="234" text-anchor="middle" fill="#16304e" font-size="18">разбор и обнаружение</text>
|
|
<path d="M 330 211 L 426 211" stroke="#a7bad7" stroke-width="5" marker-end="url(#arrow)"/>
|
|
<path d="M 330 223 C 380 285 420 300 480 316" fill="none" stroke="#a7bad7" stroke-width="5" marker-end="url(#arrow)"/>
|
|
<path d="M 330 223 C 400 385 450 450 510 474" fill="none" stroke="#a7bad7" stroke-width="5" marker-end="url(#arrow)"/>
|
|
<rect x="450" y="156" width="260" height="110" rx="20" fill="#5ed2bb"/>
|
|
<text x="580" y="202" text-anchor="middle" fill="#09362d" font-size="25" font-weight="700">CSS</text>
|
|
<text x="580" y="234" text-anchor="middle" fill="#154f43" font-size="18">stylesheet и CSSOM</text>
|
|
<rect x="450" y="292" width="260" height="110" rx="20" fill="#ffb45c"/>
|
|
<text x="580" y="338" text-anchor="middle" fill="#351d00" font-size="25" font-weight="700">JavaScript</text>
|
|
<text x="580" y="370" text-anchor="middle" fill="#523000" font-size="18">parse и main thread</text>
|
|
<rect x="450" y="448" width="260" height="110" rx="20" fill="#d79bf7"/>
|
|
<text x="580" y="494" text-anchor="middle" fill="#361442" font-size="25" font-weight="700">Hero</text>
|
|
<text x="580" y="526" text-anchor="middle" fill="#512466" font-size="18">request, decode, paint</text>
|
|
<path d="M 710 211 C 770 211 755 330 815 330" fill="none" stroke="#a7bad7" stroke-width="5" marker-end="url(#arrow)"/>
|
|
<path d="M 710 347 L 815 347" stroke="#a7bad7" stroke-width="5" marker-end="url(#arrow)"/>
|
|
<path d="M 710 503 C 770 503 758 366 815 366" fill="none" stroke="#a7bad7" stroke-width="5" marker-end="url(#arrow)"/>
|
|
<rect x="830" y="272" width="120" height="150" rx="24" fill="#f5f8ff"/>
|
|
<text x="890" y="321" text-anchor="middle" fill="#1b2840" font-size="19" font-weight="700">Готово</text>
|
|
<text x="890" y="350" text-anchor="middle" fill="#1b2840" font-size="19" font-weight="700">для</text>
|
|
<text x="890" y="379" text-anchor="middle" fill="#1b2840" font-size="19" font-weight="700">paint</text>
|
|
<path d="M 890 422 L 890 514" stroke="#a7bad7" stroke-width="5" marker-end="url(#arrow)"/>
|
|
<rect x="745" y="545" width="210" height="100" rx="22" fill="#f5f8ff"/>
|
|
<text x="850" y="586" text-anchor="middle" fill="#1b2840" font-size="22" font-weight="700">Полезный</text>
|
|
<text x="850" y="617" text-anchor="middle" fill="#1b2840" font-size="22" font-weight="700">первый экран</text>
|
|
<text x="70" y="682" fill="#c1cee2" font-size="18">Проверяем разрыв: URL обнаружен поздно, CSS не готов или main thread занят.</text>
|
|
<text x="70" y="714" fill="#c1cee2" font-size="18">Отдельно: изображение прошло request, decode и paint?</text>
|
|
</g>
|
|
</svg>
|