في هذه الصفحة
المقدمة
مع ثورة التطور التي طرأت على مجال الـ Frontend Development على مستوى المفاهيم و المعماريات وما قام عليهما من تقنيات وأطر عمل تُعمل تلك المفاهيم في تطوير الواجهات الأمامية
من أبرزها Component Based Architecture و SPA والتي هي اختصار لـ Single Page Application
أصبح لمستوى الـ Frontend في النظم والتطبيقات البرمجية دور مهم جداً في تحسين أداء عملها, خصوصاً وأنها تلعب الدور الأهم في تجربة المستخدم UX أو ما يعرف بالـ (User Experience) ولم تعد تقتصر على UI وهي اختصارلـ (User Interface)
وفي هذه المقالة سأوضح أهم أساليب وآليات تحسين الأداء أثناء عمليات بناء وتطوير الواجهات الأمامية
Resource Optimization and Module Bundler
لابد للـ Senior Frontend أو من يسعى إلى الوصول لمستواه أن يمتلك المعرفة العميقة بما خلف الظاهر من تطوير الواجهات, وعلى رأس هذه الأمور أن يعرف ولو بالحد الأدنى كيف يعمل المتصفح الذي يعتبر أساس مجال الـ Frontend فهو المكان الذي يتم فيه استعراض ترميز اللغات التوصيفية الـ HTML و CSS الذي نراه نحن بصيغته النهائية على المتصفح كعناصر لها خصائص وتصاميم معينة, إضافة إلى التفاعل معه من خلال لغة Javascript بالـ BOM and DOM
فعندما ندخل عن طريق المتصفح إلى موقع معين فإن هذا الموقع يوجهنا عن طريق الدومين الخاص به إلى السيرفر الذي يحمل ملفات الـ Frontend ومن ثم يقوم بعمل لها Parsing ويعرضها على المتصفح وهذا أمر يطول شرح كيفيته ولا تسع هذه السطور ذكره , والذي يهمنا منه في تحسين performance أنه كلما كان تنسيق وترتيب وحسن التعامل مع ملفات الموارد كال CSS والـ javascript ومكاتبها والـ Media Files كلما سرعنا عملية الـ Parsing أثناء تحميل الصفحة
ومن أهم التوصيات العملية للقيام بذلك:
- تقليل حجم الملفات: بضغط الصور وتقليل حجم ملفات CSS و JavaScript
- تحميل العناصر الحيوية أولًا: باستخدام تقنيات مثل Lazy Loading لتأخير تحميل العناصر غير الأساسية خاصة في الصور
- تقليل عدد طلبات الشبكة: بدمج ملفات CSS و JavaScript وتقليل عدد الطلبات المرسلة إلى الخادم
- تحسين أداء JavaScript: بتجنب الأكواد الثقيلة والمعقدة التي تؤدي إلى تأخير في التفاعل
- تقليل الاعتمادية على مكاتب الـ Javascript: قدر الإمكان إلى عند الحاجة لها واستخدامها بشكل موسع فلا نستدعي مكتبة كاملة لنستخدم منها Function أو Class واحد نستطيع بنائه دون استدعاء المكتبة
وبناء على ما سبق فإن بناء الكود وتنسيق المصادر والوحدات من أهم ما يعين على سرعة عمل الـ Main Thread وبالتالي سرعة استعراض عناصر الصفحة للمستخدم وتحقيق هدف سرعة الأداء وتحسين تجربة المستخدم
وأختم هذا العنصر بأن تحميل الموارد واستعرض العناصر يكون في أكثر من مرحلة تبدأ من تحميل الصفحة وتمر بعمليات التفاعل مع الصفحة التي قد تخلق وتضيف وتعدل في عناصر الصفحة كما في العمليات التي تحصل أثناء الضغط على زر لاستعراض أو التفاعل مع عناصر معينة أو عمليات الـ scroll … وغيرها, ولكن أهم هذه المراحل هي ما يعرف بـ TTI وهي اختصار لـ Time to Interactive فهي اللحظة التي تبدأ من تحميل الصفحة (زيارة الموقع) إلى أن تصبح محملة وتسمح للمستخدم بالتفاعل معها
وبحسب المؤشرات للمواقع التي تصدر عن منصات التقنية العالمية كـ google فإن الحد المرض للـ TTI يجب أن لا يتجاوز 3.8s والزيادة على ذلك تؤدي إلى خسارة المستخدمين بحسب الزيادة
تقدروا دلوقتي تشتركوا في النشرة الأسبوعية لاقرأ-تِك بشكل مجاني تمامًا عشان يجيلكوا كل جديد بشكل أسبوعي فيما يخص مواضيع متنوعة وبشروحات بسيطة وسهلة وبجودة عالية 🚀
النشرة هيكون ليها شكل جديد ومختلف عن شكلها القديم وهنحاول انها تكون مميزة ومختلفة وخليط بين المحتوى الأساسي اللي بينزل ومفاجآت تانية كتير 🎉
Eqraatech - اقرأ-تِك
Asynchronous Fetching Data
وهو من أهم ما يحسن استعماله في إحضار البيانات من السيرفر أو الـ Backend فقد كان النمط القديم في إحضار البيانات يستند على الباك اند في إدراج البيانات وتنسيقها ضمن صفحة الـ HTML وارجاعها للمتصفح والذي يقوم بدوره بعمل render للصفحة من جديد وما تحتويه من بيانات وملفات css و javascript مرتبطة بها وهو ما يزيد من بطء عملية الانتقال بين الصفحات وتحديث البيانات.
أما باستعمال asynchronous requesting فإن الصفحة تبقى محمَّلة وتقوم الـ javascript عن طريق مكاتب fetching data مثل axios - fetch - ajax بإحضار البيانات بشكل غير تزامني من السيرفر على شكل JSON أو XML ووضعها على الصفحة بالـ Javascript BOM
ويحسن التعامل مع هذه الآلية بالطريقة الصحيحة, ففي حالات معينة لا يجب أن يتم استدعاء البيانات بشكل لا تزامني حيث أن ذلك يضر بالـ SEO اختصار لـ Search Engine Optimization
ففي حالة الـ asynchronous fetching data عندما يتم استدعاء الصفحة لأول مرة, يتم تحميلها دون البيانات, فكما ذكرنا أن البيانات يتم استدعائها عن طريق javascript function مدرجة في الصفحة بعد تحميلها.
وعلى ذلك فإن محركات البحث عندما تنفذ خوارزميات البحث تصل إلى الصفحات بدون بيانات فيضعف ذلك احتمالات ظهورها في نتائج البحث, وحل هذه الإشكالية يكون بتعامل مخصص للـ asynchronous fetching data أو باستعمال أطر عمل تحل هذه الإشكالية كـ Nuxt js المبني على Vue أو Next js المبني على React, فهي تقوم بتحميل الصفحة مع البيانات عند الطلب الأول ومن ثم يصبح تحميل البيانات سواءً بالتفاعل أو بالانتقال بين الصفحات بشكل غير تزامني
ومن أمثلة التطبيقات التي يجب مراعات تحسين الـ SEO فيها منصات المقالات والمدونات والمتاجر الالكترونية وغيرها مما يكون ظهورها على محركات البحث من أولويات الـ Requirements على خلاف الأنظمة الإدارة الداخلية مثلاً.
Caching
التخزين المؤقت هو أحد أهم المفاهيم المطبقة في كل مستويات ومجالات هندسة البرمجيات لما فيه من فائدة في تحسين الأداء وتخفيف الضغط وسرعة الوصول.
وهو في مجال الـ Frontend على درجة عالية من الأهمية وينقسم إلى مستويين:
- وهو المرتبط باستدعاء ملفات ال frontend من السيرفرات الموجودة عليه, فالتخزين المؤقت في هذه الحالة يكون بحفظ الملفات بشكل مؤقت في سيرفرات غير السيرفر الأساسي الموضوعة عليه قريبة من المستخدمين.
فعلى سبيل المثال إذا افترضنا أن ملفات ال frontend الخاصة بالموقع عند طلب الـ Domain على Host موجود على سيرفر في أمريكا والمستخدم الذي يحاول الوصول إلى الموقع موجود في بلد عربي, فإن المسافة تكون بعيدة جداً وسرعة التحميل ستكون بطيئة وسيكون لدينا ما يسمى بـ latency Network, ففي هذه الحالة نقوم بعمل تخزين مؤقت للملفات في سيرفرات قريبة من المستخدمين في البلاد العربية, وذلك يتم عن طريق CDN
والـ CDN هو اختصار لـ "Content Delivery Network" أو شبكة توصيل المحتوى، وهي عبارة عن شبكة من الخوادم الموزعة جغرافيًا التي تعمل معًا لتوفير تسليم المحتوى عبر الإنترنت بسرعة وكفاءة. تستخدم CDN لتسريع تسليم المحتوى للمستخدمين عن طريق تخزين نسخة مكررة من المحتوى في مواقع متعددة حول العالم.
- أما النوع الآخر من التخزين المؤقت, هو المرتبط بالتعامل مع البيانات التي يتم استدعاؤها من الـ Backend
وهذا النوع يعتمد على مفاهيم وأساليب معينة في التعامل معه سيأتي ذكرها مفصلاً في السلسلة في مقالة تحسين الأداء في مستوى الـ Backend
ولكن سأختصر التعامل معها بالمثال في مستوى الـ Frontendعلى سبيل المثال عندما نقوم بعمل استدعاء لاتزامني للبيانات كما في العنصر الثاني سالف الذكر فإننا في حالات معينة وأنواع بيانات معينة لا نكتفي باستعراض البيانات عند استدعائها, وإنما نقوم بتخزينها بشكل مؤقت في أماكن معينة مثل ( local storage - state management - cookies)
وبهذه الحالة لا نقوم بإعادة استدعاء البيانات أكثر من مرة من السيرفر عند الرجوع إلى نفس الصفحة وإنما نسترجعها من مكان التخزين المؤقت على المتصفح, وكما ذكرنا فإن هذا لا يصلح مع كل أنواع البيانات والتي يجب أن تبقى محدثة و معرضة للتغير بشكل مستمر فنقع بما يسمى bad cache وإنما تصلح مع البيانات التي تكون ثابتة نوعاً ما والتغير فيها يكون بتنفيذ عملية تستدعي طلب التحديث فنضمن حداثة البيانات حال تغييرها (وهذا من مفاهيم الـ caching system التي سيأتي شرحها بشكل مفصّل)
ومثال ذلك بيانات صفحة الـ Profile.
في الختام
ختاماً فإن كل ما ذكر من عناصر لتحسين الأداء في على مستوى تطوير وهندسة الواجهات الأمامية هو اختصار في أنواعها فهي أكثر واختصار في الشرح للأنواع التي ذكرت وبذلك أوصي بالبحث باستقصاء لمن أراد التوسع وقد حرصت في السطور السابقة على ما رأيته مهماً ومستعملاً بشكل كبير.
