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 كيلو بايت بحيث يتم تحميلها بسرعة أثناء عملية النقل الأولية.

Outlines

00:00

💻 أهمية سرعة تحميل المواقع واستجابة المستخدم

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

05:02

🔄 كيفية تعامل المتصفح مع التفاعل بين المستخدم والموقع

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

10:04

🔗 الخطوات الأولى لبدء الاتصال بين المتصفح والخادم

تتناول الفقرة الثالثة كيفية بدء الاتصال بين المتصفح وخادم الموقع من خلال عملية DNS Lookup، حيث يتم تحويل اسم النطاق إلى عنوان IP. بعد ذلك، يتم إنشاء اتصال بين المتصفح والخادم باستخدام بروتوكول TCP لضمان نقل البيانات بين الطرفين. هذه العملية تساعد في تسريع الوصول إلى الموقع وزيادة كفاءة الاتصال.

Mindmap

Keywords

💡الفاست لود (Fast Load)

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

💡الاستجابة (Responsiveness)

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

💡تي سي بي هاندشيك (TCP Handshake)

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

💡دي إن إس لوك أب (DNS Lookup)

دي إن إس لوك أب هو العملية التي يتم من خلالها تحويل اسم النطاق (مثل example.com) إلى عنوان IP يمكن للخادم التواصل معه. هذه الخطوة ضرورية للوصول إلى الخادم المناسب الذي يستضيف الموقع. الفيديو أشار إلى أهمية هذه العملية وكيف يتم تخزين نتائجها في ذاكرة التخزين المؤقت لتسريع الطلبات المستقبلية.

💡كاش (Cache)

الكاش هو الذاكرة المؤقتة التي يحتفظ فيها المتصفح أو الخادم بالبيانات التي يتم الوصول إليها بشكل متكرر. يهدف الكاش إلى تسريع تحميل الموقع في الزيارات اللاحقة عن طريق تقليل الحاجة إلى إعادة تحميل الموارد من الخادم. في الفيديو، تم ذكر أن المتصفح يحفظ عناوين DNS في الكاش لتسريع الوصول إلى الخادم.

💡جافاسكريبت (JavaScript)

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

💡الباندويدث (Bandwidth)

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

💡سينجل ثريد (Single Thread)

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

💡راوند تريب تايم (Round Trip Time)

راوند تريب تايم هو الوقت الذي يستغرقه إرسال طلب من المتصفح إلى الخادم واستلام الرد. يتم قياس هذا الوقت لتحديد سرعة الاتصال بين المتصفح والخادم. في الفيديو، تمت الإشارة إلى أن تقليل هذا الوقت يساعد في تحسين استجابة الموقع وسرعته.

💡سلو ستارت (Slow Start)

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

Highlights

أهمية تحسين سرعة تحميل المواقع والتفاعل معها لضمان تجربة استخدام جيدة.

التركيز على تقليل وقت تحميل المحتوى الأساسي (fast load) ليشعر المستخدم بسرعة الموقع.

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

تجنب المهام الكبيرة في المتصفح التي قد تعطل التفاعل السريع مع الموقع.

استخدام تقنيات مثل 'round-robin' لتوزيع المهام الصغيرة في المتصفح وتحسين سلاسة التفاعل.

أهمية فهم كيفية عمل DNS lookup وربطه بعنوان IP الخاص بالسيرفر لتسريع الاتصال.

التعامل مع TCP connection وكيفية تحسين التواصل بين المتصفح والسيرفر بعد إنشاء الاتصال.

دور SSL/TLS في تأمين الاتصال بين المتصفح والسيرفر، على الرغم من وجود بعض الوقت الإضافي المطلوب لإنشاء الاتصال.

تقنية 'slow start' المستخدمة لمعرفة أقصى عرض نطاق متاح بين العميل والخادم لضمان إرسال البيانات بكفاءة.

استخدام 'TCP congestion window' لتحديد حجم البيانات المرسلة والتحكم في سرعة الإرسال.

التأكد من أن حجم ملف HTML الأساسي لا يتجاوز 14 كيلوبايت لضمان التحميل السريع.

فهم أهمية تزامن الحزم المرسلة بين المتصفح والخادم لتحقيق اتصال ثابت وفعال.

استخدام الكاش لتسريع الطلبات المتكررة على نفس الدومين دون الحاجة لإعادة إجراء DNS lookup.

التحكم في حجم البيانات المرسلة عبر الباندويث لتحقيق أقصى استفادة من سرعة الاتصال.

التركيز على تحسين تجربة المستخدم عن طريق تقليل وقت الاستجابة لتفاعلات المستخدم المختلفة.