Frontend Performance - #1 Introduction بالعربي

Abdallah Hemdan

16 Mar 202411:51

Summary

TLDRيناقش الفيديو أهمية تحسين أداء المواقع الإلكترونية من وجهة نظر المستخدم، حيث يركز على سرعة تحميل الصفحات واستجابة الموقع للتفاعلات. يستعرض كيفية عمل المتصفح في تنفيذ المهام والخطوات التي يمر بها أثناء تحميل البيانات من الخادم إلى المستخدم، مثل الـ DNS lookup، TCP handshake، والسلو ستارت. يتناول أيضًا كيفية تقليل حجم البيانات المنقولة وتسريع استجابة الموقع لتجنب التأخير. في النهاية، يوضح كيفية تحسين أداء المواقع باستخدام تقنيات مثل الكاش وتنظيم حجم البيانات المرسلة لزيادة الكفاءة.

Takeaways

😀 يتحدث الفيديو عن كيفية تسريع تحميل المواقع الإلكترونية من وجهة نظر المستخدم.
🚀 يشير إلى أن السرعة في استجابة الموقع للتفاعلات المختلفة مثل النقر على الأزرار أو الكتابة مهمة للغاية لتحسين تجربة المستخدم.
📡 التحديات الأساسية في تسريع المواقع تتعلق بزيادة سرعة تحميل العناصر الأساسية وتقليل حجم البيانات المنقولة بين السيرفر والمتصفح.
💻 البراوزر يعمل على تنفيذ المهام بطريقة سنجل ثريد، مما قد يتسبب في تأخير التفاعلات إذا كانت المهام كبيرة.
🔄 تحسين تجربة المستخدم يعتمد على تقسيم المهام الكبيرة إلى مهام أصغر لزيادة سرعة استجابة المتصفح.
🌐 أول خطوة في تحميل الموقع تتضمن عملية DNS Lookup لتحويل الدومين إلى عنوان IP خاص بالسيرفر.
🔐 أهمية استخدام بروتوكول TCP و TLS في إنشاء اتصال آمن بين المتصفح والسيرفر لضمان نقل البيانات بشكل آمن.
🕒 يتحدث الفيديو عن فكرة الـ Round Trip Time في البروتوكولات وكيفية تأثيره على أداء الموقع وسرعة تحميل البيانات.
📈 تحسين نقل البيانات عبر شبكة الإنترنت يتطلب معرفة الحد الأقصى لحجم البيانات المسموح نقلها بين السيرفر والمتصفح دون فقدان.
⚙️ أخيرًا، يتم مناقشة كيفية زيادة فعالية الاتصال باستخدام تقنيات مثل Congestion Window لتجنب فقدان البيانات أثناء النقل.

Q & A

ما المقصود بوقت تحميل الموقع (Fast Load)؟
-وقت تحميل الموقع هو المدة التي يستغرقها الموقع لتحميل العناصر الأساسية بحيث يشعر المستخدم أن الموقع جاهز للاستخدام.
كيف يؤثر حجم البيانات المنقولة بين الخادم والمتصفح على سرعة الموقع؟
-كلما كان حجم البيانات المنقولة أصغر، كلما زادت سرعة تحميل الموقع، لذلك من المهم تقليل حجم البيانات المنقولة لتحسين الأداء.
ما هي المشاكل الأساسية التي تؤثر على سرعة المواقع؟
-المشكلتان الأساسيتان هما: زيادة حجم البيانات المرسلة من الخادم إلى المتصفح وسوء إدارة الموارد المتاحة في المتصفح.
ما هي تقنية 'Single-Threaded' التي يعتمد عليها المتصفح؟
-المتصفح يعمل بخيط واحد (Single-Threaded) مما يعني أنه ينفذ مهمة واحدة في كل مرة، وبالتالي إذا كانت المهمة كبيرة، قد يؤدي ذلك إلى تأخير في الاستجابة.
كيف يمكن تحسين استجابة المتصفح عند تنفيذ تفاعل المستخدم؟
-يمكن تحسين الاستجابة عن طريق تقليل حجم المهام الكبيرة وتقسيمها إلى مهام أصغر بحيث يمكن للمتصفح التبديل بينها بسلاسة.
ما هو 'DNS Lookup' وكيف يؤثر على سرعة الموقع؟
-DNS Lookup هو عملية تحويل اسم النطاق إلى عنوان IP الخاص بالخادم، وهذه العملية تحدث مرة واحدة للموقع الواحد وتُخزن في الذاكرة المؤقتة لتحسين سرعة الاستجابة في المرات القادمة.
كيف يتم إنشاء اتصال TCP بين المتصفح والخادم؟
-يتم إنشاء اتصال TCP من خلال عملية تسلسل تعرف بـ 'TCP Handshake' والتي تضمن أن الاتصال بين المتصفح والخادم جاهز لتبادل البيانات.
ما أهمية استخدام بروتوكول TLS في نقل البيانات؟
-بروتوكول TLS يضمن أن البيانات المنقولة بين المتصفح والخادم مشفرة وآمنة، مما يحميها من التلاعب أو الاعتراض.
ما هو مفهوم 'Slow Start' وكيف يساعد في تحسين الاتصال؟
-Slow Start هي طريقة تُستخدم لاكتشاف الحد الأقصى لعرض النطاق بين المتصفح والخادم تدريجيًا، بحيث يتم إرسال حزم البيانات بشكل متزايد حتى يتم تحديد السعة المثلى دون تجاوزها.
كيف يمكن تحسين سرعة تحميل الملفات الأساسية (HTML)؟
-لتحسين سرعة تحميل الملفات الأساسية مثل HTML، يجب التأكد من أن حجم هذه الملفات لا يتجاوز 14 كيلو بايت بحيث يتم تحميلها بسرعة أثناء عملية النقل الأولية.