revise February 2022 performance budget articles

2026-07-31 13:31:37 +03:00
parent f7f88fb2a5
commit a4b475a308
7 changed files with 1148 additions and 1 deletions
@@ -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>