গত কয়েক বছরে ব্রাউজারগুলি বিশেষ করে মোবাইলে রেন্ডারিং পারফরম্যান্সের ক্ষেত্রে বিশাল অগ্রগতি করেছে। যেখানে আগে আপনার দূরবর্তী জটিল কিছুর জন্য একটি মসৃণ ফ্রেমরেট আঘাত করার কোন আশা ছিল না, আপনি যত্ন নিলে আজ এটি অন্তত অর্জনযোগ্য।
যদিও আমাদের বেশিরভাগের জন্য, আমরা আমাদের নিজস্ব ডিভাইসে যুক্তিসঙ্গতভাবে কী পরীক্ষা করতে পারি এবং আমাদের ব্যবহারকারীরা কী অনুভব করে তার মধ্যে সংযোগ বিচ্ছিন্ন রয়েছে। যদি তারা একটি সিল্কি মসৃণ 60fps না পায় তবে তাদের অভিজ্ঞতা বিঘ্নিত হয় এবং শেষ পর্যন্ত তারা অন্য কোথাও চলে যাবে এবং আমরা ক্ষতিগ্রস্ত হব। ঠিক একইভাবে, তারপরে, W3C একটি নতুন API নিয়ে আলোচনা করছে যা আমাদের ব্যবহারকারীরা কী দেখছে তা দেখতে সাহায্য করতে পারে: ফ্রেম টাইমিং API ।
জ্যাক আর্চিবল্ড এবং আমি সম্প্রতি API এর একটি ভিডিও ওভারভিউ রেকর্ড করেছি, তাই আপনি যদি পড়ার চেয়ে দেখতে পছন্দ করেন তবে একবার দেখুন:
ফ্রেম টাইমিং API এর ব্যবহার
ফ্রেম টাইমিং API এর সাথে আপনি নিঃসন্দেহে অনেকগুলি জিনিস করতে পারেন এবং, গুরুত্বপূর্ণভাবে, আপনি আপনার এবং আপনার প্রকল্পের জন্য কী গুরুত্বপূর্ণ তা পরিমাপ করতে পারেন। তবুও, এখানে কয়েকটি ধারণা রয়েছে:
- আপনার জাভাস্ক্রিপ্ট এবং CSS অ্যানিমেশনের fps ট্র্যাক করা।
- আপনার পৃষ্ঠার স্ক্রোলগুলির মসৃণতা ট্র্যাক করা (বা সম্ভবত আপনার কাছে সেই নিফটি অসীম স্ক্রলিং তালিকা।)
- ডিভাইসের বর্তমান লোডের উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে আপনার শোবিজ প্রভাবগুলিকে স্কেল করা।
- রানটাইম কর্মক্ষমতা মেট্রিক্স উপর রিগ্রেশন পরীক্ষা.
লিফট পিচ
এপিআই বর্তমানে স্পেকটিতে কেমন দেখায় তা এখানে: এটির সাহায্যে আপনি রেন্ডারার থ্রেড টাইমিং-এ ডেটা টানতে পারবেন, যেখানে জাভাস্ক্রিপ্ট, স্টাইল এবং লেআউট চলে। (আপনি হয়তো শুনেছেন রেন্ডারার থ্রেডটিকে প্রধান থ্রেড বলা হয়; এটি অন্য নামে একই জিনিস।)
var rendererEvents = window.performance.getEntriesByType("renderer");
আপনি যে রেন্ডারার থ্রেড রেকর্ডগুলি ফিরে পান সেগুলির প্রতিটি মোটামুটি এইরকম দেখায়:
{
sourceFrameNumber: 120,
startTime: 1342.549374253
cpuTime: 6.454313323
}
প্রতিটি রেকর্ড মূলত একটি বস্তু যাতে একটি অনন্য ফ্রেম নম্বর থাকে, ফ্রেমটি কখন শুরু হয়েছিল তার জন্য একটি উচ্চ রেজোলিউশন টাইমস্ট্যাম্প এবং এটি কতটা CPU সময় ব্যবহার করেছিল তার জন্য আরেকটি। এগুলোর একটি অ্যারে দিয়ে আপনি প্রতিটি startTime মান দেখতে পারেন এবং খুঁজে বের করতে পারেন যে মূল থ্রেডটি 60fps এ যাচ্ছে কিনা; মূলত "প্রত্যেক ফ্রেমের startTime কি প্রায় 16ms খণ্ডে বেড়ে যায়?"
কিন্তু তার চেয়েও বেশি, আপনি cpuTime ও পাবেন, তাই আপনি জানতে পারবেন যে আপনি আরামে 16ms সীমানার ভিতরে আছেন, নাকি আপনি তারের নিচে ছিলেন। যদি cpuTime 16ms সীমানার কাছাকাছি থাকে তবে আবর্জনা সংগ্রহের মতো জিনিসগুলির জন্য খুব বেশি জায়গা নেই এবং, CPU ব্যবহার বেশি হলে, ব্যাটারি খরচও বেশি হবে।
রেন্ডারার থ্রেড ছাড়াও, আপনি কম্পোজিটর থ্রেড টাইমিং এর উপর ডেটা টানতে পারবেন, যেখানে পেইন্টিং এবং কম্পোজিটিং হয়:
var compositeThreadEvents = window.performance.getEntriesByType("composite");
এগুলির প্রত্যেকটি একটি উত্স ফ্রেম নম্বর সহ ফিরে আসে, যা আপনি মূল থ্রেডের ইভেন্টগুলির সাথে সংযুক্ত করতে ব্যবহার করতে পারেন:
{
sourceFrameNumber: 120,
startTime: 1352.343235321
}
ব্রাউজারে প্রায়শই কম্পোজিটিং যেভাবে কাজ করে, তাই রেন্ডারার থ্রেড রেকর্ডের জন্য এই রেকর্ডগুলির মধ্যে বেশ কয়েকটি থাকতে পারে, তাই আপনি সেগুলিকে একসাথে বেঁধে sourceFrameNumber ব্যবহার করতে পারেন। এই রেকর্ডগুলিতেও CPU সময় থাকা উচিত কিনা তা নিয়েও কিছু আলোচনা রয়েছে, তাই আপনি যদি গিটহাব সমস্যাগুলির উপর দৃঢ়ভাবে কথা বলুন মনে করেন।
অধিক তথ্য
এই API এখনও শিপিং করা হয় না, কিন্তু আশা করি এটি শীঘ্রই করবে। এই সময়ের মধ্যে এখানে কিছু জিনিস রয়েছে যা আপনি পড়তে এবং করতে পারেন:
- রেপোতে ব্যাখ্যাকারী ডক পড়ুন । অর্থপূর্ণ হওয়ার জন্য আপনার ফ্রেম ডেটা কীভাবে রেকর্ড করা উচিত সে সম্পর্কে অনেক তথ্য রয়েছে এবং ব্যাখ্যাকারী এখানে কিছু দিকনির্দেশ দেয়।
- স্পেকের সর্বশেষ খসড়াটি দেখুন । এটি বেশ হালকা, এবং এটি একটি পড়ার মূল্যবান।
- অনুপস্থিত বৈশিষ্ট্য বা সম্ভাব্য মাথাব্যথার জন্য ফাইলের সমস্যা । আপনি জানেন যে আপনি কি পরিমাপ করতে চান, তাই অনুগ্রহ করে মতামত প্রদান করুন যদি আপনি মনে করেন যে API এর সাথে আপনি কিছু করতে পারবেন না যা আপনি করতে চান।