تحريك موقع شخصي دون إفساده
ثلاث مكتبات تحريك، وخيط تنفيذ رئيسي واحد، والميزانية التي وضعتها
يُسمح للموقع الشخصي أن يستعرض. ولا يُسمح له أن يُسقط إطارات وهو يفعل، وبالتأكيد لا يُسمح له أن يُسخّن هاتفاً. هذا الموقع يشغّل خلفية WebGL، وظهورات مرتبطة بالتمرير في كل قسم، وشريطاً دوّاراً، والعمل المثير للاهتمام لم يكن إضافة أي من ذلك. بل كان تقرير ما يُحذف.
01وضع ميزانية أولاً
وضعت قاعدتين قبل كتابة أي شيفرة تحريك، وقد فعلتا للنتيجة أكثر من أي تحسين لاحق. الأولى، لا شيء يحرّك خاصية تستدعي إعادة التخطيط. التحويل والشفافية هما الخاصيتان الوحيدتان في الميزانية، لأن بإمكان مُركِّب الطبقات التعامل معهما دون أن يعيد المتصفح حساب مواضع بقية الصفحة. أما تحريك العرض أو الارتفاع أو الإزاحة العلوية أو الهامش فيفرض إعادة تخطيط في كل إطار، وفي صفحة فيها بضع مئات من العناصر هناك تذهب الإطارات. والثانية، لا شيء يتحرك ولا يستطيع الزائر رؤيته. الظهورات المرتبطة بالتمرير تنطلق مرة واحدة حين يدخل العنصر إطار الرؤية ثم تتوقف عن مراقبته. الحركة التي تستمر لقسم يبعد ثلاث شاشات إلى الأعلى تنفق إطارات على لا شيء. والقاعدتان سهلتا القول وسهلتا الكسر على عجل، لأن الطريقة الطبيعية لكتابة ظهور هي تحريك الارتفاع من الصفر، وهي تعمل بخير على الجهاز الذي بنيت عليه. الميزانية موجودة كي يكون القرار متّخذاً سلفاً حين تكون متعباً وتريد الإطلاق.
02لماذا ثلاث مكتبات
حمل ثلاث مكتبات تحريك يحتاج دفاعاً، ودفاعي أنها تحلّ مشكلات مختلفة فعلاً. الأولى تتولى الحركة على مستوى المكوّن: انتقالات الدخول والخروج، والظهورات المرتبطة بالتمرير، وحالات الإيماءات. إنها تصريحية، وتفهم دورة حياة المكوّن، وتجعل الحالة الشائعة خاصية لا تأثيراً جانبياً. والثانية للعمل على الخطوط الزمنية، أي التسلسلات التي يجب أن يقع فيها عدة أشياء بترتيب محدد وبفواصل دقيقة. والتعبير عن ذلك تصريحياً يصبح مرهقاً بسرعة، والخط الزمني الأمري هو الأداة الصحيحة. والثالثة مكتبة WebGL صغيرة تشغّل خلفية الشفق، وهي مظلّل أجزاء لا علاقة له بالـ DOM إطلاقاً. وحيث أخطأت كان مدّ يدي إلى مكتبة الخطوط الزمنية لأشياء كانت التصريحية تؤديها أصلاً، ما أنتج طريقتين لكتابة تلاشٍ داخلٍ ولا قاعدة للاختيار بينهما. وقد وحّدت ذلك. والحساب الصادق أن هذا لا يزال ثقلاً في الاعتماديات أكبر مما يحتاجه موقع شخصي، ولو بدأت من جديد لحاولت إنجاز عمل التسلسل بالمكتبة التصريحية أولاً، ولما أضفت الثانية إلا إن عجزت فعلاً عن التعبير عنه.
03الخلفية التي كادت تُحذف
الشفق المتحرك أغلى شيء في الصفحة وأقرب ما وصلت إلى حذفه. يشغّل مظلّل أجزاء في كل إطار، وإن تُرك دون إدارة فسيعمل بسعادة بالمعدل الكامل على هاتف متواضع والتبويب في الخلفية. والأشياء التي جعلته قابلاً للحياة كانت كلها عن فعل أقل. إنه يُصيَّر خلف محتوى لا يتحرك، فيستطيع العمل بمعدل إطارات مخفّض دون أن يلاحظ أحد. ويتوقف تماماً حين يُخفى التبويب، لأن واجهة ظهور الصفحة موجودة والسلوك الافتراضي لحلقة التصيير هو تجاهلها. ولا يُركَّب أصلاً على الشاشات الصغيرة، حيث يكلّف أكثر ما يكلّف من البطارية ويسهم بأقل ما يسهم، بما أنه محجوب بالمحتوى إلى حد بعيد أصلاً. وهو يحترم تفضيل تقليل الحركة، وهذا ليس تحسيناً بل هو سبب كون الميزة كلها قابلة للدفاع. إن كان أحدهم قد أخبر نظام تشغيله أن الحركة تصيبه بالتوعك، فإن مظلّلاً زخرفياً هو بالضبط ما لا يجب أن يُصيَّر. عامل ذلك التفضيل كمتطلب صارم لا كلمسة لطيفة وستصير شجرة القرار أبسط بكثير.
04السرعة المُدرَكة تغلب السرعة المقيسة
التغيير الذي جعل الموقع يبدو أسرع لم يكن تحسين تحريك أصلاً. كان شريط تقدّم رفيعاً أعلى الصفحة أثناء التنقل. لم يتغيّر شيء في زمن التحميل الفعلي. ما تغيّر أن الفجوة بين النقر ورؤية المحتوى الجديد توقفت عن الإحساس بأن لا شيء يحدث وبدأت تُحسّ بأن شيئاً قيد التنفيذ، وهذا التمييز هو معظم ما يقصده الناس حين يقولون إن موقعاً يبدو سريعاً. والمبدأ نفسه يحكم حركات الظهور. تأخير التتابع الطويل بما يكفي ليبدو متعمّداً هو أيضاً طويل بما يكفي ليصبح مزعجاً في الزيارة الثالثة، لذا فالتأخيرات قصيرة، في المدى الذي تُقرأ فيه كصقل لا كانتظار. والقاعدة التي استقررت عليها أن الحركة يُسمح لها أن تغطي تأخيراً قائماً أصلاً، ولا يُسمح لها أن تخلق واحداً. الظهور الذي يُعرض بينما المحتوى قيد التحميل مجاني. والظهور نفسه على محتوى كان جاهزاً قبل مئتي جزء من الألف من الثانية ضريبة يدفعها الزائر ثمناً لذوقي.
الخلاصة
التحريك في موقع شخصي ميزانية لا قائمة ميزات. التزم بالتحويل والشفافية، وأوقف العمل الذي لا يراه أحد، وعامل تقليل الحركة كمتطلب لا كتحسين، وتذكّر أن مؤشر تقدّم أثناء انتظار حقيقي يشتري من السرعة المُدرَكة أكثر مما يشتريه أي منحنى تسارع.