CSS পেইন্ট টাইম এবং পৃষ্ঠা রেন্ডার ওয়েট

Colt McAnlis

ভূমিকা

আপনি যদি ব্রাউজার কীভাবে কাজ করে এই ধরনের বিষয়ে আগ্রহী হন, তাহলে আপনি ইতিমধ্যেই জানেন যে Chrome-এর GPU অ্যাক্সিলারেটেড রেন্ডারার/কম্পোজিট অপারেশন সম্পর্কে বিস্তারিত তথ্য সহ কিছু চমৎকার নিবন্ধ সম্প্রতি প্রকাশিত হয়েছে। প্রথমত, Chrome-এ অ্যাক্সিলারেটেড রেন্ডারিং: লেয়ার মডেল হল Chrome কীভাবে লেয়ারের ধারণা ব্যবহার করে পৃষ্ঠা আঁকে তার একটি দুর্দান্ত ভূমিকা; এবং আরও গভীরে ডুব দিতে Chrome-এ GPU অ্যাক্সিলারেটেড কম্পোজিটিং আলোচনা করে যে কীভাবে Chrome আপনার পৃষ্ঠা রেন্ডার করার জন্য GPU-এর পাশাপাশি এই লেয়ারগুলি ব্যবহার করে।

দার্শনিক প্রশ্ন

3D-এর জন্য সফ্টওয়্যার রাস্টারাইজার লেখার জন্য অনেক সময় ব্যয় করার পরে, আমার মনে এটি স্পষ্ট হয়ে উঠেছে যে আপনার পৃষ্ঠা আঁকার সময় কিছু CSS প্রপার্টি-এর পারফর্ম্যান্স আলাদা হওয়া উচিত। যেমন, স্ক্রিনে ছোট ছবি রাস্টারাইজ করা এবং ইচ্ছামতো শেপে ড্রপ শ্যাডো আঁকা সম্পূর্ণ আলাদা অ্যালগরিদমিক অপারেশন। তাই প্রশ্নটি হল: বিভিন্ন CSS প্রপার্টি কীভাবে আপনার পৃষ্ঠার রেন্ডার-ওয়েটকে প্রভাবিত করে?

আমার লক্ষ্য ছিল CSS প্রপার্টি/ভ্যালুর একটি বড় সেটকে তাদের পেইন্ট টাইম অনুযায়ী শ্রেণীবদ্ধ করা, যাতে আমরা বুঝতে পারি যে কোন ধরনের CSS প্রপার্টি অন্যদের চেয়ে বেশি পারফর্ম করে। এটি করার জন্য, আমি ডাক্ট-টেপ এবং বাবল গাম দিয়ে কিছু অটোমেশন লিখেছি যাতে CSS পেইন্ট টাইমে সংখ্যাগত দৃশ্যমানতা যোগ করার চেষ্টা করা হয়, যা এইভাবে কাজ করেছে:

  • HTML পৃষ্ঠার একটি স্যুট জেনারেট করো; প্রতিটি পৃষ্ঠায় একটি করে DOM এলিমেন্ট এবং তার সাথে CSS প্রপার্টির কিছু পারমিউটেশন থাকবে।
  • কিছু অটোমেশন স্ক্রিপ্ট চালান যা প্রতিটি পৃষ্ঠার জন্য:
    • Chrome লঞ্চ করুন
    • পৃষ্ঠা লোড করা
    • পৃষ্ঠার জন্য Skia ছবি তৈরি করুন
    • টাইমিং পেতে Skia বেঞ্চমার্ক-এর মাধ্যমে তোলা প্রতিটি Skia ছবি রান করুন
  • সব টাইমিং ডাম্প করে দিন এবং সংখ্যাগুলি দেখে অবাক হয়ে যান। (এই অংশটি গুরুত্বপূর্ণ…)

এই সেট-আপের মাধ্যমে, আমরা HTML পৃষ্ঠার একটি স্যুট তৈরি করি, যেখানে প্রতিটি পৃষ্ঠায় CSS প্রপার্টি এবং মানের একটি অনন্য পারমুটেশন থাকে; উদাহরণস্বরূপ, এখানে দুটি html ফাইল রয়েছে:

<style>
#example1 {
    background: url(foo.png) top left / 50% 60%;
    padding: 20px; 
    margin-top: 10px;
    margin-right: 20px; 
    text-align: center;
}
</style>
<div id="example1">WOAH</div>

