এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

রেন্ডার-ট্রি কনস্ট্রাকশন, লেআউট এবং পেইন্ট

Ilya Grigorik

প্রকাশিত: ৩১ মার্চ, ২০১৪

CSSOM এবং DOM ট্রি-গুলোকে একত্রিত করে একটি রেন্ডার ট্রি তৈরি করা হয়, যা পরবর্তীতে প্রতিটি দৃশ্যমান এলিমেন্টের লেআউট গণনা করতে ব্যবহৃত হয় এবং স্ক্রিনে পিক্সেল রেন্ডার করার পেইন্ট প্রক্রিয়ার ইনপুট হিসেবে কাজ করে। সর্বোত্তম রেন্ডারিং পারফরম্যান্স অর্জনের জন্য এই প্রতিটি ধাপকে অপ্টিমাইজ করা অত্যন্ত গুরুত্বপূর্ণ।

অবজেক্ট মডেল তৈরির পূর্ববর্তী অংশে, আমরা HTML এবং CSS ইনপুটের উপর ভিত্তি করে DOM এবং CSSOM ট্রি তৈরি করেছিলাম। তবে, এই দুটিই স্বাধীন অবজেক্ট যা ডকুমেন্টের বিভিন্ন দিক তুলে ধরে: একটি বিষয়বস্তু বর্ণনা করে, এবং অন্যটি ডকুমেন্টে প্রয়োগ করার জন্য প্রয়োজনীয় স্টাইল রুলগুলো বর্ণনা করে। আমরা কীভাবে এই দুটিকে একত্রিত করে ব্রাউজারকে স্ক্রিনে পিক্সেল রেন্ডার করতে নির্দেশ দেব?

সারসংক্ষেপ

DOM এবং CSSOM ট্রি একত্রিত হয়ে রেন্ডার ট্রি গঠন করে।
রেন্ডার ট্রি-তে শুধুমাত্র পৃষ্ঠাটি রেন্ডার করার জন্য প্রয়োজনীয় নোডগুলো থাকে।
লেআউট প্রতিটি অবজেক্টের সঠিক অবস্থান ও আকার নির্ধারণ করে।
শেষ ধাপটি হলো পেইন্ট, যা চূড়ান্ত রেন্ডার ট্রি গ্রহণ করে এবং পিক্সেলগুলোকে স্ক্রিনে রেন্ডার করে।

প্রথমে, ব্রাউজার DOM এবং CSSOM-কে একত্রিত করে একটি "রেন্ডার ট্রি" তৈরি করে, যা পৃষ্ঠার সমস্ত দৃশ্যমান DOM কন্টেন্ট এবং প্রতিটি নোডের সমস্ত CSSOM স্টাইলের তথ্য ধারণ করে।

DOM এবং CSSOM একত্রিত করে রেন্ডার ট্রি তৈরি করা হয়।

রেন্ডার ট্রি তৈরি করার জন্য ব্রাউজার মোটামুটি নিম্নলিখিত কাজগুলো করে থাকে:

DOM ট্রি-র মূল থেকে শুরু করে প্রতিটি দৃশ্যমান নোড অতিক্রম করুন।
- কিছু নোড দৃশ্যমান নয় (যেমন, স্ক্রিপ্ট ট্যাগ, মেটা ট্যাগ ইত্যাদি), এবং রেন্ডার করা আউটপুটে প্রতিফলিত না হওয়ায় সেগুলোকে বাদ দেওয়া হয়।
- কিছু নোড CSS ব্যবহার করে লুকানো থাকে এবং রেন্ডার ট্রি থেকেও বাদ দেওয়া হয়; উদাহরণস্বরূপ, উপরের উদাহরণে স্প্যান নোডটি রেন্ডার ট্রি থেকে অনুপস্থিত, কারণ আমরা একটি সুস্পষ্ট নিয়মের মাধ্যমে এর উপর "display: none" প্রপার্টিটি সেট করেছি।
প্রতিটি দৃশ্যমান নোডের জন্য, উপযুক্ত CSSOM নিয়মগুলো খুঁজে বের করুন এবং সেগুলো প্রয়োগ করুন।
বিষয়বস্তু এবং তাদের গণনাকৃত স্টাইলসহ দৃশ্যমান নোডগুলো নির্গত করুন।

