ওভারভিউ
পারফরম্যান্স প্যানেল পারফরম্যান্স এক্সটেনসিবিলিটি API সমর্থন করে যা আপনাকে পারফরম্যান্স টাইমলাইনে আপনার নিজস্ব কাস্টম ডেটা যোগ করতে দেয়।
এই APIটি বিদ্যমান ইউজার টাইমিং এপিআই ব্যবহার করে এবং আপনাকে আপনার পরিমাপ এবং ইভেন্টগুলি সরাসরি পারফরম্যান্স টাইমলাইনে একটি কাস্টম ট্র্যাক হিসাবে বা টাইমিংস ট্র্যাকে ইনজেক্ট করতে দেয়৷ পারফরম্যান্সের আরও বিস্তৃত বোঝার জন্য কাস্টম ইন্সট্রুমেন্টেশন সহ ফ্রেমওয়ার্ক, লাইব্রেরি এবং জটিল অ্যাপ্লিকেশনগুলির বিকাশকারীদের জন্য এটি কার্যকর হতে পারে।
মূল বৈশিষ্ট্য
- কাস্টম ট্র্যাক : আপনার নিজস্ব সময়-ভিত্তিক ডেটা কল্পনা করতে উত্সর্গীকৃত ট্র্যাকগুলি তৈরি করুন৷
- এন্ট্রি : ইভেন্ট বা পরিমাপ প্রতিনিধিত্বকারী এন্ট্রিগুলির সাথে ট্র্যাকগুলি তৈরি করুন৷
- টুলটিপস এবং বিশদ বিবরণ : কাস্টমাইজযোগ্য টুলটিপ এবং বিস্তারিত ভিউ সহ এন্ট্রিগুলির জন্য সমৃদ্ধ প্রসঙ্গ প্রদান করুন।
- মার্কার : ভিজ্যুয়াল মার্কার দিয়ে টাইমলাইনে নির্দিষ্ট মুহূর্ত হাইলাইট করুন।
ইউজার টাইমিং এপিআই দিয়ে আপনার ডেটা ইনজেক্ট করুন
কাস্টম ডেটা ইনজেক্ট করতে, performance.mark এবং performance.measure পদ্ধতির detail সম্পত্তির মধ্যে একটি devtools অবজেক্ট অন্তর্ভুক্ত করুন। এই devtools অবজেক্টের গঠন নির্ধারণ করে কিভাবে আপনার ডেটা পারফরম্যান্স প্যানেলে প্রদর্শিত হবে।
টাইমলাইনে একটি তাত্ক্ষণিক ইভেন্ট বা টাইমস্ট্যাম্প রেকর্ড করতে
performance.markব্যবহার করুন। আপনি একটি নির্দিষ্ট ক্রিয়াকলাপের শুরু বা সমাপ্তি চিহ্নিত করতে পারেন বা কোনো আগ্রহের বিন্দু যার সময়কাল নেই। আপনি যখনdetailসম্পত্তির মধ্যে একটিdevtoolsঅবজেক্ট অন্তর্ভুক্ত করেন, তখন পারফরম্যান্স প্যানেল টাইমলাইনে একটি কাস্টম মার্কার দেখায়।একটি কাজ বা প্রক্রিয়ার সময়কাল পরিমাপ করতে
performance.measureব্যবহার করুন। আপনি যখনdetailসম্পত্তির মধ্যে একটিdevtoolsঅবজেক্ট অন্তর্ভুক্ত করেন, তখন পারফরম্যান্স প্যানেল টাইমলাইনে কাস্টম পরিমাপ এন্ট্রি দেখায়। আপনি যদিperformance.markএকটি রেফারেন্স পয়েন্ট হিসাবে ব্যবহার করেন একটিperformance.measureতৈরি করতে, তাহলে আপনাকেperformance.markকলগুলিতেdevtoolsঅবজেক্ট অন্তর্ভুক্ত করতে হবে না।
devtools অবজেক্ট
এই প্রকারগুলি বিভিন্ন এক্সটেনশন বৈশিষ্ট্যগুলির জন্য devtools অবজেক্টের গঠন সংজ্ঞায়িত করে:
type DevToolsColor =
"primary" | "primary-light" | "primary-dark" |
"secondary" | "secondary-light" | "secondary-dark" |
"tertiary" | "tertiary-light" | "tertiary-dark" |
"error";
interface ExtensionTrackEntryPayload {
dataType?: "track-entry"; // Defaults to "track-entry"
color?: DevToolsColor; // Defaults to "primary"
track: string; // Required: Name of the custom track
trackGroup?: string; // Optional: Group for organizing tracks
properties?: [string, string][]; // Key-value pairs for detailed view
tooltipText?: string; // Short description for tooltip
}
interface ExtensionMarkerPayload {
dataType: "marker"; // Required: Identifies as a marker
color?: DevToolsColor; // Defaults to "primary"
properties?: [string, string][]; // Key-value pairs for detailed view
tooltipText?: string; // Short description for tooltip
}
টাইমলাইনে আপনার ডেটা দেখুন
টাইমলাইনে আপনার কাস্টম ডেটা দেখতে, পারফরম্যান্স প্যানেলে, সেটিংস ক্যাপচার সেটিংস চালু করুন > চেক_বক্স এক্সটেনশন ডেটা ।
এই ডেমো পৃষ্ঠায় এটি চেষ্টা করুন. এক্সটেনশন ডেটা চালু করুন, একটি পারফরম্যান্স রেকর্ডিং শুরু করুন, ডেমো পৃষ্ঠায় নতুন কর্গি যোগ করুন ক্লিক করুন, তারপর রেকর্ডিং বন্ধ করুন। আপনি ট্রেসে একটি কাস্টম ট্র্যাক দেখতে পাবেন যাতে কাস্টম টুলটিপ সহ ইভেন্ট এবং সারাংশ ট্যাবে বিশদ রয়েছে৷
কোড উদাহরণ
পরবর্তী বিভাগগুলিতে, কোডের উদাহরণগুলি দেখুন যা দেখায় যে কীভাবে নিম্নলিখিতগুলি কার্য সম্পাদনের টাইমলাইনে যুক্ত করতে হয়:
কাস্টম ট্র্যাক এবং এন্ট্রি
কাস্টম ট্র্যাক তৈরি করুন এবং একটি কাস্টম ট্র্যাকে আপনার পারফরম্যান্স ডেটা ভিজ্যুয়ালাইজ করতে এন্ট্রি সহ সেগুলি পূরণ করুন৷ যেমন:
// Mark used to represent the start of an image processing task
performance.mark("Image Processing Start");
// ... later in your code
// Track entry representing the completion of image processing
// with additional details and a tooltip
performance.measure("Image Processing Complete", "Image Processing Start", {
detail: {
devtools: {
dataType: "track-entry",
track: "Image Processing Tasks",
trackGroup: "My Tracks", // Group related tracks together
color: "tertiary-dark",
properties: [
["Filter Type", "Gaussian Blur"],
["Resize Dimensions", "500x300"]
],
tooltipText: "Image processed successfully"
}
}
});
এটির টুলটিপ টেক্সট এবং বৈশিষ্ট্য সহ পারফরম্যান্স টাইমলাইনে নিম্নলিখিত কাস্টম ট্র্যাক এন্ট্রি হয়:
চিহ্নিতকারী
সমস্ত ট্র্যাক জুড়ে থাকা কাস্টম মার্কারগুলির সাথে টাইমলাইনে আগ্রহের নির্দিষ্ট পয়েন্টগুলি দৃশ্যত হাইলাইট করুন৷ যেমন:
// Marker indicating when the processed image was uploaded
performance.mark("Image Upload", {
detail: {
devtools: {
dataType: "marker",
color: "secondary",
properties: [
["Image Size", "2.5MB"],
["Upload Destination", "Cloud Storage"]
],
tooltipText: "Processed image uploaded"
}
}
});
এটি টুলটিপ টেক্সট এবং বৈশিষ্ট্য সহ টাইমিংস ট্র্যাকে নিম্নলিখিত মার্কারের ফলাফল দেয়:
