التمرير الناعم مقيسًا: الكلفة في الإقامة، لا في زمن الإطار

السؤال يُطرح دائمًا تقريبًا عن الكمّية الخطأ. زمن الإطار أثناء التمرير هو ما يقيسه الناس، وعلى هدفَي هذا المستودع جاءت النتيجة معكوسة: المرشَّح المُدار بـ Lenis نفّذ دفقة عجلة بمقدار 1,200 px بمتوسط إطار 8.54 ms، بينما نفّذ المرجع غير المُعاد بناؤه الدفقة نفسها عند 49.17 ms. المرجع يرسم اثنتي عشرة لوحة canvas ومشهد WebGL؛ والمرشَّح، يوم أُخذ ذلك الأثر، لم يرسم شيئًا. الفارق هو الصفحة، لا معامل lerp.

أمّا الكلفة التي تخصّ مُنعِّم التمرير حقًا فهي الإقامة — ما تظلّ الصفحة تطلبه من المتصفّح بعد أن يتوقّف الزائر. ويختصر ذلك في رقم واحد: عدد استدعاءات rAF في الثانية والصفحة واقفة لا يلمسها شيء، والأداة تسعها جملة واحدة: أداة التتبّع تلفّ window.requestAnimationFrame بعدّاد يمرّر إلى التنفيذ الأصلي، وتنتظر ثلاثة آلاف مللي ثانية، ثم تقسم على ثلاثة.

الأثر الذي خرجت منه تلك الأرقام أُودِع في 2026-08-20 ويحمل طابعًا زمنيًا فارغًا للالتقاط، فتاريخ الإيداع هو التاريخ الوحيد الذي يستطيع هذا المقال أن يذكره بأمانة. وهذا مهمّ مرّتين، لأن المرشَّح الذي قِيس يومها لم يكن فيه GSAP ولا WebGL ولا أي لوحة canvas — وهذا نصف سبب قراءة زمن إطاره على هذا النحو.

لا رقم من رقمَي زمن الإطار قياسٌ للمنتج، والمستودع صريح في ذلك: أدوات القياس الذهبية تعمل تحت مُصيِّر برمجي مفروض، حيث تحوم المسارات غير الـ GL حول 120 Hz والمسارات الـ GL حول 16 Hz، وأرقام الـ Hz أثر من آثار تلك الأدوات ولا يجوز أبدًا اقتباسها بوصفها أداء المنتج. ما يبقى بعد التحفّظ هو المقارنة — هدفان، وجهاز واحد، ومنهج واحد.

إعدادات التمرير كلّها في هذا الموقع ثمانية خيارات مذكورة في كائن واحد مُجمَّد، لكلٍّ منها مرجعه في سطره الخاص، يضاف إليها جدول من عشرة صفوف لخيارات لم تُمرَّر عمدًا — مُصدَّر كي يستطيع اختبارٌ التحقّق من النفي بدل الوثوق ببقاء تعليق صادقًا. والثمانية هي lerp 0.1 وsmoothWheel true وsyncTouch false وtouchMultiplier 1.25 وautoResize true وautoRaf false وanchors false وinfinite false.

والقاعدة التي تحكم هذا الفصل مكتوبة في رأس ذلك الملف، وهي ادّعاء عن الادّعاءات: الخيار الذي يرثه الموقع القديم بوصفه قيمة افتراضية للمكتبة يُورَث هنا كذلك بدل إعادة ذكره، لأن كتابة syncTouchLerp 0.075 تجمّد قيمة تملكها النسخة المثبَّتة. فإعادة ذكر قيمة افتراضية تحوّل «نحن نقدّم سلوك Lenis 1.1.20» إلى «نحن نقدّم قراءتنا لسلوك Lenis 1.1.20»، وهو ادّعاء مختلف وأسوأ. ومع ذلك ذُكرت ثلاث قيم صراحةً — autoRaf وanchors وinfinite — لأن كلًّا منها قرار لا قبول.

