این codelab شما را در فرایند تفسیر کردن کل ترافیک شبکه برای یک برنامه نمونه تاحدودی پیچیده راهنمایی می‌کند. در پایان تمرین، مهارت‌های لازم را برای تشخیص اینکه برنامه وب شما چه چیزی را بار می‌کند و چه زمانی هر درخواست را ارسال می‌کند، خواهید داشت.
به پانل «شبکه» پیمایش کنید
به پانل «شبکه» بروید تا ترافیک شبکه را برای برنامه نمایشی ببینید.
- برای باز کردن DevTools، کلیدهای `Control+Shift+J` (یا `Command+Option+J` در Mac) را فشار دهید.
- روی برگه شبکه کلیک کنید.
- برای دیدن ترافیک شبکه، صفحه را مجدداً بار کنید.
پانل «شبکه» همه دارایی‌های بارشده به‌دلیل پیمایش اولیه شما را نشان می‌دهد:
نحوه تفسیر ورودی‌ها
هر ردیف از ترافیک شبکه ضبط‌شده نشان‌دهنده یک جفت درخواست و پاسخ است.
ردیف اول، با نوع document، درخواست پیمایش اولیه برای HTML برنامه وب است. این منبع آبشار است؛ هریک از درخواست‌های بعدی برای دارایی‌های اضافی (که به‌عنوان زیرمنابع سند اصلی شناخته می‌شوند) از این منبع اصلی جاری می‌شوند.
ردیف‌های دوم و سوم، که بار شدن یک CSS stylesheet و یک منبع فرعی script را نشان می‌دهند، درخواست‌های وابسته‌ای هستند که توسط سند اصلی آغاز شده‌اند.
با نگاه کردن به زمان انجام این درخواست‌ها، نمودار آبشاری نشان می‌دهد که آن‌ها تا اواخر فرایند پاسخ به درخواست پیمایش شروع نمی‌شوند.
درمجموع، درخواست‌های سند HTML، CSS، و جاوا اسکریپت برای نمایش کامل صفحه درطول پیمایش اولیه لازم است.
ایجاد چند درخواست زمان اجرای دیگر
درحالی‌که پانل شبکه همچنان باز است و درحال ضبط است، وقت آن است که چیزی را شبیه‌سازی کنیم که برای بسیاری از برنامه‌های وب رایج است: درخواست‌های API اضافی که برای افزودن داده‌های بیشتر به صفحه پس‌از تکمیل پیمایش اولیه استفاده می‌شود.
با کلیک کردن روی Find Me (پیدا کردن من) در برنامه و سپس Allow (اجازه دادن) در بالاپر ظاهرشده، این درخواست‌های اضافی را راه‌اندازی کنید. این کار به سایت اجازه می‌دهد به مکان فعلی شما دسترسی داشته باشد:
وقتی برنامه وب مکانی برای کار کردن داشته باشد، کلیک کردن روی پیدا کردن مدخل‌های ویکی‌پدیا در اطراف منجر به چندین درخواست شبکه اضافی می‌شود. باید چیزی شبیه به این ببینید:
تفسیر ورودی‌های جدید
مثل قبل، هر ردیف از ترافیک شبکه ضبط‌شده نشان‌دهنده یک جفت درخواست و پاسخ است.
ردیف اول ورودی‌های جدید نشان‌دهنده درخواستی با نوع fetch است،
که با
روشی که برنامه وب داده‌ها را
از Wikipedia API درخواست می‌کند مطابقت دارد.
ردیف‌های زیر همگی تصاویری (png یا jpeg) هستند که با مدخل‌های ویکی‌پدیا مرتبط‌اند. هرچند دیدن آن از نماگرفت کمی دشوار است، اما ورودی‌های آن‌ها در ستون «آبشاری» مستقیماً از پاسخ میانای برنامه‌سازی کاربردی جریان می‌یابد.
برای همه این درخواست‌های اضافی، زمان براساس مدت زمانی که صفحه را قبل‌از کلیک کردن روی پیدا کردن ورودی‌های ویکی‌پدیا در اطراف باز نگه داشته‌اید متفاوت خواهد بود. مهم‌ترین نکته در اینجا این است که زمان از درخواست پیمایش اولیه جدا شده است. این را می‌توانید از فاصله بزرگی که در نمایش Waterfall وجود دارد متوجه شوید، که نشان‌دهنده مدت زمانی است که بین بارگیری اولیه و زمانی که درخواست Wikipedia API انجام می‌شود، گذشته است.
درخواست‌هایی که پس‌از وقفه‌ای زمانی بعداز پیمایش انجام می‌شوند، در دسته «درخواست‌های زمان اجرا» قرار می‌گیرند، برخلاف مجموعه اولیه درخواست‌هایی که برای نمایش صفحه هنگام اولین پیمایش به آن استفاده می‌شوند.
درحال جمع‌بندی
با طی کردن مراحل این codelab، اکنون با ابزارهایی آشنا شده‌اید که می‌توانید برای تجزیه‌وتحلیل آنچه هر برنامه وب بار می‌کند استفاده کنید.
پانل «شبکه» به شما کمک می‌کند به این سؤال پاسخ دهید که چه چیزی بار می‌شود، ازطریق نشانی‌های وب در ستون «نام» و داده‌ها در ستون «نوع»، به‌همراه زمان بار شدن آن، ازطریق نمایش آبشاری.
همچنین دیده‌اید که درخواست‌های ایجادشده توسط صفحه وب (معمولاً) می‌تواند در یکی از دو دسته زیر گروه‌بندی شود:
- درخواست‌های اولیه، که بلافاصله پس‌از پیمایش به صفحه جدید برای HTML، جاوا اسکریپت، CSS (و احتمالاً دارایی‌های دیگر) انجام می‌شود.
- درخواست‌های زمان اجرا که درنتیجه تعامل کاربر با صفحه ایجاد شده است. این اغلب می‌تواند با درخواست به میانای برنامه‌سازی کاربردی شروع شود و سپس براساس داده‌های بازیابی‌شده میانای برنامه‌سازی کاربردی، به چندین درخواست پیگیری تبدیل شود.