تساعد لوحة الشبكة في "أدوات مطوري البرامج" في المتصفّح على تحديد الموارد التي يتم تحميلها ووقت تحميلها. يتوافق كل صف في لوحة الشبكة مع عنوان URL محدد حمّله تطبيق الويب لديك.
معرفة ما يتم تحميله
يتطلب ابتكار استراتيجيات التخزين المؤقت المناسبة لتطبيق الويب التعامل مع المحتوى الذي يتم تحميله بالضبط. عند إنشاء تطبيق ويب موثوق به، يمكن أن تتعرض الشبكة لجميع أنواع القوى المظلمة. تحتاج إلى فهم ثغرات الشبكة إذا كنت تأمل في التعامل معها في تطبيقك.
قد تعتقد أن لديك بالفعل فكرة جيدة حول ما يتم تحميله في تطبيق الويب الخاص بك. إذا كنت تستخدم أجزاء صغيرة ومبعثرة من ملفات HTML الثابتة وJavaScript وCSS وملفات الصور، قد يكون ذلك صحيحًا. ولكن بعد أن تبدأ في مزج الموارد الخارجية المستضافة على شبكات توصيل المحتوى باستخدام طلبات واجهة برمجة التطبيقات الديناميكية والاستجابات التي ينشئها الخادم، تصبح الصورة أكثر غموضًا.
قد لا تكون استراتيجية التخزين المؤقت المناسبة لبعض ملفات CSS الصغيرة منطقية مع مئات الصور الكبيرة على سبيل المثال.
معرفة وقت التحميل
هناك جزء آخر من الصورة العامة للتحميل، وهو عندما يتم تحميل كل شيء.
يتم إرسال بعض الطلبات إلى الشبكة، مثل طلب التنقّل في رمز HTML الأولي، بدون أي شروط فور زيارة المستخدم لعنوان URL معيّن. قد يحتوي رمز HTML هذا على إشارات ذات ترميز ثابت لملفات CSS أو JavaScript مهمة يجب تحميلها أيضًا لعرض صفحتك التفاعلية. وتقع كل هذه الطلبات في مسار التحميل الحرج لديك ستحتاج إلى تخزينها مؤقتًا بقوة لتكون سريعة بشكل موثوق.
أمّا الموارد الأخرى، مثل طلبات البيانات من واجهة برمجة التطبيقات أو مواد العرض ذات التحميل الكسول، فقد لا تبدأ في التحميل إلا بعد اكتمال عملية التحميل الأولية بالكامل. إذا كانت هذه الطلبات تحدث فقط بعد تسلسل معيّن من تفاعلات المستخدم، فقد ينتهي الأمر بطلب مجموعة مختلفة تمامًا من الموارد من خلال زيارات متعددة للصفحة نفسها. غالبًا ما تكون استراتيجية التخزين المؤقت الأقل شدة مناسبة للمحتوى الذي حدّدت أنّه خارج مسار التحميل الحرج.
يساعد عمودا "الاسم" و"النوع" في
يساعد عمودا "الاسم" و"النوع" على توفير صورة مفيدة عن ما يتم تحميله. الإجابة عن "ما يتم تحميله؟" في المثال أعلاه هي إجمالي أربعة عناوين URL، يمثل كل منها نوعًا فريدًا من المحتوى.
يمثّل الاسم عنوان URL الذي طلبه المتصفّح، ولكنك لن ترى سوى الجزء الأخير من مسار عنوان URL مدرَجًا. على سبيل المثال، إذا تم تحميل https://example.com/main.css، سيتم عرض main.css مدرج ضمن الاسم فقط.
تُعرف الأحرف القليلة الأخيرة من مسار عنوان URL، التي تلي النقطة (مثل "css")، باسم إضافة عنوان URL.
تُطلعك إضافة عنوان URL بشكل عام على نوع المورد المطلوب،
وترتبط مباشرةً بالمعلومات المعروضة في العمود "النوع". على سبيل المثال، v2.html عبارة عن مستند وmain.css ورقة أنماط.
يساعد عمود الشلال في وقت
افحص عمود الشلال، بدءًا من الأعلى وصولاً إلى الأسفل. ويمثل طول كل شريط إجمالي الوقت الذي استغرقه تحميل كل مورد. كيف يمكنك تحديد الفرق بين الطلب الذي يتم تنفيذه كجزء من مسار التحميل الحرج وطلب يتم تنشيطه ديناميكيًا، بعد انتهاء التحميل الأولي للصفحة؟
سيكون الطلب الأول في العرض الإعلاني بدون انقطاع دائمًا مرتبطًا بمستند HTML،
على سبيل المثال، v2.html. ستتدفق جميع الطلبات اللاحقة (مثل شلال!) من طلب التنقل الأولي هذا، استنادًا إلى الصور والنصوص
والأنماط التي يشير إليها مستند HTML.
يوضِّح العرض الإعلاني بدون انقطاع أنّه عند الانتهاء من تحميل v2.html، تبدأ طلبات مواد العرض التي يشير إليها هذا العمود (المُشار إليها أيضًا باسم الموارد الفرعية). يمكن أن يطلب المتصفّح موارد فرعية متعددة في الوقت نفسه، ويتم تمثيل ذلك من خلال الأشرطة المتداخلة في عمود "منهجية الشلال" main.css وlogo.svg. وأخيرًا، يتضح من لقطة الشاشة أنّ main.js بدأ التحميل في آخر مرة، وينتهي التحميل بعد اكتمال عناوين URL الثلاثة الأخرى أيضًا.