এবং আরেকটি, যা আরও জটিল

<style>
#example1 {
    background-color:#eee;
    box-shadow: 1px 2px 3px 4px black;
    border-radius: 50%;
    background: radial-gradient(circle closest-corner, white, black);
    padding: 20px; 
    margin-top: 10px;
    margin-right: 20px; 
    text-align: center;
}
</style>
<div id="example1">WOAH</div>

নিচে, শেষ উদাহরণের একটি ভেরিয়েন্ট হিসেবে, যেখানে আমরা শুধুমাত্র রেডিয়াল-গ্রেডিয়েন্ট ভ্যালু পরিবর্তন করি:

<style>
#example1 
{
    background-color:#eee;
    box-shadow: 1px 2px 3px 4px black;
    border-radius: 50%;
    background: radial-gradient(farthest-side, white, black);
    padding: 20px; 
    margin-top: 10px;
    margin-right: 20px; 
    text-align: center;
}
</style>
<div id="example1" style="padding: 20px; margin-top: 10px;margin-right: 20px; text-align: center;">WOAH</div>

তারপর প্রতিটি পৃষ্ঠা Chrome-এর একটি নতুন ইনস্ট্যান্সে লোড করা হয় (যাতে পৃষ্ঠা রিলোড করার সময় কোনও বাসি অবস্থার কারণে সময় প্রভাবিত না হয়) এবং পৃষ্ঠাটি আঁকার জন্য কোন Skia কমান্ড ব্যবহার করা হয় তা মূল্যায়ন করার জন্য একটি Skia ছবি (*.SKP) নেওয়া হয়। প্রতিটি HTML ফাইলের জন্য SKP ফাইল তৈরি হয়ে গেলে, আমরা Skia বেঞ্চমার্ক অ্যাপ্লিকেশনের (Skia সোর্স কোড থেকে তৈরি) মাধ্যমে *.SKP ফাইল পুশ করার জন্য আরেকটি ব্যাচ রান করি, যা সেই পৃষ্ঠা রেন্ডার করতে নেওয়া গড় সময় ডাম্প করে।

ডেটা মূল্যায়ন করা হচ্ছে

এর থেকে, আমরা এখন CSS প্রপার্টির একটি স্যুট আঁকতে কত সময় নেয় তা চার্ট করার কিছু মোটামুটি ক্ষমতা পেয়েছি। অথবা, আমরা পেইন্ট পারফর্ম্যান্স অনুযায়ী CSS প্রপার্টি স্ট্যাক-র‍্যাঙ্কিং করা শুরু করতে পারি। Chrome 27 বিটাথেকে নেওয়া একটি বড় গ্রাফ এখানে দেখানো হয়েছে, যা এই প্রসেস থেকে টাইমিং ডেটার সম্পূর্ণ সেট দেখায়। মনে রাখবেন যে সময়ের সাথে সাথে Chrome আরও দ্রুত হয়ে ওঠার কারণে সব ডেটা পরিবর্তন হতে পারে।

টেস্টে সব পারমিউটেশনের জন্য সময়

প্রতিটি উল্লম্ব বার CSS প্রপার্টির একটি কম্বিনেশন সহ পৃষ্ঠার পেইন্ট-টাইম দেখায় (১০০ গুণ বড় করে দেখানো হয়েছে; এই গ্রাফের ট্রু-স্কেল ভ্যালু হল ০,১.৫৬ মিলি সেকেন্ড)। অনেক সুন্দর লাইন, কিন্তু এই ফর্মে এটি কিছুটা অকেজো; দরকারী ট্রেন্ড খুঁজে পেতে আমাদের কিছু ডেটা মাইনিং করতে হবে।

প্রথমত, আমরা প্রমাণ পেয়েছি যে কিছু CSS প্রপার্টি রেন্ডার করতে অন্যান্য প্রপার্টির তুলনায় বেশি খরচ হয়। যেমন, DOM এলিমেন্টে ড্রপ-শ্যাডো আঁকার জন্য স্প্লাইন ও অন্যান্য জটিল জিনিস সহ মাল্টি-পাস অপারেশন করতে হয়, যা অপাসিটির থেকে আলাদা এবং অপাসিটি রেন্ডার করা অনেক সহজ।

শুধুমাত্র ১টি CSS প্রপার্টি আছে এমন এলিমেন্ট পেইন্ট করতে যে সময় লাগে

