يستعرض هذا الدرس التطبيقي حول الترميز عملية تفسير جميع حركة بيانات الشبكة لتطبيق نموذجي معقّد إلى حدّ ما. في نهاية التمرين، ستكون لديك المهارات اللازمة لمعرفة ما يتم تحميله في تطبيق الويب الخاص بك ومتى يتم إرسال كل طلب.
الانتقال إلى لوحة الشبكة
انتقِل إلى لوحة الشبكة للاطّلاع على حركة بيانات الشبكة للتطبيق التجريبي.
- اضغط على `Control+Shift+J` (أو `Command+Option+J` على نظام التشغيل Mac) لفتح "أدوات مطوّري البرامج".
- انقر على علامة التبويب الشبكة.
- أعِد تحميل الصفحة للاطّلاع على حركة بيانات الشبكة.
تعرض لوحة الشبكة جميع مواد العرض التي تم تحميلها بسبب التنقّل الأولي:
كيفية تفسير الإدخالات
يمثل كل صف من حركة بيانات الشبكة المسجلة زوجًا واحدًا من الطلبات والاستجابة.
الصف الأول، من النوع document، هو طلب التنقّل الأولي لملف HTML الخاص بتطبيق الويب. هذا هو مصدر العرض الانحداري لطلبات الشبكة، وتتدفق كل الطلبات اللاحقة للحصول على مواد عرض إضافية (تُعرف باسم الموارد الفرعية للمستند الرئيسي) من هذا المصدر الأصلي.
أما الصفان الثاني والثالث، فيعرضان تحميل مورد فرعي لملف CSS stylesheet وscript، وهما طلبان تابعان تم بدؤهما من خلال المستند الرئيسي.
عند النظر إلى وقت تقديم هذه الطلبات، يوضّح المخطّط البياني للعرض الانحداري لطلبات الشبكة أنّها لا تبدأ إلا في وقت متأخر جدًا من عملية الاستجابة لطلب التنقّل.
عند جمعها معًا، تكون طلبات مستند HTML وCSS وJavaScript مطلوبة لعرض الصفحة الكاملة أثناء التنقّل الأولي.
إنشاء بعض طلبات وقت التشغيل الإضافية
بينما لا تزال لوحة الشبكة مفتوحة وتسجّل البيانات، حان الوقت لمحاكاة إجراء شائع في الكثير من تطبيقات الويب: طلبات بيانات إضافية من واجهة برمجة التطبيقات تُستخدَم لإضافة المزيد من البيانات إلى الصفحة بعد اكتمال عملية التنقّل الأولية.
يمكنك تفعيل هذه الطلبات الإضافية من خلال النقر على العثور عليّ في التطبيق، ثم على السماح في النافذة المنبثقة التي تظهر. سيسمح ذلك للموقع الإلكتروني بالوصول إلى موقعك الجغرافي الحالي:
بعد أن يحصل تطبيق الويب على موقع جغرافي للعمل معه، يؤدي النقر على العثور على إدخالات Wikipedia القريبة إلى إرسال عدة طلبات شبكة إضافية. من المفترَض أن يظهر لك محتوى مثل:
تفسير الإدخالات الجديدة
كما في السابق، يمثّل كل صف من حركة بيانات الشبكة المسجّلة زوجًا واحدًا من الطلبات والاستجابات.
يمثّل الصف الأول من الإدخالات الجديدة طلبًا من النوع fetch،
وهو يتوافق مع
الطريقة التي يطلب بها تطبيق الويب البيانات
من واجهة برمجة التطبيقات في Wikipedia.
الصفوف التالية هي كلها صور (png أو jpeg) مرتبطة بإدخالات ويكيبيديا. على الرغم من صعوبة رؤية ذلك من لقطة الشاشة، فإنّ
إدخالاتها في عمود "العرض الانحداري لطلبات الشبكة" تتدفق مباشرةً من الردّ من واجهة برمجة التطبيقات.
بالنسبة إلى كل هذه الطلبات الإضافية، سيختلف الوقت بناءً على المدة التي تظل فيها الصفحة مفتوحة قبل النقر على العثور على إدخالات ويكيبيديا القريبة. الأهم هنا هو أنّ وقت التحميل غير مرتبط بطلب التنقّل الأولي. يمكنك معرفة ذلك من الفجوة الكبيرة الموجودة في عرض انحداري لطلبات الشبكة، والتي تمثل فترة زمنية مرت بين التحميل الأولي وعند تقديم طلب بيانات من واجهة برمجة التطبيقات ويكيبيديا.
تندرج الطلبات التي يتم إجراؤها بعد فترة زمنية من التنقّل ضمن فئة "طلبات وقت التشغيل"، على عكس المجموعة الأولية من الطلبات المستخدَمة لعرض الصفحة عند الانتقال إليها لأول مرة.
تلخيص المحتوى
بعد الاطّلاع على الخطوات في هذا الدرس التطبيقي حول الترميز، أصبحت الآن على دراية بالأدوات التي يمكنك استخدامها لتحليل ما يحمّله أي تطبيق ويب.
تساعدك "لوحة الشبكة" في الإجابة عن سؤال ما الذي يتم تحميله، من خلال عناوين URL في عمود "الاسم" والبيانات في عمود "النوع"، بالإضافة إلى وقت تحميله، من خلال العرض الانحداري لطلبات الشبكة.
لقد رأيت أيضًا أنّ الطلبات التي تقدّمها صفحة ويب يمكن (عادةً) تجميعها في إحدى الفئتين التاليتين:
- الطلبات الأولية التي يتم إجراؤها مباشرةً بعد الانتقال إلى صفحة جديدة، للحصول على HTML وJavaScript وCSS (وربما مواد عرض أخرى).
- طلبات وقت التشغيل التي يتم إجراؤها نتيجة تفاعل المستخدم مع الصفحة يمكن أن يبدأ ذلك غالبًا بطلب إلى واجهة برمجة التطبيقات، ثم يتدفق إلى عدة طلبات متابعة بناءً على بيانات واجهة برمجة التطبيقات التي تم استردادها.