Frontend Performance - #1 Introduction بالعربي
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
💻 أهمية سرعة تحميل المواقع واستجابة المستخدم
يتناول الفقرة الأولى مواضيع متعلقة بأداء المواقع الإلكترونية، بما في ذلك سرعة التحميل ومدى استجابة الموقع لتفاعل المستخدم. يُشار إلى أن الوقت المستغرق لتحميل الصفحة بالكامل يُعتبر عاملاً أساسياً لتقييم أداء الموقع. يتحدث أيضًا عن ضرورة استجابة الموقع بسرعة عندما يتفاعل المستخدم، سواء من خلال النقر على زر أو التمرير. الهدف هو تحسين تجربة المستخدم عن طريق تقليل زمن الاستجابة وجعل الموقع يعمل بسلاسة.
🔄 كيفية تعامل المتصفح مع التفاعل بين المستخدم والموقع
الفقرة الثانية تشرح آلية عمل المتصفح عند تفاعل المستخدم مع الموقع الإلكتروني. يتحدث النص عن كيفية توزيع المتصفح للمهام بشكل سلس وسريع حتى يتمكن من التعامل مع الأوامر الجديدة التي ينفذها المستخدم. يُذكر هنا أيضًا أن المتصفح يعتمد على إدارة العمليات بشكل كفء لضمان عدم حدوث تأخير في التفاعل نتيجة انشغال المتصفح بمهام أخرى، مما يساهم في تحسين تجربة المستخدم.
🔗 الخطوات الأولى لبدء الاتصال بين المتصفح والخادم
تتناول الفقرة الثالثة كيفية بدء الاتصال بين المتصفح وخادم الموقع من خلال عملية DNS Lookup، حيث يتم تحويل اسم النطاق إلى عنوان IP. بعد ذلك، يتم إنشاء اتصال بين المتصفح والخادم باستخدام بروتوكول TCP لضمان نقل البيانات بين الطرفين. هذه العملية تساعد في تسريع الوصول إلى الموقع وزيادة كفاءة الاتصال.
Mindmap
Keywords
💡الفاست لود (Fast Load)
💡الاستجابة (Responsiveness)
💡تي سي بي هاندشيك (TCP Handshake)
💡دي إن إس لوك أب (DNS Lookup)
💡كاش (Cache)
💡جافاسكريبت (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.
التحكم في حجم البيانات المرسلة عبر الباندويث لتحقيق أقصى استفادة من سرعة الاتصال.
التركيز على تحسين تجربة المستخدم عن طريق تقليل وقت الاستجابة لتفاعلات المستخدم المختلفة.
Transcripts
عليما عبد الله حدان ان شاء
الله مع
بم على مواضيع مختلفه
مل
بتشوف
عليه المختف ف وبعد كده نتكلم
على
وازا الحاجات اللي
تعنا بتاع
سريع معينه ولا وقد ايه ده ممكن يساعدنا
ان احنا ندي ا
لمعركه
بتاعنا من
اول ازي نتاكد
احين نتكلم علىما وحاجات مثلا زيش ازيز
نوعا ماكشن بتحصل معاه من الاول سيت لغايه
ماكشن اللي بيعملها وور الب بتاعه جو
الويبسايت بتاعنا وبعد كده اخر حاجه ودي
اهم حاجه بالنسبه لنا هنتكلم اكتر على يي
مختلف هناخد سادي فيها مشاكل هنبدا نعملها
او ونشوف ازاي بنعمل ده استخدام بقى كروم
تولم حاج كتيره وبعد كده نتكلم على فكره
ازاي نوع ما
نادرس دي ونيت المشاكل اللي بنلاقيها كود
بحث تساعدك بعد كده وانت بتحاول تعمل سايت
اوت انت شغال عليه طيب لو حنا نلخص مفهوم
الويب سايتن او بيبان ان هو سريع من وجهه
نظر الوزر فدي ممكن نلخصها يعني في نقطتين
اساس اول واحده من وجه نظر اليوزر ان
الويب سايت في الاخر بود بسرعه بمعنى ان
الويب سيت فاست لود انا بدخل عليه بدخل
على لينك معين او بفتح البيج بتاعته الويب
سايت الوقت اللي بياخده علشان نوعا ما
يبقى اغلب الكومون اللي فيه او اكبر
الكبون اللي فيه بقت لودد هو ده الوقت
يعتبر اللي بقول عليه الفاست لود فدي اول
محتاجين ان اليوزر لما يدخل على الويب
سايت يحس ان الويب سايت تاني حاجه وهو
فكره ان هو يبقى
سمنا ايه ان الويبسايت بتاعنا بيستجيب
الكشن بتاع اليوزر سواء بقى كان في بن
معين داس عليه فيت في بدا يكتب فيه يعمل
سكرول وهكذا دوقتي ده يكون سريع فبالتالي
هنحاول قوي نماز فكره
الوقت اللي الوزر يعني بيحس بيه من اول ما
يبدا يعملش مع ال او يشن مع الوسا بتاعنا
لغيه ما الاكشن اوشن بتاع الاشن بتاعه ده
يبدا يحصل فبتالي الون بتاع ال بتاعنا على
الكشن يكون سريع ج
ممكن اسين اول حاجه تاني
حاجه
يبقى حاجه بتا ال بتاعنا قد ايه وقد ايه
ده بياثر بعد كده على الون بتاع الويب
سايت بتاعنا وقد ايه هو بيبقى سهل ان ه
يرون الكشن بتاع ال طيب لو جينا لخصنا ايه
اك المشاكل اللي بتنا في موضوع البس ده
هنلاقي ان ههم حاجتين اساسيين قوي اول
حاجه هو فكره ال منطقي جدا وهتلاقي ان
اغلب التكنيك نو ما بتحاول تركز على
البوينت دي الحاجه التانيه وهو ان حد
ذاتها سل فبالتالي احنا محتاجين لاز المد
باكبر شكل ممكن او نميك شور ان نعرف
نتعامل مع السل بتاع الج سك طيب لو جينا
خصنا موضوع التني هلاقي ان هو ممكن اعرفه
بشكل بسيط جدا جدا ان هو الوقت اللي احنا
بناخده علشان ننقل الداتا اوميت دي منير
وهتلاقي ان اكتر المشاكل اللي هي علاقه
بين الباند اوان بين اليوزر وبين السيرفر
او بين وبين السيرفر نوعا ما فيها شويه
حاجات محتاجين نفهم عامله ازاي مجين نفهم
احنا ازاي نمتا او نميز حجم الداتا اللي
احنا بنحتاج نشبت او ن ترانسفر من من
السيرفر لليوزر بحيث ان الويب سايت بتاعنا
يبقى بيلود
بسرعه طيب الجزء التاني اللي كنا بنتكلم
عليه هو ان البرازر في حد ذاته هو سنجل
ريدد بمعنى ان هو عنده و مين ريد ودي اللي
بدورها بتاخد التاسك من البدايه للنهايه
فبالتالي لو اوريدي البروس قاعد بينفذ
تاسك اوريدي وال تسك دي كانت كبيره شويه
فبالتالي اي تاسك بعد كده هتحصل هو لا هو
مش هيدر ي سويتش ليها فبالتالي هضطر تتنفذ
بعد ما الك التسك اللي اوريدي بينفذ بتكون
كبيره مهما كان التاسك اللي دخلت الجديده
دي هي ارجنت او مهمه لا هو قاعد بينفذ
التاسك بتاعته خلينا ناخد مثئ مثلا لو
اليوزر مثلا عمل انتراكشن مع الويب سايت
بتاعنا داس على بتون او كتب تكست فيلد
وهكذا فهو ممكن يحس بشويه ديلاي لغايه ما
البرازر يخلص التاسك اللي في ايديه لو
كانت التاسك دي اوريدي كبيره ويبدا ينفذ
الاكشن بتاعه وبالتالي هيكون هدف اساسي من
الحاجات اللي احنا بنحاول نعملها احنا
نحاول نميت او نقلل اي تاسك كبيره بحيث ان
الريسبونس بالتيز بتاع المد تبقى نوعا ما
بيقدر يسيتش بين التقات المختلفه وبالتالي
ممكن تحس ان اليوزر او من وجه نظر اليوزر
ان البرازر بيتحرك بشكل سموث بين
الانتراكشن بتاعته كل ما يعمل انتراكشن
اوريدي بيعملها بس الميزه في دوت ان
التكات اوريدي شغاله او موجوده في الكيو
بتاعنا صغيره فالبر بيقدر يعمل بنا حاجه
كده شبه راون هو قادر يسيتش بين التقات
وبعضها فبالتالي الراكشن او التوت س بتاع
الويب سايت بتبقى
كويس طيب تعالوا نتكلم بقى على اول حاجه
معانا وهو فكره ازاي البسر بيشتغل
المختلفه عيع عليه طيب اول حاجه بتحصل
معان وه فكره بمعنى ان الر مجرد مابي سواء
بقى ان هو كتب معين كتب بتا ال بتاعتنا او
ان هو مثلا داس على لينك اللينك ده عملهن
ل سيت بتاع مجرد ماده بيحصل بدا الب يعمل
مهم جدا اسمها ودي يعتبر اولج عندنا
ب بساطه بيني بتاع السير بحيث ان بعد كده
نبدا نتعامل او نبدا نفهم كل حاجه بتت
ريكوست من السيرفر ده الاي بي بتاعها فعلى
سبيل المثال لومين نيم بتاعنا كان حماده
دو كوم فهو ببساطه ال اس لوك اب هتعمل
مابن بين حماده دو كوم وبين الاي بيستور
ده عندها مثلا على سبيل المثال 33 184 216
34 وده ببساطه بيمثل الاي بي بتاع السيرفر
اللي فيه الاسس بتاع الويب سايت بتاعتنا
وبالتالي كل الانتراكشن بعد كده هتبقى
رايحه للاي بي ده واحده من الاوبشنز
المهمه اللي البراس بي هو انه بيعمل كاشي
ادرس دي وبالتالي اي سبك ريكوست بيحاول
يوصل لنفس الدومين هو خلاص مش محتاج يعمل
بعد كده الخطوه بتاع الدي ان لوكب هيروح
يكلم الكاش يقوله انت عندك حماده د ك ده
ولا لا فيقول لله اه انا عندي حما ك وديله
الايبي بتاعه على طول الخطوه اللي بعدها
ان احنا خلاص معانا دلوقتي الاي بي ادرس
بتاعنا فبالتالي اللي احنا محتاجين نعمله
ان احنا نبدا نكلم السيرفر ونبدا نبلش
كونكشن بين بين البرازر او بين الكلاينت
وبين السيرفر علشان بعد كده نقدر نعمل
كومينكيشن ونقدر ننقل الاس ونبدا نكلم
السير في اي يجز بعد كده ده بيتم عن طريق
حاجه اسمها تي س بي هانيك بروتكول يعني تي
س بي من الاهم البروتكول اللي موجود مش
هنخش قوي في التفاصيل بتاعته ولكن اهم
حاجه تكون نحاول نعرفها ان بالستي دي او
بعد الخطوه بتاع التي س بي كونكشن احنا
بيكون عندنا كونكشن جاهزه نقدر نكلم او
بتسمح لنا ان احنا نقدر نتكلم بين السيرفر
وبين البرازر او بين الكلاين ودي نقدر
نجيب منها الويب سايت علشان نعمل كل السبك
لودين بعد كده الويب سايت بتاع الخطوه
اللي بعدها وهي خطوه م جدا
اسمهاش ودي بتحصل بس مع كشن هي الحاجات
اللي بتبقى او بي اس ودي غرضها الاساسي ان
هي تساعدنا نحدد السفر او
نحدد هتستخدم بعد كده
فيشن ببساطه خلاصه دي ان تساعدني ان انايك
ان الكونكشن اوكيشن بتحصل بين اللا وبين
السيرفر بتبقى بشكل اوخر طيب هلاقي ان
بالرغم دي زودت وزودت شويه عشان مثلا زي
ما اتكلمنا التي س بي اوردي بيحصل على لاه
راون ريبس يعني ايه راون ريب ان هو
الكلاين بعت السيرفر قالله سلام عليكم بعد
كده السيرفر رد عليه قالله عليكم السلام
وعد كده اللاين بدا يبعت سيرفر يقوله خلاص
وصلتني عليكم السلام نفس الكلام في التي
اس الت اس برض بتتم على خم راون او خمسه
كونكشن او
خمسه ترانس بين الكلاينت وبين السيرفر
علشان الهان شيك بروتوكول ده يكون بيتم
ولكن زي ما كنا بنتكلم يعني الاوفرهيد ده
نوع ما يستاهل لان هو بيخلينا مين بعد كده
ان الكومنكيشن بعد كده في السكيور كونكشن
بتبقى انكد وكد بالطريقه
الصح الخطوه الاخيره معانا في النافيجيشن
وهي ان احنا خلاص بيكون عندنا استبل
كونكشن بين السيرفر وبين الكلاينت فيبدا
السيرفر يبدا يبعت ا جيت ريكوست ليه علشان
يجيب الانش اش تي ام ال فايل او المين اش
تي ام ال فايل اللي هيستخدم بعد كده في
رندر بيج وده اللي نوع ما بيكون بيتعرف
عليه او بيتعرف على ن الفايل ده من خلال
حاجه اسمها الكونتنت تايب او المم تايب دي
بتبقى حاجه موجوده ده في الهيتر بتاع
الريسبونس بتاع الاتش ام ال تايب اوش ام
ال فايل ودي ببساطه بعد كده ببدا كل خطوات
الارسين وكل خطوات الكركون نتكلم عنها ان
شاء الله الفتره الجايه طيب اخر حاجه حاب
نتكلم عنها المره دي واحده من ضمن الحاجات
الذكيه جدا اللي بتحصل بين الكلاينت
والسير كوميشن هو موضوع السلو ستارت الج
طيب دي ببساطه طريقه بتحاول تساعدنا بشكل
كبير احنا نعرف الماكسيمم باند اللي بين
الكلاينت وبين السيرفر بحيث احنا ما نبعت
عدد باكتس او نبعت حاجات
دي يكون اقل من سماحيه الباند فبالتالي
كاننا مش بز البد بتاعتنا بشكل صح او نبعت
حاجات باكتر من ال بتا الب فيحصل لو في
الداتا اللي احنا بنبعت طيب حاجه تانيه
مهم نتكلم عليها هوو ان عدد الكت او عدد
السجن بتبع او نتورك تحدد بحاجه اسمها كن
وين ودي
ببساطه دي ببساطه عدد الك ببعتها او نتورك
كل شويه في اليشن بين
السيرفر ان هو بيبدا لايز الكومنكيشن دي
برقم معين فيقول مثلا على سبيل المثال
هبدا اول مره ترانسفر 10 باكت وبعد كده
اشوف لو باكيت دو الباند وتس بتاعتي تقدر
تستحملها هبدا اضاعف فيبدا خلاص يقول مثلا
هبعت المره الجايه 20 باكيت لو بدات تبقى
ان الدا دي ما وصلتش او حصل فيها لوس او
اين كان يبدا بعد كده ينزل السايز بتاع
الداتا اللي بيبعتها فهو ببساطه بيبدا
يبعت اول 10 باكيتس كل باكيت فيهم 1500
بايت فتقريبا حوالي 14 كيلو بايت الرقم ده
مهم قوي هنتكلم عنه كمان المره الجايه وده
يعتبر بيبقى بيمثل السايز بتاع الانش ام
ال فايل فانت محتاج تميك شور ان انت الا
فايل بتاعك بكل الداتا اللي محتاجها علشان
البيج تبدا ترندر موجوده في ال 14 كيلو
بايت بتوع الال اش ام ال دول فببساطة
سفر يقاله تمام الداتا دي وصلت فوصله من
من الكلاينت اجمنت يبدا يضاعف الداتا دي
فلاحظ ان في اول مره بدا يبعت 10 سيجمنت
المره التانيه بدا يضاعف اول ما يبدا يحس
ان هو اوريدي خلاص الداتا ديت بقت اقل او
في داتا حصل فيها لوص ابدا بعد كده ينزل
الكونكشن ويندو للنص ويبدا يكمل بعد كده
طيب في نهايه الستيج دي خلاص احنا دلوقتي
بقى عرفنا الباند اللي بين الكلاينت وبين
السيرفر حجمها قد ايه ودي الباند اللي
احنا بعد كده بنبدا نستخدمها علشان نكمل
كل كومينكيشن
حاجه نهارده شويه اكت في
الاخر
بتحش
Ver Más Videos Relacionados
Zero-shot Prompting Explained
"okay, but I want GPT to perform 10x for my specific use case" - Here is how
Elements of a Prompt
Getting Started with the OpenAI Playground
Live Forensics | How to Install Volatility 3 on Windows 11 Windows 10 | Symbol Tables Configuration
Power Factor Explained - The basics what is power factor pf
5.0 / 5 (0 votes)