দ্বিতীয়ত, এবং আরও মজার বিষয় হল, CSS প্রপার্টির কম্বিনেশনের ক্ষেত্রে পেইন্ট টাইম, তাদের অংশের যোগফলের চেয়ে বেশি হতে পারে। একজন পর্যবেক্ষকের দৃষ্টিকোণ থেকে, এটি একটু অদ্ভুত, আমরা আশা করব যে A+B = C, 2.2C নয়। যেমন, box-shadow এবং border-radius-stroke যোগ করা :

টেস্টে সব পারমিউটেশনের জন্য সময়

এই বিষয়ে সবচেয়ে আকর্ষণীয় হল, এটি শুধু box-shadow প্রপার্টি নয়, বরং সেই নির্দিষ্ট মানের পারমিউটেশন। যেমন, নিচে box-shadow : 50% এবং border-radius-এর গ্রুপিং দেখানো হয়েছে, যার ভ্যালু আলাদা।

টেস্টে সব পারমিউটেশনের জন্য সময়

ডেটা দেখে মনে হচ্ছে, এটি কিছু সময় ধরে চলছে। অনেক ধরনের অদ্ভুত কম্বিনেশন আছে এবং আমার টেস্ট স্যুট সেগুলির সবকটি কভার করে না; এখনও অনেক টেস্ট ও কম্বিনেশন আছে যেগুলি থেকে আকর্ষণীয় ফলাফল পাওয়া যেতে পারে

আপনার পৃষ্ঠার রেন্ডার-ওয়েট খোঁজা হচ্ছে

আপনার পৃষ্ঠার প্রতিটি এলিমেন্টের রেন্ডার করার মোট সময় ট্র্যাক করার ক্ষমতা সহ, ডেভেলপারদের কাছে তাদের পৃষ্ঠা-রেন্ডার-ওয়েট মূল্যায়ন শুরু করার ক্ষমতা রয়েছে এবং এটি কীভাবে আপনার সাইটের প্রতিক্রিয়াশীলতাকে প্রভাবিত করে; শুরু করার জন্য এখানে কয়েকটি পরামর্শ দেওয়া হল

  1. কোন CSS প্রপার্টি আপনার খরচ বাড়াচ্ছে তা বুঝতে Chrome Dev Tools-এ Chrome-এর কন্টিনিউয়াস পেন্ট মোড ব্যবহার করুন।
  2. পারফর্ম্যান্স সংক্রান্ত সমস্যা ধরতে আপনার বর্তমান কোড রিভিউ প্রসেসে CSS রিভিউ অন্তর্ভুক্ত করুন আপনার CSS-এ এমন জায়গা খুঁজুন যেখানে আপনি এমন জিনিস ব্যবহার করছেন যা আরও বেশি ব্যয়বহুল বলে পরিচিত, যেমন গ্রেডিয়েন্ট এবং শ্যাডো। নিজেকে জিজ্ঞাসা করুন, আমার কি সত্যিই এখানে এগুলি প্রয়োজন?
  3. সন্দেহ থাকলে, সবসময় আরও ভালো পারফর্ম্যান্সের দিকেই ঝুঁকুন। আপনার ব্যবহারকারীরা হয়ত আপনার কলামের প্যাডিং প্রস্থ কত তা মনে রাখবেন না, তবে আপনার সাইট দেখার অভিজ্ঞতা কেমন তা তারা মনে রাখবেন।

চূড়ান্ত ভাবনা

এই এক্সপেরিমেন্টের সবচেয়ে আকর্ষণীয় বিষয় হল, Chrome-এর প্রতিটি ভার্সনের সাথে সাথে টাইমিং পরিবর্তন হতে থাকবে (আশা করি আরও দ্রুত হবে ;) ব্রাউজার সফ্টওয়্যার হল এমন একটি সারফেস এরিয়া যা সবসময় পরিবর্তন হতে থাকে। আজ যা ধীরে চলছে, আগামীকাল তা দ্রুত চলতে পারে। আপনি এই নিবন্ধ থেকে box-shadow: 1px 2px 3px 4px সরিয়ে নিতে পারেন যাতে এমন একটি এলিমেন্ট না থাকে যাতে আগে থেকেই border-radius:5 আছে। তবে, আরও গুরুত্বপূর্ণ বিষয় হল, CSS প্রপার্টি সরাসরি আপনার পৃষ্ঠা পেইন্ট করার সময়কে প্রভাবিত করে।

রেফারেন্স