وقيمة lerp 0.1 هي ما يجعل الإحساس حسابًا لا رأيًا. المكتبة تخمّد بمقدار واحد ناقص الأُسّي لسالب lerp مضروبًا في ستين مضروبًا في فارق زمن الإطار، فيكون المنحنى واحدًا ناقص e أُسّ سالب ستة t، وتخرج منه المحطّات: نصف المسافة عند ln 2 على ستة، أي 116 ms، وتسعون بالمئة عند 384 ms، وتسعة وتسعون بالمئة عند 767 ms. وهذه تنبّؤات وُضعت قبل تشغيل التتبّع.

المرشَّح يتأخّر 25 ms عن النظرية عند منتصف المسافة، ويسبقها بمللي ثانية واحدة عند تسعة وتسعين بالمئة. والمرجع أبطأ عند كل محطّة رغم تشغيله معامل lerp نفسه، وهذا أوضح ما في التتبّع: ما يشعر به الزائر هو ما ترسمه الصفحة، لا منحنى التنعيم. وقارِن الاثنين بالإطارات بدل المللي ثانية، يُبلَّغ عن المنحنى المتطابق نفسه بوصفه فرقًا بأربعة أضعاف، في الاتجاه الخطأ — ولهذا تسجّل أداة التتبّع عدد الإطارات وذروة البكسلات لكل إطار دون أن تقارنها يومًا بين الهدفين.

«اجعل مستمعات التمرير سلبية» نصيحة يكرّرها الجميع، وهي على حدث scroll طقسٌ بلا معنى. فحدث scroll كائن Event عام وغير قابل للإلغاء — لا فعل افتراضي يُمنَع — فالمستمع غير السلبي عليه لا يحجب شيئًا على الإطلاق. السلبية (passive) لا تغيّر سلوك المتصفّح إلا في الأحداث التي كانت ستوقف التمرير لو أُلغيت: touchstart وtouchmove وwheel وmousewheel.

الموقع القديم المفحوص هنا يسجّل أحد عشر مستمعًا لحدث scroll في صفحته الرئيسية، وأربعة منها تُذكَر بوصفها غير سلبية. ولم يُسجَّل أيٌّ من الأربعة بـ passive false. هي تسجيلات بسلبية افتراضية — قيمة منطقية مجرّدة أو وسيط ثالث غائب — ولو كانت صريحة لما غيّر ذلك شيئًا. أمّا التسجيلات التي تحجب التمرير فعلًا فهي في مكان آخر من تلك الصفحة، وعددها ثمانية.

أثر المُنعِّم نفسه أصغر من الحكاية الشائعة، ويُقرأ في ثابت واحد. المصدر المثبَّت يكتب في متنه كائن خيارات مستمع واحدًا بـ passive false ويستعمله في أربعة تسجيلات بالضبط — wheel وtouchstart وtouchmove وtouchend على العنصر الجذر — وهذه يجب أن تكون غير سلبية، لأن استدعاء preventDefault على حدث wheel هو ما يجعل التنعيم موجودًا أصلًا. وهناك مستمع خامس، scroll على الغلاف، مُسجَّل بقيمة false مجرّدة، ومعالجه لا يحوي أي استدعاء لـ preventDefault من أي نوع. كل أداة تدقيق تعدّه. ولا شيء يفعله يمكن أن يحجب.

مسبار البناء الجديد يُبلغ عن ستة مستمعات لـ scroll وwheel واللمس، أربعة منها غير سلبية، مقابل تسعة وثلاثين وسبعة وعشرين على المرجع. ورقما اللاسلبية كلاهما سقف لا عدّ، والمستودع يقول ذلك في تحفّظاته: المسبار يقرأ السلبية من كون الوسيط الثالث كائنًا فحسب، فتُحصى القيمة المنطقية المجرّدة غير سلبية حتى حيث يطبّق المتصفّح قاعدته في السلبية الافتراضية. فالسبعة والعشرون حدّ أعلى على المرجع؛ والثمانية هو الرقم القابل للدفاع عنه.