দ্রষ্টব্য: প্রসঙ্গক্রমে উল্লেখ্য যে, visibility: hidden এবং display: none ভিন্ন জিনিস। প্রথমটি এলিমেন্টটিকে অদৃশ্য করে দেয়, কিন্তু এলিমেন্টটি লেআউটে জায়গা দখল করে থাকে (অর্থাৎ, এটি একটি খালি বক্স হিসেবে রেন্ডার হয়), অপরদিকে দ্বিতীয়টি ( display: none ) এলিমেন্টটিকে রেন্ডার ট্রি থেকে সম্পূর্ণরূপে সরিয়ে দেয়, ফলে এলিমেন্টটি অদৃশ্য হয়ে যায় এবং লেআউটের অংশ থাকে না।

চূড়ান্ত আউটপুট হলো একটি রেন্ডার ট্রি, যাতে স্ক্রিনে দৃশ্যমান সমস্ত কন্টেন্টের বিষয়বস্তু এবং স্টাইল উভয় তথ্যই থাকে। রেন্ডার ট্রি তৈরি হয়ে গেলে, আমরা 'লেআউট' পর্যায়ে অগ্রসর হতে পারি।

এই পর্যন্ত আমরা হিসাব করেছি কোন নোডগুলো দৃশ্যমান হবে এবং সেগুলোর কম্পিউটেড স্টাইল কী হবে, কিন্তু ডিভাইসের ভিউপোর্টের মধ্যে সেগুলোর সঠিক অবস্থান ও আকার আমরা হিসাব করিনি—এটাই হলো 'লেআউট' পর্যায়, যা 'রিফ্লো' নামেও পরিচিত।

পৃষ্ঠার প্রতিটি বস্তুর সঠিক আকার ও অবস্থান বের করার জন্য, ব্রাউজার রেন্ডার ট্রি-এর মূল থেকে শুরু করে এর মধ্য দিয়ে পরিভ্রমণ করে। এই উদাহরণটি বিবেচনা করুন:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Critial Path: Hello world!</title>
  </head>
  <body>
    <div style="width: 50%">
      <div style="width: 50%">Hello world!</div>
    </div>
  </body>
</html>

ওয়েবপেজ হিসেবে রেন্ডার করা এই HTML উদাহরণটি দেখুন।

পূর্ববর্তী উদাহরণের <body> ট্যাগের মধ্যে দুটি নেস্টেড <div> রয়েছে: প্রথমটি (প্যারেন্ট) <div> নোডটির ডিসপ্লে সাইজ ভিউপোর্ট উইডথের 50% নির্ধারণ করে, এবং দ্বিতীয় <div> —যা প্যারেন্টের মধ্যে থাকে— এর উইডথ প্যারেন্টের width 50% নির্ধারণ করে; অর্থাৎ, ভিউপোর্ট উইডথের ২৫%।

পূর্ববর্তী বিবরণের উপর ভিত্তি করে লেআউটের তথ্য গণনা করা হচ্ছে।

লেআউট প্রক্রিয়ার আউটপুট হলো একটি 'বক্স মডেল', যা ভিউপোর্টের মধ্যে প্রতিটি উপাদানের সঠিক অবস্থান এবং আকার নির্ভুলভাবে ধারণ করে: সমস্ত আপেক্ষিক পরিমাপ স্ক্রিনে পরম পিক্সেলে রূপান্তরিত হয়।

অবশেষে, এখন যেহেতু আমরা জানি কোন নোডগুলো দৃশ্যমান এবং তাদের কম্পিউটেড স্টাইল ও জ্যামিতি কী, তাই আমরা এই তথ্যটি চূড়ান্ত পর্যায়ে পাঠাতে পারি, যা রেন্ডার ট্রির প্রতিটি নোডকে স্ক্রিনের প্রকৃত পিক্সেলে রূপান্তরিত করে। এই ধাপটিকে প্রায়শই "পেইন্টিং" বা "রাস্টারাইজিং" বলা হয়।

