পূর্ববর্তী পোস্টে , আমি রেন্ডারিংএনজি আর্কিটেকচার লক্ষ্য এবং মূল বৈশিষ্ট্যগুলির একটি ওভারভিউ দিয়েছি। এই পোস্টটি ব্যাখ্যা করবে কিভাবে এর কম্পোনেন্ট টুকরা সেট আপ করা হয় এবং কিভাবে রেন্ডারিং পাইপলাইন তাদের মধ্য দিয়ে প্রবাহিত হয়।
সর্বোচ্চ স্তর থেকে শুরু করে এবং সেখান থেকে ড্রিল করা, রেন্ডারিংয়ের কাজগুলি হল:
- স্ক্রীনে পিক্সেলে বিষয়বস্তু রেন্ডার করুন ।
- এক রাজ্য থেকে অন্য রাজ্যে বিষয়বস্তুর উপর চাক্ষুষ প্রভাব অ্যানিমেট করুন ।
- ইনপুট প্রতিক্রিয়া স্ক্রোল .
- সঠিক জায়গায় দক্ষতার সাথে ইনপুট রুট করুন যাতে বিকাশকারী স্ক্রিপ্ট এবং অন্যান্য সাবসিস্টেম প্রতিক্রিয়া জানাতে পারে।
রেন্ডার করার বিষয়বস্তু হল প্রতিটি ব্রাউজার ট্যাবের জন্য ফ্রেমের একটি গাছ, সাথে ব্রাউজার UI। এবং, টাচ স্ক্রিন, মাউস, কীবোর্ড এবং অন্যান্য হার্ডওয়্যার ডিভাইস থেকে কাঁচা ইনপুট ইভেন্টের একটি প্রবাহ।
প্রতিটি ফ্রেম অন্তর্ভুক্ত:
- DOM রাজ্য
- সিএসএস
- ক্যানভাস
- বাহ্যিক সম্পদ, যেমন ছবি, ভিডিও, ফন্ট, এবং SVG
একটি ফ্রেম হল একটি HTML নথি, প্লাস এর URL। একটি ব্রাউজার ট্যাবে লোড করা একটি ওয়েব পৃষ্ঠার একটি শীর্ষ-স্তরের ফ্রেম, শীর্ষ-স্তরের নথিতে অন্তর্ভুক্ত প্রতিটি আইফ্রেমের জন্য চাইল্ড ফ্রেম এবং তাদের পুনরাবৃত্ত আইফ্রেমের বংশধর রয়েছে৷
একটি ভিজ্যুয়াল ইফেক্ট হল একটি গ্রাফিক্যাল অপারেশন যা একটি বিটম্যাপে প্রয়োগ করা হয়, যেমন স্ক্রোল, ট্রান্সফর্ম, ক্লিপ, ফিল্টার, অস্বচ্ছতা বা মিশ্রণ।
স্থাপত্য উপাদান
রেন্ডারিংএনজি-তে, এই কাজগুলি যৌক্তিকভাবে বিভিন্ন স্তর এবং কোড উপাদানগুলিতে বিভক্ত করা হয়। উপাদানগুলি সেই থ্রেডগুলির মধ্যে বিভিন্ন CPU প্রক্রিয়া, থ্রেড এবং সাব-কম্পোনেন্টগুলিতে শেষ হয়। প্রতিটি ওয়েব কন্টেন্টের জন্য নির্ভরযোগ্যতা , মাপযোগ্য কর্মক্ষমতা এবং এক্সটেনসিবিলিটি অর্জনে গুরুত্বপূর্ণ ভূমিকা পালন করে।
রেন্ডারিং পাইপলাইন গঠন
রেন্ডারিং একটি পাইপলাইনে এগিয়ে যায় এবং পথ ধরে তৈরি করা বেশ কয়েকটি পর্যায় এবং শিল্পকর্ম। প্রতিটি পর্যায় কোড প্রতিনিধিত্ব করে যা রেন্ডারিংয়ের মধ্যে একটি ভাল-সংজ্ঞায়িত কাজ করে। আর্টিফ্যাক্টগুলি হল ডেটা স্ট্রাকচার যা স্টেজের ইনপুট বা আউটপুট; ডায়াগ্রামে ইনপুট বা আউটপুট তীর দিয়ে নির্দেশিত হয়।
এই ব্লগ পোস্টটি নিদর্শন সম্পর্কে অনেক বিস্তারিতভাবে যাবে না; যা পরবর্তী পোস্টে আলোচনা করা হবে: মূল ডেটা স্ট্রাকচার এবং রেন্ডারিংএনজিতে তাদের ভূমিকা ।
পাইপলাইন পর্যায়
পূর্ববর্তী ডায়াগ্রামে, পর্যায়গুলিকে রং দিয়ে উল্লেখ করা হয়েছে যা নির্দেশ করে যে তারা কোন থ্রেড বা প্রক্রিয়াটি চালায়:
- সবুজ: রেন্ডার প্রক্রিয়া প্রধান থ্রেড
- হলুদ: রেন্ডার প্রসেস কম্পোজিটর
- কমলা: যেমন প্রক্রিয়া
কিছু ক্ষেত্রে তারা পরিস্থিতির উপর নির্ভর করে একাধিক জায়গায় কার্যকর করতে পারে, যার কারণে কিছুর দুটি রঙ রয়েছে।
পর্যায়গুলি হল:
- অ্যানিমেট: গণনা করা শৈলী পরিবর্তন করুন এবং ঘোষণামূলক টাইমলাইনের উপর ভিত্তি করে সময়ের সাথে সাথে সম্পত্তি গাছ পরিবর্তন করুন।
- শৈলী: DOM-এ CSS প্রয়োগ করুন এবং গণনা করা শৈলী তৈরি করুন।
- লেআউট: স্ক্রিনে DOM উপাদানগুলির আকার এবং অবস্থান নির্ধারণ করুন এবং অপরিবর্তনীয় টুকরো ট্রি তৈরি করুন।
- প্রি-পেইন্ট: প্রপার্টি ট্রি গণনা করুন এবং যেকোন বিদ্যমান ডিসপ্লে তালিকা এবং GPU টেক্সচার টাইলসকে যথাযথভাবে বাতিল করুন ।
- স্ক্রোল: প্রোপার্টি ট্রি মিউটেটিং করে ডকুমেন্টের স্ক্রোল অফসেট এবং স্ক্রোলযোগ্য DOM উপাদান আপডেট করুন।
- পেইন্ট: একটি ডিসপ্লে তালিকা গণনা করুন যা বর্ণনা করে কিভাবে DOM থেকে GPU টেক্সচার টাইলস রাস্টার করা যায়।
- প্রতিশ্রুতি: কম্পোজিটর থ্রেডে সম্পত্তি গাছ এবং প্রদর্শন তালিকা অনুলিপি করুন।
- লেয়ারাইজ করুন: স্বাধীন রাস্টারাইজেশন এবং অ্যানিমেশনের জন্য ডিসপ্লে তালিকাকে একটি সংমিশ্রিত স্তর তালিকায় বিভক্ত করুন।
- রাস্টার, ডিকোড এবং পেইন্ট ওয়ার্কলেট: ডিসপ্লে তালিকা, এনকোড করা ছবি এবং পেইন্ট ওয়ার্কলেট কোড, যথাক্রমে, GPU টেক্সচার টাইলগুলিতে পরিণত করুন।
- সক্রিয় করুন: একটি কম্পোজিটর ফ্রেম তৈরি করুন যা উপস্থাপন করে যে কোনও ভিজ্যুয়াল এফেক্টের সাথে একসাথে GPU টাইলগুলি কীভাবে স্ক্রিনে আঁকতে হয় এবং অবস্থান করতে হয়।
- মোট: সমস্ত দৃশ্যমান কম্পোজিটর ফ্রেম থেকে কম্পোজিটর ফ্রেমগুলিকে একক, গ্লোবাল কম্পোজিটর ফ্রেমে একত্রিত করুন৷
- আঁকা: অন-স্ক্রীনে পিক্সেল তৈরি করতে GPU-তে সমষ্টিগত কম্পোজিটর ফ্রেমটি চালান।
রেন্ডারিং পাইপলাইনের পর্যায়গুলি প্রয়োজন না হলে এড়িয়ে যেতে পারে। উদাহরণস্বরূপ, ভিজ্যুয়াল এফেক্টের অ্যানিমেশন এবং স্ক্রোল লেআউট, প্রি-পেইন্ট এবং পেইন্ট এড়িয়ে যেতে পারে। এই কারণে অ্যানিমেশন এবং স্ক্রোল চিত্রটিতে হলুদ এবং সবুজ বিন্দু দিয়ে চিহ্নিত করা হয়েছে। যদি লেআউট, প্রি-পেইন্ট এবং পেইন্টগুলি ভিজ্যুয়াল এফেক্টের জন্য এড়িয়ে যাওয়া যায়, তাহলে সেগুলি সম্পূর্ণভাবে কম্পোজিটর থ্রেডে চালানো যেতে পারে এবং মূল থ্রেডটি এড়িয়ে যেতে পারে।
ব্রাউজার UI রেন্ডারিং এখানে সরাসরি চিত্রিত করা হয়নি, তবে এই একই পাইপলাইনের একটি সরলীকৃত সংস্করণ হিসাবে ভাবা যেতে পারে (এবং বাস্তবে এটির বাস্তবায়ন কোডের বেশিরভাগ ভাগ করে)। ভিডিও (এছাড়াও সরাসরি চিত্রিত করা হয় না) সাধারণত স্বাধীন কোডের মাধ্যমে রেন্ডার হয় যা ফ্রেমগুলিকে GPU টেক্সচার টাইলগুলিতে ডিকোড করে যা তারপর কম্পোজিটর ফ্রেমে প্লাগ করা হয় এবং ড্র ধাপে।
প্রক্রিয়া এবং থ্রেড গঠন
CPU প্রসেস
একাধিক CPU প্রসেসের ব্যবহার সাইট এবং ব্রাউজার স্টেট থেকে পারফরম্যান্স এবং নিরাপত্তা বিচ্ছিন্নতা এবং GPU হার্ডওয়্যার থেকে স্থিতিশীলতা এবং নিরাপত্তা বিচ্ছিন্নতা অর্জন করে।
- রেন্ডার প্রক্রিয়া একটি একক সাইট এবং ট্যাব সংমিশ্রণের জন্য রেন্ডার, অ্যানিমেট, স্ক্রোল এবং রুট ইনপুট দেয়। অনেক রেন্ডার প্রক্রিয়া আছে.
- ব্রাউজার প্রক্রিয়াটি ব্রাউজার UI (ইউআরএল বার, ট্যাব শিরোনাম এবং আইকন সহ) এর জন্য রেন্ডার, অ্যানিমেট এবং রুট ইনপুট দেয় এবং উপযুক্ত রেন্ডার প্রক্রিয়াতে অবশিষ্ট সমস্ত ইনপুটকে রুট করে। ঠিক একটি ব্রাউজার প্রক্রিয়া আছে.
- ভিজ প্রক্রিয়া একাধিক রেন্ডার প্রক্রিয়া এবং ব্রাউজার প্রক্রিয়া থেকে সংমিশ্রণকে একত্রিত করে। এটি জিপিইউ ব্যবহার করে রাস্টার এবং আঁকে। ঠিক একটি Viz প্রক্রিয়া আছে.
বিভিন্ন সাইট সবসময় বিভিন্ন রেন্ডার প্রক্রিয়ায় শেষ হয়। (বাস্তবে, সর্বদা ডেস্কটপে; যখন সম্ভব মোবাইলে । আমি নীচে "সর্বদা" লিখব, তবে এই সতর্কতা সর্বত্র প্রযোজ্য।)
একই সাইটের একাধিক ব্রাউজার ট্যাব বা উইন্ডো সাধারণত বিভিন্ন রেন্ডার প্রক্রিয়ায় যায়, যদি না ট্যাবগুলি সম্পর্কিত হয় (একটি অন্যটি খুলছে )। ডেস্কটপে শক্তিশালী মেমরির চাপের অধীনে ক্রোমিয়াম একই সাইট থেকে একাধিক ট্যাবকে একই রেন্ডার প্রক্রিয়াতে রাখতে পারে এমনকি সম্পর্কিত না হলেও।
একটি একক ব্রাউজার ট্যাবের মধ্যে, বিভিন্ন সাইটের ফ্রেমগুলি সবসময় একে অপরের থেকে বিভিন্ন রেন্ডার প্রক্রিয়ায় থাকে, কিন্তু একই সাইটের ফ্রেমগুলি সর্বদা একই রেন্ডার প্রক্রিয়ায় থাকে। রেন্ডারিংয়ের দৃষ্টিকোণ থেকে, একাধিক রেন্ডার প্রক্রিয়ার গুরুত্বপূর্ণ সুবিধা হল ক্রস-সাইট আইফ্রেম এবং ট্যাবগুলি একে অপরের থেকে পারফরম্যান্স বিচ্ছিন্নতা অর্জন করে। উপরন্তু, অরিজিনরা আরও বেশি বিচ্ছিন্নতা বেছে নিতে পারে।
সমস্ত ক্রোমিয়ামের জন্য ঠিক একটি ভিজ প্রক্রিয়া রয়েছে৷ সব পরে, সাধারণত শুধুমাত্র একটি GPU এবং স্ক্রীন আঁকা হয়. জিপিইউ ড্রাইভার বা হার্ডওয়্যারে বাগ মোকাবেলায় স্থায়িত্বের জন্য ভিজকে নিজস্ব প্রক্রিয়ায় আলাদা করা ভালো। এটি নিরাপত্তা বিচ্ছিন্নতার জন্যও ভাল, যা Vulkan এর মতো GPU API-এর জন্য গুরুত্বপূর্ণ। এটি সাধারণভাবে নিরাপত্তার জন্যও গুরুত্বপূর্ণ।
যেহেতু ব্রাউজারে অনেকগুলি ট্যাব এবং উইন্ডো থাকতে পারে এবং সেগুলির সবকটিতেই আঁকার জন্য ব্রাউজার UI পিক্সেল রয়েছে, আপনি ভাবতে পারেন: কেন ঠিক একটি ব্রাউজার প্রক্রিয়া আছে? কারণ হল যে তাদের মধ্যে শুধুমাত্র একটি সময়ে ফোকাস করা হয়; আসলে, অদৃশ্যমান ব্রাউজার ট্যাবগুলি বেশিরভাগই নিষ্ক্রিয় করা হয় এবং তাদের সমস্ত GPU মেমরি ড্রপ করে। যাইহোক, জটিল ব্রাউজার UI রেন্ডারিং বৈশিষ্ট্যগুলি ক্রমবর্ধমানভাবে রেন্ডার প্রক্রিয়াগুলিতে প্রয়োগ করা হচ্ছে ( WebUI নামে পরিচিত)। এটি পারফরম্যান্স বিচ্ছিন্নতার কারণে নয়, তবে Chromium-এর ওয়েব রেন্ডারিং ইঞ্জিনের ব্যবহারের সহজতার সুবিধা নেওয়ার জন্য।
পুরানো অ্যান্ড্রয়েড ডিভাইসগুলিতে , রেন্ডার এবং ব্রাউজার প্রক্রিয়া শেয়ার করা হয় যখন একটি WebView ব্যবহার করা হয় (এটি সাধারণত Android-এ Chromium-এ প্রযোজ্য হয় না, শুধুমাত্র WebView)। ওয়েবভিউতে, ব্রাউজার প্রক্রিয়াটি এম্বেডিং অ্যাপের সাথেও ভাগ করা হয় এবং ওয়েবভিউতে শুধুমাত্র একটি রেন্ডার প্রক্রিয়া রয়েছে।
কখনও কখনও সুরক্ষিত ভিডিও বিষয়বস্তু ডিকোড করার জন্য একটি ইউটিলিটি প্রক্রিয়া আছে। এই প্রক্রিয়া উপরে চিত্রিত করা হয় না.
থ্রেড
ধীরগতির কাজ, পাইপলাইন সমান্তরালকরণ এবং একাধিক বাফারিং সত্ত্বেও থ্রেডগুলি কার্যক্ষমতা বিচ্ছিন্নতা এবং প্রতিক্রিয়াশীলতা অর্জনে সহায়তা করে।
- প্রধান থ্রেড স্ক্রিপ্ট, রেন্ডারিং ইভেন্ট লুপ, নথির জীবনচক্র, হিট টেস্টিং, স্ক্রিপ্ট ইভেন্ট প্রেরণ, এবং HTML, CSS এবং অন্যান্য ডেটা ফরম্যাটের পার্সিং চালায়।
- প্রধান থ্রেড সাহায্যকারীরা ইমেজ বিটম্যাপ এবং ব্লব তৈরি করার মতো কাজগুলি সম্পাদন করে যার জন্য এনকোডিং বা ডিকোডিং প্রয়োজন।
- ওয়েব ওয়ার্কাররা স্ক্রিপ্ট চালায়, এবং অফস্ক্রিন ক্যানভাসের জন্য একটি রেন্ডারিং ইভেন্ট লুপ।
- কম্পোজিটর থ্রেড ইনপুট ইভেন্টগুলি প্রক্রিয়া করে, ওয়েব সামগ্রীর স্ক্রোলিং এবং অ্যানিমেশনগুলি সম্পাদন করে, ওয়েব সামগ্রীর সর্বোত্তম স্তরায়ন গণনা করে এবং চিত্র ডিকোড, পেইন্ট ওয়ার্কলেট এবং রাস্টার কাজগুলি সমন্বয় করে৷
- কম্পোজিটর থ্রেড হেল্পাররা ভিজ রাস্টার টাস্ক সমন্বয় করে এবং ইমেজ ডিকোড টাস্ক, পেইন্ট ওয়ার্কলেট এবং ফলব্যাক রাস্টার চালায়।
- মিডিয়া, ডিমুক্সার বা অডিও আউটপুট থ্রেডগুলি ভিডিও এবং অডিও স্ট্রিমগুলিকে ডিকোড, প্রক্রিয়া এবং সিঙ্ক্রোনাইজ করে। (মনে রাখবেন যে ভিডিওটি প্রধান রেন্ডারিং পাইপলাইনের সাথে সমান্তরালভাবে কার্যকর হয়।)
প্রধান এবং কম্পোজিটর থ্রেডগুলি পৃথক করা অ্যানিমেশনের কার্যক্ষমতা বিচ্ছিন্নকরণ এবং প্রধান থ্রেডের কাজ থেকে স্ক্রল করার জন্য অত্যন্ত গুরুত্বপূর্ণ।
প্রতি রেন্ডার প্রক্রিয়ায় শুধুমাত্র একটি প্রধান থ্রেড আছে, যদিও একই সাইট থেকে একাধিক ট্যাব বা ফ্রেম একই প্রক্রিয়ায় শেষ হতে পারে। যাইহোক, বিভিন্ন ব্রাউজার API-এ সম্পাদিত কাজ থেকে কর্মক্ষমতা বিচ্ছিন্নতা রয়েছে। উদাহরণস্বরূপ, ক্যানভাস এপিআই-এ ইমেজ বিটম্যাপ এবং ব্লব তৈরি করা একটি প্রধান থ্রেড হেল্পার থ্রেডে চলে।
একইভাবে, প্রতি রেন্ডার প্রক্রিয়ায় শুধুমাত্র একটি কম্পোজিটর থ্রেড রয়েছে। এটি সাধারণত একটি সমস্যা নয় যে শুধুমাত্র একটি আছে, কারণ কম্পোজিটর থ্রেডের সমস্ত ব্যয়বহুল ক্রিয়াকলাপগুলি হয় কম্পোজিটর ওয়ার্কার থ্রেড বা ভিজ প্রক্রিয়াতে অর্পণ করা হয় এবং এই কাজটি ইনপুট রাউটিং, স্ক্রলিং বা অ্যানিমেশনের সাথে সমান্তরালভাবে করা যেতে পারে। . কম্পোজিটর ওয়ার্কার থ্রেড কোঅর্ডিনেট টাস্কগুলি ভিজ প্রক্রিয়ায় চলে, কিন্তু সব জায়গায় GPU ত্বরণ ক্রোমিয়ামের নিয়ন্ত্রণের বাইরের কারণে ব্যর্থ হতে পারে, যেমন ড্রাইভার বাগ৷ এই পরিস্থিতিতে কর্মী থ্রেড CPU-তে একটি ফলব্যাক মোডে কাজ করবে।
কম্পোজিটর ওয়ার্কার থ্রেডের সংখ্যা ডিভাইসের ক্ষমতার উপর নির্ভর করে। উদাহরণস্বরূপ, ডেস্কটপগুলি সাধারণত বেশি থ্রেড ব্যবহার করবে, কারণ তাদের বেশি CPU কোর রয়েছে এবং মোবাইল ডিভাইসের তুলনায় কম ব্যাটারি-সংবদ্ধ। এটি স্কেলিং আপ এবং ডাউন স্কেলিং এর একটি উদাহরণ।
এটি লক্ষ্য করাও আকর্ষণীয় যে রেন্ডার প্রক্রিয়া থ্রেডিং আর্কিটেকচারটি তিনটি ভিন্ন অপ্টিমাইজেশন প্যাটার্নের একটি অ্যাপ্লিকেশন:
- হেল্পার থ্রেড: একই সাথে ঘটতে থাকা অন্যান্য অনুরোধগুলির জন্য প্যারেন্ট থ্রেডকে প্রতিক্রিয়াশীল রাখতে অতিরিক্ত থ্রেডগুলিতে দীর্ঘ-চলমান সাবটাস্কগুলি পাঠানো। প্রধান থ্রেড হেল্পার এবং কম্পোজিটর হেল্পার থ্রেডগুলি এই কৌশলটির ভাল উদাহরণ।
- একাধিক বাফারিং : রেন্ডারিংয়ের লেটেন্সি লুকানোর জন্য নতুন কন্টেন্ট রেন্ডার করার সময় পূর্বে রেন্ডার করা কন্টেন্ট দেখানো। কম্পোজিটর থ্রেড এই কৌশল ব্যবহার করে।
- পাইপলাইন সমান্তরালকরণ: একযোগে একাধিক জায়গায় রেন্ডারিং পাইপলাইন চালানো। এইভাবে স্ক্রলিং এবং অ্যানিমেশন দ্রুত হতে পারে, এমনকি যদি একটি প্রধান থ্রেড রেন্ডারিং আপডেট ঘটছে, কারণ স্ক্রোল এবং অ্যানিমেশন সমান্তরালভাবে চলতে পারে।
ব্রাউজার প্রক্রিয়া
- রেন্ডার এবং কম্পোজিটিং থ্রেড ব্রাউজার UI-তে ইনপুটকে সাড়া দেয়, সঠিক রেন্ডার প্রক্রিয়ায় অন্যান্য ইনপুটকে রুট করে; ব্রাউজার UI তৈরি করে এবং পেইন্ট করে।
- রেন্ডার এবং কম্পোজিটিং থ্রেড সহায়ক ইমেজ ডিকোড কাজ এবং ফলব্যাক রাস্টার বা ডিকোড চালায়।
ব্রাউজার প্রক্রিয়া রেন্ডার এবং কম্পোজিটিং থ্রেড একটি রেন্ডার প্রক্রিয়ার কোড এবং কার্যকারিতার অনুরূপ, প্রধান থ্রেড এবং কম্পোজিটর থ্রেড একত্রিত করা ছাড়া। এই ক্ষেত্রে শুধুমাত্র একটি থ্রেড প্রয়োজন কারণ দীর্ঘ প্রধান থ্রেড কাজগুলি থেকে পারফরম্যান্স বিচ্ছিন্ন করার কোন প্রয়োজন নেই, যেহেতু ডিজাইন দ্বারা কোনটি নেই।
যেমন প্রক্রিয়া
- GPU প্রধান থ্রেড রাস্টারগুলি GPU টেক্সচার টাইলগুলিতে তালিকা এবং ভিডিও ফ্রেমগুলি প্রদর্শন করে এবং কম্পোজিটর ফ্রেমগুলিকে স্ক্রিনে আঁকে।
- ডিসপ্লে কম্পোজিটর থ্রেড প্রতিটি রেন্ডার প্রক্রিয়া থেকে কম্পোজিটিংকে একত্রিত করে এবং অপ্টিমাইজ করে, সাথে ব্রাউজার প্রক্রিয়া, স্ক্রিনে উপস্থাপনের জন্য একটি একক কম্পোজিটর ফ্রেমে।
রাস্টার এবং ড্র সাধারণত একই থ্রেডে ঘটে, কারণ উভয়ই জিপিইউ রিসোর্সের উপর নির্ভর করে এবং জিপিইউ-এর মাল্টি-থ্রেডেড ব্যবহার নির্ভরযোগ্যভাবে করা কঠিন (জিপিইউ-তে সহজ মাল্টি-থ্রেড অ্যাক্সেস নতুন ভলকান স্ট্যান্ডার্ড বিকাশের জন্য একটি প্রেরণা। ) অ্যান্ড্রয়েড ওয়েবভিউতে, ওয়েবভিউগুলি কীভাবে একটি নেটিভ অ্যাপে এম্বেড করা হয় তার কারণে অঙ্কনের জন্য একটি পৃথক OS-স্তরের রেন্ডার থ্রেড রয়েছে৷ অন্যান্য প্ল্যাটফর্মে সম্ভবত ভবিষ্যতে এমন একটি থ্রেড থাকবে।
ডিসপ্লে কম্পোজিটরটি একটি ভিন্ন থ্রেডে রয়েছে কারণ এটিকে সর্বদা প্রতিক্রিয়াশীল হতে হবে এবং GPU প্রধান থ্রেডে স্লোডাউনের সম্ভাব্য কোনো উৎসে ব্লক করা উচিত নয়। GPU প্রধান থ্রেডে ধীরগতির একটি কারণ হল নন-ক্রোমিয়াম কোডে কল করা, যেমন বিক্রেতা-নির্দিষ্ট GPU ড্রাইভার, যা হার্ড-টু-অনুমান করার উপায়ে ধীর হতে পারে।
উপাদান গঠন
প্রতিটি রেন্ডার প্রক্রিয়া প্রধান বা কম্পোজিটর থ্রেডের মধ্যে, যৌক্তিক সফ্টওয়্যার উপাদান রয়েছে যা কাঠামোগত উপায়ে একে অপরের সাথে যোগাযোগ করে।
রেন্ডার প্রক্রিয়া প্রধান থ্রেড উপাদান
- ব্লিঙ্ক রেন্ডারার:
- স্থানীয় ফ্রেম ট্রি ফ্র্যাগমেন্ট স্থানীয় ফ্রেমের ট্রি এবং ফ্রেমের মধ্যে DOM প্রতিনিধিত্ব করে।
- DOM এবং Canvas APIs কম্পোনেন্টে এই সমস্ত API এর বাস্তবায়ন রয়েছে।
- ডকুমেন্ট লাইফসাইকেল রানার রেন্ডারিং পাইপলাইন ধাপ পর্যন্ত এবং কমিট স্টেপ সহ এক্সিকিউট করে।
- ইনপুট ইভেন্ট হিট টেস্টিং এবং ডিসপ্যাচিং কম্পোনেন্ট কোন ইভেন্ট দ্বারা কোন DOM এলিমেন্টকে টার্গেট করা হয়েছে তা খুঁজে বের করতে হিট টেস্ট চালায় এবং ইনপুট ইভেন্ট ডিসপ্যাচিং অ্যালগরিদম এবং ডিফল্ট আচরণ চালায়।
- রেন্ডারিং ইভেন্ট লুপ শিডিউলার এবং রানার সিদ্ধান্ত নেয় ইভেন্ট লুপে কী চালাতে হবে এবং কখন। এটি ডিভাইস ডিসপ্লের সাথে মিলে যাওয়া একটি ক্যাডেন্সে রেন্ডারিং করার সময়সূচী করে।
স্থানীয় ফ্রেম গাছের টুকরোগুলি সম্পর্কে চিন্তা করা কিছুটা জটিল। মনে রাখবেন যে একটি ফ্রেম ট্রি হল মূল পৃষ্ঠা এবং এর চাইল্ড আইফ্রেমগুলি, পুনরাবৃত্তিমূলকভাবে। একটি ফ্রেম একটি রেন্ডার প্রক্রিয়ার স্থানীয় হয় যদি এটি সেই প্রক্রিয়ায় রেন্ডার করা হয় এবং অন্যথায় এটি দূরবর্তী হয়।
আপনি তাদের রেন্ডার প্রক্রিয়া অনুযায়ী রঙিন ফ্রেম কল্পনা করতে পারেন। পূর্ববর্তী চিত্রে, সবুজ বৃত্তগুলি একটি রেন্ডার প্রক্রিয়ার সমস্ত ফ্রেম; কমলা এক সেকেন্ডে, আর নীল এক তৃতীয়াংশে।
একটি স্থানীয় ফ্রেম ট্রি খণ্ডটি একটি ফ্রেম গাছের একই রঙের একটি সংযুক্ত উপাদান। ছবিতে চারটি স্থানীয় ফ্রেম ট্রি রয়েছে: সাইট A-এর জন্য দুটি, সাইট B-এর জন্য একটি এবং সাইট C-এর জন্য একটি। প্রতিটি স্থানীয় ফ্রেম ট্রি তার নিজস্ব ব্লিঙ্ক রেন্ডারার উপাদান পায়। একটি স্থানীয় ফ্রেম ট্রির ব্লিঙ্ক রেন্ডারার অন্যান্য স্থানীয় ফ্রেম ট্রিগুলির মতো একই রেন্ডার প্রক্রিয়ায় থাকতে পারে বা নাও হতে পারে (এটি পূর্বে বর্ণিত রেন্ডার প্রক্রিয়াগুলি যেভাবে নির্বাচিত হয়েছে তার দ্বারা নির্ধারিত হয়)।
রেন্ডার প্রক্রিয়া কম্পোজিটর থ্রেড গঠন
রেন্ডার প্রক্রিয়া কম্পোজিটর উপাদানগুলির মধ্যে রয়েছে:
- একটি ডেটা হ্যান্ডলার যা একটি সংমিশ্রিত স্তর তালিকা, প্রদর্শন তালিকা এবং সম্পত্তি গাছ বজায় রাখে।
- একটি লাইফসাইকেল রানার যে অ্যানিমেট, স্ক্রোল, কম্পোজিট, রাস্টার এবং রেন্ডারিং পাইপলাইনের ধাপগুলি ডিকোড এবং সক্রিয় করে। (মনে রাখবেন যে অ্যানিমেট এবং স্ক্রোল প্রধান থ্রেড এবং কম্পোজিটর উভয় ক্ষেত্রেই ঘটতে পারে।)
- একটি ইনপুট এবং হিট টেস্ট হ্যান্ডলার ইনপুট প্রসেসিং করে এবং কম্পোজিট লেয়ারের রেজোলিউশনে হিট টেস্টিং করে, কম্পোজিটর থ্রেডে স্ক্রোলিং ইঙ্গিত চালানো যায় কিনা এবং কোন রেন্ডার প্রসেস হিট টেস্টগুলি লক্ষ্য করা উচিত তা নির্ধারণ করতে।
অনুশীলনে একটি উদাহরণ
এখন একটি উদাহরণ দিয়ে আর্কিটেকচারকে কংক্রিট করা যাক। এই উদাহরণে তিনটি ট্যাব আছে:
ট্যাব 1: foo.com
<html>
<iframe id=one src="foo.com/other-url"></iframe>
<iframe id=two src="bar.com"></iframe>
</html>
ট্যাব 2: bar.com
<html>
…
</html>
ট্যাব 3: baz.com html <html> … </html>
এই ট্যাবগুলির জন্য প্রক্রিয়া, থ্রেড এবং উপাদান গঠন এই মত দেখাবে:
এখন আসুন রেন্ডারিংয়ের চারটি প্রধান কাজের প্রতিটির একটি উদাহরণ দিয়ে হেঁটে যাই, যা আপনি মনে করতে পারেন:
- স্ক্রীনে পিক্সেলে বিষয়বস্তু রেন্ডার করুন ।
- এক রাজ্য থেকে অন্য রাজ্যে বিষয়বস্তুর উপর চাক্ষুষ প্রভাব অ্যানিমেট করুন ।
- ইনপুট প্রতিক্রিয়া স্ক্রোল .
- সঠিক জায়গায় দক্ষতার সাথে ইনপুট রুট করুন যাতে বিকাশকারী স্ক্রিপ্ট এবং অন্যান্য সাবসিস্টেম প্রতিক্রিয়া জানাতে পারে।
একটি ট্যাবের জন্য পরিবর্তিত DOM রেন্ডার করতে:
- একটি বিকাশকারী স্ক্রিপ্ট foo.com-এর জন্য রেন্ডার প্রক্রিয়াতে DOM পরিবর্তন করে।
- ব্লিঙ্ক রেন্ডারার কম্পোজিটরকে বলে যে এটি ঘটতে একটি রেন্ডার প্রয়োজন৷
- কম্পোজিটর ভিজকে বলে যে এটি ঘটতে একটি রেন্ডার প্রয়োজন৷
- Viz কম্পোজিটরের কাছে রেন্ডারের শুরুর সংকেত দেয়।
- কম্পোজিটর স্টার্ট সিগন্যালটি ব্লিঙ্ক রেন্ডারারে ফরোয়ার্ড করে।
- প্রধান থ্রেড ইভেন্ট লুপ রানার নথির জীবনচক্র চালায়।
- মূল থ্রেড ফলাফলটি কম্পোজিটর থ্রেডে পাঠায়।
- কম্পোজিটর ইভেন্ট লুপ রানার কম্পোজিটিং লাইফসাইকেল চালায়।
- যেকোন রাস্টার টাস্ক রাস্টারের জন্য Viz-এ পাঠানো হয় (প্রায়শই এই কাজগুলির মধ্যে একাধিক থাকে)।
- জিপিইউ-তে বিষয়বস্তু রাস্টার করে।
- ভিজ রাস্টার টাস্কের সমাপ্তি স্বীকার করে। দ্রষ্টব্য: Chromium প্রায়শই রাস্টার সম্পূর্ণ হওয়ার জন্য অপেক্ষা করে না এবং পরিবর্তে একটি সিঙ্ক টোকেন নামক কিছু ব্যবহার করে যা ধাপ 15 কার্যকর করার আগে রাস্টার কাজগুলির দ্বারা সমাধান করতে হবে।
- একটি কম্পোজিটর ফ্রেম ভিজে পাঠানো হয়।
- Viz foo.com রেন্ডার প্রক্রিয়া, bar.com iframe রেন্ডার প্রক্রিয়া এবং ব্রাউজার UI এর জন্য কম্পোজিটর ফ্রেমগুলিকে একত্রিত করে।
- Viz একটি ড্র সময়সূচী.
- ভিজ স্ক্রীনে একত্রিত কম্পোজিটর ফ্রেম আঁকে।
ট্যাব দুই-এ একটি CSS ট্রান্সফর্ম ট্রানজিশন অ্যানিমেট করতে:
- bar.com রেন্ডার প্রক্রিয়ার জন্য কম্পোজিটর থ্রেড বিদ্যমান সম্পত্তি গাছগুলিকে পরিবর্তন করে এর কম্পোজিটর ইভেন্ট লুপে একটি অ্যানিমেশন টিক করে। এটি তারপর কম্পোজিটর লাইফসাইকেল পুনরায় চালায়। (রাস্টার এবং ডিকোড কাজগুলি ঘটতে পারে, তবে এখানে চিত্রিত করা হয়নি।)
- একটি কম্পোজিটর ফ্রেম ভিজে পাঠানো হয়।
- Viz foo.com রেন্ডার প্রক্রিয়া, bar.com রেন্ডার প্রক্রিয়া এবং ব্রাউজার UI এর জন্য কম্পোজিটর ফ্রেমগুলিকে একত্রিত করে।
- Viz একটি ড্র সময়সূচী.
- ভিজ স্ক্রীনে একত্রিত কম্পোজিটর ফ্রেম আঁকে।
ট্যাব তিনে ওয়েব পৃষ্ঠা স্ক্রোল করতে:
-
inputইভেন্টগুলির একটি ক্রম (মাউস, স্পর্শ বা কীবোর্ড) ব্রাউজার প্রক্রিয়াতে আসে। - প্রতিটি ইভেন্ট baz.com এর রেন্ডার প্রসেস কম্পোজিটর থ্রেডে রাউট করা হয়।
- কম্পোজিটর নির্ধারণ করে যে মূল থ্রেডটি ইভেন্ট সম্পর্কে জানতে হবে।
- ইভেন্ট পাঠানো হয়, প্রয়োজন হলে, মূল থ্রেড.
- প্রধান থ্রেডটি ইভেন্টের শ্রোতাদের (
pointerdown,touchstar,pointermove,touchmoveবাwheel)inputকরে তা দেখতে শ্রোতারা ইভেন্টেpreventDefaultকল করবে কিনা। -
preventDefaultকম্পোজিটরে কল করা হয়েছে কিনা তা প্রধান থ্রেডটি ফেরত দেয়। - যদি না হয়, ইনপুট ইভেন্ট ব্রাউজার প্রক্রিয়ায় ফেরত পাঠানো হয়।
- ব্রাউজার প্রক্রিয়া অন্যান্য সাম্প্রতিক ইভেন্টগুলির সাথে এটিকে একত্রিত করে একটি স্ক্রোল অঙ্গভঙ্গিতে রূপান্তর করে৷
- স্ক্রোল অঙ্গভঙ্গি আবার baz.com এর রেন্ডার প্রসেস কম্পোজিটর থ্রেডে পাঠানো হয়েছে,
- স্ক্রোলটি সেখানে প্রয়োগ করা হয়, এবং bar.com রেন্ডার প্রক্রিয়ার জন্য কম্পোজিটর থ্রেড তার কম্পোজিটর ইভেন্ট লুপে একটি অ্যানিমেশন টিক করে। এটি তারপর সম্পত্তি গাছের মধ্যে স্ক্রোল অফসেট পরিবর্তন করে এবং কম্পোজিটর জীবনচক্র পুনরায় চালায়। এটি মূল থ্রেডকে একটি
scrollইভেন্ট ফায়ার করতে বলে (এখানে চিত্রিত করা হয়নি)। - একটি কম্পোজিটর ফ্রেম ভিজে পাঠানো হয়।
- Viz foo.com রেন্ডার প্রক্রিয়া, bar.com রেন্ডার প্রক্রিয়া এবং ব্রাউজার UI এর জন্য কম্পোজিটর ফ্রেমগুলিকে একত্রিত করে।
- Viz একটি ড্র সময়সূচী.
- ভিজ স্ক্রীনে একত্রিত কম্পোজিটর ফ্রেম আঁকে।
আইফ্রেম #টু-এ হাইপারলিঙ্কে একটি click ইভেন্ট রুট করতে ট্যাব ওয়ানে:
- ব্রাউজার প্রক্রিয়ায় একটি
inputইভেন্ট (মাউস, স্পর্শ বা কীবোর্ড) আসে। bar.com iframe রেন্ডার প্রক্রিয়াটি ক্লিকটি গ্রহণ করবে তা নির্ধারণ করতে এটি একটি আনুমানিক হিট পরীক্ষা করে এবং এটি সেখানে পাঠায়। - bar.com-এর কম্পোজিটর থ্রেড
clickইভেন্টটিকে bar.com-এর মূল থ্রেডে রুট করে এবং এটি প্রক্রিয়া করার জন্য একটি রেন্ডারিং ইভেন্ট লুপ টাস্ক নির্ধারণ করে। - bar.com এর প্রধান থ্রেডের জন্য ইনপুট ইভেন্ট প্রসেসর আইফ্রেমের কোন DOM উপাদানটি ক্লিক করা হয়েছে তা নির্ধারণ করতে পরীক্ষা করে এবং স্ক্রিপ্টগুলি পর্যবেক্ষণ করার জন্য একটি
clickইভেন্ট ফায়ার করে। কোনোpreventDefaultনা শুনে, এটি হাইপারলিঙ্কে নেভিগেট করে। - হাইপারলিংকের গন্তব্য পৃষ্ঠা লোড করার পরে, উপরের "রেন্ডার পরিবর্তিত DOM" উদাহরণের অনুরূপ পদক্ষেপ সহ নতুন অবস্থা রেন্ডার করা হয়। (এই পরবর্তী পরিবর্তনগুলি এখানে চিত্রিত করা হয়নি।)
উপসংহার
উফ, এটা অনেক বিস্তারিত ছিল. আপনি দেখতে পাচ্ছেন, ক্রোমিয়ামে রেন্ডারিং বেশ জটিল! সমস্ত টুকরো মনে রাখতে এবং অভ্যন্তরীণ করতে এটি অনেক সময় নিতে পারে, তাই এটি অপ্রতিরোধ্য মনে হলে চিন্তিত হবেন না।
সবচেয়ে গুরুত্বপূর্ণ টেকঅ্যাওয়ে হল একটি ধারণাগতভাবে সহজ রেন্ডারিং পাইপলাইন রয়েছে, যা যত্নশীল মডুলারাইজেশন এবং বিস্তারিত মনোযোগের মাধ্যমে, স্বয়ংসম্পূর্ণ উপাদানগুলির একটি সংখ্যায় বিভক্ত করা হয়েছে। এই উপাদানগুলিকে সমান্তরাল প্রক্রিয়া এবং থ্রেড জুড়ে বিভক্ত করা হয়েছে যাতে স্কেলযোগ্য কর্মক্ষমতা এবং এক্সটেনসিবিলিটি সুযোগগুলি সর্বাধিক করা যায়।
এই উপাদানগুলির প্রত্যেকটিই আধুনিক ওয়েব অ্যাপগুলির প্রয়োজনীয় সমস্ত কর্মক্ষমতা এবং বৈশিষ্ট্যগুলিকে সক্ষম করতে গুরুত্বপূর্ণ ভূমিকা পালন করে৷ শীঘ্রই আমরা তাদের প্রত্যেকের গভীরে ডাইভ প্রকাশ করব এবং তারা যে গুরুত্বপূর্ণ ভূমিকা পালন করে।
কিন্তু তার আগে, আমি এটাও ব্যাখ্যা করব কীভাবে এই পোস্টে উল্লিখিত মূল ডেটা স্ট্রাকচারগুলি (রেন্ডারিং পাইপলাইন ডায়াগ্রামের পাশে নীল রঙে নির্দেশিত) কোড উপাদানগুলির মতো রেন্ডারিংএনজি-এর জন্য ঠিক ততটাই গুরুত্বপূর্ণ৷
পড়ার জন্য ধন্যবাদ, এবং সাথে থাকুন!
Una Kravets দ্বারা চিত্রিত.