পেইন্ট প্রোফাইলিংয়ের জন্য অবিচ্ছিন্ন পেইন্টিং মোড এখন Chrome ক্যানারিতে উপলব্ধ। এই নিবন্ধটি ব্যাখ্যা করে যে আপনি কীভাবে পৃষ্ঠা পেইন্টিংয়ের সময় একটি সমস্যা শনাক্ত করেন এবং কীভাবে আপনি এই নতুন টুলটি পেইন্টিং পারফরম্যান্সে বাধা সনাক্ত করতে ব্যবহার করতে পারেন।
আপনার পৃষ্ঠায় পেইন্টিং সময় তদন্ত
তাই আপনি লক্ষ্য করেছেন যে আপনার পৃষ্ঠাটি মসৃণভাবে স্ক্রোল করে না। এইভাবে আপনি সমস্যাটি মোকাবেলা শুরু করবেন। আমাদের উদাহরণের জন্য, আমরা আমাদের উদাহরণ হিসাবে ড্যান সেডারহোম দ্বারা থিংস উই লেফ্ট অন দ্য মুন ডেমো পেজ ব্যবহার করব।
আপনি ওয়েব ইন্সপেক্টর খুলুন, একটি টাইমলাইন রেকর্ডিং শুরু করুন এবং আপনার পৃষ্ঠাটি উপরে এবং নীচে স্ক্রোল করুন। তারপরে আপনি উল্লম্ব টাইমলাইনগুলি দেখুন, যা আপনাকে দেখায় প্রতিটি ফ্রেমে কী ঘটেছে৷
আপনি যদি দেখেন যে বেশিরভাগ সময় পেইন্টিংয়ে ব্যয় করা হয় (60fps এর উপরে বড় সবুজ বার), আপনাকে ঘনিষ্ঠভাবে দেখতে হবে কেন এটি ঘটছে। আপনার পেইন্টগুলি তদন্ত করতে, ওয়েব ইন্সপেক্টরের শো পেইন্ট আয়তক্ষেত্র সেটিংটি ব্যবহার করুন (ওয়েব ইন্সপেক্টরের নীচে ডানদিকে কোগ আইকন)। এটি আপনাকে সেই অঞ্চলগুলি দেখাবে যেখানে ক্রোম পেইন্ট করে।
Chrome-এর পৃষ্ঠার জায়গাগুলিকে পুনরায় রং করার বিভিন্ন কারণ রয়েছে:
- DOM নোডগুলি জাভাস্ক্রিপ্টে পরিবর্তিত হয়, যার ফলে Chrome পৃষ্ঠার লেআউট পুনরায় গণনা করে।
- অ্যানিমেশনগুলি বাজছে যা একটি ফ্রেম-ভিত্তিক চক্রে আপডেট হয়৷
- ব্যবহারকারীর মিথস্ক্রিয়া, যেমন হোভারিং, কিছু উপাদানে শৈলী পরিবর্তন ঘটায়।
- অন্য কোনো অপারেশন যা পৃষ্ঠার বিন্যাস পরিবর্তন করে।
একজন বিকাশকারী হিসাবে আপনার পৃষ্ঠায় ঘটছে পুনরায় রং সম্পর্কে সচেতন হতে হবে। পেইন্ট আয়তক্ষেত্রের দিকে তাকিয়ে এটি করার একটি দুর্দান্ত উপায়। উপরের উদাহরণের স্ক্রিনশটটিতে আপনি দেখতে পাচ্ছেন যে পুরো স্ক্রিনটি একটি বড় পেইন্ট আয়তক্ষেত্রে আচ্ছাদিত। এর অর্থ হল আপনি স্ক্রোল করার সাথে সাথে পুরো স্ক্রিনটি পুনরায় রঙ করা হয়েছে, যা ভাল নয়। এই নির্দিষ্ট ক্ষেত্রে এটি CSS শৈলী background-attachment:fixed যার ফলে পৃষ্ঠার পটভূমি চিত্র একই অবস্থানে থাকে যখন আপনি স্ক্রোল করার সাথে সাথে পৃষ্ঠার বিষয়বস্তু এটির উপরে চলে যায়।
আপনি যদি শনাক্ত করেন যে পুনরায় রং করা একটি বড় এলাকা জুড়ে এবং/অথবা দীর্ঘ সময় নেয়, তাহলে আপনার কাছে দুটি বিকল্প রয়েছে:
- পেইন্টিংয়ের পরিমাণ কমাতে আপনি পৃষ্ঠার বিন্যাস পরিবর্তন করার চেষ্টা করতে পারেন। যদি সম্ভব হয় Chrome শুধুমাত্র একবার দৃশ্যমান পৃষ্ঠাটি পেইন্ট করে এবং আপনি নিচে স্ক্রোল করার সাথে সাথে দৃশ্যমান না হওয়া অংশগুলি যোগ করে। যাইহোক, এমন কিছু ক্ষেত্রে আছে যখন Chrome-কে নির্দিষ্ট কিছু জায়গা পুনরায় রং করতে হবে। যেমন CSS নিয়ম
position:fixed, যা প্রায়ই একই অবস্থানে থাকা নেভিগেশন উপাদানগুলির জন্য ব্যবহৃত হয়, এইগুলি পুনরায় রং করতে পারে। - আপনি যদি আপনার পৃষ্ঠার বিন্যাস রাখতে চান, তাহলে আপনি পুনরায় রং করা জায়গাগুলির পেইন্টিং খরচ কমানোর চেষ্টা করতে পারেন। প্রতিটি সিএসএস শৈলীর পেইন্টিং খরচ একই নয়, কিছুর প্রভাব কম, অন্যদের অনেক। নির্দিষ্ট শৈলীর পেইন্টিং খরচ বের করা অনেক কাজ হতে পারে। আপনি এলিমেন্টস প্যানেলে শৈলী টগল করে এবং টাইমলাইন রেকর্ডিংয়ের পার্থক্য দেখে এটি করতে পারেন, যার অর্থ প্যানেলের মধ্যে স্যুইচ করা এবং প্রচুর রেকর্ডিং করা। এখানেই ক্রমাগত পেইন্টিং মোড খেলায় আসে।
ক্রমাগত পেইন্টিং মোড
ক্রমাগত পেইন্টিং মোড হল একটি টুল যা আপনাকে পৃষ্ঠায় কোন উপাদানগুলি ব্যয়বহুল তা সনাক্ত করতে সাহায্য করে। এটি পৃষ্ঠাটিকে সর্বদা পুনরায় পেইন্টিং অবস্থায় রাখে, চিত্রকলার কাজ কতটা ঘটছে তার একটি কাউন্টার দেখায়। তারপরে, আপনি উপাদানগুলি লুকিয়ে রাখতে পারেন এবং স্টাইল পরিবর্তন করতে পারেন, কাউন্টারটি দেখে, যা ধীর তা বোঝার জন্য।
সেটআপ
ক্রমাগত পেইন্টিং মোড ব্যবহার করার জন্য আপনাকে Chrome ক্যানারি ব্যবহার করতে হবে।
Linux সিস্টেমে (এবং কিছু ম্যাক) আপনাকে নিশ্চিত করতে হবে যে Chrome কম্পোজিটিং মোডে চলে। about:flags এ সেট করা সমস্ত পৃষ্ঠাগুলিতে GPU কম্পোজিটিং ব্যবহার করে এটি স্থায়ীভাবে সক্ষম করা যেতে পারে।
কিভাবে শুরু করবেন
ক্রমাগত পেইন্টিং মোড চেকবক্সের মাধ্যমে সক্ষম করা যেতে পারে ওয়েব ইন্সপেক্টরের সেটিংসে ক্রমাগত পৃষ্ঠা পুনরায় পেইন্টিং সক্ষম করুন (ওয়েব ইন্সপেক্টরের নীচে ডানদিকে কোণ আইকন)।
উপরের ডান কোণায় ছোট ডিসপ্লে আপনাকে মিলিসেকেন্ডে পরিমাপ করা পেইন্ট সময় দেখায়। আরো নির্দিষ্টভাবে এটি দেখায়:
- বাম দিকে শেষ মাপা পেইন্ট সময়।
- ডানদিকে বর্তমান গ্রাফের সর্বনিম্ন এবং সর্বোচ্চ।
- একটি বার চার্ট নীচে শেষ 80টি ফ্রেমের ইতিহাস প্রদর্শন করে (চার্টের লাইনটি একটি রেফারেন্স পয়েন্ট হিসাবে 16ms নির্দেশ করে)।
পেইন্টের সময় পরিমাপ স্ক্রীন রেজোলিউশন, উইন্ডোর আকার এবং হার্ডওয়্যার ক্রোমের উপর নির্ভর করে। সচেতন থাকুন যে এই জিনিসগুলি আপনার ব্যবহারকারীদের জন্য ভিন্ন হতে পারে।
কর্মপ্রবাহ
এইভাবে আপনি ক্রমাগত পেইন্টিং মোড ব্যবহার করতে পারেন এমন উপাদান এবং শৈলীগুলি ট্র্যাক করতে যা প্রচুর পেইন্টিং খরচ যোগ করে:
- ওয়েব ইন্সপেক্টরের সেটিংস খুলুন এবং ক্রমাগত পৃষ্ঠা পুনরায় পেইন্টিং সক্ষম করুন চেক করুন।
- এলিমেন্টস প্যানেলে যান এবং তীর কী দিয়ে বা পৃষ্ঠায় উপাদান বাছাই করে DOM ট্রি অতিক্রম করুন।
- একটি উপাদানে দৃশ্যমানতা টগল করতে H কীবোর্ড শর্টকাট ব্যবহার করুন, একটি নতুন প্রবর্তিত সহায়ক।
- পেইন্ট টাইম গ্রাফটি দেখুন এবং এমন একটি উপাদান খুঁজে বের করার চেষ্টা করুন যা পেইন্টিংয়ের অনেক সময় যোগ করে।
- সেই উপাদানটির CSS শৈলীর মধ্য দিয়ে যান, গ্রাফটি দেখার সময় সেগুলিকে টগল করে অন এবং অফ করুন, যে শৈলীটি ধীরগতির কারণ তা খুঁজে বের করতে৷
- এই স্টাইলটি পরিবর্তন করুন এবং এটি আপনার পৃষ্ঠাটি আরও ভাল পারফর্ম করেছে কিনা তা পরীক্ষা করতে অন্য টাইমলাইন রেকর্ডিং করুন৷
নীচের অ্যানিমেশনটি টগল করার শৈলী এবং পেইন্ট সময়ের উপর এর প্রভাব দেখায়:
এই উদাহরণটি দেখায় যে কিভাবে CSS শৈলীর যেকোন একটিকে box-shadow বা border-radius বন্ধ করে দিলে পেইন্টিংয়ের সময় অনেক বেশি কমে যায়। একটি উপাদানে box-shadow এবং border-radius উভয়ই ব্যবহার করা খুব ব্যয়বহুল পেইন্টিং অপারেশনের দিকে পরিচালিত করে, কারণ ক্রোম এটির জন্য অপ্টিমাইজ করতে পারে না। সুতরাং আপনার যদি এমন একটি উপাদান থাকে যা অনেকগুলি পুনরায় রঙ করে, যেমন উদাহরণে, আপনার এই সংমিশ্রণটি এড়ানো উচিত।
নোট
ক্রমাগত পেইন্টিং মোড পুরো দৃশ্যমান পৃষ্ঠাটিকে পুনরায় রং করে। একটি ওয়েব পেজ ব্রাউজ করার সময় এটি সাধারণত হয় না। স্ক্রোলিং সাধারণত শুধুমাত্র সেই অংশগুলিকে পেইন্ট করে যা আগে দৃশ্যমান হয়নি। এবং পৃষ্ঠায় অন্যান্য পরিবর্তনের জন্য, শুধুমাত্র ক্ষুদ্রতম সম্ভাব্য এলাকা পুনরায় রং করা হয়। তাই অন্য টাইমলাইন রেকর্ডিং দিয়ে পরীক্ষা করে দেখুন যে আপনার শৈলীর উন্নতি আসলেই আপনার পৃষ্ঠার পেইন্ট সময়ের উপর প্রভাব ফেলেছে কিনা।
continuous painting mode ব্যবহার করার সময় আপনি আবিষ্কার করতে পারেন যে যেমন CSS শৈলী border-radius এবং box-shadow অনেক বেশি পেইন্টিং সময় যোগ করে। সাধারণভাবে এই বৈশিষ্ট্যগুলি ব্যবহার করতে নিরুৎসাহিত করা হয় না, সেগুলি দুর্দান্ত এবং আমরা খুশি যে তারা অবশেষে এখানে এসেছে৷ তবে কখন এবং কোথায় ব্যবহার করবেন তা জানা গুরুত্বপূর্ণ। প্রচুর রিপেইন্ট আছে এমন জায়গায় এগুলি ব্যবহার করা এড়িয়ে চলুন এবং সাধারণভাবে সেগুলিকে অতিরিক্ত ব্যবহার করা এড়িয়ে চলুন।
লাইভ ডেমো
একটি ডেমোর জন্য নীচে ক্লিক করুন যেখানে পল আইরিশ একটি অনন্য ব্যয়বহুল পেইন্ট অপারেশন সনাক্ত করতে ক্রমাগত পেইন্টিং ব্যবহার করে।