وهذا يقودنا إلى أنفع ما في هذه الصفحة، وهو خلل في نصّ هذا المستودع نفسه. ستة ملفات هنا تقول إن اثنين من معالجات التمرير غير السلبية في الموقع القديم يكلّفان نحو 1,470 مللي ثانية. وهما لا يكلّفان ذلك. الرقم 1,469.8 هو المللي ثانية التي سُجِّل عندها آخر المستمعات الأحد عشر، مقروءًا من جدول عموده الأول عنوانه t بالمللي ثانية — طابع زمني لتسجيل، لا كلفة، ولا يوجد في المجموعة كلّها أي قياس لكلفة تلك المعالجات. والقرار الهندسي المرتبط بالرقم ما زال صحيحًا، لأن تلك المعالجات لا تمنع شيئًا وينبغي أن تكون سلبية. أمّا الرقم المرتبط بالقرار فلا يقيس شيئًا.

لا يلغي Lenis 1.1.20 اشتراكه عند السكون. وإذا تُرك وشأنه أخذ إطارًا كل ستة عشر مللي ثانية ليستكمل موضعًا توقّف عن الحركة، وهذه بالضبط هي الإقامة التي يدور عليها القياس أعلاه. قطعتان تزيلانها: ساعة الإطارات ترفض جدولة إطار حين لا يكون مشتركًا فيها شيء قابل للتشغيل، ومالك التمرير يفتح اشتراكه عند أول إدخال ويغلقه بعد اثني عشر إطارًا ساكنًا من استقرار الموضع.

والثابتان كلاهما مُعلَن في الشيفرة نفسها أنه مُختار لا مقيس، والصراحة هي المقصد. فـ 0.05 px دون أصغر حركة يستطيع أي مستهلك في هذا الموقع أن يتصرّف بناءً عليها، واثنا عشر إطارًا نحو مئتَي مللي ثانية عند 60 Hz — أي بعد ذيل حركة lerp 0.1 بمسافة مريحة، وهي حركة تفقد نحو تسعة وثمانين بالمئة من مسافتها المتبقّية كل اثنين وعشرين إطارًا. والملف يذكر أن كليهما يصير رقمًا مقيسًا يوم يُسجَّل أول أثر لإحساس التمرير.

الخطوة الثالثة موجودة لأن إغلاق الاشتراك كسر الإحساس، وقِيس الكسر قبل إصلاحه. المكتبة تحسب فارقها الزمني بطرح الطابع الذي خزّنته في الإطار السابق من الطابع الحالي، وبينما ينام الاشتراك لا شيء يقدّم ذلك الطابع المخزّن — فيسلّم أول إطار بعد الاستيقاظ دالّةَ التخميد كامل المدّة التي جلس فيها الزائر ساكنًا. وعند توقّف مدّته عشرون ثانية يكتمل الأُسّي في إطار واحد. والقياس قبل الإصلاح المكوَّن من سطر واحد: عجلة بمقدار 1,200 px وصلت في أربعة إطارات بذروة 1,200 px في الإطار، وهذا ليس تنعيمًا بحال.

والإصلاح يعيد الزمن المخزّن في المكتبة إلى الصفر قبل أول إطار بعد الاستيقاظ، ويثبّته اختبار وحدة: الإطار الأول يتقدّم صفر بكسل بالضبط، والثاني يتقدّم نحو 114 px من أصل 1,200. والتعليق فوق ذلك السطر هو خلاصة هذا المقال كلّه في جملة واحدة — المكتبة التي تملك حلقتها الخاصة لا تواجه هذه المشكلة أبدًا لأنها لا تنام أبدًا، وعدم النوم هو الكلفة التي وُجدت هذه البوّابة لتفاديها.

