revise June and August 2019 articles

2026-07-31 10:49:16 +03:00
parent bbedf1ae87
commit 18adfa80b4
12 changed files with 1607 additions and 1 deletions
@@ -0,0 +1,49 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 800" role="img" aria-labelledby="title desc">
+  <title id="title">Маршрут диагностики позднего полезного экрана</title>
+  <desc id="desc">Дерево решения ведёт от позднего полезного screenshot к четырём проверкам: позднее обнаружение ресурса, JavaScript на главном потоке, CSS и layout, а также загрузка и декодирование изображения.</desc>
+  <defs>
+    <linearGradient id="fieldbg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#152039"/>
+      <stop offset="1" stop-color="#263756"/>
+    </linearGradient>
+    <marker id="branchArrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#b8c8e2"/>
+    </marker>
+  </defs>
+  <rect width="1000" height="800" fill="url(#fieldbg)"/>
+  <g font-family="Arial, sans-serif">
+    <text x="70" y="66" fill="#f8fbff" font-size="34" font-weight="700">Диагностика: поздний экран</text>
+    <text x="70" y="102" fill="#c6d3e7" font-size="20">Сначала наблюдаемый блок, затем владелец задержки, потом обратимая проверка.</text>
+    <rect x="280" y="145" width="440" height="92" rx="22" fill="#f5f8ff"/>
+    <text x="500" y="184" text-anchor="middle" fill="#17243b" font-size="24" font-weight="700">Полезный экран запоздал</text>
+    <text x="500" y="214" text-anchor="middle" fill="#394962" font-size="17">HTML мог уже прийти — это ещё не ответ о причине</text>
+    <path d="M 500 237 L 500 292" stroke="#b8c8e2" stroke-width="5" marker-end="url(#branchArrow)"/>
+    <rect x="322" y="305" width="356" height="74" rx="18" fill="#31476d"/>
+    <text x="500" y="336" text-anchor="middle" fill="#f8fbff" font-size="21" font-weight="700">Критический URL стартовал рано?</text>
+    <text x="500" y="361" text-anchor="middle" fill="#d5e0f0" font-size="17">сверяем HTML, waterfall и element</text>
+    <path d="M 350 379 C 255 415 210 434 185 478" fill="none" stroke="#b8c8e2" stroke-width="5" marker-end="url(#branchArrow)"/>
+    <path d="M 455 379 C 430 420 410 432 402 478" fill="none" stroke="#b8c8e2" stroke-width="5" marker-end="url(#branchArrow)"/>
+    <path d="M 545 379 C 570 420 590 432 598 478" fill="none" stroke="#b8c8e2" stroke-width="5" marker-end="url(#branchArrow)"/>
+    <path d="M 650 379 C 745 415 790 434 815 478" fill="none" stroke="#b8c8e2" stroke-width="5" marker-end="url(#branchArrow)"/>
+    <rect x="55" y="495" width="260" height="158" rx="20" fill="#4d94ea"/>
+    <text x="185" y="534" text-anchor="middle" fill="#10233c" font-size="22" font-weight="700">Позднее</text>
+    <text x="185" y="562" text-anchor="middle" fill="#10233c" font-size="22" font-weight="700">обнаружение</text>
+    <text x="185" y="594" text-anchor="middle" fill="#16304e" font-size="17">URL создаётся кодом</text>
+    <text x="185" y="620" text-anchor="middle" fill="#16304e" font-size="17">или скрыт в CSS</text>
+    <text x="185" y="642" text-anchor="middle" fill="#173454" font-size="15" font-weight="700">Показать URL раньше</text>
+    <rect x="345" y="495" width="260" height="158" rx="20" fill="#ffb45c"/>
+    <text x="475" y="534" text-anchor="middle" fill="#352000" font-size="22" font-weight="700">JavaScript</text>
+    <text x="475" y="562" text-anchor="middle" fill="#352000" font-size="22" font-weight="700">на main thread</text>
+    <text x="475" y="594" text-anchor="middle" fill="#4b2c00" font-size="17">scripting до render</text>
+    <text x="475" y="620" text-anchor="middle" fill="#4b2c00" font-size="17">или лишний DOM</text>
+    <text x="475" y="642" text-anchor="middle" fill="#4b2c00" font-size="15" font-weight="700">Отложить один модуль</text>
+    <rect x="635" y="495" width="260" height="158" rx="20" fill="#5ed1b8"/>
+    <text x="765" y="534" text-anchor="middle" fill="#07372e" font-size="22" font-weight="700">CSS и</text>
+    <text x="765" y="562" text-anchor="middle" fill="#07372e" font-size="22" font-weight="700">layout</text>
+    <text x="765" y="594" text-anchor="middle" fill="#164e44" font-size="17">поздний stylesheet</text>
+    <text x="765" y="620" text-anchor="middle" fill="#164e44" font-size="17">или повторный layout</text>
+    <text x="765" y="642" text-anchor="middle" fill="#164e44" font-size="15" font-weight="700">Исправить границу CSS</text>
+    <rect x="55" y="690" width="840" height="58" rx="29" fill="#d99af9"/>
+    <text x="475" y="726" text-anchor="middle" fill="#351442" font-size="21" font-weight="700">Изображение: отдельно проверить request, размер, decode и paint</text>
+  </g>
+</svg>