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