التنقّل بالمرابط هو النصف الآخر من امتلاك موضع التمرير، وهو حيث تكسر معظم عمليات دمج التمرير الناعم لوحةَ المفاتيح بصمت — التمرير الناعم، والتركيز، والتاريخ.

قُلِب syncTouch من true إلى false في هذا الموقع اليوم، والسبب خلل لا تفضيل. العَرَض المُبلَّغ عنه أن الصفحة تبدو مقصوصة من أعلاها وأسفلها على Safari في iOS، وأن واجهة المتصفّح تتصرّف على غير ما تتصرّف به في كل موقع آخر. أمّا الإصلاح البديهي — تغيير وحدات إطار العرض — فكان سيعالج العَرَض ويترك السبب يعمل.

ونصف التشخيص العائد إلى المكتبة قابل للتحقّق سطرًا سطرًا في الملف المثبَّت، المُودَع بايتًا بايتًا ببصمة SHA-256 يفحصها البناء. فمع syncTouch true يجعل حدث اللمس فرعَ التنعيم صحيحًا، فيستدعي المعالج preventDefault، وتقود المكتبة الموضع بنفسها. وكل touchmove على الهاتف يُلغى.

204  var listenerOptions = { passive: false };
 
211  el.addEventListener('wheel',      onWheel,      listenerOptions);
212  el.addEventListener('touchstart', onTouchStart, listenerOptions);
217  el.addEventListener('touchmove',  onTouchMove,  listenerOptions);
222  el.addEventListener('touchend',   onTouchEnd,   listenerOptions);
 
448  wrapper.addEventListener('scroll', onNativeScroll, false);
     // الوسيط الثالث هو قيمة الالتقاط المنطقية، فالسلبية هي الافتراضية —
     // وonNativeScroll (:631-660) لا يحوي preventDefault البتّة
 
585  const isSmooth = options.syncTouch  && isTouch
                   || options.smoothWheel && isWheel;
586  if (!isSmooth) {
587    this.isScrolling = 'native';
588    this.animate.stop();
589    event.lenisStopPropagation = true;
590    return;
591  }
 
601  event.preventDefault();   // لا يُبلَغ إلا حين تكون isSmooth صحيحة

أمّا ما يكلّفه touchmove مُلغى فتشخيصٌ من هذا المستودع، وينبغي أن يُقرأ على أنه كذلك. Safari يسحب شريط عنوانه استجابةً لإيماءة تمرير من المستخدم؛ والتمرير البرمجي ليس إيماءة؛ فلا ينسحب الشريط أبدًا، ويصير كل صندوق مقاسه بوحدة vh مقاسًا على إطار العرض الكبير — وهو ارتفاع لا تملكه الصفحة إلا بعد ذهاب الشريط. ولم يظهر أي نصّ أصلي من Apple أو WebKit يقرّر تلك القاعدة. الآلية داخل المكتبة تُقرأ في المصدر؛ أمّا سلوك المتصفّح الذي تعتمد عليه فمُبلَّغ عنه، ومُلاحَظ على نطاق واسع، وغير موثَّق من المُصنِّع.

ومع syncTouch false تسلك الشيفرة نفسها الفرع عند السطر 586، فتُعلِم التمرير بأنه أصلي، وتوقف الحركة، وتعود دون أن تمنع شيئًا. فتستعيد المنصّة زخمها، وارتدادها المطاطي، وشريط عنوانها، وإعدادات إمكانية الوصول فيها، ويبقى تنعيم العجلة كما هو لأن smoothWheel خيار منفصل وما زال true. ولاحظ ما لا يتغيّر: تلك التسجيلات الأربعة ما زالت غير سلبية. الذي يتغيّر هو هل يُستدعى preventDefault أصلًا أم لا.

