ওয়েব পারফরম্যান্স ১০১ এর এটি দ্বিতীয় পর্ব। প্রথম পর্ব পড়তে এখানে ক্লিক করুন।
গত পর্বে আমরা জেনেছি একটি ওয়েব পেইজ কিছু নির্দিস্ট কিছু ধাপের মধ্য দিয়ে রেন্ডারিং হয় এবং গ্রাহক ব্রাউজারে প্রদর্শিত হয়। গত পর্বে DNS Lookup নিয়ে আলোচনা করা হয়েছে। আজ আমরা অন্যান্য বিষয়গুলো নিয়েও জানব। তো চলুন DNS Lookup এর পরের ধাপগুলো দেখে নেয়া যাক।
২. SSL Handshake (Only for SSL connections): একটি সার্ভার থেকে গ্রাহকের ব্রাউজারে সর্বোচ্চ গোপনীয়তা বজায় রেখে তথ্য আদান প্রদান করার জন্য SSL (Secure Sockets Layer) ব্যবহৃত হয়। সব ওয়েবসাইট SSL কানেকশনে লোড হয় না। যেসব লিঙ্ক https দ্বারা শুরু হয় সেগুলো SSL কানেকশন দ্বারা এনক্রিপটেড। SSL সম্পর্কে বিস্তারিত অন্য কোনো পোষ্টে বলব।
৩. Server Satus Message: DNS Lookup সম্পন্ন হওয়ার পর ব্রাউজার নির্দিস্ট রিমোট সার্ভারের সাথে কানেকশন স্থাপন করে। ঠিক যেমনভাবে আপনি আপনার বন্ধু ফোন নাম্বার পাওয়ার পর কল দিয়ে “হ্যালো বলেন”, তেমনিভাবে ব্রাউজারও রিমোট সার্ভারের এড্রেস পাওয়ার পর সার্ভারকে “হ্যালো” জানায়। সার্ভার তখন ব্রাউজারকে জানায় ব্রাউজার যে পেইজটি লোড করতে চাচ্ছে সেটি আদৌ সার্ভারে আছে কিনা, থাকলে কি অবস্থায় আছে – ইত্যাদি। আমরা যে 404 not found, 200 found অথবা 302, 301 redirection স্ট্যাটাস কোড দেখি এগুলো এ ধাপেই সম্পন্ন হয়।
৪. Initial HTML Source Transfer এবং Parsing: ব্রাউজারের সাথে সার্ভারের “হ্যালো” সম্পন্ন হওয়ার পর সার্ভার ব্রাউজারে নির্ধারিত পেইজটির HTML Source Code পাঠায়। HTML Source কোড পাঠানোর প্রথম স্টেজে ডিরেক্ট HTML, HTML এ inline করা JavaScript এবং CSS এই এলিমেন্টগুলো ব্রাউজারে যায়। এ ধাপে <html> ট্যাগের ভেতর থাকা শুধু HTML Code লোড হয়। একইসাথে DOM মডেল অনুযায়ী <html> ট্যাগের ভেতর থাকা এলিমেন্টগুলো এদের র্যাঙ্ক বা গুরুত্ব অনুযায়ী parse হতে থাকে।
৫. Initial Viewport Rendering: একটা সময় ছিল যখন ওয়েব ব্রাউজারের কোনো পেইজ রেন্ডারিং করতে হলে শুরু থেকে শেষ পর্যন্ত ওয়েব পেইজে থাকা সকল এলিমেন্ট প্রথমেই ডাউনলোড করে নিয়ে হতো। এরপর সম্পুর্ণ ওয়েব পেইজ রেন্ডারিং হত। কিন্তু বর্তমান মডার্ণ ওয়েব ব্রাউজারগুলো এক্ষেত্রে অনেক বেশি এফিসিয়েন্ট। মোটামোটি কাজ চালানোর মতন সোর্স কোড লোড হওয়ার পরই ব্রাউজারে সেটা রেন্ডার হওয়া শুরু করে। এটা DOM মডেলের অন্যতম একটা সুফল।
৬. Onsite External CSS/JS load: ৪ নাম্বার ধাপের পর এ ধাপে HTML এ রেফারেন্স করা একই ডোমেইনে থাকা CSS এবং JavaScript রিসোর্স ফাইলগুলো ব্রাউজারে লোড হয়।
৭. Onsite External CSS/JS Parsing এবং Rendering: ৬ নাম্বার ধাপের একই ডোমেইনের অধীনে থাকা CSS/JS ফাইলগুলো ট্রান্সফারের পর সেগুলো ব্রাউজারে Parse হয় এবং একটা একটা করে ব্রাউজারের viewport এ রেন্ডার হতে থাকে।
৮. Offsite External CSS/JS load: একই ডোমেইনের অধীনে থাকা CSS/JS স্ক্রিপ্ট লোড হওয়ার পর অন্যান্য ডোমেইনের CSS/JS ফাইল ডাউনলোড হওয়ার কাজ শুরু হয়।
৯. Offsite External CSS/JS parsing এবং rendering: অন্যান্য ডোমেইনের অধীনে থাকা CSS/JS স্ক্রিপ্ট লোড হওয়ার পর একটা একটা করে parsing এবং rendering হতে শুরু করে।
১০. Image load এবং rendering: সবকিছু শেষ হলে ওয়েব পেইজের মধ্যে থাকা ইমেজ ফাইলগুলো লোড হতে শুরু করে। তবে ইমেজ ফাইলের রেন্ডারিং এ কত সময় লাগবে তা নির্ভর করে ইমেজ ফাইলে ব্যবহৃত কোডেক এর উপর। বর্তমানে সবচেয়ে মডার্ণ ইমেজ কোডেক WebP খুব তাড়াতাড়ি রেন্ডার হয়, যেখানে একটা আন-অপ্টিমাইজড JPEG ইমেজ রেন্ডার হতে বেশ সময় লাগে।
উপরে যে ধাপগুলো বর্ণনা করা হয়েছে সেগুলোর মধ্য দিয়েই একটি সম্পুর্ণ ওয়েব পেইজ রেন্ডার হয়। ধাপগুলোর নির্দিস্ট কোনো নাম না থাকায় আমি বুঝার সুবিধার্থে সহজ করে ভেঙ্গে ভেঙ্গে নামকরণ করেছি। এখানে একটা জিনিস নোট করা দরকার, সেটা হল এ ধাপগুলো ধারাবাহিকভাবে দেয়া হলেও একটি আগে এবং একটি পরে ঘটতে পারে। কোনটি কিভাবে এবং কখন ঘটবে তা নির্ভর করে পুরোপুরিভাবে নির্দিস্ট ইলিমেন্ট এর রেফারেন্স <html> এর কত নাম্বার লাইনে এসেছে তার উপর। সাধারণত উপরের ধারাবাহিকতাই বজায় থাকে।
ওয়েব পারফরম্যান্স ভালোভাবে বুঝতে হলে ওয়েব পেইজ কিভাবে কাজ করে সেটা বুঝা খুব বেশি জরুরি। আশা করি সবাই এ পর্ব থেকে মোটামোটি একটা ধারণা নিতে পেরেছেন ওয়েব পেইজ কি কি এলিমেন্ট নিয়ে গঠিত, এবং কিভাবে সার্ভার থেকে ব্রাউজারে আসে। এ সিরিজের পরবর্তী পোষ্টে আমরা দেখব কিভাবে একটি ওয়েব পেইজের নির্দিস্ট এ ধাপগুলোর উপর ওয়েব পার্ফ নির্ভর করে। সবকিছু নিয়ে খুব বেশি ব্যস্ত থাকায় ব্লগিং করার সময় হয়ে উঠে না। তবু চেষ্টা করব যত তাড়াতাড়ি সম্ভব নতুন পোষ্ট নিয়ে হাজির হওয়ার জন্য।
এ সিরিজের প্রথম পর্বে আপনাদের রেসপন্স আমাকে অভিভূত করেছে। পোস্ট করার পর একটি ফেসবুক গ্রুপে শেয়ারের প্রথম সপ্তাহেই কমপক্ষে ২০-৩০ টি ইমেইল পেয়েছি বিভিন্ন প্রশ্ন নিয়ে। বেশিরভাগ ইমেইলই ছিল প্রথম পোস্ট সম্পর্কে বিভিন্ন প্রশ্ন নিয়ে। আমার অনুরোধ থাকবে যদি সাধারণ মাপের কোনো প্রশ্ন থাকে তাহলে সরাসরি পোষ্টের নিচে থাকা কমেন্ট বক্সের মাধ্যমে জানানোর জন্য। আমি চেষ্টা করব যত দ্রুত সম্ভব সবার প্রশ্নের উত্তর দেয়ার। ধন্যবাদ।
(চলবে)
