پانل شبکه در DevTools مرورگر شما به شناسایی منابعی که بارگیری می شوند و زمان بارگیری آنها کمک می کند. هر ردیف در پانل شبکه مربوط به URL خاصی است که برنامه وب شما بارگیری کرده است.
بدانید چه چیزی را بارگیری می کنید
دستیابی به استراتژی‌های مناسب ذخیره‌سازی حافظه پنهان برای برنامه وب خود مستلزم این است که دقیقاً چه چیزی را بارگذاری می‌کنید، بررسی کنید. هنگام ساخت یک برنامه وب قابل اعتماد، شبکه می تواند در معرض انواع نیروهای تاریک قرار گیرد. اگر امیدوارید در برنامه خود با آسیب پذیری های شبکه کنار بیایید، باید آسیب پذیری های شبکه را درک کنید.
ممکن است فکر کنید که از قبل ایده خوبی در مورد بارگیری برنامه وب خود دارید. اگر فقط از یک پراکندگی کوچک از HTML ایستا، جاوا اسکریپت، CSS و فایل های تصویری استفاده می کنید، ممکن است درست باشد. اما به محض اینکه شروع به ترکیب در منابع شخص ثالث میزبانی شده در شبکه های تحویل محتوا، با استفاده از درخواست های API پویا و پاسخ های تولید شده توسط سرور کنید، تصویر به سرعت تیره تر می شود.
به عنوان مثال، یک استراتژی کش که برای چند فایل کوچک CSS منطقی است، احتمالاً برای صدها تصویر بزرگ منطقی نخواهد بود.
زمان بارگیری را بدانید
بخش دیگری از تصویر بارگیری کلی زمانی است که همه چیز بارگذاری می شود.
برخی از درخواست‌ها به شبکه، مانند درخواست ناوبری برای HTML اولیه شما، بدون قید و شرط به محض بازدید کاربر از URL معین انجام می‌شود. این HTML ممکن است حاوی ارجاعات رمزگذاری شده به فایل های CSS یا جاوا اسکریپت مهم باشد که برای نمایش صفحه تعاملی شما نیز باید بارگیری شوند. این درخواست ها همه در مسیر بارگذاری بحرانی شما قرار دارند. برای اینکه به طور قابل اعتمادی سریع باشند، باید آنها را به طور تهاجمی کش کنید.
منابع دیگر، مانند درخواست‌های API یا دارایی‌های بارگذاری شده با تنبلی، ممکن است تا زمانی که بارگیری اولیه کامل نشده باشد، شروع به بارگیری نکنند. اگر این درخواست‌ها فقط به دنبال دنباله خاصی از تعاملات کاربر اتفاق بیفتند، ممکن است مجموعه کاملا متفاوتی از منابع در چندین بازدید از یک صفحه درخواست شود. یک استراتژی ذخیره سازی نهان تهاجمی کمتر اغلب برای محتوایی که شما تشخیص داده اید خارج از مسیر بارگذاری حیاتی است مناسب است.
ستون‌های Name و Type به what کمک می‌کنند
ستون‌های Name و Type به ارائه تصویری معنادار از آنچه در حال بارگذاری است کمک می‌کند. پاسخ به " چی در حال بارگذاری است؟" در مثال بالا در مجموع چهار URL وجود دارد که هر کدام یک نوع محتوای منحصر به فرد را نشان می دهند.
نام نشان‌دهنده نشانی اینترنتی است که مرورگر شما درخواست کرده است — اگرچه شما فقط آخرین بخش از مسیر URL فهرست شده را خواهید دید. به عنوان مثال، اگر https://example.com/main.css بارگذاری شده باشد، شما فقط main.css که در زیر نام فهرست شده است مشاهده می کنید.
چند کاراکتر آخر مسیر URL، پس از نقطه (به عنوان مثال "css")، به عنوان پسوند URL شناخته می شوند. پسوند URL به طور کلی به شما می گوید که چه نوع منبعی درخواست شده است و مستقیماً به اطلاعات نشان داده شده در ستون Type نگاشت می شود. برای مثال، v2.html یک سند و main.css یک شیوه نامه است.
ستون آبشار به چه زمانی کمک می کند
ستون آبشار را بررسی کنید، از بالا شروع کنید و به سمت پایین حرکت کنید. طول هر نوار نشان دهنده کل زمانی است که برای بارگذاری هر منبع صرف شده است. چگونه می توانید تفاوت بین درخواستی که به عنوان بخشی از مسیر بارگذاری بحرانی انجام می شود و درخواستی که به صورت پویا، مدت ها پس از اتمام بارگیری اولیه صفحه انجام می شود، تشخیص دهید؟
اولین درخواست در آبشار همیشه برای سند HTML است، به عنوان مثال، v2.html . تمام درخواست‌های بعدی (مثل یک آبشار!) از این درخواست ناوبری اولیه، بر اساس تصاویر، اسکریپت‌ها و سبک‌هایی که سند HTML به آن ارجاع می‌دهد، جاری می‌شوند.
آبشار نشان می‌دهد که به محض اتمام بارگذاری v2.html ، درخواست‌ها برای دارایی‌هایی که به آن ارجاع می‌دهد (که به عنوان منابع فرعی نیز نامیده می‌شود) شروع می‌شود. مرورگر می‌تواند چندین منبع فرعی را همزمان درخواست کند، و این با نوارهای همپوشانی در ستون Waterfall برای main.css و logo.svg نشان داده می‌شود. در نهایت، از اسکرین شات می‌بینید که main.js آخرین بار شروع به بارگذاری می‌کند و پس از تکمیل سه URL دیگر، بارگیری به پایان می‌رسد.