ব্রাউজার গ্রাফিক্স কর্মক্ষমতা পরিমাপ কিভাবে

বেঞ্চমার্কিং ব্রাউজার গ্রাফিক্স সংক্ষেপে: একটি মসৃণ ফ্রেম রেট বজায় রাখার সময় আপনি যতটা পারেন আঁকুন। একবার আপনার ফ্রেমরেট কমে গেলে, আপনি জানেন আপনি প্রতি ফ্রেমে কতটা আঁকতে পারেন। পোস্টের শেষ। না? ঠিক আছে, আমি আরও কিছু ব্যাখ্যা করব।

উদাহরণ সময়! এখানে একটি বেঞ্চমার্কিং tick ফাংশন সহ একটি ছোট কোড স্নিপেট। tick ফাংশনটি একটি ড্র ফাংশনকে ক্রমবর্ধমান ড্র লোড সহ একটি draw ফাংশনকে কল করে যতক্ষণ না ড্রটি ধারাবাহিকভাবে 33 ms এর বেশি সময় নেয়।

var t, previousTime;
var drawLoad = 1;
var slowCount = 0;
var maxSlow = 10;
// Note, you might need to polyfill performance.now and requestAnimationFrame
t = previousTime = performance.now();
var tick = function() {
    var maximumFrameTime = 1000/30; // 30 FPS
    t = performance.now();
    var elapsed = t - previousTime;
    previousTime = t;
    if (elapsed < maximumFrameTime || slowCount < maxSlow) {
        if (elapsed < maximumFrameTime) {
            drawLoad+=10;
        } else {
            slowCount++;
        }
        draw(drawLoad);
        requestAnimationFrame(tick);
    } else {
        // found maximum sustainable load at 30 FPS
        document.getElementById('res').innerHTML = ("could draw "+(drawLoad)+" in " +
            maximumFrameTime + " ms");
    }
};
requestAnimationFrame(tick);

jsFiddle এ লাইভ উদাহরণ দেখুন

আপনি দেখতে পাচ্ছেন যে কীভাবে বেঞ্চমার্কটি আরও বেশি করে আঁকতে থাকে যতক্ষণ না এটি বিন্দুতে আঘাত করে যেখানে এটি ধীর হয়ে যায়। আপনি একটি মসৃণ ফ্রেম হারে কতটা আঁকতে পারেন তা বের করার এটি একটি সুন্দর এবং সহজ উপায়। আপনি উদাহরণে আপনার নিজস্ব ড্র ফাংশন প্লাগ ইন করতে পারেন এবং কিছু কাস্টম বেঞ্চমার্কিং করতে পারেন, হ্যাঁ!

ব্রাউজার গ্রাফিক্স বেঞ্চমার্ক করার সময় সাধারণ সতর্কতা এবং ত্রুটি

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

সর্বোচ্চ FPS পরিমাপ: প্রতিটি ফ্রেম একটু আঁকুন এবং FPS পরিমাপ করুন। এটি Chrome-এ গ্রাফিক্স কর্মক্ষমতা পরিমাপের জন্য ভাল কাজ করে না কারণ অন্তর্নিহিত গ্রাফিক্স বাস্তবায়ন স্ক্রীন রিফ্রেশ হারের সাথে সিঙ্ক্রোনাইজ করা হয় (তাই আপনি প্রতি সেকেন্ডে সর্বাধিক 60টি স্ক্রীন আপডেট পান)। ড্র কলের গতি পরিমাপ করা খুব সহায়ক হবে না কারণ ক্রোমের অঙ্কন সিস্টেম আপনার অঙ্কন কমান্ডগুলিকে একটি কমান্ড বাফারে রাখে যা পরবর্তী স্ক্রীন রিফ্রেশে কার্যকর হয়।

গ্রাফিক্স কর্মক্ষমতা পরিমাপের জন্য সেটটাইমআউট ব্যবহার করা আরেকটি খারাপ ধারণা। সেটটাইমআউট ব্যবধানটি ব্রাউজারে 4 মিসে পর্যন্ত সীমাবদ্ধ থাকে, তাই আপনি এটি থেকে সর্বাধিক 250 FPS পেতে পারেন। ঐতিহাসিকভাবে, ব্রাউজারগুলির বিভিন্ন ন্যূনতম ব্যবধান ছিল, তাই আপনার কাছে একটি খুব ভাঙা তুচ্ছ ড্র বেঞ্চমার্ক থাকতে পারে যা দেখায় যে ব্রাউজার A 250 FPS (4 ms মিনিটের ব্যবধানে) চলছে এবং ব্রাউজার B 100 FPS (10 ms মিনিট অন্তর) এ চলছে৷ স্পষ্টতই A দ্রুত! না! এটা ভাল হতে পারে যে B A এর চেয়ে দ্রুত ড্র কোড চালায়, বলুন A 3 ms নিয়েছে এবং B 1 ms নিয়েছে। FPS-কে প্রভাবিত করে না, কারণ ড্রয়ের সময় ন্যূনতম সেট টাইমআউট ব্যবধানের চেয়ে কম। এবং যদি ব্রাউজারটি অ্যাসিঙ্ক্রোনাসভাবে রেন্ডার করে, তবে সমস্ত বাজি বন্ধ হয়ে যায়। আপনি কি করছেন তা না জানলে সেটটাইমআউট ব্যবহার করবেন না।

তাহলে কিভাবে করবেন

বেঞ্চমার্ক করার একটি ভাল উপায় হল একটি বাস্তবসম্মত অঙ্কন লোড ব্যবহার করা এবং ফ্রেম রেট চগ হওয়া পর্যন্ত এটিকে গুণ করা। উদাহরণস্বরূপ, যদি আপনি একটি টাইলম্যাপ ভূখণ্ডের সাথে একটি টপ-ডাউন গেম লিখছেন, প্রতিটি ফ্রেমে টাইলম্যাপ আঁকার চেষ্টা করুন এবং এটি 60 FPS এ চলে কিনা তা দেখুন। যদি হ্যাঁ, লোড বাড়ান (প্রতি ফ্রেমে দুবার টাইলম্যাপ আঁকুন, এর মধ্যে পরিষ্কার করুন)। FPS একটি নতুন স্থিতিশীল স্তরে নেমে না যাওয়া পর্যন্ত বাড়তে থাকুন। এখন আপনি জানেন যে আপনি প্রতি ফ্রেমে টাইলম্যাপের কতগুলি স্তর আঁকতে পারেন।

বিভিন্ন গ্রাফিক্স অ্যাপ্লিকেশানের বিভিন্ন প্রয়োজন রয়েছে, তাই আপনার মানদণ্ডগুলি মনে রেখে লিখতে হবে। আপনি আপনার অ্যাপে যে গ্রাফিক্স বৈশিষ্ট্যগুলি ব্যবহার করছেন তা পরিমাপ করুন। যখন আপনি একটি ধীর দৃশ্যকল্প খুঁজে পান, তখন এটিকে পুনরুত্পাদনকারী কোডের ক্ষুদ্রতম অংশে কমানোর চেষ্টা করুন (এবং এটি দ্রুততর হলে new.crbug.com এ একটি বাগ রিপোর্ট ফাইল করুন৷)

হাই-পারফরম্যান্স ওয়েব গ্রাফিক্স কোড কীভাবে লিখতে হয় তা দেখতে, Chrome GPU টিম থেকে Nat Duca এবং Tom Wiltzius-এর Google I/O 2012 টকটি দেখুন৷