وشيء واحد وجب إعادة بنائه يدويًا بعد ذلك. على الهاتف، شريط المشاريع مسارٌ لاصق يُمسَح بالتمرير، يُقرأ على أنه شيء تسحبه بإصبعك ولم يكن كذلك، فكان الإصبع الجانبي لا يفعل شيئًا البتّة. والبديل هو المستمع الوحيد غير السلبي صراحةً الذي يضيفه هذا الموقع خارج المُنعِّم: معالج touchmove يمنع فقط ما دام مزلاج المحور الأفقي مُشتبكًا، بعد ثمانية بكسلات من الهامش وداخل مخروط قدره نحو ثلاثين درجة — وهو يحرّك الصفحة لا الشريط، فلا يجتمع مالكان أبدًا على موضع بصري واحد.

والشريط الذي تقوده تلك الإيماءة يقع في فهرس المشاريع، حيث يُطبَّق انضباط القياس نفسه على عشرة أعمال.

الصفر عند السكون صحيح على البناء الذي قِيس عليه، وذلك البناء أقدم بخمس وتسعين دقيقة من يوم أُدخل GSAP إلى هذه الشجرة. أمّا في الصفحة كما هي اليوم فالرقم الأمين ليس صفرًا. إنه واحد، وهذا الواحد لا يخصّ المُنعِّم.

يبدأ ScrollTrigger عند تفعيله استدعاء requestAnimationFrame فارغًا يعيد جدولة نفسه، ويشغّله طوال عمر الصفحة، ومعه تعليق المكتبة نفسها يقول إنه موجود لأن إعادة رسم الشاشة لم تكن متّسقة في بعض المتصفّحات ما لم يكن هناك شيء في الطابور. ولا يوجد خيار لتعطيله. وإلى جانبه setInterval يعمل أربع مرّات في الثانية. وإزالة Lenis لن تزيل أيًّا منهما.

ولهذا أيضًا لا يدّعي البناء الجديد أن لديه حلقة إطارات واحدة. إنه يعلن مصدرَي إطارات بعلاقة مذكورة بينهما: ساعة الإطارات، وهي تملك كل استدعاء rAF من الطرف الأول، ومؤقّت GSAP، وهو يملك تقدّم مكتبة الحركة نفسها ويحتفظ به. ولم يُفرَض GSAP على الساعة، وهذا قرار لا إغفال — فإنشاء أي حركة يوقظ المؤقّت من داخل المكتبة، فلا يصمد تنويمه، والدالّة التي تقوده من الخارج ليست واجهة برمجية عامة.

وما يمنع المصدر الثاني من أن يصير حلقة ثانية دائمة ثلاث خصائص مُتحقَّق منها لا وعد: خاصية autoSleep في المؤقّت نفسه، وأن ScrollTrigger لا يضيف مستمعًا إلى المؤقّت إلا على Safari اللمسي، وميزانية سكون مقيسة عند النقطة التي يُفتَح فيها أكبر عدد من الأنظمة معًا في الصفحة. والغاية من تسمية هذا كلّه أن جواب سؤال «هل يضرّ التمرير الناعم بالأداء؟» في هذه الصفحة هو أن المُنعِّم لا يحجز شيئًا، وأن شيئًا آخر يحجز.

الخاصية التي حسمت الأمر تسعها جملة واحدة: القيمة المُنعَّمة هي إزاحة تمرير المستند. ولأن المكتبة تحرّك النافذة الحقيقية، فإن كل قراءة getBoundingClientRect في الصفحة وكل تثبيت لاصق يرث التنعيم مجانًا، ويتّفق عشرة قرّاء مستقلّين دون أن يُطلب منهم ذلك. وبالقياس، ساوت window.scrollY قيمةَ التمرير التي تُبلغ عنها المكتبة في نقاط التحقّق السبع والعشرين جميعها عبر ثلاثة مسارات، والسرعة صفر عند كل واحدة منها.

وكل بديل يُنعِّم شيئًا آخر مضطرّ إلى إعادة بناء ذلك الاتّفاق صراحةً، في كل مستهلك، وإلى الأبد. وهذا هو المحور الذي رُتِّب عليه الجدول أدناه — الميكانيكا، لا الذوق.

