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

revise February 2022 performance budget articles
Build and deploy / deploy (push) Successful in 14s
Details

Browse Source
This commit is contained in:
huncode
2026-07-31 13:31:37 +03:00
parent f7f88fb2a5
commit a4b475a308
7 changed files with 1148 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/public/assets/editorial/2022/performance-budget-allocation-2022.svg
+89
View File
@@ -0,0 +1,89 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 720" role="img" aria-labelledby="title desc">
<title id="title">Учебное распределение бюджета пользовательского пути</title>
<desc id="desc">Вертикальная схема показывает четыре именованные части учебного маршрута checkout review. Baseline укладывается в каждый limit с tolerance. Candidate превышает allowed у scriptTicks, хотя его общий total остаётся в aggregate allowed. Значения подписаны как teaching ticks, а не как браузерная метрика.</desc>
<defs>
<style>
.bg { fill: #f8fafc; }
.title { fill: #102a43; font: 700 25px Arial, sans-serif; }
.subtitle { fill: #486581; font: 15px Arial, sans-serif; }
.label { fill: #102a43; font: 700 16px Arial, sans-serif; }
.small { fill: #334e68; font: 14px Arial, sans-serif; }
.tiny { fill: #486581; font: 13px Arial, sans-serif; }
.card { fill: #ffffff; stroke: #bcccdc; stroke-width: 1.5; }
.pass { fill: #2f855a; }
.fail { fill: #c53030; }
.blue { fill: #3182ce; }
.amber { fill: #dd6b20; }
.pass-bg { fill: #f0fff4; stroke: #68d391; stroke-width: 1.5; }
.fail-bg { fill: #fff5f5; stroke: #fc8181; stroke-width: 1.5; }
.note { fill: #fffaf0; stroke: #dd6b20; stroke-width: 1.5; }
.line { stroke: #829ab1; stroke-width: 2; }
</style>
</defs>
<rect class="bg" width="480" height="720" rx="22"/>
<text class="title" x="30" y="44">Бюджет: части раньше total</text>
<text class="subtitle" x="30" y="70">/training/checkout/review · teaching ticks</text>
<g transform="translate(30 94)">
<rect class="card" width="420" height="58" rx="12"/>
<text class="label" x="18" y="25">Один contract</text>
<text class="small" x="18" y="46">route + scenario + declared conditions</text>
<text class="tiny" x="270" y="46">browser / CI: not-collected</text>
</g>
<text class="label" x="30" y="184">Named component checks</text>
<text class="tiny" x="30" y="205">actual / allowed = limit + tolerance</text>
<g transform="translate(30 224)">
<rect class="pass-bg" width="420" height="58" rx="10"/>
<circle class="pass" cx="22" cy="29" r="8"/>
<text class="label" x="42" y="26">documentTicks</text>
<text class="small" x="42" y="47">24 / 32 = 30 + 2</text>
<text class="label" x="350" y="36">PASS</text>
</g>
<g transform="translate(30 294)">
<rect class="pass-bg" width="420" height="58" rx="10"/>
<circle class="pass" cx="22" cy="29" r="8"/>
<text class="label" x="42" y="26">styleTicks</text>
<text class="small" x="42" y="47">15 / 20 = 18 + 2</text>
<text class="label" x="350" y="36">PASS</text>
</g>
<g transform="translate(30 364)">
<rect class="fail-bg" width="420" height="66" rx="10"/>
<circle class="fail" cx="22" cy="29" r="8"/>
<text class="label" x="42" y="26">scriptTicks</text>
<text class="small" x="42" y="47">34 / 30 = 28 + 2</text>
<text class="tiny" x="42" y="62">named failure stays visible</text>
<text class="label" x="350" y="36">FAIL</text>
</g>
<g transform="translate(30 442)">
<rect class="pass-bg" width="420" height="58" rx="10"/>
<circle class="pass" cx="22" cy="29" r="8"/>
<text class="label" x="42" y="26">renderTicks</text>
<text class="small" x="42" y="47">20 / 26 = 24 + 2</text>
<text class="label" x="350" y="36">PASS</text>
</g>
<line class="line" x1="240" y1="514" x2="240" y2="536"/>
<g transform="translate(30 540)">
<rect class="card" width="202" height="72" rx="12"/>
<rect class="blue" x="14" y="15" width="11" height="42" rx="3"/>
<text class="label" x="38" y="29">Aggregate</text>
<text class="small" x="38" y="51">93 / 98 = 95 + 3</text>
<text class="label" x="142" y="29">PASS</text>
</g>
<g transform="translate(248 540)">
<rect class="fail-bg" width="202" height="72" rx="12"/>
<rect class="fail" x="14" y="15" width="11" height="42" rx="3"/>
<text class="label" x="38" y="29">Overall</text>
<text class="small" x="38" y="51">scriptTicks is over</text>
<text class="label" x="137" y="29">FAIL</text>
</g>
<g transform="translate(30 632)">
<rect class="note" width="420" height="62" rx="12"/>
<text class="label" x="18" y="25">Граница диаграммы</text>
<text class="small" x="18" y="47">Ticks — учебные поля, не trace, не Web Vitals,</text>
<text class="small" x="18" y="62">не real-user result и не SLA.</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

web/public/assets/editorial/2022/performance-budget-diagnosis-2022.svg
+75
View File
@@ -0,0 +1,75 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 720" role="img" aria-labelledby="title desc">
<title id="title">Диагностический маршрут для budget comparison</title>
<desc id="desc">Схема начинается с проверки route, scenario и declared conditions. При несовпадении comparison останавливается. При совпадении сначала проверяются именованные компоненты, затем aggregate. scriptTicks 34 при allowed 30 ведёт к focused action, хотя total 93 при allowed 98 остаётся aggregate pass.</desc>
<defs>
<style>
.bg { fill: #f8fafc; }
.title { fill: #102a43; font: 700 25px Arial, sans-serif; }
.subtitle { fill: #486581; font: 15px Arial, sans-serif; }
.label { fill: #102a43; font: 700 16px Arial, sans-serif; }
.small { fill: #334e68; font: 14px Arial, sans-serif; }
.tiny { fill: #486581; font: 13px Arial, sans-serif; }
.card { fill: #ffffff; stroke: #bcccdc; stroke-width: 1.5; }
.pass { fill: #f0fff4; stroke: #68d391; stroke-width: 1.5; }
.fail { fill: #fff5f5; stroke: #fc8181; stroke-width: 1.5; }
.stop { fill: #fffaf0; stroke: #dd6b20; stroke-width: 1.5; }
.arrow { stroke: #486581; stroke-width: 2.2; fill: none; marker-end: url(#arrow); }
.red-arrow { stroke: #c53030; stroke-width: 2.2; fill: none; marker-end: url(#red-arrow); }
</style>
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="#486581"/></marker>
<marker id="red-arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="#c53030"/></marker>
</defs>
<rect class="bg" width="480" height="720" rx="22"/>
<text class="title" x="30" y="44">Диагностика: ограничить вывод</text>
<text class="subtitle" x="30" y="70">Budget comparison — не глобальная оценка скорости.</text>
<g transform="translate(30 96)">
<rect class="card" width="420" height="70" rx="12"/>
<text class="label" x="18" y="27">1. Measurement contract</text>
<text class="small" x="18" y="50">route + scenario + conditions match?</text>
</g>
<path class="arrow" d="M 240 166 L 240 194"/>
<text class="tiny" x="252" y="184">yes</text>
<path class="arrow" d="M 110 166 L 110 204 L 52 204 L 52 232"/>
<text class="tiny" x="60" y="197">no</text>
<g transform="translate(30 236)">
<rect class="stop" width="158" height="86" rx="12"/>
<text class="label" x="14" y="27">Stop compare</text>
<text class="small" x="14" y="49">not-comparable</text>
<text class="tiny" x="14" y="69">restore one contract</text>
</g>
<g transform="translate(218 198)">
<rect class="card" width="232" height="86" rx="12"/>
<text class="label" x="16" y="27">2. Named checks</text>
<text class="small" x="16" y="49">actual / (limit + tolerance)</text>
<text class="tiny" x="16" y="69">every component remains visible</text>
</g>
<path class="arrow" d="M 334 284 L 334 314"/>
<g transform="translate(218 318)">
<rect class="fail" width="232" height="82" rx="12"/>
<text class="label" x="16" y="26">scriptTicks FAIL</text>
<text class="small" x="16" y="48">34 is greater than allowed 30</text>
<text class="tiny" x="16" y="68">named component only</text>
</g>
<path class="red-arrow" d="M 334 400 L 334 432"/>
<g transform="translate(218 436)">
<rect class="pass" width="232" height="68" rx="12"/>
<text class="label" x="16" y="26">3. Aggregate PASS</text>
<text class="small" x="16" y="48">93 is within allowed 98</text>
</g>
<text class="tiny" x="42" y="459">context only:</text>
<text class="tiny" x="42" y="477">cannot cancel</text>
<text class="tiny" x="42" y="495">the red branch</text>
<path class="red-arrow" d="M 334 504 L 334 536"/>
<g transform="translate(30 540)">
<rect class="fail" width="420" height="72" rx="12"/>
<text class="label" x="18" y="27">4. Focused action</text>
<text class="small" x="18" y="50">inspect script input and one route boundary</text>
</g>
<path class="arrow" d="M 240 612 L 240 632"/>
<g transform="translate(30 636)">
<rect class="stop" width="420" height="58" rx="12"/>
<text class="small" x="18" y="24">Allowed claim: one named rule failed under declared conditions.</text>
<text class="tiny" x="18" y="43">Not allowed: global speed, browser trace, real-user or SLA verdict.</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

web/public/assets/editorial/2022/performance-budget-trend-2022.svg
+75
View File
@@ -0,0 +1,75 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 700" role="img" aria-labelledby="title desc">
<title id="title">Baseline и candidate в учебном сравнении бюджета</title>
<desc id="desc">Диаграмма сравнивает baseline и candidate по total и scriptTicks. Total candidate 93 остаётся ниже aggregate allowed 98, а scriptTicks candidate 34 превышает component allowed 30. Поэтому итоговый verdict — named component fail, не глобальная оценка производительности.</desc>
<defs>
<style>
.bg { fill: #f8fafc; }
.title { fill: #102a43; font: 700 25px Arial, sans-serif; }
.subtitle { fill: #486581; font: 15px Arial, sans-serif; }
.label { fill: #102a43; font: 700 16px Arial, sans-serif; }
.small { fill: #334e68; font: 14px Arial, sans-serif; }
.tiny { fill: #486581; font: 13px Arial, sans-serif; }
.card { fill: #ffffff; stroke: #bcccdc; stroke-width: 1.5; }
.grid { stroke: #d9e2ec; stroke-width: 1; }
.axis { stroke: #829ab1; stroke-width: 2; }
.baseline { fill: #3182ce; }
.candidate { fill: #805ad5; }
.allowed { stroke: #2f855a; stroke-width: 3; stroke-dasharray: 7 5; }
.danger { stroke: #c53030; stroke-width: 3; stroke-dasharray: 7 5; }
.pass-bg { fill: #f0fff4; stroke: #68d391; stroke-width: 1.5; }
.fail-bg { fill: #fff5f5; stroke: #fc8181; stroke-width: 1.5; }
.note { fill: #fffaf0; stroke: #dd6b20; stroke-width: 1.5; }
</style>
</defs>
<rect class="bg" width="480" height="700" rx="22"/>
<text class="title" x="30" y="44">Сравнение: total и component</text>
<text class="subtitle" x="30" y="70">Один contract · условные teaching ticks</text>
<g transform="translate(30 98)">
<rect class="card" width="420" height="46" rx="10"/>
<rect class="baseline" x="18" y="15" width="16" height="16" rx="3"/>
<text class="small" x="43" y="28">baseline</text>
<rect class="candidate" x="142" y="15" width="16" height="16" rx="3"/>
<text class="small" x="167" y="28">candidate</text>
<line class="allowed" x1="282" y1="23" x2="312" y2="23"/>
<text class="small" x="321" y="28">allowed</text>
</g>
<text class="label" x="30" y="180">Aggregate total</text>
<text class="tiny" x="30" y="201">Secondary guard: it does not decide component health.</text>
<line class="axis" x1="52" y1="386" x2="430" y2="386"/>
<line class="grid" x1="52" y1="329" x2="430" y2="329"/>
<line class="grid" x1="52" y1="272" x2="430" y2="272"/>
<line class="grid" x1="52" y1="215" x2="430" y2="215"/>
<rect class="baseline" x="118" y="242" width="74" height="144" rx="6"/>
<rect class="candidate" x="250" y="229" width="74" height="157" rx="6"/>
<line class="allowed" x1="52" y1="220" x2="430" y2="220"/>
<text class="small" x="118" y="410">baseline 85</text>
<text class="small" x="245" y="410">candidate 93</text>
<text class="tiny" x="330" y="215">allowed 98</text>
<g transform="translate(30 432)">
<rect class="pass-bg" width="420" height="52" rx="10"/>
<text class="label" x="18" y="23">Aggregate status: PASS</text>
<text class="small" x="18" y="42">93 remains within 95 + 3.</text>
</g>
<text class="label" x="30" y="526">Named component: scriptTicks</text>
<g transform="translate(30 542)">
<rect class="card" width="420" height="66" rx="12"/>
<text class="small" x="18" y="24">baseline</text>
<rect class="baseline" x="94" y="12" width="104" height="16" rx="4"/>
<text class="small" x="208" y="25">26</text>
<text class="small" x="18" y="52">candidate</text>
<rect class="candidate" x="94" y="40" width="136" height="16" rx="4"/>
<text class="small" x="240" y="53">34</text>
<line class="danger" x1="214" y1="8" x2="214" y2="60"/>
<text class="tiny" x="278" y="25">allowed 30</text>
<text class="label" x="333" y="53" fill="#c53030">FAIL</text>
</g>
<g transform="translate(30 626)">
<rect class="note" width="420" height="48" rx="11"/>
<text class="small" x="18" y="22">Verdict: named component fail → inspect one route boundary.</text>
<text class="tiny" x="18" y="40">Not a browser trace, real-user metric or global speed claim.</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB