الأداءرقم 03
حركة واحدة لا يقدر عليها الـ GPU تجعل المتصفح يعيد بناء الصفحة كلها في كل إطار. الأسباب الخمسة التي فعلت ذلك بموقعي، والحقل في trace كروم الذي يسمّيها، والإصلاح: من 98% إلى 18%.
هل أفادك هذا المقال؟
قلبك يخبرني بما أكتب عنه أكثر.
هندسة الأنظمة
كيف أُبقي وحدي نظامًا محاسبيًا من 322 ألف سطر صحيحًا: بوابة حفظ واحدة، وقيود مالية لا تُعدَّل، وسجل تدقيق ببصمات متسلسلة، واختبارات على قواعد حقيقية، وتدقيق كشف ما فاتها.
الواجهات العربية
لماذا تُفسد طابعات ESC/POS الحروف العربية، وكيف تطبعها صورةً أحادية البت بعرض الرأس الحقيقي، وخلل الأبعاد الذي حوّل إيصالًا طوله 12 سم إلى رولٍ كامل ملقى على الأرض.
هندسة الأنظمة
فوترة محطات الكهرباء دون اتصال: معرّف واحد يرافق الدفعة من الهاتف إلى الإيصال، ولماذا لا تُجمع إجماليات الفواتير، وطابور يعرف ما يعيده، وخطأ 500 صنع حلقة لا تنتهي.
على شاشة الكمبيوتر بدت الصفحة مكتملة: رموز تتساقط خلف النص، وطرفية تكتب أوامر حقيقية، وحلقات كود تدور خلف صورتي، وهواتف تتمايل في ثلاثة أبعاد.
على الهاتف، تقطّعت الصفحة نفسها.
توقعت صورة ثقيلة أو حزمة JavaScript منتفخة. ما أراني إياه Chrome كان أغرب: والشاشة لا يلمسها أحد، كان الخيط الرئيسي (main thread) مشغولًا 98% من كل ثانية.
فبدأت أطفئ الحركات واحدة تلو الأخرى بحثًا عن المذنبة. لم يتغير شيء. وتبيّن أن هذا الطريق المسدود أثمن دليل في الرحلة كلها.
في آخر هذا المقال ستعرف لماذا تفرض حركة واحدة ضريبة على كل الحركات الأخرى، وكيف تجعل Chrome يسمّي الحركة المذنبة بنفسه، وستخرج بسكربتين يقيسان ذلك عنك.
الاختبار بسيط: أفتح الصفحة على محاكاة هاتف (390×844، كثافة بكسل 3×، ومعالج أبطأ 4 مرات)، أتركها تُكمل التحميل، لا ألمس شيئًا، ثم أسأل Chrome: كم من كل ثانية قضاها الخيط الرئيسي في تنفيذ المهام؟
عند 98%، كل نقرة وكل تمرير ينتظر في الطابور خلف عمل لا يراه المستخدم. الصفحة تبدو حيّة، وتُحَسّ ميتة.
وعدد الإطارات في الثانية أخفى هذا كله. معظم حركاتي كانت تعمل على الـ compositor، وهو خيط منفصل ظل يحرّك الطبقات بنعومة بينما الخيط الرئيسي يغرق. عدّاد الـ FPS كان يقيس الخيط السليم.
الرقم يأتي من مقياس واحد في بروتوكول أدوات المطوّر (CDP) اسمه TaskDuration: مجموع الثواني التي قضاها الخيط الرئيسي في المهام. اقرأه، انتظر ثلاث ثوانٍ، اقرأه مجددًا، واقسم. السكربت الكامل، بالمقارنة قبل/بعد والوسيط، تجده قرب النهاية.
وتحذير قبل أي رقم: جهازي كان مشغولًا غالبًا بأعمال أخرى، فالقياس المنفرد يكذب. كل مقارنة في هذا المقال كانت قبل/بعد، بالتناوب، ووسيطَ عدة جولات.
أطفأت الحركات مجموعةً مجموعة. أزلت الـ canvas، فبقيت الصفحة عند 98%. أزلت الحلقات، فبقيت عند 98%.
لا مجموعة بمفردها صنعت فرقًا، فعرفت أنني أسأل السؤال الخطأ. الكلفة تصرفت كرسم ثابت، وحفنة من الحركات كانت تُلزم الصفحة كلها بدفعه.
الحركة المركّبة (composited) طبقة يحرّكها كرت الشاشة وحده: يسلّمها الخيط الرئيسي مرة ثم يهدأ. أما الحركة غير المركّبة فتحتاج الخيط الرئيسي ليصنع إطارًا جديدًا مع كل تحديث للشاشة، وهو إطار كامل: حساب الأنماط، ومتابعة التخطيط، والرسم، وتحديث الطبقات، للصفحة كلها.
هكذا دفعت مئتا حركة، معظمها على الـ GPU أصلًا، هذه الكلفة الثابتة، لأن حفنة منها ظلت تطلب إطارًا. وإزالة مجموعة لا تفيد ما دامت أخرى ما زالت تطلب.
فصار السؤال الحقيقي: ما الذي يجبر الخيط الرئيسي على إطار؟ وضعت قائمة بستة مشتبه بهم واستبدلتهم جميعًا. وحين أعدت اختبار كل منهم وحده، ثبتت التهمة على خمسة وبُرّئ السادس. أولهم ملف يَعِدك في سطره الأول بأنه لا يكلّف شيئًا تقريبًا.
هكذا قال تعليق الملف القديم، وبدا كلامًا مسؤولًا: مطر الرموز كان canvas شفافًا واحدًا بحجم بكسلات CSS، بسقف 24 إطارًا في الثانية على الهاتف و30 على الكمبيوتر، ويتوقف حين يُخفى التبويب.
هذه حلقته:
const tick = (t: number) => {
raf = requestAnimationFrame(tick)
if (t - last < frameMs) return // مبكر جدًا: تخطَّ هذا الإطار
last = t
draw()
}الفخ في سطر التخطي. كل استدعاء من هذه، حتى الذي يعود فورًا، طلبٌ لإطار على الخيط الرئيسي. سقف الإطارات وفّر وقت الرسم، ولم يوفّر شيئًا غيره.
البديل لا يرسم شيئًا أثناء التشغيل: ستة وعشرون عمودًا من الرموز، نص كل عمود يُختار مرة واحدة من بذرة ثابتة (فيتطابق الـ HTML المولَّد مسبقًا مع ما يرسمه المتصفح)، وكل عمود ينزل بـ transform في CSS:
.rune-col {
position: absolute;
top: 0;
left: var(--x);
width: 1ch;
word-break: break-all; /* رمز في كل سطر: عمود */
mask-image: linear-gradient(transparent, #000 80%); /* الذيل يتلاشى */
transform: translate3d(0, -110%, 0);
animation: rune-fall var(--dur) linear infinite;
animation-delay: var(--delay); /* سالب: يتساقط منذ أول رسم */
}
@keyframes rune-fall {
to { transform: translate3d(0, calc(100vh + 10%), 0); }
}
@media (max-width: 760px) {
.rune-col:nth-child(2n) { display: none; } /* نصف الأعمدة على الهاتف */
}كل عمود يأخذ --x خاصًا به، ومدة بين 11 و24 ثانية، وتأخيرًا سالبًا. الشكل نفسه، وصفر سكربت في كل إطار.
الطرفية كانت تكتب باستدعاء setState على مؤقت: كل 42 إلى 82 ملّي ثانية أثناء الكتابة، وكل 18 أثناء المسح. كل استدعاء يعني render وإعادة حساب أنماط وتخطيطًا، لأن عرض النص يتغير في كل مرة.
الآن الكتابة CSS خالصة. نافذة أعرض من الأمر بحرف واحد تنزلق خطوة بحرف، والنص داخلها ينزلق عكسها بالقدر نفسه، فيظهر كل حرف في مكانه بالضبط، ولا يتحرك شيء سوى transform.
.tw {
display: inline-block;
animation: tw-in var(--type) steps(var(--steps), jump-start) both;
}
.tw-window {
position: relative;
display: block;
width: calc(var(--steps) * 1ch);
height: 1.5em;
overflow: hidden;
animation: tw-out var(--erase) steps(var(--steps), jump-start) calc(var(--type) + var(--hold)) forwards;
}
.tw-text-out {
display: block;
animation: tw-text-out var(--erase) steps(var(--steps), jump-start) calc(var(--type) + var(--hold)) forwards;
}
.tw-text {
display: block;
width: calc(var(--steps) * 1ch);
line-height: 1.5em;
animation: tw-text-in var(--type) steps(var(--steps), jump-start) both;
}
@keyframes tw-in { from { transform: translate3d(-100%, 0, 0); } }
@keyframes tw-out { to { transform: translate3d(-100%, 0, 0); } }
@keyframes tw-text-in { from { transform: translate3d(100%, 0, 0); } }
@keyframes tw-text-out { to { transform: translate3d(100%, 0, 0); } }
.caret { /* يركب آخر خانة في النافذة */
position: absolute;
top: 50%;
right: 0;
width: 1ch;
height: 1.15em;
translate: 0 -50%;
background: currentColor;
animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }وReact يضبط التوقيت مرة واحدة لكل أمر:
import type { CSSProperties } from 'react'
const TYPE_MS = 55
const ERASE_MS = 18
const HOLD_MS = 1700
export function TypeLine({ text }: { text: string }) {
const timing = {
['--steps' as string]: text.length + 1, // خطوة لكل حرف، وواحدة للمؤشر
['--type' as string]: `${text.length * TYPE_MS}ms`,
['--hold' as string]: `${HOLD_MS}ms`,
['--erase' as string]: `${text.length * ERASE_MS}ms`,
} as CSSProperties
// الـ key يعيد تركيب الطبقات، فيبدأ كل أمر جديد حركاته من الصفر.
return (
<span key={text} className="tw" style={timing}>
<span className="tw-window">
<span className="tw-text-out">
<span className="tw-text">{text}</span>
</span>
<span className="caret" />
</span>
</span>
)
}يحتاج خطًا أحادي العرض (monospace)، لأن كل خطوة 1ch. بدّل النص بعد text.length * (TYPE_MS + ERASE_MS) + HOLD_MS وفاصل قصير. أي setState واحد كل بضع ثوانٍ، بعد أن كانت عشرات في الثانية.
تأمّل هذه الطبقات الأربع. أول نسخة CSS كانت أقل منها طبقات، وهنا يكمن السبب السادس.
خط كل عنوان قسم كان يمر عليه ضوء ذهبي: تدرّج أعرض من الخط ثلاث مرات، يتحرك بـ background-position. والـ compositor لا يستطيع تحريك خلفية داخل عنصر، فكان ذلك إعادة رسم في كل إطار، لكل عنوان.
/* قبل: إعادة رسم في كل إطار */
.eyebrow::before {
background: linear-gradient(90deg, var(--gold) 0 35%, var(--gold-fill-2) 50%, var(--gold) 65% 100%);
background-size: 300% 100%;
animation: rule-scan 3.4s linear infinite;
}
/* بعد: الخط يرسم نفسه امتدادًا وانكماشًا */
.eyebrow::before {
transform-origin: left center;
animation: rule-draw 3.4s ease-in-out infinite alternate;
}
html[dir='rtl'] .eyebrow::before {
transform-origin: right center; /* يبدأ من الجهة التي يبدأ منها النص */
}
@keyframes rule-draw {
from { transform: scaleX(0.35); opacity: 0.55; }
to { transform: none; opacity: 1; }
}تأثير مختلف، خط يتنفس امتدادًا وانكماشًا، ولا يكلّف شيئًا في أي إطار. ولاحظ سطر dir='rtl': في العربية يمتد الخط من اليمين، حيث تبدأ القراءة.
المؤشر تحت حرف M في شعاري كان يومض بـ opacity على path داخل الـ SVG. كنت أظن أن ذلك يعيد رسم الـ SVG في كل إطار، فنقلت الوميض إلى عنصر HTML موضوع بالضبط حيث كان الـ SVG سيرسمه. والأرقام مأخوذة من هندسة الـ SVG نفسها: خط طوله 16 وحدة بنهايتين مستديرتين سُمكهما 2.6، داخل viewBox من 64 وحدة يُرسم بعرض 30px، عرضه (16 + 2.6) × 30 ÷ 64 = 8.7px.
.logo-mark { position: relative; }
.logo-caret {
position: absolute;
top: 27.8px;
left: 50%;
width: 8.7px;
height: 1.3px;
translate: -50% 0;
border-radius: 1px;
background: var(--blue);
animation: caret-blink 1.1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }ثم أعدت، من أجل هذا المقال، اختبار كل مشتبه به في صفحة وحده. الشعار القديم يومض وحيدًا فلم يسبب أي إطار على الخيط الرئيسي، لا في Chrome 153 ولا في Edge 155، ولم يسجّل الـ trace أي فشل له. هذا كان بريئًا.
المؤشر بـ HTML باقٍ، فالشفافية على عنصر HTML هي بالضبط الحالة التي بُني الـ compositor لها. أما الدرس فهو ما يستحق البقاء: اختبر كل مشتبه به وحده، وإلا نسبت الفضل لإصلاح لم يفعل شيئًا.
نموذج التواصل كان يدور حول إطاره ضوء: تدرج مخروطي زاويته خاصية مخصّصة مسجّلة، تتحرك من 0 إلى 360 درجة.
/* قبل: يُحسب على الخيط الرئيسي في كل إطار */
@property --spin {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
.contact-panel::before {
background: conic-gradient(from var(--spin), transparent 0 68%, var(--gold) 84%, transparent 100%);
animation: spin-border 6s linear infinite;
}@property يجعل الزاوية قابلة للتحريك، ويبقى الـ compositor عاجزًا عن تشغيلها. فيعيد Chrome حساب النمط ورسم التدرج في كل إطار.
الشكل نفسه يتحقق بمربع كبير من التدرج المخروطي يدور بـ transform، تحت قناع حلقي عرضه بكسل واحد لا يتحرك أبدًا:
/* العنصر الأب يحتاج position: relative و isolation: isolate */
.spin-ring {
position: absolute;
inset: -1px;
z-index: -1;
overflow: hidden;
padding: 1px;
border-radius: inherit;
/* لا يبقى إلا البكسل الواحد من الـ padding: حلقة */
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.spin-ring > span {
position: absolute;
top: 50%;
left: 50%;
width: 150%;
aspect-ratio: 1;
translate: -50% -50%;
background: conic-gradient(transparent 0 68%, var(--gold) 84%, transparent 100%);
animation: spin-ring 6s linear infinite;
}
@keyframes spin-ring { to { transform: rotate(360deg); } }التدرج يُرسم مرة واحدة. لا يتغير إلا دورانه، والدوران من عمل الـ compositor.
هذا السبب ما كنت لأجده بقراءة الكود أبدًا. خرج من trace في Chrome، ومعه رقم: 64.
في أول طرفية بـ CSS، حمل عنصر واحد الحركتين tw-in (انزلاق للداخل أثناء الكتابة) وtw-out (انزلاق للخارج أثناء المسح)، وtw-out لا تبدأ إلا بعد أن تفرغ tw-in من الحركة. ومع ذلك رفض Chrome تسليم أيٍّ منهما للـ compositor. كلتاهما عملت على الخيط الرئيسي، في كل إطار، طوال ظهور الطرفية على الشاشة.
الرقم 64 قناع بتات (bitmask) من شيفرة Chromium المصدرية (compositor_animations.h)، والبت السادس فيه اسمه kTargetHasIncompatibleAnimations. وChromium يسمح فعلًا بعدة حركات transform على عنصر واحد إن استهدفت كلٌّ منها خاصية مختلفة، كـ rotate في واحدة وscale في أخرى. حركتاي كلتاهما حرّكتا transform.
الحل هو الطبقات التي رأيتها: حركة transform واحدة لكل عنصر، بعمق أربع طبقات متداخلة.
فكيف تجعل Chrome يعطيك هذا الرقم؟
Chrome يسجّل سبب عجزه عن تركيب كل حركة على الـ GPU، وما عليك إلا أن تسأل. سجّل trace بفئة blink.animations واقرأ أحداث Animation:
ph: 'b') يحمل args.data.displayName (اسم الـ @keyframes، أما name فيأتي فارغًا لحركات CSS) وnodeName وnodeId.ph: 'n') تحمل args.data.compositeFailed، وهو bitmask، وargs.data.unsupportedProperties، أي خصائص CSS التي عجز عنها الـ compositor.id2.local، وبه تربط بينهما.هذا كله في سكربت واحد. أعطه رابطًا، فيطبع كل حركة رفضها الـ compositor، مع السبب بالكلمات.
// composite-audit.mjs التشغيل: node composite-audit.mjs http://localhost:4173/
import { chromium } from 'playwright'
// بتات CompositorAnimations::FailureReason في Chromium (compositor_animations.h)
const REASONS = {
[1 << 3]: 'unsupported timing parameters',
[1 << 5]: 'target has invalid compositing state',
[1 << 6]: 'target has incompatible animations',
[1 << 10]: 'transform cannot be accelerated on this target',
[1 << 12]: 'filter may move pixels',
[1 << 13]: 'unsupported CSS property',
[1 << 17]: 'no visible change',
[1 << 18]: 'animates an !important property',
[1 << 19]: 'SVG target has an independent transform property',
}
const decode = (mask) =>
Array.from({ length: 22 }, (_, bit) => 1 << bit)
.filter((flag) => mask & flag)
.map((flag) => REASONS[flag] ?? `bit ${Math.log2(flag)}`)
.join(', ')
const browser = await chromium.launch()
const context = await browser.newContext({ viewport: { width: 390, height: 844 }, deviceScaleFactor: 3, isMobile: true })
const page = await context.newPage()
await browser.startTracing(page, { categories: ['devtools.timeline', 'blink.animations'] })
await page.goto(process.argv[2], { waitUntil: 'load' })
await page.waitForTimeout(5000)
const { traceEvents } = JSON.parse((await browser.stopTracing()).toString())
await browser.close()
const idOf = (e) => e.id2?.local ?? e.args?.data?.id
const started = new Map()
for (const e of traceEvents) if (e.name === 'Animation' && e.ph === 'b') started.set(idOf(e), e.args.data)
const printed = new Set()
for (const e of traceEvents) {
const mask = e.name === 'Animation' && e.ph === 'n' ? e.args.data?.compositeFailed : 0
if (!mask) continue
const { displayName = '?', nodeName = '?' } = started.get(idOf(e)) ?? {}
const props = e.args.data.unsupportedProperties?.join(', ')
const line = `${nodeName} ${displayName} ${mask}: ${decode(mask)}${props ? ` [${props}]` : ''}`
if (!printed.has(line)) {
printed.add(line)
console.log(line)
}
}
// السكربت لا يظهر فوق. عُدّ عمل الخيط الرئيسي في آخر 3 ثوانٍ بدلًا من ذلك.
const end = traceEvents.reduce((max, e) => Math.max(max, e.ts ?? 0), 0)
const recent = (name) => traceEvents.filter((e) => e.name === name && e.ts > end - 3e6).length
console.log('last 3 s:', {
FireAnimationFrame: recent('FireAnimationFrame'),
TimerFire: recent('TimerFire'),
UpdateLayoutTree: recent('UpdateLayoutTree'),
})شغّلته على صفحة اختبار فيها كود CSS "قبل" من هذا المقال وحلقة الـ canvas القديمة. هذا ما طبعه Chrome 153:
DIV class='contact-panel' spin-border 8192: unsupported CSS property [--spin]
SPAN class='tw-window' tw-in 64: target has incompatible animations
SPAN class='tw-window' tw-out 64: target has incompatible animations
SPAN class='eyebrow-rule' rule-scan 8224: target has invalid compositing state, unsupported CSS property [background-position-x]
last 3 s: { FireAnimationFrame: 180, TimerFire: 0, UpdateLayoutTree: 180 }اقرأه سطرًا سطرًا:
[--spin] و[background-position-x] يأتيان من unsupportedProperties. ولاحظ الثاني: Chrome يسمّي الخاصية المفصّلة (longhand)، لا الاختصار الذي كتبته.FireAnimationFrame في 3 ثوانٍ هي حلقة الـ canvas بسقف إطاراتها: واحد مع كل تحديث للشاشة. السقف لم يُنقص الاستدعاءات قط.UpdateLayoutTree هو إعادة حساب الأنماط في Chrome. و180 منه في 3 ثوانٍ تعني واحدًا في كل إطار.والصفحة نفسها بكود CSS "بعد" لم تطبع أي فشل، ولا أي استدعاء إطار، و11 إعادة حساب أنماط فقط في 3 ثوانٍ.
سببان لا يظهران أبدًا كأحداث Animation، لأنهما سكربت: حلقة الـ canvas، والمؤقت خلف setState. FireAnimationFrame يعدّ استدعاءات requestAnimationFrame، وTimerFire يعدّ المؤقتات. وفي صفحة ساكنة ينبغي أن يقترب الاثنان من الصفر.
استُبدل المشتبه بهم الستة جميعًا ونزل الرقم. ثم جاء محدِّد أنيق واحد فضاعفه.
:has() فوق شجرة فيها حركة. لمعة العنوان الذهبية كان عليها أن تنتظر حتى يفرغ العنوان من فك تشفيره. والطريقة الأنيقة لقول ذلك:
.hero-headline:has(.decode:not(.is-done)) .sheen-band {
animation-play-state: paused;
}نجح ذلك، وضاعف انشغال المعالج على الهاتف والصفحة ساكنة. فمع حركات تعمل داخل العنوان، صار Chrome يعيد فحص :has() في كل إطار.
الحل ممل: React يضيف كلاسًا مرة واحدة حين يستقر فك التشفير، وCSS يقرأ الكلاس:
.hero-headline:not(.is-decoded) .sheen-band,
.hero-headline:not(.is-decoded) .sheen-copy {
animation-play-state: paused;
}ضبابية الخلفية فوق خلفية متحركة. الشريط العلوي على الكمبيوتر كان عليه backdrop-filter: blur(18px) saturate(140%) فوق خلفية بشفافية 78%. وخلفه لا تكف الرموز عن التساقط، فكانت الضبابية تُحسب من جديد في كل إطار. رفعت الشريط إلى 94% وحذفت الضبابية، وبهذه النسبة لا يميّز أحد الفرق. أما الهاتف فكانت الضبابية مطفأة فيه أصلًا.
الحركات خارج الشاشة تكلّف شيئًا أيضًا، والصفحة الطويلة تُبقي معظم حركاتها خارج الشاشة. مراقب IntersectionObserver واحد يعلّم كل قسم خارج نطاق الرؤية، وCSS يوقف كل ما بداخله:
[data-offscreen]::before,
[data-offscreen]::after,
[data-offscreen] *,
[data-offscreen] *::before,
[data-offscreen] *::after {
animation-play-state: paused !important;
}import { useEffect } from 'react'
const TARGETS = 'section, footer'
export default function OffscreenPause() {
useEffect(() => {
if (!('IntersectionObserver' in window)) return
let io: IntersectionObserver | undefined
let mo: MutationObserver | undefined
let cancelled = false
const each = (node: Node, fn: (el: Element) => void) => {
if (!(node instanceof Element)) return
if (node.matches(TARGETS)) fn(node)
node.querySelectorAll(TARGETS).forEach(fn)
}
const start = () => {
if (cancelled) return
const observer = (io = new IntersectionObserver(
(entries) => entries.forEach((e) => e.target.toggleAttribute('data-offscreen', !e.isIntersecting)),
{ rootMargin: '160px 0px' }, // يبدأ الحركة قبيل ظهور القسم
))
document.querySelectorAll(TARGETS).forEach((el) => observer.observe(el))
// تغيير الصفحة يضيف أقسامًا ويحذف أخرى.
mo = new MutationObserver((records) =>
records.forEach((r) => {
r.addedNodes.forEach((n) => each(n, (el) => observer.observe(el)))
r.removedNodes.forEach((n) => each(n, (el) => observer.unobserve(el)))
}),
)
mo.observe(document.body, { childList: true, subtree: true })
}
// HTML مولَّد مسبقًا: انتظر حتى يستلم React الصفحة، وإلا رأى خصائص لم يرسمها.
const kick = () =>
window.requestIdleCallback ? window.requestIdleCallback(start, { timeout: 2500 }) : window.setTimeout(start, 300)
if (document.readyState === 'complete') kick()
else window.addEventListener('load', kick, { once: true })
return () => {
cancelled = true
window.removeEventListener('load', kick)
mo?.disconnect()
io?.disconnect()
}
}, [])
return null
}ركّبه مرة واحدة، في أي مكان. وتفصيلتان أخذتا مني وقتًا:
closest('[data-offscreen]')، فإن وجد قسمه موقوفًا انتظر ثانية ثم فحص من جديد.هذا هو قياس السكون الذي بدأ به المقال. ابنِ النسختين اللتين تريد مقارنتهما، شغّلهما على منفذين، ثم أمر واحد.
// idle-busy.mjs التشغيل: node idle-busy.mjs http://localhost:4173/ http://localhost:4174/
import { chromium } from 'playwright'
const RUNS = 5 // لكل رابط، بالتناوب: A، B، A، B...
const SETTLE_MS = 4000 // دع التحميل ينتهي: نريد الكلفة والصفحة ساكنة
const WINDOW_MS = 3000
const browser = await chromium.launch()
async function idleBusy(url) {
const context = await browser.newContext({
viewport: { width: 390, height: 844 },
deviceScaleFactor: 3,
isMobile: true,
hasTouch: true,
})
const page = await context.newPage()
const cdp = await context.newCDPSession(page)
await cdp.send('Emulation.setCPUThrottlingRate', { rate: 4 })
await cdp.send('Performance.enable')
await page.goto(url, { waitUntil: 'load' })
await page.waitForTimeout(SETTLE_MS)
const taskSeconds = async () =>
(await cdp.send('Performance.getMetrics')).metrics.find((m) => m.name === 'TaskDuration').value
const before = await taskSeconds()
await page.waitForTimeout(WINDOW_MS)
const after = await taskSeconds()
await context.close()
return ((after - before) / (WINDOW_MS / 1000)) * 100
}
const urls = process.argv.slice(2)
const runs = Object.fromEntries(urls.map((url) => [url, []]))
for (let i = 0; i < RUNS; i++) for (const url of urls) runs[url].push(await idleBusy(url))
await browser.close()
const median = (xs) => [...xs].sort((a, b) => a - b)[Math.floor(xs.length / 2)]
for (const [url, xs] of Object.entries(runs)) {
console.log(`${median(xs).toFixed(0)}% busy at rest ${url} (runs: ${xs.map((x) => x.toFixed(0)).join(', ')})`)
}التثبيت: npm i -D playwright ثم npx playwright install chromium.
الصفحة نفسها، والحركات نفسها، على محاكاة الهاتف نفسها:
98% → 18%
انشغال الخيط الرئيسي والصفحة ساكنة
1.2 → 0.1 ث
زمن الحجب الكلي عند التحميل
67 → 17 ms
أسوأ إطار أثناء التمرير
| قبل | بعد | |
|---|---|---|
| انشغال الخيط الرئيسي والصفحة ساكنة | 98% | 18% |
| زمن الحجب الكلي عند التحميل | 1.2 ث | 0.1 ث |
| أول ظهور للمحتوى | 1.6 ث | 0.7 ث |
| أسوأ إطار أثناء التمرير | 67 ms | 17 ms |
| الكمبيوتر، انشغال الخيط الرئيسي والصفحة ساكنة | 43% | 8% |
مكاسب التحميل جاءت من ثلاثة تغييرات أخرى: حذفت framer-motion (42 KB مضغوطة) لصالح بضع حركات CSS. وتوقفت الصفحة الرئيسية عن حزم نصوص دراسات الحالة الكاملة، فنزل السكربت الرئيسي من 416 KB إلى 324 KB. وصارت الخطوط تُحمَّل دون أن تعطّل سكربت التطبيق.
ولم تُحذف حركة واحدة.
transform وopacity على عناصر HTML. ولا شيء غيرهما في حلقة متكررة، أبدًا.requestAnimationFrame، ولا إعادة رسم canvas، ولا تحديث حالة على مؤقت.:has() فوق شجرة فيها حركة. ضع كلاسًا مرة واحدة.backdrop-filter فوق محتوى متحرك.الحركة لم تكن يومًا الجزء المكلف. المكلف هو الحركة الواحدة التي تطلب من الخيط الرئيسي إطارًا بصمت، والصفحة كلها تدفع الثمن.
والعنوان ذو اللمعة الذهبية نفسه انكسر بالعربية بطريقة لا يكشفها أي trace. تلك القصة الأخرى.
التعليقات
شارك في النقاش
سجّل الدخول بحساب Google لتعجب بالمقالات وتعلّق عليها. ضغطة واحدة تكفي.