এতে কিছুটা সময় লাগতে পারে, কারণ ব্রাউজারকে বেশ কিছু কাজ করতে হয়। তবে, ক্রোম ডেভটুলস পূর্বে বর্ণিত তিনটি পর্যায় সম্পর্কেই কিছু ধারণা দিতে পারে। আমাদের মূল 'হ্যালো ওয়ার্ল্ড' উদাহরণটির লেআউট পর্যায়টি পরীক্ষা করে দেখুন:

ডেভটুলস-এ লেআউট পরিমাপ করা।

'লেআউট' ইভেন্টটি টাইমলাইনে রেন্ডার ট্রি-র গঠন, অবস্থান এবং আকার গণনার তথ্য ধারণ করে।
লেআউট সম্পূর্ণ হলে, ব্রাউজার "Paint Setup" এবং "Paint" ইভেন্ট জারি করে, যা রেন্ডার ট্রি-কে স্ক্রিনের পিক্সেলে রূপান্তর করে।

রেন্ডার ট্রি নির্মাণ, লেআউট এবং পেইন্ট করার জন্য প্রয়োজনীয় সময় ডকুমেন্টের আকার, প্রয়োগকৃত স্টাইল এবং যে ডিভাইসে এটি চালানো হচ্ছে তার উপর নির্ভর করে পরিবর্তিত হয়: ডকুমেন্ট যত বড় হয়, ব্রাউজারের কাজ তত বেশি হয়; স্টাইলগুলো যত জটিল হয়, পেইন্ট করতেও তত বেশি সময় লাগে (উদাহরণস্বরূপ, একটি সলিড রঙ পেইন্ট করা "সস্তা", যেখানে একটি ড্রপ শ্যাডো গণনা এবং রেন্ডার করা "ব্যয়বহুল")।

পৃষ্ঠাটি অবশেষে ভিউপোর্টে দৃশ্যমান হয়েছে:

রেন্ডার হওয়া পেজটিতে লেখা আছে 'হ্যালো ওয়েব পারফরম্যান্স ছাত্রছাত্রীরা!' এবং একটি মিষ্টি কুকুরের মিম দেখাচ্ছে, যেটি আপনাকে বলছে আপনি অসাধারণ।

ব্রাউজারের ধাপগুলো সংক্ষেপে নিচে দেওয়া হলো:

এইচটিএমএল মার্কআপ প্রক্রিয়াকরণ করুন এবং ডম ট্রি তৈরি করুন।
CSS মার্কআপ প্রক্রিয়াকরণ করুন এবং CSSOM ট্রি তৈরি করুন।
DOM এবং CSSOM-কে একত্রিত করে একটি রেন্ডার ট্রি তৈরি করুন।
প্রতিটি নোডের জ্যামিতি গণনা করার জন্য রেন্ডার ট্রিতে লেআউট চালান।
স্ক্রিনে স্বতন্ত্র নোডগুলো আঁকুন।

ডেমো পেজটি দেখতে সাধারণ মনে হতে পারে, কিন্তু এর জন্য ব্রাউজারের পক্ষ থেকে বেশ কিছু কাজ করার প্রয়োজন হয়। যদি DOM বা CSSOM পরিবর্তন করা হয়, তাহলে স্ক্রিনে কোন পিক্সেলগুলো পুনরায় রেন্ডার করতে হবে তা বের করার জন্য আপনাকে প্রক্রিয়াটি আবার পুনরাবৃত্তি করতে হবে।

ক্রিটিক্যাল রেন্ডারিং পাথ অপ্টিমাইজ করা হলো উপরের ক্রম অনুসারে ১ থেকে ৫ নম্বর ধাপগুলো সম্পন্ন করতে ব্যয়িত মোট সময়কে সর্বনিম্ন করার প্রক্রিয়া। এর ফলে যত দ্রুত সম্ভব স্ক্রিনে কন্টেন্ট রেন্ডার হয় এবং প্রাথমিক রেন্ডারের পর স্ক্রিন আপডেটের মধ্যবর্তী সময়ও কমে আসে; অর্থাৎ, ইন্টারেক্টিভ কন্টেন্টের জন্য উচ্চতর রিফ্রেশ রেট অর্জন করা যায়।