55 lines
4.4 KiB
XML
55 lines
4.4 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 780" role="img" aria-labelledby="title desc">
|
|
<title id="title">Профиль первой загрузки с четырьмя владельцами времени</title>
|
|
<desc id="desc">Вертикальная схема показывает документ и сеть, JavaScript на главном потоке, CSS и hero-изображение как отдельные дорожки, которые сходятся в полезный первый экран.</desc>
|
|
<defs>
|
|
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0" stop-color="#101a32"/>
|
|
<stop offset="1" stop-color="#172a45"/>
|
|
</linearGradient>
|
|
<filter id="shadow" x="-10%" y="-10%" width="120%" height="130%">
|
|
<feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="#07101f" flood-opacity=".28"/>
|
|
</filter>
|
|
</defs>
|
|
<rect width="1000" height="780" fill="url(#bg)"/>
|
|
<text x="70" y="70" fill="#f6f8fc" font-family="Arial, sans-serif" font-size="34" font-weight="700">Первая загрузка — четыре независимые дорожки</text>
|
|
<text x="70" y="106" fill="#b8c8e3" font-family="Arial, sans-serif" font-size="20">Профиль отвечает «кому принадлежит задержка», а не складывает всё в одно число.</text>
|
|
<g font-family="Arial, sans-serif">
|
|
<g filter="url(#shadow)">
|
|
<rect x="70" y="152" width="860" height="100" rx="18" fill="#1e3558"/>
|
|
<rect x="96" y="178" width="154" height="48" rx="24" fill="#4e9af1"/>
|
|
<text x="173" y="209" text-anchor="middle" fill="#09192d" font-size="20" font-weight="700">Сеть</text>
|
|
<text x="282" y="193" fill="#f6f8fc" font-size="23" font-weight="700">HTML и критические запросы</text>
|
|
<text x="282" y="220" fill="#b8c8e3" font-size="18">redirect · connect · response · обнаружение URL</text>
|
|
<line x1="655" y1="202" x2="875" y2="202" stroke="#4e9af1" stroke-width="14" stroke-linecap="round"/>
|
|
</g>
|
|
<g filter="url(#shadow)">
|
|
<rect x="70" y="276" width="860" height="100" rx="18" fill="#27365b"/>
|
|
<rect x="96" y="302" width="154" height="48" rx="24" fill="#ffb45c"/>
|
|
<text x="173" y="333" text-anchor="middle" fill="#2a1700" font-size="20" font-weight="700">JS</text>
|
|
<text x="282" y="317" fill="#f6f8fc" font-size="23" font-weight="700">Главный поток</text>
|
|
<text x="282" y="344" fill="#c8d2e7" font-size="18">parse · execute · DOM · сторонний код</text>
|
|
<line x1="574" y1="326" x2="822" y2="326" stroke="#ffb45c" stroke-width="14" stroke-linecap="round"/>
|
|
</g>
|
|
<g filter="url(#shadow)">
|
|
<rect x="70" y="400" width="860" height="100" rx="18" fill="#1c4551"/>
|
|
<rect x="96" y="426" width="154" height="48" rx="24" fill="#5dd6ba"/>
|
|
<text x="173" y="457" text-anchor="middle" fill="#06342d" font-size="20" font-weight="700">CSS</text>
|
|
<text x="282" y="441" fill="#f6f8fc" font-size="23" font-weight="700">Стиль и layout</text>
|
|
<text x="282" y="468" fill="#c3e6df" font-size="18">stylesheet · CSSOM · style · layout</text>
|
|
<line x1="612" y1="450" x2="760" y2="450" stroke="#5dd6ba" stroke-width="14" stroke-linecap="round"/>
|
|
</g>
|
|
<g filter="url(#shadow)">
|
|
<rect x="70" y="524" width="860" height="100" rx="18" fill="#4b355d"/>
|
|
<rect x="96" y="550" width="154" height="48" rx="24" fill="#d59afa"/>
|
|
<text x="173" y="581" text-anchor="middle" fill="#321343" font-size="20" font-weight="700">Image</text>
|
|
<text x="282" y="565" fill="#f6f8fc" font-size="23" font-weight="700">Hero-изображение</text>
|
|
<text x="282" y="592" fill="#ead8f7" font-size="18">URL · transfer · decode · paint</text>
|
|
<line x1="600" y1="574" x2="846" y2="574" stroke="#d59afa" stroke-width="14" stroke-linecap="round"/>
|
|
</g>
|
|
<path d="M 500 640 L 500 681" stroke="#9bb0d3" stroke-width="5" stroke-linecap="round"/>
|
|
<path d="M 500 681 L 488 665 M 500 681 L 512 665" fill="none" stroke="#9bb0d3" stroke-width="5" stroke-linecap="round"/>
|
|
<rect x="185" y="695" width="630" height="60" rx="30" fill="#f4f7fc"/>
|
|
<text x="500" y="733" text-anchor="middle" fill="#16233a" font-size="21" font-weight="700">Полезный экран: проверяем одну границу</text>
|
|
</g>
|
|
</svg>
|