huncode/progcode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

revise March 2022 browser rendering articles
Build and deploy / deploy (push) Successful in 15s
Details

Browse Source
This commit is contained in:
huncode
2026-07-31 13:39:49 +03:00
parent a4b475a308
commit f6afaff958
7 changed files with 752 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/public/assets/editorial/2022/browser-rendering-diagnosis-rollback-2022.svg
+25
View File
@@ -0,0 +1,25 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 720" role="img" aria-labelledby="title desc">
<title id="title">Диагностика DOM-изменения с остановками и rollback</title>
<desc id="desc">Блок-схема проверяет DOM result is-pending в is-ready. Если контракт неверен или изменение no-op, расследование останавливается. Валидный путь выбирает одну interaction и вопросы к pipeline. Пересечение учебной границы ведёт к одной обратимой гипотезе и rollback, который возвращает is-pending отдельным кадром.</desc>
<defs><marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto"><path d="M0 0L10 5L0 10Z" fill="#7ed4ff"/></marker><marker id="warn" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto"><path d="M0 0L10 5L0 10Z" fill="#ff867c"/></marker></defs>
<rect width="1200" height="720" fill="#111827"/>
<text x="56" y="66" fill="#f8fafc" font-family="Arial, sans-serif" font-size="36" font-weight="700">Диагностика: остановить ложный вывод раньше правки</text>
<g font-family="Arial, sans-serif" font-size="22">
<rect x="70" y="122" width="260" height="92" rx="15" fill="#173b57" stroke="#76c8ff" stroke-width="2"/><text x="96" y="162" fill="#e6f6ff" font-weight="700">DOM contract</text><text x="96" y="194" fill="#c7ebff">pending → ready</text>
<path d="M330 168H408" stroke="#7ed4ff" stroke-width="4" marker-end="url(#arrow)"/>
<rect x="416" y="122" width="270" height="92" rx="15" fill="#1a504a" stroke="#72d7b5" stroke-width="2"/><text x="446" y="162" fill="#eafff7" font-weight="700">result совпал?</text><text x="446" y="194" fill="#c5f4df">target / property / after</text>
<path d="M686 168H762" stroke="#7ed4ff" stroke-width="4" marker-end="url(#arrow)"/>
<rect x="770" y="122" width="350" height="92" rx="15" fill="#243b63" stroke="#9fc3ff" stroke-width="2"/><text x="796" y="162" fill="#edf4ff" font-weight="700">одна interaction</text><text x="796" y="194" fill="#cedfff">выделить узкий range</text>
<path d="M550 214V286" stroke="#ff867c" stroke-width="4" marker-end="url(#warn)"/>
<rect x="366" y="294" width="366" height="80" rx="14" fill="#5f3337" stroke="#ff867c" stroke-width="2"/><text x="394" y="343" fill="#ffe4e1" font-weight="700">нет → stop: invalid contract</text>
<path d="M945 214V286" stroke="#7ed4ff" stroke-width="4" marker-end="url(#arrow)"/>
<rect x="770" y="294" width="350" height="94" rx="14" fill="#534525" stroke="#ffd36a" stroke-width="2"/><text x="798" y="334" fill="#fff4cf" font-weight="700">mutation → style → layout</text><text x="798" y="365" fill="#fff4cf">→ paint → composite</text>
<path d="M945 388V450" stroke="#7ed4ff" stroke-width="4" marker-end="url(#arrow)"/>
<rect x="770" y="458" width="350" height="86" rx="14" fill="#482f62" stroke="#d2abff" stroke-width="2"/><text x="796" y="494" fill="#f6edff" font-weight="700">boundary crossed?</text><text x="796" y="524" fill="#dcc5ff">11 synthetic units &gt; 10</text>
<path d="M770 500H684" stroke="#ff867c" stroke-width="4" marker-end="url(#warn)"/>
<rect x="330" y="456" width="344" height="88" rx="14" fill="#5f3337" stroke="#ff867c" stroke-width="2"/><text x="357" y="492" fill="#ffe4e1" font-weight="700">no-op → stop</text><text x="357" y="522" fill="#ffe4e1">нет нового DOM result</text>
<path d="M945 544V594" stroke="#7ed4ff" stroke-width="4" marker-end="url(#arrow)"/>
<rect x="770" y="602" width="350" height="68" rx="14" fill="#195047" stroke="#72d7b5" stroke-width="2"/><text x="794" y="645" fill="#eafff7" font-weight="700">один owner + rollback → pending</text>
</g>
<text x="70" y="692" fill="#b8c8e0" font-family="Arial, sans-serif" font-size="18">Все units synthetic. Схема не является trace, benchmark, milliseconds или доказательством jank пользователя.</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

