35 lines
3.3 KiB
XML
35 lines
3.3 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 1220" role="img" aria-labelledby="title desc">
|
|
<title id="title">Маршрут диагностики неожиданного порядка async колбэков</title>
|
|
<desc id="desc">Вертикальная схема ведёт от отметок времени и номера запуска через разделение sync, microtask и task к проверке длинной работы в performance trace.</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">Маршрут разбора:</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">Не называем очередь сломанной, пока не записали</text>
|
|
<text x="56" y="204" fill="#94a3b8" font-family="Arial, sans-serif" font-size="24">источник callback и sync-границу.</text>
|
|
<g font-family="Arial, sans-serif">
|
|
<rect x="56" y="274" width="608" height="184" rx="22" fill="#1d4ed8"/>
|
|
<circle cx="116" cy="332" r="34" fill="#dbeafe"/>
|
|
<text x="116" y="341" fill="#1e3a8a" font-size="25" font-weight="700" text-anchor="middle">1</text>
|
|
<text x="174" y="336" fill="#fff" font-size="31" font-weight="700">Записать лог</text>
|
|
<text x="174" y="376" fill="#dbeafe" font-size="24">label, runId, performance.now()</text>
|
|
<text x="174" y="412" fill="#dbeafe" font-size="21">и источник каждого callback.</text>
|
|
<path d="M360 478v58l-23-25h46z" fill="#64748b"/>
|
|
<rect x="56" y="564" width="608" height="184" rx="22" fill="#7c3aed"/>
|
|
<circle cx="116" cy="622" r="34" fill="#ede9fe"/>
|
|
<text x="116" y="631" fill="#4c1d95" font-size="25" font-weight="700" text-anchor="middle">2</text>
|
|
<text x="174" y="626" fill="#fff" font-size="31" font-weight="700">Классифицировать</text>
|
|
<text x="174" y="666" fill="#ede9fe" font-size="24">sync / microtask / task</text>
|
|
<text x="174" y="702" fill="#ede9fe" font-size="21">или длинную работу main thread.</text>
|
|
<path d="M360 768v58l-23-25h46z" fill="#64748b"/>
|
|
<rect x="56" y="854" width="608" height="184" rx="22" fill="#0f766e"/>
|
|
<circle cx="116" cy="912" r="34" fill="#ccfbf1"/>
|
|
<text x="116" y="921" fill="#115e59" font-size="25" font-weight="700" text-anchor="middle">3</text>
|
|
<text x="174" y="916" fill="#fff" font-size="31" font-weight="700">Выбрать действие</text>
|
|
<text x="174" y="956" fill="#ccfbf1" font-size="24">явная зависимость, отмена</text>
|
|
<text x="174" y="992" fill="#ccfbf1" font-size="21">или работа с CPU/DOM-границей.</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">Порядок и задержка повторяемы.</text>
|
|
<text x="88" y="1150" fill="#cbd5e1" font-family="Arial, sans-serif" font-size="21">Один удачный запуск не закрывает проверку.</text>
|
|
</svg>
|