ويبقى خيارًا أخيرًا أن تكتب حلقة تخميد من ثمانين سطرًا بنفسك، وهي أرخص حتى الأسبوع الثاني فقط. فما تتخلّى عنه هو الاستثناء عبر المسار المركَّب، والتوفيق مع التمريرات الأصلية التي ما زالت المكتبة تستقبلها — سحب شريط التمرير، ولوحة المفاتيح، وHome وEnd — والارتداد المطاطي عند طرفَي المستند، وآلة حالات تقرأها بقيّة الصفحة.

ومسار تقليل الحركة هو حيث يُبرهَن على الاختيار لا يُجادَل فيه. فتحت prefers-reduced-motion reduce لا ينشئ هذا الموقع مُنعِّمًا أصلًا — لا مبنيًّا ثم مهدومًا، ولا موقوفًا — ومستمع التمرير الوحيد المُركَّب في ذلك الوضع سلبي صراحةً، لأن معالجه لا يستدعي preventDefault أبدًا، ولأن تسجيله على غير ذلك كلفة خالصة على الخيط الرئيسي. والتتبّع يقرأ أصناف العنصر الجذر عند ستة أحجام عرض فلا يجد صنف المُنعِّم في أيٍّ منها.

وهذه البوّابة موجودة لأن مسار تقليل الحركة في الموقع القديم كان كارثة مقيسة. فهو يحترم التفضيل باستطلاع ستمئة إطار بحثًا عن متغيّر عام ثم هدم النسخة، لأن الاستدعاء البديهي — إيقاف المُنعِّم — قِيس فتبيّن أنه يترك الصفحة غير قابلة للتمرير بتاتًا: العجلة تحرّكها صفر بكسل، ومفتاح End يحرّكها صفر بكسل. أمّا البناء الجديد فيثبت العكس بالعجلة وبمفتاح End عند أحجام العرض الستة جميعها، وعند كل واحد منها يبلغ مفتاح End أسفلَ المستند تمامًا.

وتقليل الحركة وضعٌ لا مفتاح تشغيل، والنصف الخاص بـ canvas من تلك الحجّة هو ماذا يعني reduce للمُصيِّر.

أمران اثنان ينتجان كل ما سبق. الأول يقود دفقة عجلة بمقدار 1,200 px على الهدفين، ويسجّل المنحنى بالمللي ثانية، وانحدار تقليل الحركة عند ستة أحجام عرض، وكلفة السكون، وسلوك المرابط، وسلبية المستمعات. والثاني يمشي على إحدى عشرة محطّة تمرير، ويستطلع ساعة الإطارات حتى يبلغ عدد مشتركيها الأحياء صفرًا، ثم يقارن النتيجة بقائمة مغلقة بالأقسام المسموح لها بحجز إطار.

والاستطلاع أهمّ ممّا يبدو. فالانتظار الثابت يقيس ما يصادف أن يكون جاريًا: رسم شعار التذييل بناءٌ مدّته 2.8 ثانية، فانتظار استقرار مدّته 1.8 ثانية يمسكه في منتصف الطريق ويُبلغ عن إطار هو حركة لا تسريب. أمّا الاستطلاع حتى الخمول فيفصل نظامًا لا يترك أبدًا عن نظام ما زال يُنهي عمله. وقد ضبطت هذه البوّابة نفسها مرّة — فحصٌ ظلّ ينجح لأن الصفحة كانت بطيئة، ثم بدأ يفشل حين صارت الصفحة أسرع فأعاد تسليح نفسه داخل نافذة كان يفوّتها من قبل.

ولكل أداة قياس أرضية ضجيج خاصة بها، وقياس تلك الأرضية مشكلة قائمة بذاتها — أرضية الضجيج في مجموعة اختبارات الانحدار البصري.

والنصف الهندسي من طريقة بناء هذا الموقع مشروح في التخصّصات الأربعة.