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,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>