36 lines
3.5 KiB
XML
36 lines
3.5 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 1220" role="img" aria-labelledby="title desc">
|
|
<title id="title">Длинная синхронная задача занимает главный поток</title>
|
|
<desc id="desc">Вертикальная шкала показывает длинный синхронный обработчик, задержанный input, а затем короткие порции работы, между которыми event loop может выбрать input и paint.</desc>
|
|
<rect width="720" height="1220" rx="32" fill="#0f172a"/>
|
|
<text x="56" y="82" fill="#f8fafc" font-family="Arial, sans-serif" font-size="40" font-weight="700">Почему async-экран</text>
|
|
<text x="56" y="124" fill="#f8fafc" font-family="Arial, sans-serif" font-size="40" font-weight="700">всё равно зависает</text>
|
|
<text x="56" y="172" fill="#94a3b8" font-family="Arial, sans-serif" font-size="24">Promise не выносит вычисление с главного потока.</text>
|
|
<text x="56" y="204" fill="#94a3b8" font-family="Arial, sans-serif" font-size="24">Пока стек занят, input и render ждут.</text>
|
|
<g font-family="Arial, sans-serif">
|
|
<text x="56" y="274" fill="#cbd5e1" font-size="28" font-weight="700">До: один обработчик</text>
|
|
<line x1="56" y1="300" x2="664" y2="300" stroke="#475569" stroke-width="4"/>
|
|
<rect x="56" y="330" width="608" height="122" rx="16" fill="#dc2626"/>
|
|
<text x="360" y="382" fill="#fff" font-size="29" font-weight="700" text-anchor="middle">sync import + parse + render</text>
|
|
<text x="360" y="420" fill="#fee2e2" font-size="22" text-anchor="middle">main thread занят до return</text>
|
|
<rect x="56" y="478" width="608" height="84" rx="16" fill="#64748b"/>
|
|
<text x="360" y="530" fill="#fff" font-size="25" text-anchor="middle">input уже ждёт, но обработчик не начнётся</text>
|
|
<text x="56" y="650" fill="#cbd5e1" font-size="28" font-weight="700">После: короткие порции</text>
|
|
<line x1="56" y1="676" x2="664" y2="676" stroke="#475569" stroke-width="4"/>
|
|
<rect x="56" y="708" width="282" height="90" rx="15" fill="#2563eb"/>
|
|
<rect x="382" y="708" width="282" height="90" rx="15" fill="#2563eb"/>
|
|
<text x="197" y="764" fill="#fff" font-size="26" text-anchor="middle">slice 1</text>
|
|
<text x="523" y="764" fill="#fff" font-size="26" text-anchor="middle">slice 2</text>
|
|
<rect x="56" y="824" width="282" height="90" rx="15" fill="#2563eb"/>
|
|
<rect x="382" y="824" width="282" height="90" rx="15" fill="#2563eb"/>
|
|
<text x="197" y="880" fill="#fff" font-size="26" text-anchor="middle">slice 3</text>
|
|
<text x="523" y="880" fill="#fff" font-size="26" text-anchor="middle">slice 4</text>
|
|
<rect x="56" y="942" width="282" height="90" rx="15" fill="#10b981"/>
|
|
<rect x="382" y="942" width="282" height="90" rx="15" fill="#eab308"/>
|
|
<text x="197" y="998" fill="#052e16" font-size="26" text-anchor="middle">input</text>
|
|
<text x="523" y="998" fill="#422006" font-size="26" text-anchor="middle">paint</text>
|
|
</g>
|
|
<rect x="56" y="1074" width="608" height="94" rx="16" fill="#1e293b"/>
|
|
<text x="88" y="1114" fill="#e2e8f0" font-family="Arial, sans-serif" font-size="24">Порции отдают управление event loop.</text>
|
|
<text x="88" y="1150" fill="#cbd5e1" font-family="Arial, sans-serif" font-size="21">Проверяем это профилем, а не именем функции.</text>
|
|
</svg>
|