يشعر موقع الويب الفاخر بأنه “ثقيل” في الأهمية، ولكنه “خفيف” في الأداء. عندما أنقر على زر، يجب أن ينزلق الشكل على الفور، مثل الحرير السهل. إذا تعثرت أو تأخرت أو أسقطت الإطارات، ينكسر الوهم. 60 إطارًا في الثانية (FPS) هو المعيار الذهبي. لتحقيق 60 إطارًا في الثانية، يحتاج المتصفح إلى 16.6 مللي ثانية لعرض إطار. (1000 مللي ثانية / 60 إطارًا = 16.66 مللي ثانية). إذا أخذت 17 مللي ثانية، فإنك تسقط إطارًا. يرى المستخدم “جانك”. لإصلاح ذلك، يجب أن تفهم كيف يفكر المتصفح.

لماذا تتحدث Maison Code عن هذا

في Maison Code Paris، نعمل كضمير معمari لعملائنا. غالبًا ما نرث حزمًا “حديثة” تم بناؤها دون فهم أساسي للحجم.

نناقش هذا الموضوع لأنه يمثل نقطة تحول حاسمة في النضج الهندسي. التنفيذ الصحيح يميز MVP الهش عن منصة مؤسسية مرنة يمكنها التعامل مع حركة مرور الجمعة السوداء.

لماذا تستحوذ Maison Code على أكثر من 60 إطارًا في الثانية

نحن لا نبيع المنتجات. نبيع المشاعر. الرسوم المتحركة المتعثرة تبدو “رخيصة”. يبدو الأمر وكأنه مقبض باب مكسور في سيارة فيراري. نحن نفرض ميزانية أداء صارمة على الرسوم المتحركة. إذا تسببت الرسوم المتحركة في تغيير التخطيط، فإننا نحذفها. نحن نؤمن بأن الحركة هي دلالات. وهو يشرح الواجهة. لكن الحركة بدون أداء هي مجرد ضجيج.

1. مسار عرض المتصفح

عند تحديث أحد الأنماط، يمر المتصفح بثلاث مراحل:

التخطيط (باهظ الثمن): حساب الهندسة. “ما مدى اتساع هذا القسم؟ أين يقع؟”
- يتم تشغيله عن طريق تغيير: العرض، الارتفاع، اليسار، الأعلى، الهامش.
طلاء (متوسط): تعبئة وحدات البكسل.
- يتم تشغيله عن طريق تغيير: لون الخلفية، الحدود، الظل.
مركب (رخيص): ترتيب الطبقات.
- يتم تشغيله عن طريق تغيير: التحويل، التعتيم.

القاعدة الذهبية: فقط خصائص المركبة المتحركة.

سيء: الانتقال: الارتفاع 0.3 ثانية. (يؤدي إلى التخطيط في كل إطار = استخدام وحدة المعالجة المركزية بشكل مكثف).
جيد: الانتقال: تحويل 0.3 ثانية. (يتم تشغيل المركب فقط = تسريع وحدة معالجة الرسومات).

2. تأثير المقياس مقابل تأثير العرض

تريد أن ينمو الزر عند التمرير.

المنهج الساذج:
```
.btn:hover { العرض: 120 بكسل؛ }
```
وهذا يدفع جميع العناصر المجاورة جانبا. يجب على المتصفح إعادة حساب موضع تخطيط الصفحة بالكامل. جانك.
المنهج الاحترافي:
```
.btn:hover { تحويل: مقياس (1.1)؛ }
```
يؤدي هذا إلى ترقية الزر إلى طبقة جديدة. تقوم وحدة معالجة الرسومات (GPU) بتحجيمها مثل الملمس. العناصر المجاورة لا تتحرك. سلس. نصيحة: استخدم will-change: Transform لتلميح المتصفح للترويج للطبقة مسبقًا.

3. تقنية الوجه (الخدعة السحرية)

في بعض الأحيان تحتاج إلى تغيير التخطيط (على سبيل المثال، إعادة ترتيب القائمة، أو توسيع البطاقة). استخدم مبدأ القلب (الأول، الأخير، العكس، اللعب).

