এখানে আপনি রেন্ডারিংএনজি-এর উপাদান অংশগুলি কীভাবে সেট আপ করা হয় এবং রেন্ডারিং পাইপলাইন কীভাবে তাদের মধ্য দিয়ে প্রবাহিত হয় তা দেখতে পাবেন।
সর্বোচ্চ স্তর থেকে শুরু করে, রেন্ডারিংয়ের কাজগুলি হল:
- স্ক্রীনে পিক্সেলে বিষয়বস্তু রেন্ডার করুন ।
- এক রাজ্য থেকে অন্য রাজ্যে বিষয়বস্তুর উপর চাক্ষুষ প্রভাব অ্যানিমেট করুন ।
- ইনপুট প্রতিক্রিয়া স্ক্রোল .
- সঠিক জায়গায় দক্ষতার সাথে ইনপুট রুট করুন যাতে বিকাশকারী স্ক্রিপ্ট এবং অন্যান্য সাবসিস্টেম প্রতিক্রিয়া জানাতে পারে।
রেন্ডার করার বিষয়বস্তু হল প্রতিটি ব্রাউজার ট্যাবের জন্য ফ্রেমের একটি গাছ, সাথে ব্রাউজার ইন্টারফেস। এবং, টাচ স্ক্রিন, মাউস, কীবোর্ড এবং অন্যান্য হার্ডওয়্যার ডিভাইস থেকে কাঁচা ইনপুট ইভেন্টের একটি প্রবাহ।
প্রতিটি ফ্রেম অন্তর্ভুক্ত:
- DOM রাজ্য
- সিএসএস
- ক্যানভাস
- বাহ্যিক সম্পদ, যেমন ছবি, ভিডিও, ফন্ট, এবং SVG
একটি ফ্রেম হল একটি HTML নথি, প্লাস এর URL। একটি ব্রাউজার ট্যাবে লোড করা একটি ওয়েব পৃষ্ঠার একটি শীর্ষ-স্তরের ফ্রেম, শীর্ষ-স্তরের নথিতে অন্তর্ভুক্ত প্রতিটি আইফ্রেমের জন্য চাইল্ড ফ্রেম এবং তাদের পুনরাবৃত্ত আইফ্রেমের বংশধর রয়েছে৷
একটি ভিজ্যুয়াল ইফেক্ট হল একটি গ্রাফিক্যাল অপারেশন যা একটি বিটম্যাপে প্রয়োগ করা হয়, যেমন স্ক্রোল, ট্রান্সফর্ম, ক্লিপ, ফিল্টার, অস্বচ্ছতা বা মিশ্রণ।
স্থাপত্য উপাদান
রেন্ডারিংএনজি-তে, এই কাজগুলি যৌক্তিকভাবে বিভিন্ন স্তর এবং কোড উপাদানগুলিতে বিভক্ত করা হয়। উপাদানগুলি সেই থ্রেডগুলির মধ্যে বিভিন্ন CPU প্রক্রিয়া, থ্রেড এবং সাব-কম্পোনেন্টগুলিতে শেষ হয়। প্রতিটি ওয়েব কন্টেন্টের জন্য নির্ভরযোগ্যতা , মাপযোগ্য কর্মক্ষমতা এবং এক্সটেনসিবিলিটি অর্জনে গুরুত্বপূর্ণ ভূমিকা পালন করে।
রেন্ডারিং পাইপলাইন গঠন
রেন্ডারিং একটি পাইপলাইনে এগিয়ে যায় এবং পথ ধরে তৈরি করা বেশ কয়েকটি পর্যায় এবং শিল্পকর্ম। প্রতিটি পর্যায় কোড প্রতিনিধিত্ব করে যা রেন্ডারিংয়ের মধ্যে একটি ভাল-সংজ্ঞায়িত কাজ করে। আর্টিফ্যাক্টগুলি হল ডেটা স্ট্রাকচার যা স্টেজের ইনপুট বা আউটপুট।
পর্যায়গুলি হল:
- অ্যানিমেট: গণনা করা শৈলী পরিবর্তন করুন এবং ঘোষণামূলক টাইমলাইনের উপর ভিত্তি করে সময়ের সাথে সাথে সম্পত্তি গাছ পরিবর্তন করুন।
- শৈলী: DOM-এ CSS প্রয়োগ করুন এবং গণনা করা শৈলী তৈরি করুন।
- লেআউট: স্ক্রিনে DOM উপাদানগুলির আকার এবং অবস্থান নির্ধারণ করুন এবং অপরিবর্তনীয় টুকরো ট্রি তৈরি করুন।
- প্রি-পেইন্ট: প্রপার্টি ট্রি গণনা করুন এবং যেকোন বিদ্যমান ডিসপ্লে তালিকা এবং GPU টেক্সচার টাইলসকে যথাযথভাবে বাতিল করুন ।
- স্ক্রোল: প্রোপার্টি ট্রি মিউটেটিং করে ডকুমেন্টের স্ক্রোল অফসেট এবং স্ক্রোলযোগ্য DOM উপাদান আপডেট করুন।
- পেইন্ট: একটি ডিসপ্লে তালিকা গণনা করুন যা বর্ণনা করে কিভাবে DOM থেকে GPU টেক্সচার টাইলস রাস্টার করা যায়।
- প্রতিশ্রুতি: কম্পোজিটর থ্রেডে সম্পত্তি গাছ এবং প্রদর্শন তালিকা অনুলিপি করুন।
- লেয়ারাইজ করুন: স্বাধীন রাস্টারাইজেশন এবং অ্যানিমেশনের জন্য ডিসপ্লে তালিকাকে একটি সংমিশ্রিত স্তর তালিকায় বিভক্ত করুন।
- রাস্টার, ডিকোড এবং পেইন্ট ওয়ার্কলেট: ডিসপ্লে তালিকা, এনকোড করা ছবি এবং পেইন্ট ওয়ার্কলেট কোড, যথাক্রমে, GPU টেক্সচার টাইলগুলিতে পরিণত করুন।
- সক্রিয় করুন: একটি কম্পোজিটর ফ্রেম তৈরি করুন যা উপস্থাপন করে যে কোনও ভিজ্যুয়াল এফেক্টের সাথে একসাথে GPU টাইলগুলি কীভাবে স্ক্রিনে আঁকতে হয় এবং অবস্থান করতে হয়।
- মোট: সমস্ত দৃশ্যমান কম্পোজিটর ফ্রেম থেকে কম্পোজিটর ফ্রেমগুলিকে একক, গ্লোবাল কম্পোজিটর ফ্রেমে একত্রিত করুন৷
- আঁকা: অন-স্ক্রীনে পিক্সেল তৈরি করতে GPU-তে সমষ্টিগত কম্পোজিটর ফ্রেমটি চালান।
রেন্ডারিং পাইপলাইনের পর্যায়গুলি প্রয়োজন না হলে এড়িয়ে যেতে পারে। উদাহরণস্বরূপ, ভিজ্যুয়াল এফেক্টের অ্যানিমেশন এবং স্ক্রোল লেআউট, প্রি-পেইন্ট এবং পেইন্ট এড়িয়ে যেতে পারে। এই কারণে অ্যানিমেশন এবং স্ক্রোল চিত্রটিতে হলুদ এবং সবুজ বিন্দু দিয়ে চিহ্নিত করা হয়েছে। যদি লেআউট, প্রি-পেইন্ট এবং পেইন্টগুলি ভিজ্যুয়াল এফেক্টের জন্য এড়িয়ে যাওয়া যায়, তাহলে সেগুলি সম্পূর্ণভাবে কম্পোজিটর থ্রেডে চালানো যেতে পারে এবং মূল থ্রেডটি এড়িয়ে যেতে পারে।
ব্রাউজার UI রেন্ডারিং এখানে সরাসরি চিত্রিত করা হয়নি, তবে এই একই পাইপলাইনের একটি সরলীকৃত সংস্করণ হিসাবে ভাবা যেতে পারে (এবং বাস্তবে এটির বাস্তবায়ন কোডের বেশিরভাগ ভাগ করে)। ভিডিও (এছাড়াও সরাসরি চিত্রিত করা হয় না) সাধারণত স্বাধীন কোডের সাথে রেন্ডার করে যা ফ্রেমগুলিকে GPU টেক্সচার টাইলগুলিতে ডিকোড করে যা তারপর কম্পোজিটর ফ্রেমে প্লাগ করা হয় এবং ড্র ধাপে।
প্রক্রিয়া এবং থ্রেড গঠন
CPU প্রসেস
একাধিক CPU প্রসেসের ব্যবহার সাইট এবং ব্রাউজার স্টেট থেকে পারফরম্যান্স এবং নিরাপত্তা বিচ্ছিন্নতা এবং GPU হার্ডওয়্যার থেকে স্থিতিশীলতা এবং নিরাপত্তা বিচ্ছিন্নতা অর্জন করে।