এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

পারফরম্যান্স পর্যবেক্ষক - পারফরম্যান্স ডেটাতে দক্ষ অ্যাক্সেস

Marc Cohen

প্রগতিশীল ওয়েব অ্যাপস ডেভেলপারদের একটি নতুন শ্রেণীর অ্যাপ্লিকেশন তৈরি করতে সক্ষম করে যা নির্ভরযোগ্য, উচ্চ কর্মক্ষমতা ব্যবহারকারীর অভিজ্ঞতা প্রদান করে। কিন্তু একটি ওয়েব অ্যাপ তার কাঙ্খিত কর্মক্ষমতা লক্ষ্য অর্জন করছে তা নিশ্চিত হতে, ডেভেলপারদের উচ্চ রেজোলিউশন কর্মক্ষমতা পরিমাপ ডেটা অ্যাক্সেস করতে হবে। W3C পারফরম্যান্স টাইমলাইন স্পেসিফিকেশন নিম্ন স্তরের টাইমিং ডেটাতে প্রোগ্রাম্যাটিক অ্যাক্সেস প্রদান করার জন্য ব্রাউজারগুলির জন্য এমন একটি ইন্টারফেসকে সংজ্ঞায়িত করে। এটি কিছু আকর্ষণীয় ব্যবহারের ক্ষেত্রে দরজা খুলে দেয়:

অফলাইন এবং কাস্টম কর্মক্ষমতা বিশ্লেষণ
তৃতীয় পক্ষের কর্মক্ষমতা বিশ্লেষণ এবং ভিজ্যুয়ালাইজেশন টুল
পারফরম্যান্স মূল্যায়ন IDE এবং অন্যান্য বিকাশকারী সরঞ্জামগুলিতে একীভূত

নেভিগেশন টাইমিং , রিসোর্স টাইমিং এবং ইউজার টাইমিং এর জন্য এই ধরনের টাইমিং ডেটার অ্যাক্সেস ইতিমধ্যেই বেশিরভাগ প্রধান ব্রাউজারে উপলব্ধ। নতুন সংযোজন হল পারফরম্যান্স পর্যবেক্ষক ইন্টারফেস, যা মূলত নিম্ন স্তরের সময়ের তথ্য অ্যাসিঙ্ক্রোনাসভাবে সংগ্রহ করার জন্য একটি স্ট্রিমিং ইন্টারফেস, কারণ এটি ব্রাউজার দ্বারা সংগ্রহ করা হয়। এই নতুন ইন্টারফেসটি টাইমলাইনে অ্যাক্সেস করার জন্য পূর্ববর্তী পদ্ধতিগুলির তুলনায় বেশ কয়েকটি গুরুত্বপূর্ণ সুবিধা প্রদান করে:

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

Chrome 52 থেকে শুরু করে, কর্মক্ষমতা পর্যবেক্ষক ইন্টারফেসটি ডিফল্টরূপে সক্রিয় থাকে । চলুন দেখে নেওয়া যাক কিভাবে ব্যবহার করবেন।

<html>
<head>
    <script>
    var observer = new PerformanceObserver(list => {
        list.getEntries().forEach(entry => {
        // Display each reported measurement on console
        if (console) {
            console.log("Name: "       + entry.name      +
                        ", Type: "     + entry.entryType +
                        ", Start: "    + entry.startTime +
                        ", Duration: " + entry.duration  + "\n");
        }
        })
    });
    observer.observe({entryTypes: ['resource', 'mark', 'measure']});
    performance.mark('registered-observer');

    function clicked(elem) {
        performance.measure('button clicked');
    }
    </script>
</head>
<body>
    <button onclick="clicked(this)">Measure</button>
</body>
</html>

এই সাধারণ পৃষ্ঠাটি কিছু জাভাস্ক্রিপ্ট কোড সংজ্ঞায়িত একটি স্ক্রিপ্ট ট্যাগ দিয়ে শুরু হয়:

আমরা একটি নতুন PerformanceObserver অবজেক্ট ইনস্ট্যান্টিয়েট করি এবং অবজেক্ট কনস্ট্রাক্টরের কাছে একটি ইভেন্ট হ্যান্ডলার ফাংশন পাস করি। কনস্ট্রাক্টর বস্তুটিকে এমনভাবে শুরু করে যে প্রতিবার পরিমাপ ডেটার একটি নতুন সেট প্রক্রিয়া করার জন্য প্রস্তুত হলে আমাদের হ্যান্ডলারকে কল করা হবে (অবজেক্টের তালিকা হিসাবে পরিমাপের ডেটা দিয়ে)। হ্যান্ডলারকে এখানে একটি বেনামী ফাংশন হিসাবে সংজ্ঞায়িত করা হয়েছে যা কেবল কনসোলে ফর্ম্যাট করা পরিমাপ ডেটা প্রদর্শন করে। একটি বাস্তব বিশ্বের দৃশ্যে, এই ডেটা পরবর্তী বিশ্লেষণের জন্য ক্লাউডে সংরক্ষণ করা হতে পারে বা একটি ইন্টারেক্টিভ ভিজ্যুয়ালাইজেশন টুলে পাইপ করা হতে পারে।
আমরা observe() পদ্ধতির মাধ্যমে আমরা যে ধরনের টাইমিং ইভেন্টগুলিতে আগ্রহী তার জন্য নিবন্ধন করি এবং আমরা যে মুহূর্তে নিবন্ধন করেছি তা চিহ্নিত করতে mark() পদ্ধতিতে কল করি, যা আমরা আমাদের সময়ের ব্যবধানের শুরুতে বিবেচনা করব।
আমরা পৃষ্ঠার অংশে সংজ্ঞায়িত একটি বোতামের জন্য একটি ক্লিক হ্যান্ডলার সংজ্ঞায়িত করি। এই ক্লিক হ্যান্ডলার বোতামটি কখন ক্লিক করা হয়েছিল সে সম্পর্কে টাইমিং ডেটা ক্যাপচার করার জন্য measure() পদ্ধতিকে কল করে।

পৃষ্ঠার মূল অংশে, আমরা একটি বোতাম সংজ্ঞায়িত করি, আমাদের ক্লিক হ্যান্ডলারকে onclick ইভেন্টে বরাদ্দ করি এবং আমরা যেতে প্রস্তুত।

এখন, যদি আমরা পৃষ্ঠাটি লোড করি এবং JavaScript কনসোল দেখার জন্য Chrome DevTools প্যানেল খুলি, প্রতিবার যখন আমরা বোতামটি ক্লিক করি তখন একটি কর্মক্ষমতা পরিমাপ করা হয়। এবং যেহেতু আমরা এই ধরনের পরিমাপগুলি পর্যবেক্ষণ করার জন্য নিবন্ধিত করেছি, সেগুলিকে আমাদের ইভেন্ট হ্যান্ডলারের কাছে ফরোয়ার্ড করা হয়েছে, টাইমলাইনে পোল করার প্রয়োজন ছাড়াই অ্যাসিঙ্ক্রোনাসভাবে , যা কনসোলে পরিমাপগুলি ঘটলেই দেখায়:

start মানটি টাইপ mark ইভেন্টগুলির জন্য প্রারম্ভিক টাইমস্ট্যাম্প প্রতিনিধিত্ব করে (যার মধ্যে এই অ্যাপটি শুধুমাত্র একটি আছে)। টাইপ measure সহ ইভেন্টগুলির কোনও অন্তর্নিহিত শুরুর সময় নেই; তারা শেষ mark ইভেন্ট আপেক্ষিক নেওয়া সময় পরিমাপ প্রতিনিধিত্ব করে। এইভাবে, এখানে দেখা সময়কালের মানগুলি কল টু mark() এর মধ্যে অতিবাহিত সময়কে প্রতিনিধিত্ব করে, যা একটি সাধারণ ব্যবধানের প্রারম্ভিক বিন্দু হিসাবে কাজ করে, এবং measure() জন্য একাধিক পরবর্তী কল।

আপনি দেখতে পাচ্ছেন, এই APIটি বেশ সহজ এবং এটি পোলিং ছাড়াই ফিল্টার করা, উচ্চ রেজোলিউশন, রিয়েল টাইম পারফরম্যান্স ডেটা সংগ্রহ করার ক্ষমতা প্রদান করে, যা ওয়েব অ্যাপগুলির জন্য আরও দক্ষ পারফরম্যান্স টুলিংয়ের দরজা খুলে দেবে।