Performance Observer API: بازگشایی معیارهای عملکرد زمان اجرا و تحلیل گلوگاه‌ها

در چشم‌انداز دیجیتال پرتقاضای امروز، ارائه یک تجربه کاربری یکپارچه و پاسخگو از اهمیت بالایی برخوردار است. زمان‌های بارگذاری کند و تعاملات ناپایدار می‌توانند به سرعت منجر به ناامیدی و ترک کاربر شوند. Performance Observer API مکانیزم قدرتمندی برای نظارت و تحلیل عملکرد زمان اجرا فراهم می‌کند و به توسعه‌دهندگان امکان می‌دهد تا گلوگاه‌ها را شناسایی کرده و برنامه‌های خود را برای رسیدن به اوج عملکرد بهینه‌سازی کنند. این راهنمای جامع به بررسی جزئیات Performance Observer API می‌پردازد و با ارائه مثال‌های عملی و بینش‌های کاربردی به شما کمک می‌کند تا از تمام پتانسیل آن بهره‌مند شوید.

Performance Observer API چیست؟

Performance Observer API یک API جاوا اسکریپت است که به شما امکان می‌دهد تا معیارهای عملکرد را به محض وقوع در مرورگر مشترک شوید. برخلاف ابزارهای سنتی نظارت بر عملکرد که اغلب نیاز به تحلیل پس از رویداد دارند، Performance Observer API دسترسی بی‌درنگ به داده‌های عملکرد را فراهم می‌کند و به شما این امکان را می‌دهد که به محض بروز مشکلات عملکردی، به آن‌ها واکنش نشان دهید. این حلقه بازخورد بی‌درنگ برای شناسایی و رفع گلوگاه‌های عملکردی قبل از تأثیرگذاری بر تجربه کاربری، بسیار ارزشمند است.

آن را مانند یک دستگاه شنود در نظر بگیرید که به طور مداوم عملکرد برنامه شما را نظارت می‌کند. هنگامی که یک رویداد عملکردی خاص رخ می‌دهد (به عنوان مثال، یک وظیفه طولانی، بارگذاری یک منبع، یک تغییر چیدمان)، observer مطلع می‌شود و شما می‌توانید داده‌های رویداد را برای به دست آوردن بینش در مورد عملکرد برنامه پردازش کنید.

مفاهیم و اصطلاحات کلیدی

قبل از پرداختن به پیاده‌سازی عملی، بیایید برخی از مفاهیم و اصطلاحات کلیدی را تعریف کنیم:

• PerformanceEntry: یک واسط پایه که یک معیار یا رویداد عملکردی واحد را نشان می‌دهد. این شامل ویژگی‌های مشترکی مانند name، entryType، startTime و duration است.
• PerformanceObserver: واسط اصلی مسئول اشتراک و دریافت اعلان‌ها در مورد ورودی‌های عملکردی است.
• entryTypes: آرایه‌ای از رشته‌ها که انواع ورودی‌های عملکردی را که observer باید نظارت کند، مشخص می‌کند. انواع ورودی رایج شامل 'longtask'، 'resource'، 'layout-shift'، 'paint' و 'navigation' هستند.
• buffered: یک پرچم بولی که نشان می‌دهد آیا observer باید اعلان‌هایی را برای ورودی‌های عملکردی که قبل از ایجاد observer رخ داده‌اند، دریافت کند یا خیر.
• observe(): متدی که برای شروع مشاهده ورودی‌های عملکردی استفاده می‌شود. این متد یک شیء گزینه‌ها را می‌گیرد که entryTypes و پرچم buffered را مشخص می‌کند.
• disconnect(): متدی که برای متوقف کردن مشاهده ورودی‌های عملکردی استفاده می‌شود.

راه‌اندازی یک Performance Observer

ایجاد یک Performance Observer ساده است. در اینجا یک مثال اولیه وجود دارد که نحوه مشاهده وظایف طولانی را نشان می‌دهد:

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Long Task:', entry);
    // ورودی وظیفه طولانی را پردازش کنید
  });
});

observer.observe({ entryTypes: ['longtask'] });

در این مثال، ما یک نمونه جدید PerformanceObserver ایجاد می‌کنیم. سازنده یک تابع callback می‌گیرد که هر زمان یک ورودی عملکردی جدید از نوع مشخص شده مشاهده شود، اجرا خواهد شد. متد list.getEntries() آرایه‌ای از اشیاء PerformanceEntry را که با انواع ورودی مشاهده شده مطابقت دارند، برمی‌گرداند. در نهایت، ما متد observe() را برای شروع مشاهده وظایف طولانی فراخوانی می‌کنیم.

تجزیه و تحلیل کد:

• new PerformanceObserver((list) => { ... }): یک نمونه observer جدید با یک تابع callback ایجاد می‌کند. تابع callback یک آرگومان `list` دریافت می‌کند.
• list.getEntries().forEach((entry) => { ... }): تمام اشیاء PerformanceEntry را از `list` دریافت کرده و روی آن‌ها تکرار می‌کند.
• console.log('Long Task:', entry);: ورودی وظیفه طولانی را در کنسول ثبت می‌کند. شما این قسمت را با منطق پردازش خود جایگزین خواهید کرد.
• observer.observe({ entryTypes: ['longtask'] });: شروع به مشاهده ورودی‌های عملکرد از نوع 'longtask' می‌کند.

انواع رایج ورودی‌های عملکرد و کاربردهای آن‌ها

Performance Observer API از انواع مختلفی از ورودی‌ها پشتیبانی می‌کند که هر کدام بینش‌های متفاوتی در مورد عملکرد برنامه ارائه می‌دهند. در اینجا خلاصه‌ای از برخی از رایج‌ترین انواع ورودی و کاربردهای آن‌ها آورده شده است:

۱. وظایف طولانی (Long Tasks)

نوع ورودی: 'longtask'

وظایف طولانی، وظایفی هستند که نخ اصلی (main thread) را برای بیش از ۵۰ میلی‌ثانیه مسدود می‌کنند. این وظایف می‌توانند باعث تأخیرهای قابل توجه و ناپایداری شوند و بر تجربه کاربری تأثیر منفی بگذارند. نظارت بر وظایف طولانی به شما امکان می‌دهد تا گلوگاه‌های عملکردی ناشی از کد ناکارآمد یا پردازش بیش از حد را شناسایی و برطرف کنید.

موارد استفاده نمونه:

• شناسایی توابع جاوا اسکریپت که از نظر محاسباتی سنگین هستند.
• بهینه‌سازی اسکریپت‌های شخص ثالث که باعث تأخیرهای طولانی می‌شوند.
• شکستن وظایف بزرگ به واحدهای کوچک‌تر و ناهمزمان.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Long Task:', entry.duration);
    // مدت زمان وظیفه طولانی را برای شناسایی گلوگاه‌های احتمالی تحلیل کنید.
  });
});

observer.observe({ entryTypes: ['longtask'] });

۲. زمان‌بندی منابع (Resource Timing)

نوع ورودی: 'resource'

API زمان‌بندی منابع اطلاعات دقیقی در مورد بارگذاری منابع جداگانه مانند تصاویر، اسکریپت‌ها و شیوه‌نامه‌ها (stylesheets) ارائه می‌دهد. با نظارت بر زمان‌بندی منابع، می‌توانید منابعی را که به کندی بارگذاری می‌شوند شناسایی کرده و تحویل آن‌ها را برای بهبود عملکرد بارگذاری صفحه بهینه کنید.

موارد استفاده نمونه:

• شناسایی تصاویر بزرگی که بارگذاری صفحه را کند می‌کنند.
• بهینه‌سازی فشرده‌سازی و فرمت‌های تصویر.
• استفاده از کش مرورگر برای کاهش زمان بارگذاری منابع.
• تحلیل تأثیر اسکریپت‌های شخص ثالث بر عملکرد بارگذاری صفحه.
• شناسایی گلوگاه‌های مربوط به تفکیک نام DNS، اتصال TCP و مذاکره TLS.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Resource:', entry.name, entry.duration);
    // زمان بارگذاری منبع را تحلیل کرده و تحویل آن را بهینه کنید.
  });
});

observer.observe({ entryTypes: ['resource'] });

۳. تغییرات چیدمان (Layout Shifts)

نوع ورودی: 'layout-shift'

