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

ইলিয়া গ্রিগোরিক

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

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

সারসংক্ষেপ

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

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

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

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

  1. DOM গাছের মূল থেকে শুরু করে, প্রতিটি দৃশ্যমান নোড অতিক্রম করুন।

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

  2. প্রতিটি দৃশ্যমান নোডের জন্য, উপযুক্ত মিলিত CSSOM নিয়মগুলি খুঁজুন এবং সেগুলি প্রয়োগ করুন৷

  3. বিষয়বস্তু এবং তাদের গণনা করা শৈলী সহ দৃশ্যমান নোড নির্গত করুন।

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

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

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

<!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>

চেষ্টা করে দেখুন

উপরের পৃষ্ঠার মূল অংশে দুটি নেস্টেড ডিভ রয়েছে: প্রথম (প্যারেন্ট) ডিভটি নোডের ডিসপ্লে আকারকে ভিউপোর্ট প্রস্থের 50% সেট করে এবং দ্বিতীয় ডিভ---অভিভাবক দ্বারা ধারণ করে---এর প্রস্থ সেট করে তার পিতামাতার 50% হতে হবে; অর্থাৎ, ভিউপোর্ট প্রস্থের 25%।

লেআউট তথ্য গণনা করা হচ্ছে

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

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

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

DevTools-এ লেআউট পরিমাপ করা

  • "লেআউট" ইভেন্টটি টাইমলাইনে রেন্ডার ট্রি নির্মাণ, অবস্থান এবং আকারের গণনা ক্যাপচার করে।
  • লেআউট সম্পূর্ণ হলে, ব্রাউজার "পেইন্ট সেটআপ" এবং "পেইন্ট" ইভেন্টগুলি ইস্যু করে, যা রেন্ডার ট্রিকে স্ক্রিনে পিক্সেলে রূপান্তর করে।

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

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

রেন্ডারড হ্যালো ওয়ার্ল্ড পেজ

এখানে ব্রাউজারের পদক্ষেপগুলির একটি দ্রুত সংক্ষিপ্ত বিবরণ রয়েছে:

  1. HTML মার্কআপ প্রক্রিয়া করুন এবং DOM ট্রি তৈরি করুন।
  2. CSS মার্কআপ প্রক্রিয়া করুন এবং CSSOM ট্রি তৈরি করুন।
  3. একটি রেন্ডার ট্রিতে DOM এবং CSSOM একত্রিত করুন।
  4. প্রতিটি নোডের জ্যামিতি গণনা করতে রেন্ডার ট্রিতে লেআউট চালান।
  5. স্ক্রিনে পৃথক নোডগুলি পেইন্ট করুন।

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

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

প্রতিক্রিয়া