এই কোডল্যাব আপনাকে কিছুটা জটিল স্যাম্পেল অ্যাপ্লিকেশনের জন্য সমস্ত নেটওয়ার্ক ট্রাফিক ব্যাখ্যা করার প্রক্রিয়ার মাধ্যমে গাইড করে। এই এক্সারসাইজ শেষ করার পরে, আপনার নিজস্ব ওয়েব অ্যাপ্লিকেশন কী লোড করছে এবং কখন এটি প্রতিটি অনুরোধ করছে তা বোঝার জন্য প্রয়োজনীয় দক্ষতা আপনার থাকবে।
নেটওয়ার্ক প্যানেলে নেভিগেট করুন
ডেমো অ্যাপ্লিকেশনের জন্য নেটওয়ার্ক ট্রাফিক দেখতে নেটওয়ার্ক প্যানেলে নেভিগেট করুন।
- DevTools খুলতে `Control+Shift+J` (বা Mac-এ `Command+Option+J`) প্রেস করুন।
- নেটওয়ার্ক ট্যাবে ক্লিক করুন।
- নেটওয়ার্ক ট্রাফিক দেখতে পৃষ্ঠাটি আবার লোড করুন।
আপনার প্রাথমিক নেভিগেশনের কারণে লোড হওয়া সব অ্যাসেট নেটওয়ার্ক প্যানেল দেখায়:
এন্ট্রি কীভাবে ব্যাখ্যা করবেন
রেকর্ড করা নেটওয়ার্ক ট্রাফিকের প্রতিটি সারি একটি অনুরোধ ও উত্তর পেয়ারকে দেখায়।
প্রথম সারি, যার ধরন হল document, সেটি হল ওয়েব অ্যাপের HTML-এর জন্য
প্রাথমিক নেভিগেশন অনুরোধ। এটি হল ওয়াটারফলের সোর্স; অতিরিক্ত অ্যাসেটের (মূল ডকুমেন্টের সাবরিসোর্স হিসেবে পরিচিত) জন্য পরবর্তী প্রতিটি অনুরোধ
এই আসল সোর্স থেকে
প্রবাহিত হয়।
দ্বিতীয় ও তৃতীয় সারিতে, একটি CSS stylesheet এবং একটি script সাবরিসোর্স
লোড হতে দেখা যাচ্ছে, এগুলি হল নির্ভরশীল অনুরোধ যা মূল ডকুমেন্ট থেকে শুরু করা হয়েছে।
কখন সেইসব অনুরোধ করা হয়েছে তা দেখলে, ওয়াটারফল ডায়াগ্রাম দেখায় যে নেভিগেশন অনুরোধের উত্তর দেওয়ার প্রসেস অনেক দূর এগিয়ে যাওয়ার আগে সেগুলি শুরু করা হয়নি।
প্রাথমিক নেভিগেশনের সময় সম্পূর্ণ পৃষ্ঠা দেখানোর জন্য HTML ডকুমেন্ট, CSS ও JavaScript-এর অনুরোধ একসাথে প্রয়োজন হয়।
কিছু অতিরিক্ত রানটাইম অনুরোধ তৈরি করুন
নেটওয়ার্ক প্যানেল এখনও খোলা ও রেকর্ড করা অবস্থায়, অনেক ওয়েব অ্যাপের জন্য সাধারণ কিছু সিমুলেট করার সময় এসেছে: প্রাথমিক নেভিগেশন সম্পূর্ণ হওয়ার পরে পৃষ্ঠায় আরও ডেটা যোগ করার জন্য ব্যবহৃত অতিরিক্ত API অনুরোধ।
অ্যাপে আমাকে খুঁজুন বিকল্পে ক্লিক করে এইসব অতিরিক্ত অনুরোধ ট্রিগার করুন এবং তারপরে যে পপ-আপ দেখানো হবে সেখানে অনুমতি দিন বিকল্পে ক্লিক করুন। এটি সাইটকে আপনার বর্তমান লোকেশন অ্যাক্সেস করার অনুমতি দেবে:
ওয়েব অ্যাপের কাছে কাজ করার জন্য লোকেশন থাকলে, আশেপাশে Wikipedia এন্ট্রি খুঁজুন বিকল্পে ক্লিক করলে আরও কয়েকটি নেটওয়ার্ক রিকোয়েস্ট করা হয়। আপনি এই ধরনের কিছু দেখতে পাবেন:
নতুন এন্ট্রি ব্যাখ্যা করা
আগের মতোই, রেকর্ড করা নেটওয়ার্ক ট্রাফিকের প্রতিটি সারি একটি অনুরোধ ও উত্তর পেয়ারকে দেখায়।
নতুন এন্ট্রির প্রথম সারিটি fetch ধরনের অনুরোধকে দেখায়,
যা Wikipedia API থেকে
ওয়েব অ্যাপ যেভাবে ডেটার অনুরোধ করে
তার সাথে সম্পর্কিত।
নিম্নলিখিত সারির সবকটিই হল Wikipedia এন্ট্রির সাথে যুক্ত ছবি (png বা jpeg)। স্ক্রিনশট থেকে এটি দেখা একটু কঠিন হলেও, ওয়াটারফল কলামে তাদের এন্ট্রি সরাসরি API রেসপন্স থেকে আসে।
এইসব অতিরিক্ত অনুরোধের ক্ষেত্রে, আশেপাশের উইকিপিডিয়া এন্ট্রি খুঁজুন বিকল্পে ক্লিক করার আগে আপনি কতক্ষণ পৃষ্ঠাটি খুলে রেখেছেন তার উপর ভিত্তি করে কখন-এর উত্তর পরিবর্তিত হবে। কখন প্রাথমিক নেভিগেশন অনুরোধ থেকে ডিসকানেক্ট করা হয়েছে তা এখানে সবচেয়ে গুরুত্বপূর্ণ। আপনি এটি Waterfall ডিসপ্লেতে থাকা বড় ফাঁকা জায়গা থেকে বুঝতে পারবেন, যা প্রাথমিক লোডিং এবং Wikipedia API অনুরোধ করার মধ্যে অতিক্রান্ত সময়কে দেখায়।
নেভিগেশনের পরে কিছু সময় বিরতি দিয়ে করা অনুরোধ "রানটাইম অনুরোধ" বিভাগের মধ্যে পড়ে। আপনি প্রথমবার কোনও পৃষ্ঠায় নেভিগেট করলে, সেটি দেখানোর জন্য প্রাথমিক অনুরোধের সেট থেকে এটি আলাদা।
সারসংক্ষেপ করা হচ্ছে
এই কোডল্যাবের ধাপগুলি অনুসরণ করার পরে, আপনি এখন সেইসব টুলের সাথে পরিচিত হয়েছেন যেগুলি আপনি যেকোনও ওয়েব অ্যাপ্লিকেশন কী লোড করে তা বিশ্লেষণ করতে ব্যবহার করতে পারেন।
নেটওয়ার্ক প্যানেল আপনাকে কী লোড করা হচ্ছে সেই প্রশ্নের উত্তর দিতে সাহায্য করে, 'নাম' কলামে URL এবং 'ধরন' কলামে ডেটার মাধ্যমে, এর সাথে কখন এটি লোড করা হচ্ছে, ওয়াটারফল ডিসপ্লের মাধ্যমে।
আপনি আরও দেখেছেন যে কোনও ওয়েব পেজের করা অনুরোধ (সাধারণত) দুটি বিভাগের একটির মধ্যে গ্রুপ করা যেতে পারে:
- নতুন পৃষ্ঠায় নেভিগেট করার ঠিক পরেই, HTML, জাভাস্ক্রিপ্ট, CSS (এবং সম্ভাব্য অন্যান্য অ্যাসেট)-এর জন্য প্রাথমিক অনুরোধ করা হয়।
- পৃষ্ঠার সাথে ব্যবহারকারীর ইন্টার্যাকশনের ফলে রানটাইম অনুরোধ করা হয়েছে। এটি প্রায়ই API-তে অনুরোধ করার মাধ্যমে শুরু হতে পারে এবং তারপর API ডেটা পাওয়ার ভিত্তিতে একাধিক ফলো-আপ অনুরোধে প্রবাহিত হতে পারে।