تغییرات چیدمان زمانی رخ می‌دهند که عناصر در یک صفحه وب به طور غیرمنتظره‌ای موقعیت خود را تغییر می‌دهند و باعث ایجاد یک تجربه کاربری ناخوشایند و مختل‌کننده می‌شوند. این تغییرات اغلب به دلیل تصاویری که ابعاد مشخصی ندارند، محتوای تزریق شده به صورت پویا، یا فونت‌هایی که دیر بارگذاری می‌شوند، ایجاد می‌شوند. نظارت بر تغییرات چیدمان به شما امکان می‌دهد تا علل ریشه‌ای این تغییرات غیرمنتظره را شناسایی و برطرف کرده و پایداری بصری برنامه خود را بهبود بخشید.

موارد استفاده نمونه:

• شناسایی تصاویری که ابعاد مشخصی ندارند و باعث تغییر چیدمان می‌شوند.
• بهینه‌سازی بارگذاری محتوای تزریق شده به صورت پویا برای به حداقل رساندن تغییرات چیدمان.
• استفاده از استراتژی‌های نمایش فونت برای جلوگیری از تغییر چیدمان ناشی از بارگذاری فونت.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Layout Shift:', entry.value);
    // امتیاز تغییر چیدمان را تحلیل کرده و عناصری که باعث تغییر می‌شوند را شناسایی کنید.
  });
});

observer.observe({ entryTypes: ['layout-shift'] });

۴. زمان‌بندی رنگ‌آمیزی (Paint Timing)

نوع ورودی: 'paint'

API زمان‌بندی رنگ‌آمیزی معیارهایی برای اولین رنگ‌آمیزی (FP) و اولین رنگ‌آمیزی محتوایی (FCP) ارائه می‌دهد که شاخص‌های حیاتی عملکرد بارگذاری درک شده توسط کاربر هستند. نظارت بر زمان‌بندی رنگ‌آمیزی به شما امکان می‌دهد تا رندر برنامه خود را برای ارائه یک تجربه سریع‌تر و جذاب‌تر از نظر بصری بهینه کنید.

موارد استفاده نمونه:

• بهینه‌سازی مسیر رندرینگ حیاتی برای کاهش زمان تا اولین رنگ‌آمیزی.
• به تعویق انداختن منابع غیرحیاتی برای بهبود زمان تا اولین رنگ‌آمیزی محتوایی.
• استفاده از تقسیم کد (code splitting) و بارگذاری تنبل (lazy loading) برای کاهش اندازه بسته اولیه جاوا اسکریپت.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Paint:', entry.name, entry.startTime);
    // زمان‌بندی رنگ‌آمیزی را تحلیل کرده و خط لوله رندرینگ را بهینه کنید.
  });
});

observer.observe({ entryTypes: ['paint'] });

۵. زمان‌بندی ناوبری (Navigation Timing)

نوع ورودی: 'navigation'

API زمان‌بندی ناوبری اطلاعات دقیقی در مورد مراحل مختلف فرآیند ناوبری صفحه، از درخواست اولیه تا تکمیل بارگذاری صفحه، ارائه می‌دهد. نظارت بر زمان‌بندی ناوبری به شما امکان می‌دهد تا گلوگاه‌ها را در فرآیند ناوبری شناسایی کرده و تجربه کلی بارگذاری صفحه را بهینه کنید.

موارد استفاده نمونه:

• تحلیل زمان تفکیک نام DNS، زمان اتصال TCP و زمان مذاکره TLS.
• شناسایی گلوگاه‌های پردازش سمت سرور.
• بهینه‌سازی تحویل محتوای HTML برای کاهش زمان تا اولین بایت (TTFB).

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Navigation:', entry.duration);
    // زمان‌بندی ناوبری را تحلیل کرده و فرآیند بارگذاری صفحه را بهینه کنید.
  });
});

observer.observe({ entryTypes: ['navigation'] });

مثال‌های واقعی و موارد استفاده

Performance Observer API می‌تواند در طیف گسترده‌ای از سناریوها برای بهبود عملکرد برنامه به کار رود. در اینجا برخی از مثال‌های واقعی و موارد استفاده آورده شده است:

۱. وب‌سایت تجارت الکترونیک: بهینه‌سازی بارگذاری تصاویر محصول

یک وب‌سایت تجارت الکترونیک می‌تواند از API زمان‌بندی منابع برای نظارت بر زمان بارگذاری تصاویر محصول استفاده کند. با شناسایی تصاویر بزرگی که بارگذاری صفحه را کند می‌کنند، وب‌سایت می‌تواند فشرده‌سازی تصاویر را بهینه کرده، از تصاویر واکنش‌گرا استفاده کند و از کش مرورگر برای بهبود تجربه خرید بهره ببرد. به عنوان مثال، یک خرده‌فروش آنلاین در ژاپن ممکن است متوجه شود که تصاویر با وضوح بالا که در دستگاه‌های پیشرفته به خوبی نمایش داده می‌شوند، باعث زمان بارگذاری غیرقابل قبولی برای کاربران با اتصالات کندتر در مناطق روستایی می‌شوند. استفاده از Resource Timing API به آن‌ها کمک می‌کند تا این مشکل را شناسایی کرده و تحویل تصویر تطبیقی بر اساس شرایط شبکه را پیاده‌سازی کنند.

۲. وب‌سایت خبری: کاهش تغییرات چیدمان ناشی از بارگذاری تبلیغات

یک وب‌سایت خبری می‌تواند از API تغییر چیدمان برای نظارت بر تغییرات چیدمان ناشی از تبلیغات تزریق شده به صورت پویا استفاده کند. با رزرو فضا برای تبلیغات و بهینه‌سازی بارگذاری محتوای تبلیغاتی، وب‌سایت می‌تواند تغییرات چیدمان را به حداقل رسانده و یک تجربه خواندن پایدارتر و کاربرپسندتر ارائه دهد. یک رسانه خبری در هند، که به مخاطبان گسترده‌ای بر روی دستگاه‌های متنوع خدمات می‌دهد، می‌تواند از این API برای اطمینان از یک تجربه خواندن ثابت حتی زمانی که تبلیغات از منابع مختلف با سرعت‌های متفاوت بارگذاری می‌شوند، استفاده کند. جلوگیری از پرش‌های ناگهانی محتوا باعث افزایش تعامل کاربر و کاهش نرخ پرش (bounce rates) می‌شود.

۳. پلتفرم رسانه اجتماعی: تحلیل وظایف طولانی ناشی از فریمورک‌های جاوا اسکریپت

یک پلتفرم رسانه اجتماعی می‌تواند از API وظایف طولانی برای شناسایی توابع جاوا اسکریپت که از نظر محاسباتی سنگین هستند و باعث تأخیر و ناپایداری می‌شوند، استفاده کند. با بهینه‌سازی این توابع یا شکستن آن‌ها به واحدهای کوچک‌تر و ناهمزمان، پلتفرم می‌تواند پاسخگویی رابط کاربری را بهبود بخشیده و یک تجربه مرور روان‌تر ارائه دهد. به عنوان مثال، یک شرکت رسانه اجتماعی مستقر در ایالات متحده ممکن است کشف کند که برخی از ویژگی‌هایی که به شدت به یک فریمورک جاوا اسکریپت خاص متکی هستند، باعث ایجاد وظایف طولانی در دستگاه‌های تلفن همراه قدیمی‌تر مورد استفاده کاربران در آسیای جنوب شرقی می‌شوند. با شناسایی این گلوگاه‌ها، آن‌ها می‌توانند تلاش‌های بهینه‌سازی را اولویت‌بندی کرده یا پیاده‌سازی‌های جایگزین فریمورک را بررسی کنند.

۴. بازی مبتنی بر وب: نظارت بر زمان‌های رندر فریم

یک بازی مبتنی بر وب می‌تواند از API زمان‌بندی رنگ‌آمیزی برای نظارت بر زمان‌های رندر فریم و شناسایی گلوگاه‌های عملکردی که بر روانی بازی تأثیر می‌گذارند، استفاده کند. با بهینه‌سازی خط لوله رندرینگ و کاهش میزان کار انجام شده در هر فریم، بازی می‌تواند یک تجربه بازی روان‌تر و جذاب‌تر ارائه دهد. یک توسعه‌دهنده بازی در اروپا، که مخاطبان جهانی را هدف قرار داده است، می‌تواند از این API برای اطمینان از اجرای روان بازی بر روی طیف گسترده‌ای از پیکربندی‌های سخت‌افزاری استفاده کند. شناسایی تغییرات در عملکرد رندرینگ در مناطق مختلف جغرافیایی به آن‌ها امکان می‌دهد تا دارایی‌ها و کد بازی را برای عملکرد بهینه در همه جا بهینه‌سازی کنند.

۵. پلتفرم آموزش آنلاین: بهبود ناوبری و انتقال صفحات

یک پلتفرم آموزش آنلاین می‌تواند از API زمان‌بندی ناوبری برای تحلیل مراحل مختلف فرآیند ناوبری صفحه و شناسایی گلوگاه‌هایی که بر تجربه کلی بارگذاری صفحه تأثیر می‌گذارند، استفاده کند. با بهینه‌سازی پردازش سمت سرور، بهبود تحویل محتوای HTML و استفاده از کش مرورگر، پلتفرم می‌تواند یک تجربه یادگیری سریع‌تر و یکپارچه‌تر ارائه دهد. به عنوان مثال، یک پلتفرم آموزشی مستقر در کانادا، که به دانشجویان در سراسر جهان خدمات می‌دهد، می‌تواند زمان‌بندی‌های ناوبری را تحلیل کند تا اطمینان حاصل کند که دانشجویان در کشورهایی با زیرساخت اینترنت محدود، هنگام ناوبری بین دروس، زمان‌های بارگذاری قابل قبولی را تجربه می‌کنند. شناسایی پاسخ‌های کند سرور در مناطق خاص به آن‌ها امکان می‌دهد تا پیکربندی شبکه تحویل محتوای (CDN) خود را بهینه کنند.

بهترین شیوه‌ها برای استفاده از Performance Observer API

برای استفاده موثر از Performance Observer API، بهترین شیوه‌های زیر را در نظر بگیرید:

• فقط انواع ورودی‌هایی را که به تحلیل شما مرتبط هستند، مشاهده کنید. مشاهده انواع ورودی‌های بیش از حد می‌تواند منجر به سربار عملکردی شود و شناسایی مهم‌ترین مشکلات عملکردی را دشوار کند.
• ورودی‌های عملکردی را به طور کارآمد پردازش کنید. از انجام عملیات محاسباتی سنگین در تابع callback observer خودداری کنید، زیرا این می‌تواند بر عملکرد تأثیر منفی بگذارد. استفاده از یک وب ورکر (web worker) برای انتقال پردازش به یک نخ جداگانه را در نظر بگیرید.
• از تکنیک‌های نمونه‌برداری برای کاهش مقدار داده‌های جمع‌آوری شده استفاده کنید. در برخی موارد، ممکن است لازم باشد ورودی‌های عملکردی را نمونه‌برداری کنید تا مقدار داده‌های جمع‌آوری شده را کاهش داده و سربار عملکردی را به حداقل برسانید.
• مدیریت خطای قوی پیاده‌سازی کنید. Performance Observer API نسبتاً پایدار است، اما مهم است که مدیریت خطای قوی پیاده‌سازی کنید تا از اختلال در برنامه شما توسط خطاهای غیرمنتظره جلوگیری شود.
• پیامدهای حریم خصوصی جمع‌آوری داده‌های عملکرد را در نظر بگیرید. با کاربران در مورد داده‌های عملکردی که جمع‌آوری می‌کنید شفاف باشید و اطمینان حاصل کنید که از تمام مقررات حریم خصوصی قابل اجرا پیروی می‌کنید. این امر به ویژه در مناطقی با قوانین سختگیرانه حفاظت از داده‌ها مانند GDPR اتحادیه اروپا اهمیت دارد.
• از گزینه `buffered` هوشمندانه استفاده کنید. در حالی که برای ثبت معیارهای عملکرد اولیه مفید است، آگاه باشید که استفاده از `buffered: true` به طور بالقوه می‌تواند مصرف حافظه را افزایش دهد، به ویژه هنگام مشاهده تعداد زیادی از رویدادها. از آن با احتیاط استفاده کنید و تأثیر بالقوه بر عملکرد، به ویژه در دستگاه‌های کم‌توان را در نظر بگیرید.
• پردازش داده‌های خود را Debounce یا throttle کنید. اگر داده‌های عملکردی را برای تحلیل به یک سرور راه دور ارسال می‌کنید، Debounce یا throttle کردن انتقال داده را برای جلوگیری از اشباع شبکه، به ویژه در دوره‌های فعالیت بالا، در نظر بگیرید.

تکنیک‌ها و ملاحظات پیشرفته

۱. استفاده از وب ورکرها برای پردازش داده‌های عملکرد

همانطور که قبلاً ذکر شد، انجام محاسبات پیچیده مستقیماً در داخل callback Performance Observer می‌تواند بر پاسخگویی نخ اصلی تأثیر بگذارد. یک روش خوب، انتقال این پردازش به یک Web Worker است. وب ورکرها در یک نخ جداگانه اجرا می‌شوند و از مسدود کردن نخ اصلی جلوگیری کرده و یک تجربه کاربری روان را حفظ می‌کنند.

در اینجا یک مثال ساده آورده شده است:

1. یک اسکریپت وب ورکر ایجاد کنید (مثلاً `performance-worker.js`):

// performance-worker.js
self.addEventListener('message', (event) => {
  const performanceData = event.data;
  // تحلیل پیچیده خود را در اینجا انجام دهید
  const processedData = processPerformanceData(performanceData);  // با تابع واقعی خود جایگزین کنید
  self.postMessage(processedData);
});

function processPerformanceData(data) {
  // منطق پردازش پیچیده شما در اینجا
  return data; // با داده‌های پردازش شده جایگزین کنید
}

2. در اسکریپت اصلی خود:

const worker = new Worker('performance-worker.js');

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  // ارسال ورودی‌ها به ورکر برای پردازش
  worker.postMessage(entries);
});

worker.addEventListener('message', (event) => {
  const processedData = event.data;
  // مدیریت داده‌های پردازش شده از ورکر
  console.log('Processed Data from Worker:', processedData);
});

observer.observe({ entryTypes: ['longtask'] });

این رویکرد به شما امکان می‌دهد تا تحلیل‌های پیچیده را بدون تأثیر بر پاسخگویی نخ اصلی انجام دهید و در نتیجه تجربه کاربری روان‌تری داشته باشید.

۲. ارتباط دادن داده‌های عملکرد با اقدامات کاربر

برای به دست آوردن بینش عمیق‌تر، داده‌های عملکرد را با اقدامات خاص کاربر مرتبط کنید. به عنوان مثال، ردیابی کنید که کدام کلیک‌ها یا تعاملات دکمه‌ها باعث ایجاد وظایف طولانی یا تغییرات چیدمان می‌شوند. این به شما کمک می‌کند تا کد یا مؤلفه‌های دقیقی را که مسئول گلوگاه‌های عملکردی هستند، مشخص کنید. می‌توانید از رویدادهای سفارشی و برچسب‌های زمانی برای پیوند دادن ورودی‌های عملکرد با تعاملات کاربر استفاده کنید.

// مثال: ردیابی کلیک دکمه و ارتباط آن با وظایف طولانی

document.getElementById('myButton').addEventListener('click', () => {
  const clickTimestamp = Date.now();

  // منطق کلیک دکمه شما در اینجا
  performSomeAction();

  // مشاهده وظایف طولانی پس از کلیک
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      if (entry.startTime >= clickTimestamp) {
        console.log('Long Task after button click:', entry);
        // ارسال داده‌های وظیفه طولانی، به همراه clickTimestamp، به سرویس تحلیل خود
      }
    });
  });

  observer.observe({ entryTypes: ['longtask'] });
});

با ارتباط دادن داده‌های عملکرد با اقدامات کاربر، می‌توانید درک بسیار دقیق‌تری از تجربه کاربری به دست آورید و تلاش‌های بهینه‌سازی را بر این اساس اولویت‌بندی کنید.

۳. استفاده از Performance Marks و Measures

Performance API همچنین متدهای performance.mark() و performance.measure() را ارائه می‌دهد که به شما امکان می‌دهد معیارهای عملکرد سفارشی را در برنامه خود تعریف کنید. Marks برچسب‌های زمانی هستند که می‌توانید در نقاط خاصی از کد خود قرار دهید، در حالی که measures مدت زمان بین دو mark را محاسبه می‌کنند. این به ویژه برای اندازه‌گیری عملکرد مؤلفه‌های سفارشی یا بلوک‌های کد خاص مفید است.

// مثال: اندازه‌گیری عملکرد یک مؤلفه سفارشی

performance.mark('componentStart');

// منطق رندر مؤلفه شما در اینجا
renderMyComponent();

performance.mark('componentEnd');

performance.measure('componentRenderTime', 'componentStart', 'componentEnd');

const measure = performance.getEntriesByName('componentRenderTime')[0];
console.log('Component Render Time:', measure.duration);

سپس می‌توانید این measures سفارشی را با استفاده از Performance Observer API با مشاهده نوع ورودی 'measure' مشاهده کنید.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.entryType === 'measure') {
      console.log('Custom Measure:', entry.name, entry.duration);
    }
  });
});

observer.observe({ entryTypes: ['measure'] });

جایگزین‌های Performance Observer API

در حالی که Performance Observer API ابزار قدرتمندی است، تنها گزینه برای نظارت بر عملکرد نیست. در اینجا برخی از جایگزین‌ها آورده شده است:

• Google Lighthouse: یک ابزار ممیزی جامع که گزارش‌های عملکردی دقیق و توصیه‌هایی برای بهبود ارائه می‌دهد.
• WebPageTest: یک ابزار آنلاین قدرتمند برای تست عملکرد وب‌سایت از مکان‌ها و مرورگرهای مختلف.
• ابزارهای توسعه‌دهنده مرورگر: Chrome DevTools، Firefox Developer Tools و سایر ابزارهای توسعه‌دهنده مرورگر، امکانات تحلیل عملکرد فراوانی از جمله پروفایل‌سازی، ضبط خط زمانی و تحلیل شبکه را فراهم می‌کنند.
• ابزارهای نظارت بر کاربر واقعی (RUM): ابزارهای RUM داده‌های عملکرد را از کاربران واقعی جمع‌آوری می‌کنند و بینش‌های ارزشمندی در مورد تجربه کاربری واقعی ارائه می‌دهند. نمونه‌ها شامل New Relic، Datadog و Sentry هستند.
• ابزارهای نظارت ترکیبی (Synthetic): ابزارهای نظارت ترکیبی تعاملات کاربر را شبیه‌سازی می‌کنند تا به طور پیشگیرانه مشکلات عملکردی را قبل از تأثیرگذاری بر کاربران واقعی شناسایی کنند.

نتیجه‌گیری

Performance Observer API یک ابزار ضروری برای هر توسعه‌دهنده وب است که به طور جدی به ارائه یک تجربه کاربری با عملکرد بالا اهمیت می‌دهد. با فراهم کردن دسترسی بی‌درنگ به معیارهای عملکرد، این API به شما امکان می‌دهد تا به طور پیشگیرانه گلوگاه‌های عملکردی را شناسایی و برطرف کنید، برنامه خود را برای رسیدن به اوج عملکرد بهینه‌سازی کنید و اطمینان حاصل کنید که کاربران شما تجربه‌ای روان و جذاب دارند. با ترکیب Performance Observer API با سایر ابزارها و تکنیک‌های نظارت بر عملکرد، می‌توانید دیدگاهی جامع از عملکرد برنامه خود به دست آورید و به طور مداوم تجربه کاربری را بهبود بخشید.

به یاد داشته باشید که به طور مداوم عملکرد برنامه خود را نظارت، تحلیل و بهینه‌سازی کنید تا از رقبا پیشی بگیرید و یک تجربه کاربری در سطح جهانی ارائه دهید. Performance Observer API به شما این قدرت را می‌دهد که کنترل عملکرد برنامه خود را در دست بگیرید و اطمینان حاصل کنید که با خواسته‌های روزافزون دنیای دیجیتال امروز مطابقت دارد.

این راهنمای جامع، پایه‌ای محکم برای درک و استفاده از Performance Observer API برای شما فراهم کرده است. اکنون زمان آن است که دانش خود را به کار بگیرید و شروع به بازگشایی پتانسیل کامل این ابزار قدرتمند کنید!