30 lines
4.0 KiB
XML
30 lines
4.0 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 720" role="img" aria-labelledby="title desc">
|
|
<title id="title">Учебная timeline одного DOM-изменения и граница условной работы</title>
|
|
<desc id="desc">Нажатие Сохранить меняет className карточки. Далее пять блоков модели: JS mutation, style, layout, paint, composite. Их условные единицы равны 1, 2, 4, 3 и 1, сумма 11 пересекает учебную границу 10. Подпись поясняет, что это не миллисекунды и не trace браузера.</desc>
|
|
<rect width="1200" height="720" fill="#0d1628"/>
|
|
<text x="64" y="72" fill="#f8fafc" font-family="Arial, sans-serif" font-size="36" font-weight="700">Один DOM-result → один учебный кадр</text>
|
|
<text x="64" y="110" fill="#b8c8e0" font-family="Arial, sans-serif" font-size="22">Контракт: save-card.className card is-pending → card is-ready</text>
|
|
<rect x="64" y="158" width="286" height="100" rx="14" fill="#183454" stroke="#55c2ff" stroke-width="2"/>
|
|
<text x="88" y="200" fill="#d9f2ff" font-family="Arial, sans-serif" font-size="23" font-weight="700">input</text>
|
|
<text x="88" y="232" fill="#f8fafc" font-family="Arial, sans-serif" font-size="20">click «Сохранить»</text>
|
|
<path d="M370 208H420" stroke="#55c2ff" stroke-width="4" marker-end="url(#arrow)"/>
|
|
<defs><marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto"><path d="M0 0L10 5L0 10Z" fill="#55c2ff"/></marker></defs>
|
|
<g font-family="Arial, sans-serif">
|
|
<rect x="424" y="158" width="142" height="100" rx="12" fill="#1d4960"/><text x="442" y="198" fill="#f8fafc" font-size="20" font-weight="700">JS mutation</text><text x="462" y="230" fill="#a8e6ff" font-size="22">1 unit</text>
|
|
<rect x="584" y="158" width="122" height="100" rx="12" fill="#24584f"/><text x="608" y="198" fill="#f8fafc" font-size="20" font-weight="700">style</text><text x="602" y="230" fill="#b8f3d3" font-size="22">2 units</text>
|
|
<rect x="724" y="158" width="132" height="100" rx="12" fill="#63522b"/><text x="744" y="198" fill="#fff6cf" font-size="20" font-weight="700">layout</text><text x="742" y="230" fill="#ffe89b" font-size="22">4 units</text>
|
|
<rect x="874" y="158" width="128" height="100" rx="12" fill="#6a3f39"/><text x="896" y="198" fill="#fff1ed" font-size="20" font-weight="700">paint</text><text x="892" y="230" fill="#ffb8ab" font-size="22">3 units</text>
|
|
<rect x="1020" y="158" width="132" height="100" rx="12" fill="#473b73"/><text x="1034" y="198" fill="#f4efff" font-size="20" font-weight="700">composite</text><text x="1040" y="230" fill="#d9ccff" font-size="22">1 unit</text>
|
|
</g>
|
|
<path d="M566 208H578M706 208H718M856 208H868M1002 208H1014" stroke="#8fa9c8" stroke-width="3" marker-end="url(#arrow)"/>
|
|
<rect x="64" y="324" width="1070" height="170" rx="16" fill="#14233c" stroke="#2f527e" stroke-width="2"/>
|
|
<text x="96" y="376" fill="#f8fafc" font-family="Arial, sans-serif" font-size="28" font-weight="700">Сумма: 11 synthetic work units</text>
|
|
<line x1="98" y1="428" x2="1040" y2="428" stroke="#6f8cab" stroke-width="12" stroke-linecap="round"/>
|
|
<line x1="98" y1="428" x2="955" y2="428" stroke="#f2ad4d" stroke-width="12" stroke-linecap="round"/>
|
|
<line x1="877" y1="394" x2="877" y2="462" stroke="#ff6b6b" stroke-width="5"/>
|
|
<text x="834" y="486" fill="#ffb4b4" font-family="Arial, sans-serif" font-size="20">boundary 10</text>
|
|
<text x="980" y="414" fill="#fff0d7" font-family="Arial, sans-serif" font-size="22" font-weight="700">11</text>
|
|
<text x="96" y="550" fill="#ffcf87" font-family="Arial, sans-serif" font-size="25" font-weight="700">jank-boundary — только label учебной модели</text>
|
|
<text x="64" y="648" fill="#b8c8e0" font-family="Arial, sans-serif" font-size="22">Не milliseconds · не CPU · не FPS · не Web Vitals · не Performance trace</text>
|
|
</svg>
|