web/public/assets/editorial/2022/browser-rendering-pipeline-2022.svg
+20
View File
@@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 720" role="img" aria-labelledby="title desc">
<title id="title">Учебная pipeline от DOM contract к вопросам для записи</title>
<desc id="desc">Пять последовательных блоков JS mutation, style, layout, paint и composite. Под каждым блоком указан вопрос к выбранному диапазону записи. Пунктирная рамка отмечает, что это модель, а не обязательные имена событий браузера.</desc>
<defs><marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto"><path d="M0 0L10 5L0 10Z" fill="#68d6b0"/></marker></defs>
<rect width="1200" height="720" fill="#0b1722"/>
<text x="60" y="70" fill="#f3fbff" font-family="Arial, sans-serif" font-size="36" font-weight="700">Не «виновник», а последовательность вопросов</text>
<text x="60" y="108" fill="#b8d6e8" font-family="Arial, sans-serif" font-size="22">DOM contract сначала, trace range потом, изменение — только после гипотезы</text>
<rect x="44" y="142" width="1112" height="410" rx="22" fill="none" stroke="#4d7593" stroke-width="3" stroke-dasharray="12 10"/>
<text x="72" y="180" fill="#8ed6ff" font-family="Arial, sans-serif" font-size="20">LABELS УЧЕБНОЙ МОДЕЛИ, НЕ ОБЯЗАТЕЛЬНЫЕ EVENT NAMES</text>
<g font-family="Arial, sans-serif">
<rect x="70" y="230" width="184" height="218" rx="16" fill="#173d57"/><text x="91" y="276" fill="#f4fcff" font-size="24" font-weight="700">JS mutation</text><text x="91" y="320" fill="#b9eaff" font-size="19">Что записал</text><text x="91" y="347" fill="#b9eaff" font-size="19">handler?</text><text x="91" y="408" fill="#85d5ff" font-size="20">className X → Y</text>
<rect x="282" y="230" width="184" height="218" rx="16" fill="#195047"/><text x="333" y="276" fill="#effff9" font-size="24" font-weight="700">style</text><text x="303" y="320" fill="#bff4de" font-size="19">Какой selector</text><text x="303" y="347" fill="#bff4de" font-size="19">state изменён?</text><text x="322" y="408" fill="#8de0bb" font-size="20">вопрос к range</text>
<rect x="494" y="230" width="184" height="218" rx="16" fill="#5d4b27"/><text x="543" y="276" fill="#fff9e2" font-size="24" font-weight="700">layout</text><text x="515" y="320" fill="#ffeba5" font-size="19">Какая geometry</text><text x="515" y="347" fill="#ffeba5" font-size="19">стала нужна?</text><text x="534" y="408" fill="#ffd56c" font-size="20">не verdict</text>
<rect x="706" y="230" width="184" height="218" rx="16" fill="#653a36"/><text x="762" y="276" fill="#fff1ed" font-size="24" font-weight="700">paint</text><text x="727" y="320" fill="#ffc8bd" font-size="19">Какой visual</text><text x="727" y="347" fill="#ffc8bd" font-size="19">area обновился?</text><text x="746" y="408" fill="#ffab9b" font-size="20">проверить факт</text>
<rect x="918" y="230" width="184" height="218" rx="16" fill="#44376b"/><text x="937" y="276" fill="#f8f2ff" font-size="24" font-weight="700">composite</text><text x="939" y="320" fill="#ddcffd" font-size="19">Какая финальная</text><text x="939" y="347" fill="#ddcffd" font-size="19">работа видна?</text><text x="956" y="408" fill="#cbb9ff" font-size="20">не «дёшево»</text>
</g>
<path d="M254 339H274M466 339H486M678 339H698M890 339H910" stroke="#68d6b0" stroke-width="4" marker-end="url(#arrow)"/>
<rect x="70" y="594" width="1030" height="70" rx="14" fill="#122b38"/>
<text x="98" y="638" fill="#d4f6e9" font-family="Arial, sans-serif" font-size="24">Факт записи + DOM result → один owner → обратимое действие → повтор того же сценария</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

web/public/assets/editorial/2022/browser-rendering-timeline-2022.svg
+29
View File
@@ -0,0 +1,29 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB