چگونه سایت خود را با API عملکرد سریعتر کنیم

این آموزش نحوه استفاده از Performance API برای ثبت آمارهای DevTool مانند از کاربران واقعی که به برنامه شما دسترسی دارند را توضیح می دهد.

ارزیابی عملکرد برنامه های وب با استفاده از مرورگر DevTools مفید است ، اما تکرار استفاده در دنیای واقعی آسان نیست. افرادی که در مکان های مختلف از دستگاه ها ، مرورگرها و شبکه های مختلف استفاده می کنند ، همه تجربه های متفاوتی خواهند داشت.

مقدمه ای بر عملکرد API

عملکرد API با استفاده از یک بافر برای اندازه گیری معیارهای DevTool مانند در ویژگی های جسم در نقاط خاصی از طول عمر صفحه وب شما. این نکات عبارتند از:

1. پیمایش صفحه: تغییر مسیرهای بارگذاری صفحه ، اتصالات ، دست دادن ، رویدادهای DOM و موارد دیگر را ضبط کنید.
2. بارگذاری منابع: بارگذاری دارایی مانند تصاویر ، CSS ، اسکریپت ها و تماس های Ajax را ضبط کنید.
3. معیارهای رنگ: ضبط اطلاعات ارائه دهنده مرورگر.
4. عملکرد سفارشی: ثبت زمان های پردازش برنامه دلخواه برای یافتن عملکردهای کند.

همه API ها در JavaScript سمت مشتری در دسترس هستند ، از جمله کارگران وب. با استفاده از:

if ('performance' in window) {

  

}

توجه: توجه داشته باشید که Safari ، با وجود اجرای بیشتر API ، از همه روش ها پشتیبانی نمی کند.

API های عملکرد سفارشی (کاربر) نیز در موارد زیر تکرار می شوند:

نیست Date() به اندازه کافی خوب؟

ممکن است نمونه هایی با استفاده از Date() عملکرد برای ضبط زمان های سپری شده مثلا:

const start = new Date();



const elapsed = new Date() - start;

با این حال، Date() محاسبات به نزدیکترین میلی ثانیه و بر اساس زمان سیستم محدود می شوند ، که می تواند توسط سیستم عامل در هر نقطه به روز شود.

Performance API از یک تایمر جداگانه با وضوح بالاتر استفاده می کند که می تواند در کسری از میلی ثانیه ضبط کند. این همچنین معیارهایی را ارائه می کند که در غیر این صورت ضبط آنها غیرممکن است ، مانند زمان جستجوی تغییر مسیر و جستجوی DNS.

ضبط معیارهای عملکرد

محاسبه معیارهای عملکرد در کد سمت مشتری در صورتی مفید است که بتوانید آن را در جایی ضبط کنید. با استفاده از Ajax می توانید آماری را برای تجزیه و تحلیل به سرور خود ارسال کنید رفتن و آوردن / XMLHttpRequest درخواست ها یا Beacon API.

متناوباً ، اکثر سیستم های تحلیلی API های سفارشی مانند رویدادها را برای ضبط زمان بندی ارائه می دهند. به عنوان مثال ، Google Analytics User Timings API می تواند زمان را به DOMContentLoaded با عبور از یک گروه ('pageload') ، نام متغیر ("DOMready") ، و یک مقدار:

const pageload = performance.getEntriesByType( 'navigation' )[0];

ga('send', 'timing', 'pageload', 'DOMready', pageload.domContentLoadedEventStart);

در این مثال از Page Navigation Timing API استفاده می شود. پس بیایید از آنجا شروع کنیم

زمان بندی پیمایش صفحه

آزمایش سایت شما بر روی اتصال سریع بعید است که نشان دهنده تجربه کاربر باشد. مرورگر DevTools شبکه تب به شما امکان می دهد تا سرعت گاز را دریابید ، اما نمی تواند سیگنال های ضعیف یا متناوب 3G را تقلید کند.

Navigation Timing API یکی را هل می دهد PerformanceNavigationTiming اعتراض به بافر عملکرد. این شامل اطلاعاتی در مورد هدایت مجدد ، زمان بارگذاری ، اندازه پرونده ، وقایع DOM و موارد دیگر است که توسط یک کاربر واقعی مشاهده شده است.

با اجرا به شی the دسترسی پیدا کنید:

const pagePerf = performance.getEntriesByType( 'navigation' );

یا با عبور از URL صفحه به آن دسترسی پیدا کنید (window.location) به getEntriesByName() method:

const pagePerf = performance.getEntriesByName( window.location );

هر دو آرایه ای را با یک عنصر واحد حاوی یک شی با خواص فقط خواندنی برمی گردانند. مثلا:

[
  {
    name: "https://site.com/",
    initiatorType: "navigation",
    entryType: "navigation",
    initiatorType: "navigation",
    type: "navigate",
    nextHopProtocol: "h2",
    startTime: 0
    ...
  }
]

شی شامل می شود خصوصیات شناسایی منابع:

ویژگی	شرح
نام	URL منبع
ورودی نوع	نوع عملکرد – "navigation" برای یک صفحه ، "resource" برای یک دارایی
نوع آغازگر	منبعی که بارگیری را آغاز کرده است – "navigation" برای یک صفحه
nextHopProtocol	پروتکل شبکه
سرور	آرایه ای از PerformanceServerTiming اشیاء

توجه: عملکردServerTiming name، description، و duration سنجه ها در HTTP نوشته می شوند Server-Timing سرتیتر توسط پاسخ سرور.

شی شامل می شود خواص زمان بندی منابع به میلی ثانیه نسبت به شروع بارگذاری صفحه. به طور معمول زمان بندی با این ترتیب انتظار می رود:

ویژگی	شرح
زمان شروع	مهر زمان هنگام شروع واکشی – 0 برای یک صفحه
کارگر شروع کنید	مهر زمان قبل از شروع به کار کارگر
تغییر مسیر شروع کنید	مهر زمان برای اولین تغییر مسیر
تغییر مسیر	مهر زمان پس از دریافت آخرین بایت آخرین تغییر مسیر
fetch شروع کنید	مهر زمان قبل از واکشی منبع
domainLookupStart	مهر زمان قبل از مراجعه به DNS
domainLookupEnd	مهر زمان پس از جستجوی DNS
اتصال شروع کنید	مهر زمان قبل از برقراری اتصال سرور
اتصال	مهر زمان پس از برقراری اتصال سرور
safeConnection شروع کنید	مهر زمان قبل از دست دادن SSL
درخواست شروع کنید	مهر زمان قبل از درخواست مرورگر
پاسخ شروع	مهر زمانی که مرورگر اولین بایت داده را دریافت می کند
پاسخ پایان	مهر زمان پس از دریافت آخرین بایت داده
مدت زمان	زمان سپری شده بین زمان شروع و پاسخ پایان

شی شامل می شود ویژگی های اندازه بارگیری در بایت:

ویژگی	شرح
انتقال اندازه	اندازه منبع ، از جمله هدر و بدنه
encodedBodySize	اندازه بدن منبع قبل از رفع فشار
decodedBodySize	اندازه بدن منبع پس از فشرده سازی

سرانجام ، این شی شامل موارد دیگری نیز می شود ویژگی های ناوبری و رویداد DOM (در سافاری موجود نیست):

ویژگی	شرح
نوع	یا "navigate"، "reload"، "back_forward" یا "prerender"
تغییر مسیر	تعداد تغییر مسیرها
unloadEventStart را بارگیری کنید	مهر زمان قبل از unload رویداد سند قبلی
unloadEventEnd	مهر زمان بعد از unload رویداد سند قبلی
domInteractive	مهلت زمانی که تجزیه HTML و ساخت DOM به پایان رسید
domContentLoadedEventStart	مهر زمان قبل از اجرا DOMContentLoaded مسئولین رویداد
domContentLoadedEventEnd	مهر زمان پس از اجرا DOMContentLoaded مسئولین رویداد
domComplete	مهر زمان هنگام ساخت DOM و DOMContentLoaded رویدادها به پایان رسیده است
loadEventStart	مهر زمان قبل از صفحه load رویداد اخراج شده است
loadEventEnd	مهر زمان بعد از صفحه load رویداد. همه دارایی ها بارگیری می شوند

نمونه ای برای ضبط معیارهای بارگیری صفحه بعد از بارگیری کامل صفحه:

'performance' in window && window.addEventListener('load', () => {

  const
    pagePerf        = performance.getEntriesByName( window.location )[0],
    pageDownload    = pagePerf.duration,
    pageDomComplete = pagePerf.domComplete;

});

Resource Timing API فشار می دهد PerformanceResourceTiming هر زمان که دارایی مانند تصویر ، قلم ، فایل CSS ، پرونده جاوا اسکریپت یا هر مورد دیگری توسط صفحه بارگیری می شود ، به بافر عملکرد اعتراض کنید. اجرا کن:

const resPerf = performance.getEntriesByType( 'resource' );

این آرایه ای از اشیا tim زمان بندی منابع را برمی گرداند. این ویژگی ها همان ویژگی صفحه نمایش نشان داده شده در بالا است ، اما بدون اطلاعات رویداد ناوبری و DOM.

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

[
  {
    name: "https://site.com/style.css",
    entryType: "resource",
    initiatorType: "link",
    fetchStart: 150,
    duration: 300
    ...
  },
  {
    name: "https://site.com/script.js",
    entryType: "resource",
    initiatorType: "script",
    fetchStart: 302,
    duration: 112
    ...
  },
  ...
]

یک منبع منفرد را می توان با انتقال URL آن به .getEntriesByName() روش:

const resourceTime = performance.getEntriesByName('https://site.com/style.css');

این یک آرایه با یک عنصر را برمی گرداند:

[
  {
    name: "https://site.com/style.css",
    entryType: "resource",
    initiatorType: "link",
    fetchStart: 150,
    duration: 300
    ...
  }
]

می توانید از API برای گزارش زمان بارگیری و اندازه فشرده شده هر پرونده CSS استفاده کنید:

const css = performance.getEntriesByType('resource')
  .filter( r => r.initiatorType === 'link' && r.name.includes('.css'))
  .map( r => ({

      name: r.name,
      load: r.duration + 'ms',
      size: r.decodedBodySize + ' bytes'

  }) );

css اکنون آرایه برای هر فایل CSS یک شی دارد. مثلا:

[
  {
    name: "https://site.com/main.css",
    load: "155ms",
    size: "14304 bytes"
  },
  {
    name: "https://site.com/grid.css",
    load: "203ms",
    size: "5696 bytes"
  }
]

توجه: بار و اندازه صفر نشان می دهد که دارایی قبلاً پنهان شده است.

حداقل 150 اشیا met متریک منابع در بافر عملکرد ثبت می شوند. می توانید یک عدد خاص را با .setResourceTimingBufferSize(N) روش. مثلا:

performance.setResourceTimingBufferSize(500);

معیارهای موجود را می توان با .clearResourceTimings() method.

زمان بندی رنگ مرورگر

اولین رنگ محتوایی (FCP) بعد از رفتن کاربر به صفحه شما ، مدت زمان ارائه محتوا را اندازه می گیرد. کارایی بخش پانل DevTool Lighthouse Chrome معیار را نشان می دهد. Google زمان FCP کمتر از دو ثانیه را در نظر می گیرد خوب و صفحه شما سریعتر از 75٪ از وب ظاهر می شود.

Paint Timing API دو رکورد را دو فشار می دهد PerformancePaintTiming به بافر عملکرد اعتراض می کند:

• اولین رنگ رخ می دهد: مرورگر پیکسل اول را رنگ می کند ، و
• اولین محتوای رنگ رخ می دهد: مرورگر اولین مورد از محتوای DOM را نقاشی می کند

هنگام اجرا هر دو شی objects به صورت آرایه ای بازگردانده می شوند:

const paintPerf = performance.getEntriesByType( 'paint' );

نتیجه مثال:

[
  {
    "name": "first-paint",
    "entryType": "paint",
    "startTime": 125
  },
  {
    "name": "first-contentful-paint",
    "entryType": "paint",
    "startTime": 127
  }
]

زمان شروع نسبت به بارگذاری اولیه صفحه است.

زمان بندی کاربر

از API عملکرد می توان برای تعیین توابع برنامه خود استفاده کرد. همه روش های زمان بندی کاربر در JavaScript ، Web Workers ، Deno و Node.j در سمت مشتری موجود است.

توجه داشته باشید که اسکریپت های Node.js باید بارگذاری کنند قلاب های عملکردی (perf_hooks) مدول.

CommonJS require نحو:

const { performance } = require('perf_hooks');

یا ماژول ES import نحو:

import { performance } from 'perf_hooks';

ساده ترین گزینه است performance.now()، که یک مهر زمان با وضوح بالا از ابتدای عمر فرآیند را برمی گرداند.

شما می توانید استفاده کنید performance.now() برای تایمرهای ساده مثلا:

const start = performance.now();



const elapsed = performance.now() - start;

توجه: غیر استاندارد است timeOrigin ویژگی برچسب زمان را در زمان یونیکس برمی گرداند. می تواند در Node.js و مرورگر JavaScript استفاده شود ، اما در IE و Safari قابل استفاده نیست.

performance.now() هنگام مدیریت چندین تایمر به سرعت غیر عملی می شود. .mark() روش یک نام اضافه می کند PerformanceMark اعتراض به بافر عملکرد. مثلا:

performance.mark('script:start');

performance.mark('p1:start');

performance.mark('p1:end');

performance.mark('p2:start');

performance.mark('p2:end');

performance.mark('script:end');

کد زیر آرایه ای از اشیا mark مارک را برمی گرداند:

const marks = performance.getEntriesByType( 'mark' );

با entryType، name، و startTime خواص:

[
  {
    entryType: "mark",
    name: "script:start",
    startTime: 100
  },
  {
    entryType: "mark",
    name: "p1:start",
    startTime: 200
  },
  {
    entryType: "mark",
    name: "p1:end",
    startTime: 300
  },
  ...
]

زمان سپری شده بین دو علامت را می توان با استفاده از محاسبه کرد .measure() روش. این یک نام اندازه گیری ، نام علامت شروع (یا) است null برای استفاده از صفر) ، و نام علامت پایان (یا null برای استفاده از زمان فعلی):

performance.measure('p1', 'p1:start', 'p1:end');
performance.measure('script', null, 'script:end');

هر تماس هل می دهد اندازه گیری عملکرد شی با مدت زمان محاسبه شده به بافر عملکرد. با اجرای موارد زیر می توان به آرایه ای از اقدامات دسترسی یافت:

const measures = performance.getEntriesByType( 'measure' );

مثال:

[
  {
    entryType: "measure",
    name: "p1",
    startTime: 200,
    duration: 100
  },
  {

    entryType: "measure",
    name: "script",
    startTime: 0,
    duration: 500
  }
]

اشیا Mark را علامت گذاری یا اندازه گیری می کنیم با استفاده از .getEntriesByName() روش:

performance.getEntriesByName( 'p1' );

روش های دیگر:

آ عملکرد ناظر می تواند تغییرات در بافر را تماشا کند و هنگامی که اشیا specific خاص ظاهر می شوند عملکردی را اجرا می کند. یک تابع مشاهدهگر با دو پارامتر تعریف می شود:

1. list: ورودی های ناظر
2. observer (اختیاری): شی ناظر

function performanceHandler(list, observer) {

  list.getEntries().forEach(entry => {

    console.log(`name    : ${ entry.name }`);
    console.log(`type    : ${ entry.type }`);
    console.log(`duration: ${ entry.duration }`);

    
    

  });

}

این عملکرد به یک عملکرد جدید منتقل می شود PerformanceObserver هدف – شی. .observe() روش سپس قابل مشاهده می شود entryTypes (بطور کلی "mark"، "measure"، و / یا "resource"):

let observer = new PerformanceObserver( performanceHandler );
observer.observe( { entryTypes: [ 'mark', 'measure' ] } );

performanceHandler() تابع هر زمان که علامت جدید یا اندازه گیری اشیا to به بافر عملکرد رانده شود ، اجرا می شود.

API خود پروفایل

API خود پروفایل مربوط به Performance API است و می تواند به شما در یافتن توابع پس زمینه ناکارآمد یا غیرضروری کمک کند بدون اینکه نیازی به تنظیم دستی علائم و معیارها باشد.

کد مثال:

const profile = await performance.profile({ sampleInterval: 10 });




const trace = await profile.stop();

ردیابی داده ها را در مورد آنچه که اسکریپت ، عملکرد و شماره خط در هر بازه نمونه برداری شده اجرا می کند ، برمی گرداند. ارجاعات مکرر به همان کد می تواند نشان دهد که امکان بهینه سازی بیشتر وجود دارد.

در حال حاضر API در دست توسعه است (مراجعه کنید وضعیت Chrome) و قابل تغییر است.

تنظیم عملکرد برنامه

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

حل این مشکلات عملکردی موضوع دیگری است ، اما کتاب SitePoint Jump Start Web Performance به شما کمک خواهد کرد. این مجموعه طیف وسیعی از میان وعده های سریع ، دستور العمل های ساده و رژیم های غذایی را تغییر می دهد تا سایت شما سریعتر و پاسخگوتر باشد.