أولاً: قياس موضع البداية (x: 0).
الأخير: نقل العنصر إلى الموضع النهائي (فوري). قياسه `(س: 100)’.
عكس: استخدم التحويل لتحريكه للخلف إلى موضع البداية بشكل مرئي (التحويل: ترجمةX(-100px).
تشغيل: قم بتحريك التحويل إلى 0. يرى المستخدم حركة سلسة، لكن المتصفح يحسب التخطيط مرة واحدة فقط، ثم يقوم بالتحويل المتحرك. تتعامل المكتبات مثل Framer Motion مع هذا تلقائيًا باستخدام <motion.div Layout>.

4. مكتبات جافا سكريبت للرسوم المتحركة

CSS هو الأسرع في التحولات البسيطة. بالنسبة للفيزياء المعقدة (الينابيع)، فأنت بحاجة إلى JS.

Framer Motion: معيار React. DX رائع، لكن حجم الحزمة ثقيل (30 كيلو بايت).
GSAP: معيار الصناعة للتطوير الإبداعي. جداول زمنية قوية. ترخيص باهظ الثمن لبعض الميزات.
React Spring: يعتمد على الفيزياء. جيد للشعور “الطبيعي”.

نصيحة الأداء: قم بتشغيل الرسوم المتحركة خارج دورة عرض React. إذا قامت رسومك المتحركة بتحديث حالة React State في كل إطار، فسوف تقوم بقتل الخيط الرئيسي. استخدم المراجع ومعالجة DOM المباشرة (أو المكتبات التي تقوم بذلك، مثل GSAP).

5. عنق الزجاجة في الهاتف المحمول (وضع الطاقة المنخفضة)

يمكن لجهاز MacBook Pro M3 Max الخاص بك تحريك أي شيء. لا يمكن لهاتف Android الخاص بالمستخدم الذي يبلغ من العمر 3 سنوات في “وضع توفير البطارية” القيام بذلك. تقييد وحدة المعالجة المركزية أمر حقيقي. اختبار على الأجهزة المنخفضة. إذا كان تأثير “Parallax Scroll” الخاص بك يجعل الهاتف ساخنًا، فقم بتعطيله. استخدم استعلام الوسائط “prefers-reduced-motion” لاحترام إعدادات المستخدم. الموقع الذي يمكن الوصول إليه هو موقع فعال.

6. تصحيح أخطاء FPS (DevTools)

افتح Chrome DevTools -> علامة التبويب الأداء. سجل الرسوم المتحركة. ابحث عن المثلثات الحمراء. “مهمة طويلة”. “إعادة حساب النمط”. إذا رأيت الكثير من أنشطة التخطيط (الأشرطة الأرجوانية)، فأنت تقوم بتحريك الخصائص الخاطئة. قم بتشغيل “Paint Flashing” في علامة التبويب Rendering. تظهر الومضات الخضراء ما يتم إعادة طلاؤه. من الناحية المثالية، لا ينبغي أن يومض أي شيء أثناء تحويل الرسوم المتحركة. ** حدود الطبقة **: قم بتشغيل هذا لمعرفة العناصر التي يتم ترقيتها إلى وحدة معالجة الرسومات.

7. مصيدة React `useLayoutEffect`

في React، يُنفَّذ useEffect بعد الطلاء. إذا قمت بقياس عناصر DOM في useEffect، فسيرى المستخدم إطارًا يوجد فيه العنصر في المكان الخطأ، ثم ينقطع. استخدم “useLayoutEffect” للقياسات. إنه يحجب الطلاء حتى يتم القياس. استخدم هذا بشكل مقتصد، لأنه يوقف الخيط الرئيسي مؤقتًا. ولكن بالنسبة لتهيئة الرسوم المتحركة (FLIP)، فمن الضروري تجنب الأخطاء البصرية.

8. نموذج RAIL (مبدأ الأداء الخاص بشركة Google)

يحدد Google أربع لحظات رئيسية في الأداء: R.A.I.L.

الاستجابة: معالجة الأحداث في أقل من 50 مللي ثانية. إذا نقرت، يجب أن أرى ردود الفعل على الفور.
الرسوم المتحركة: قم بإنتاج إطار في أقل من 16 مللي ثانية (60 إطارًا في الثانية).
الخمول: زيادة وقت الخمول إلى الحد الأقصى. قم بالعمل عندما لا يتفاعل المستخدم.
تحميل: قم بتسليم المحتوى وكن تفاعليًا في أقل من 5 ثوانٍ. إذا قمت بانتهاك RAIL، فإن Google يعاقبك على تصنيف SEO الخاص بك. الأمر لا يتعلق فقط بـ “السرعة”. إنه يتعلق بـ “الإدراك”. يبدو التأخير بمقدار 100 مللي ثانية وكأنه ثانية واحدة للمستخدم.

9. خارج الموضوع الرئيسي: عمال الويب

جافا سكريبت هي خيط واحد. إذا قمت بتحليل ملف JSON ضخم، فسيتم تجميد واجهة المستخدم. الحل: عمال الويب. انقل المنطق الثقيل (تحليل البيانات، وضغط الصور، والتشفير) إلى العامل.

عامل ثابت = عامل جديد('worker.js');
عامل.postMessage(hugeData);

يظل الموضوع الرئيسي مجانيًا لواجهة المستخدم (التمرير والنقر). المكتبات مثل Comlink تجعل هذا الأمر أسهل. في عام 2026، ستكون “بنية خارج الموضوع الرئيسي” هي الإعداد الافتراضي.

10. دراسة حالة: الكاروسيل بمعدل 60 إطارًا في الثانية

لقد بنينا عرضًا دائريًا للمنتج لأحد عملاء الأزياء الفاخرة. القيد: 50 صورة عالية الدقة. التمرير اللانهائي. التحولات ثلاثية الأبعاد. فشل الإصدار 1: حالة التفاعل activeIndex. إعادة عرض القائمة بأكملها في كل تمريرة. 15 إطارًا في الثانية. الإصدار الثاني الثابت:

المحاكاة الافتراضية: يتم عرض الشرائح الثلاثة المرئية فقط.
التصحيح: تم استخدام التحويل: TranslatorX3d() لتسريع الأجهزة.
سوف يتغير: ألمح إلى المتصفح.
فك تشفير الصور: يتم استخدام decoding="async" على الصور. النتيجة: معدل إطارات ثابت يبلغ 60 إطارًا في الثانية على هاتف iPhone 8. لم يكن الفرق هو الإطار؛ لقد كانت فيزياء المتصفح.

11. WebGL وCanvas (تفكيك DOM)

بالنسبة للرسوم المتحركة المتطرفة (آلاف الجزيئات والنماذج ثلاثية الأبعاد)، يكون DOM بطيئًا للغاية. انتقل إلى WebGL (عبر Three.js أو React Three Fiber). يرسم WebGL مباشرة إلى المخزن المؤقت لوحدة معالجة الرسومات. فهو يتجاوز خط أنابيب التخطيط/الطلاء بالكامل. هذه هي الطريقة التي نبني بها تجارب فاخرة بأسلوب “Awwwards”. ولكن كن حذرًا: تصبح إمكانية الوصول أكثر صعوبة في WebGL. لا يحتوي Canvas على دعم لقارئ الشاشة بشكل افتراضي.

12. مقياس FPS (قابلية الملاحظة)

لا يمكنك إصلاح ما لا يمكنك قياسه. يحتوي Chrome على مقياس FPS، لكن المستخدمين لا يمتلكونه. نقوم بإدخال مستمع FPS صغير في الإنتاج (لـ 1% من المستخدمين). ويستخدم حلقة “requestAnimationFrame” لقياس وقت الدلتا. إذا انخفضت الإطارات إلى أقل من 30 لمدة 5 ثوانٍ، فإننا نقوم بتسجيل حدث إلى Sentry. “الأداء: تم اكتشاف انخفاض في معدل الإطارات في الثانية على /product/123”. يخبرنا هذا بالضبط بالصفحة الثقيلة في العالم الحقيقي (وليس فقط على جهاز MacBook Pro الخاص بنا).

13. تنسيقات الصور (Avif vs WebP)

الرسوم المتحركة ليست مجرد CSS؛ يتم التحميل. إذا استغرق تحميل صورة البطل الخاصة بك 3 ثوانٍ، فستتعثر الرسوم المتحركة للإدخال. WebP هو المعيار. AVIF هو المستقبل (أصغر بنسبة 20% من WebP). ولكن يجب على المتصفحات فك تشفيرها على الموضوع الرئيسي (في الغالب). الاستراتيجية:

استخدم علامة <صورة> للرجوع.
استخدم خاصية decoding="async" على <img>.
BlurHash: أظهر تمويهًا صغيرًا بمقدار 20 بكسل أثناء تحميل الصورة الثقيلة. وهذا يقلل من “زمن الوصول المتصور”.

14. الاستنتاج

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

قطرات الإطار تقضي على الأجواء؟

نقوم بمراجعة أداء الواجهة الأمامية وتحسين الرسوم المتحركة بمعدل 60 إطارًا في الثانية على الأجهزة المنخفضة الجودة.

سلاسة واجهة المستخدم الخاصة بي. قم بتوظيف مهندسينا.