নেভিগেশন কি হয়
এটি একটি 4 অংশের ব্লগ সিরিজের 2 পার্ট যা Chrome এর অভ্যন্তরীণ কাজগুলিকে দেখছে৷ আগের পোস্টে , আমরা দেখেছি কিভাবে বিভিন্ন প্রক্রিয়া এবং থ্রেড একটি ব্রাউজারের বিভিন্ন অংশ পরিচালনা করে। এই পোস্টে, আমরা একটি ওয়েবসাইট প্রদর্শন করার জন্য প্রতিটি প্রক্রিয়া এবং থ্রেড কীভাবে যোগাযোগ করে তা গভীরভাবে খনন করি।
আসুন ওয়েব ব্রাউজিংয়ের একটি সাধারণ ব্যবহারের ক্ষেত্রে দেখি: আপনি একটি ব্রাউজারে একটি URL টাইপ করেন, তারপর ব্রাউজারটি ইন্টারনেট থেকে ডেটা আনে এবং একটি পৃষ্ঠা প্রদর্শন করে। এই পোস্টে, আমরা সেই অংশে ফোকাস করব যেখানে একজন ব্যবহারকারী একটি সাইটের অনুরোধ করে এবং ব্রাউজার একটি পৃষ্ঠা রেন্ডার করার জন্য প্রস্তুত করে - এটি একটি নেভিগেশন নামেও পরিচিত৷
এটি একটি ব্রাউজার প্রক্রিয়া দিয়ে শুরু হয়
আমরা যেমন পার্ট 1-এ কভার করেছি: CPU, GPU, মেমরি, এবং মাল্টি-প্রসেস আর্কিটেকচার , একটি ট্যাবের বাইরের সবকিছু ব্রাউজার প্রক্রিয়া দ্বারা পরিচালিত হয়। ব্রাউজার প্রক্রিয়াটিতে UI থ্রেডের মতো থ্রেড রয়েছে যা ব্রাউজারের বোতাম এবং ইনপুট ক্ষেত্রগুলি আঁকে, নেটওয়ার্ক থ্রেড যা ইন্টারনেট থেকে ডেটা গ্রহণের জন্য নেটওয়ার্ক স্ট্যাকের সাথে কাজ করে, স্টোরেজ থ্রেড যা ফাইলগুলিতে অ্যাক্সেস নিয়ন্ত্রণ করে এবং আরও অনেক কিছু। আপনি যখন ঠিকানা বারে একটি URL টাইপ করেন, তখন আপনার ইনপুট ব্রাউজার প্রক্রিয়ার UI থ্রেড দ্বারা পরিচালিত হয়।
একটি সহজ নেভিগেশন
ধাপ 1: ইনপুট হ্যান্ডলিং
যখন একজন ব্যবহারকারী অ্যাড্রেস বারে টাইপ করা শুরু করেন, তখন UI থ্রেড প্রথম যে জিনিসটি জিজ্ঞাসা করে তা হল "এটি কি একটি অনুসন্ধান ক্যোয়ারী বা URL?"। ক্রোমে, ঠিকানা বারটি একটি অনুসন্ধান ইনপুট ক্ষেত্রও, তাই UI থ্রেডকে পার্স করতে হবে এবং সিদ্ধান্ত নিতে হবে যে আপনাকে সার্চ ইঞ্জিনে বা আপনার অনুরোধ করা সাইটে পাঠাতে হবে।
ধাপ 2: নেভিগেশন শুরু করুন
যখন একজন ব্যবহারকারী এন্টার হিট করে, তখন UI থ্রেড সাইটের বিষয়বস্তু পেতে একটি নেটওয়ার্ক কল শুরু করে। লোডিং স্পিনার একটি ট্যাবের কোণে প্রদর্শিত হয়, এবং নেটওয়ার্ক থ্রেড উপযুক্ত প্রোটোকলের মধ্য দিয়ে যায় যেমন DNS লুকআপ এবং অনুরোধের জন্য TLS সংযোগ স্থাপন করা।
এই মুহুর্তে, নেটওয়ার্ক থ্রেড HTTP 301 এর মত একটি সার্ভার রিডাইরেক্ট হেডার পেতে পারে। সেক্ষেত্রে, নেটওয়ার্ক থ্রেড UI থ্রেডের সাথে যোগাযোগ করে যে সার্ভার রিডাইরেক্টের অনুরোধ করছে। তারপর, আরেকটি URL অনুরোধ শুরু করা হবে।
ধাপ 3: প্রতিক্রিয়া পড়ুন
একবার রেসপন্স বডি (পেলোড) আসতে শুরু করলে, প্রয়োজনে নেটওয়ার্ক থ্রেড স্ট্রিমের প্রথম কয়েকটি বাইট দেখে। প্রতিক্রিয়ার বিষয়বস্তু-প্রকার শিরোনাম বলা উচিত এটি কি ধরনের ডেটা, কিন্তু যেহেতু এটি অনুপস্থিত বা ভুল হতে পারে, তাই এখানে MIME টাইপ স্নিফিং করা হয়। সোর্স কোডে মন্তব্য করা হিসাবে এটি একটি "কঠিন ব্যবসা"। বিভিন্ন ব্রাউজার কিভাবে বিষয়বস্তু-টাইপ/পেলোড জোড়া ব্যবহার করে তা দেখতে আপনি মন্তব্যটি পড়তে পারেন।
যদি প্রতিক্রিয়াটি একটি HTML ফাইল হয়, তবে পরবর্তী পদক্ষেপটি হবে রেন্ডারার প্রক্রিয়াতে ডেটা পাস করা, কিন্তু যদি এটি একটি জিপ ফাইল বা অন্য কোনও ফাইল হয় তবে তার মানে এটি একটি ডাউনলোড অনুরোধ তাই তাদের ডেটা পাস করতে হবে ডাউনলোড ম্যানেজার.
এখানেও নিরাপদ ব্রাউজিং চেক হয়। যদি ডোমেন এবং প্রতিক্রিয়া ডেটা একটি পরিচিত দূষিত সাইটের সাথে মেলে বলে মনে হয়, তাহলে নেটওয়ার্ক থ্রেড সতর্কতা পৃষ্ঠা প্রদর্শন করতে সতর্ক করে। অতিরিক্তভাবে, C ross O rigin R ead B লকিং ( CORB ) চেক করা হয় যাতে সংবেদনশীল ক্রস-সাইট ডেটা রেন্ডারার প্রক্রিয়ায় না আসে তা নিশ্চিত করতে।
ধাপ 4: একটি রেন্ডারার প্রক্রিয়া খুঁজুন
একবার সমস্ত পরীক্ষা করা হয়ে গেলে এবং নেটওয়ার্ক থ্রেড নিশ্চিত হয় যে ব্রাউজারটি অনুরোধ করা সাইটে নেভিগেট করা উচিত, নেটওয়ার্ক থ্রেড UI থ্রেডকে বলে যে ডেটা প্রস্তুত। UI থ্রেড তারপর ওয়েব পৃষ্ঠার রেন্ডারিং চালিয়ে যাওয়ার জন্য একটি রেন্ডারার প্রক্রিয়া খুঁজে পায়।
যেহেতু নেটওয়ার্ক অনুরোধের প্রতিক্রিয়া ফিরে পেতে কয়েকশ মিলিসেকেন্ড সময় লাগতে পারে, তাই এই প্রক্রিয়াটিকে গতি বাড়ানোর জন্য একটি অপ্টিমাইজেশান প্রয়োগ করা হয়েছে৷ যখন UI থ্রেড 2 ধাপে নেটওয়ার্ক থ্রেডে একটি URL অনুরোধ পাঠাচ্ছে, তখন তারা কোন সাইটে নেভিগেট করছে তা ইতিমধ্যেই জানে। UI থ্রেড সক্রিয়ভাবে নেটওয়ার্ক অনুরোধের সমান্তরালে একটি রেন্ডারার প্রক্রিয়া খুঁজে বের করার বা শুরু করার চেষ্টা করে। এইভাবে, যদি সবকিছু প্রত্যাশিতভাবে হয়, নেটওয়ার্ক থ্রেড ডেটা গ্রহণ করার সময় একটি রেন্ডারার প্রক্রিয়া ইতিমধ্যেই স্ট্যান্ডবাই অবস্থানে থাকে। এই স্ট্যান্ডবাই প্রক্রিয়াটি ব্যবহার নাও হতে পারে যদি নেভিগেশন ক্রস-সাইট পুনঃনির্দেশ করে, সেক্ষেত্রে একটি ভিন্ন প্রক্রিয়ার প্রয়োজন হতে পারে।
ধাপ 5: নেভিগেশন কমিট
এখন যেহেতু ডেটা এবং রেন্ডারার প্রক্রিয়া প্রস্তুত, একটি আইপিসি নেভিগেশন করার জন্য ব্রাউজার প্রক্রিয়া থেকে রেন্ডারার প্রক্রিয়াতে পাঠানো হয়। এটি ডেটা স্ট্রীমেও পাস করে যাতে রেন্ডারার প্রক্রিয়াটি HTML ডেটা গ্রহণ করতে পারে। একবার ব্রাউজার প্রক্রিয়া নিশ্চিতকরণ শুনে যে প্রতিশ্রুতি রেন্ডারার প্রক্রিয়ায় ঘটেছে, নেভিগেশন সম্পূর্ণ হয় এবং নথি লোডিং পর্ব শুরু হয়।
এই সময়ে, ঠিকানা বার আপডেট করা হয় এবং নিরাপত্তা নির্দেশক এবং সাইট সেটিংস UI নতুন পৃষ্ঠার সাইটের তথ্য প্রতিফলিত করে। ট্যাবের সেশনের ইতিহাস আপডেট করা হবে তাই ব্যাক/ফরওয়ার্ড বোতামগুলি সেই সাইটের মধ্য দিয়ে যাবে যেটিতে এইমাত্র নেভিগেট করা হয়েছে। আপনি যখন একটি ট্যাব বা উইন্ডো বন্ধ করেন তখন ট্যাব/সেশন পুনরুদ্ধারের সুবিধার্থে, সেশনের ইতিহাস ডিস্কে সংরক্ষণ করা হয়।
অতিরিক্ত ধাপ: প্রাথমিক লোড সম্পূর্ণ
একবার নেভিগেশন প্রতিশ্রুতিবদ্ধ হলে, রেন্ডারার প্রক্রিয়া লোডিং সংস্থানগুলি বহন করে এবং পৃষ্ঠাটিকে রেন্ডার করে। আমরা পরবর্তী পোস্টে এই পর্যায়ে কি ঘটে তার বিশদ বিবরণে যাব। রেন্ডারার প্রক্রিয়াটি রেন্ডারিং "সমাপ্ত" হয়ে গেলে, এটি ব্রাউজার প্রক্রিয়াতে একটি IPC ফেরত পাঠায় (এটি পৃষ্ঠার সমস্ত ফ্রেমে সমস্ত onload ইভেন্ট ফায়ার হওয়ার পরে এবং কার্যকর করা শেষ হওয়ার পরে)। এই মুহুর্তে, UI থ্রেড ট্যাবে স্পিনার লোড করা বন্ধ করে দেয়।
আমি বলি "সমাপ্ত", কারণ ক্লায়েন্ট সাইড জাভাস্ক্রিপ্ট এখনও অতিরিক্ত সংস্থান লোড করতে পারে এবং এই পয়েন্টের পরে নতুন ভিউ রেন্ডার করতে পারে।
একটি ভিন্ন সাইটে নেভিগেট করা
সহজ নেভিগেশন সম্পূর্ণ ছিল! কিন্তু কি হবে যদি একজন ব্যবহারকারী আবার ঠিকানা বারে ভিন্ন URL রাখে? ঠিক আছে, ব্রাউজার প্রক্রিয়াটি বিভিন্ন সাইটে নেভিগেট করার জন্য একই পদক্ষেপের মধ্য দিয়ে যায়। কিন্তু এটি করার আগে, এটি বর্তমানে রেন্ডার করা সাইটের সাথে চেক করতে হবে তারা beforeunload ইভেন্টের বিষয়ে যত্নশীল কিনা।
beforeunload তৈরি করতে পারেন "এই সাইটটি ছেড়ে দিন?" আপনি দূরে নেভিগেট বা ট্যাব বন্ধ করার চেষ্টা করার সময় সতর্কতা. আপনার জাভাস্ক্রিপ্ট কোড সহ একটি ট্যাবের ভিতরের সবকিছু রেন্ডারার প্রক্রিয়া দ্বারা পরিচালিত হয়, তাই নতুন নেভিগেশন অনুরোধ আসার সময় ব্রাউজার প্রক্রিয়াটিকে বর্তমান রেন্ডারার প্রক্রিয়াটি পরীক্ষা করতে হবে।
যদি রেন্ডারার প্রক্রিয়া থেকে নেভিগেশন শুরু করা হয় (যেমন ব্যবহারকারী একটি লিঙ্কে ক্লিক করেছেন বা ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট রান করেছে window.location = "https://newsite.com" ) রেন্ডারার প্রক্রিয়া প্রথমে আনলোড হ্যান্ডলারের beforeunload পরীক্ষা করে। তারপরে, এটি ব্রাউজার প্রক্রিয়া শুরু করা নেভিগেশনের মতো একই প্রক্রিয়ার মধ্য দিয়ে যায়। শুধুমাত্র পার্থক্য হল যে নেভিগেশন অনুরোধ রেন্ডারার প্রক্রিয়া থেকে ব্রাউজার প্রক্রিয়াতে শুরু করা হয়।
যখন নতুন নেভিগেশনটি বর্তমানে রেন্ডার করা সাইটের চেয়ে ভিন্ন সাইটে করা হয়, তখন নতুন নেভিগেশন পরিচালনা করার জন্য একটি পৃথক রেন্ডার প্রক্রিয়া আহ্বান করা হয় যখন বর্তমান রেন্ডার প্রক্রিয়াটি unload মতো ইভেন্টগুলি পরিচালনা করার জন্য কাছাকাছি রাখা হয়। আরও তথ্যের জন্য, পৃষ্ঠার জীবনচক্রের অবস্থার একটি ওভারভিউ দেখুন এবং কিভাবে আপনি পেজ লাইফসাইকেল API এর সাথে ইভেন্টগুলিকে সংযুক্ত করতে পারেন৷
সার্ভিস ওয়ার্কারের ক্ষেত্রে
এই নেভিগেশন প্রক্রিয়ার একটি সাম্প্রতিক পরিবর্তন হল পরিষেবা কর্মী প্রবর্তন। পরিষেবা কর্মী হল আপনার অ্যাপ্লিকেশন কোডে নেটওয়ার্ক প্রক্সি লেখার একটি উপায়; ওয়েব ডেভেলপারদের স্থানীয়ভাবে কী ক্যাশে করতে হবে এবং কখন নেটওয়ার্ক থেকে নতুন ডেটা পেতে হবে তার উপর আরও নিয়ন্ত্রণ করার অনুমতি দেয়। যদি পরিষেবা কর্মী ক্যাশে থেকে পৃষ্ঠাটি লোড করার জন্য সেট করা থাকে, তাহলে নেটওয়ার্ক থেকে ডেটার অনুরোধ করার প্রয়োজন নেই৷
মনে রাখা গুরুত্বপূর্ণ অংশ হল যে পরিষেবা কর্মী হল জাভাস্ক্রিপ্ট কোড যা একটি রেন্ডারার প্রক্রিয়ায় চলে। কিন্তু যখন নেভিগেশন অনুরোধ আসে, তখন ব্রাউজার প্রক্রিয়া কীভাবে জানতে পারে যে সাইটে একজন পরিষেবা কর্মী আছে?
যখন একজন পরিষেবা কর্মী নিবন্ধিত হন, তখন পরিষেবা কর্মীর সুযোগ একটি রেফারেন্স হিসাবে রাখা হয় (আপনি এই পরিষেবা কর্মী লাইফসাইকেল নিবন্ধে সুযোগ সম্পর্কে আরও পড়তে পারেন)। যখন একটি নেভিগেশন ঘটে, নেটওয়ার্ক থ্রেড নিবন্ধিত পরিষেবা কর্মী স্কোপের বিরুদ্ধে ডোমেন পরীক্ষা করে, যদি কোনও পরিষেবা কর্মী সেই URL-এর জন্য নিবন্ধিত হয়, তাহলে UI থ্রেড পরিষেবা কর্মী কোড চালানোর জন্য একটি রেন্ডারার প্রক্রিয়া খুঁজে পায়। পরিষেবা কর্মী ক্যাশে থেকে ডেটা লোড করতে পারে, নেটওয়ার্ক থেকে ডেটা অনুরোধ করার প্রয়োজনীয়তা দূর করে, অথবা এটি নেটওয়ার্ক থেকে নতুন সংস্থানগুলির জন্য অনুরোধ করতে পারে।
নেভিগেশন প্রিলোড
আপনি ব্রাউজার প্রক্রিয়া এবং রেন্ডারার প্রক্রিয়ার মধ্যে এই রাউন্ড ট্রিপ দেখতে পারেন যদি পরিষেবা কর্মী অবশেষে নেটওয়ার্ক থেকে ডেটা অনুরোধ করার সিদ্ধান্ত নেয় তবে বিলম্ব হতে পারে। ন্যাভিগেশন প্রিলোড হল পরিষেবা কর্মী স্টার্টআপের সমান্তরালে সংস্থানগুলি লোড করার মাধ্যমে এই প্রক্রিয়াটিকে গতিশীল করার একটি প্রক্রিয়া। এটি একটি শিরোনাম দিয়ে এই অনুরোধগুলিকে চিহ্নিত করে, সার্ভারগুলিকে এই অনুরোধগুলির জন্য বিভিন্ন সামগ্রী পাঠানোর সিদ্ধান্ত নিতে দেয়; উদাহরণস্বরূপ, একটি সম্পূর্ণ নথির পরিবর্তে শুধুমাত্র আপডেট করা ডেটা।
শেষ করি
এই পোস্টে, আমরা দেখেছি নেভিগেশনের সময় কী ঘটে এবং কীভাবে আপনার ওয়েব অ্যাপ্লিকেশন কোড যেমন রেসপন্স হেডার এবং ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট ব্রাউজারের সাথে ইন্টারঅ্যাক্ট করে। নেটওয়ার্ক থেকে ডেটা পাওয়ার জন্য ব্রাউজার যে ধাপগুলি অতিক্রম করে তা জানার ফলে ন্যাভিগেশন প্রিলোডের মতো APIগুলি কেন তৈরি করা হয়েছিল তা বোঝা সহজ করে তোলে৷ পরবর্তী পোস্টে, আমরা পৃষ্ঠাগুলি রেন্ডার করার জন্য ব্রাউজার কীভাবে আমাদের HTML/CSS/JavaScriptকে মূল্যায়ন করে তা নিয়ে আলোচনা করব।
আপনি পোস্ট উপভোগ করেছেন? আপনার যদি ভবিষ্যতের পোস্টের জন্য কোন প্রশ্ন বা পরামর্শ থাকে, আমি নীচের মন্তব্য বিভাগে বা টুইটারে @kosamari আপনার কাছ থেকে শুনতে চাই।