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

آشنایی با اپلیکیشن وب

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

شما نمی توانید چیزی را که نمی توانید اندازه گیری کنید بهینه کنید

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

زمان با وضوح بالا و now()

بخش اساسی اندازه‌گیری دقیق زمان، دقت است. در زمان‌های قدیم، زمان‌بندی مبتنی بر اندازه‌گیری میلی‌ثانیه داشتیم که خوب است، اما ساختن یک سایت 60 FPS بدون جاک به این معنی است که هر فریم باید در 16 میلی‌ثانیه ترسیم شود. بنابراین وقتی شما فقط دقت میلی ثانیه ای دارید، دقت لازم برای تجزیه و تحلیل خوب را ندارد. زمان وضوح بالا را وارد کنید، یک نوع زمان بندی جدید که در مرورگرهای مدرن تعبیه شده است. زمان رزولوشن بالا به ما مهرهای زمانی ممیز شناور می دهد که می توانند تا وضوح میکروثانیه دقیق باشند - هزار بار بهتر از قبل.

برای دریافت زمان فعلی در برنامه وب خود، متد now() را فراخوانی کنید که پسوند رابط Performance را تشکیل می دهد. کد زیر نحوه انجام این کار را نشان می دهد:

var myTime = window.performance.now();

رابط دیگری به نام PerformanceTiming وجود دارد که چندین زمان مختلف را در رابطه با نحوه بارگذاری برنامه وب شما ارائه می دهد. متد now() زمان سپری شده از زمانی که زمان navigationStart در PerformanceTiming اتفاق افتاده را برمی گرداند.

نوع DOMHighResTimeStamp

هنگام تلاش برای زمان‌بندی برنامه‌های وب در گذشته، از چیزی مانند Date.now() استفاده می‌کنید که یک DOMTimeStamp را برمی‌گرداند. DOMTimeStamp عدد صحیحی از میلی ثانیه را به عنوان مقدار خود برمی گرداند. به منظور ارائه دقت بالاتر مورد نیاز برای زمان وضوح بالا، نوع جدیدی به نام DOMHighResTimeStamp معرفی شد. این نوع یک مقدار ممیز شناور است که زمان را نیز بر حسب میلی ثانیه برمی گرداند. اما از آنجایی که ممیز شناور است، مقدار می تواند نشان دهنده کسری میلی ثانیه باشد و بنابراین می تواند دقت یک هزارم میلی ثانیه را به دست دهد.

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

بنابراین اکنون که مهرهای زمانی با وضوح بالا داریم، بیایید از رابط کاربری زمان‌بندی برای بیرون کشیدن اطلاعات زمان‌بندی استفاده کنیم.

رابط کاربری زمان‌بندی عملکردهایی را ارائه می‌کند که به ما امکان می‌دهد روش‌هایی را در مکان‌های مختلف برنامه‌مان فراخوانی کنیم که می‌تواند دنباله‌ای به سبک Hansel و Gretel ارائه دهد تا به ما اجازه دهد زمان را در کجا صرف می‌کنیم.

استفاده از mark()

متد mark() ابزار اصلی در جعبه ابزار تحلیل زمان بندی ما است. کاری که mark() انجام می دهد این است که یک برچسب زمانی برای ما ذخیره می کند. چیزی که در مورد mark() بسیار مفید است این است که می‌توانیم مهر زمان را نامگذاری کنیم، و API نام و مهر زمان را به عنوان یک واحد به یاد می‌آورد.

فراخوانی mark() در مکان‌های مختلف برنامه به شما این امکان را می‌دهد تا بفهمید که چه مدت زمان صرف این علامت در برنامه وب خود کرده‌اید.

مشخصات تعدادی از نام‌های پیشنهادی را برای علائمی که ممکن است جالب و کاملاً توضیحی باشند، نام می‌برد، مانند mark_fully_loaded ، mark_fully_visible ، mark_above_the_fold و غیره.

برای مثال، می‌توانیم با استفاده از کد زیر، علامتی را برای زمانی که برنامه به طور کامل بارگذاری می‌شود تعیین کنیم:

window.performance.mark('mark_fully_loaded');

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

محاسبه اندازه گیری ها با measure()

هنگامی که مجموعه ای از علائم زمان بندی را تنظیم کردید، می خواهید زمان سپری شده بین آنها را بیابید. برای این کار از متد measure() استفاده می کنید.

measure() meter زمان سپری شده بین علامت ها را محاسبه می کند و همچنین می تواند زمان بین علامت شما و هر یک از نام های شناخته شده رویداد در رابط PerformanceTiming را اندازه گیری کند.

برای مثال، می‌توانید با استفاده از کدهایی مانند:

window.performance.measure('measure_load_from_dom', 'domComplete', 'mark_fully_loaded');

هنگامی که measure() را فرا می‌خوانید، نتیجه را مستقل از علامت‌هایی که تنظیم کرده‌اید ذخیره می‌کند، بنابراین می‌توانید بعداً آنها را بازیابی کنید. با ذخیره زمان‌هایی که برنامه شما اجرا می‌شود، برنامه پاسخگو باقی می‌ماند، و می‌توانید پس از اتمام برخی از کارها، تمام داده‌ها را خارج کنید تا بعداً آنالیز شود.

دور انداختن علائم با clearMarks()

گاهی اوقات مفید است که بتوانید از شر دسته ای از علائمی که تنظیم کرده اید خلاص شوید. به عنوان مثال، ممکن است اجراهای دسته ای را روی برنامه وب خود انجام دهید و بنابراین بخواهید هر اجرا را تازه شروع کنید.

خلاص شدن از شر هر علامتی که تنظیم کرده اید با فراخوانی clearMarks() به اندازه کافی آسان است.

بنابراین، کد مثال زیر تمام علائم موجود شما را از بین می‌برد، بنابراین در صورت تمایل می‌توانید یک اجرای زمان‌بندی را دوباره تنظیم کنید.

window.performance.clearMarks();

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

window.peformance.clearMarks('mark_fully_loaded');

از علامتی که در مثال اول تعیین کرده بودیم خلاص می شود در حالی که هر علامت دیگری را که تعیین کرده ایم بدون تغییر باقی می گذارد.

همچنین ممکن است بخواهید از شر اقداماتی که انجام داده اید خلاص شوید، و یک روش مربوطه برای انجام آن وجود دارد به نام clearMeasures() . دقیقاً مانند clearMarks() کار می‌کند، اما در عوض روی هر اندازه‌گیری که انجام داده‌اید کار می‌کند. به عنوان مثال، کد:

window.performance.clearMeasures('measure_load_from_dom');

اندازه گیری را که در مثال measure() بالا انجام دادیم حذف خواهد کرد. اگر می‌خواهید همه اندازه‌ها را حذف کنید، دقیقاً مانند clearMarks() عمل می‌کند - به این صورت که فقط clearMeasures() بدون آرگومان فراخوانی می‌کنید.

دریافت داده های زمان بندی

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

به عنوان مثال، متد getEntriesByType() به ما امکان می دهد تمام زمان های علامت گذاری خود را دریافت کنیم، یا تمام زمان های اندازه گیری خود را به عنوان یک لیست دریافت کنیم تا بتوانیم روی آن تکرار کنیم و داده ها را هضم کنیم. آنچه خوب است این است که لیست به ترتیب زمانی برگردانده می شود، بنابراین می توانید علائم را به ترتیبی که در برنامه وب خود زده اند مشاهده کنید.

کد زیر:

var items = window.performance.getEntriesByType('mark');

لیستی از تمام علائمی که در برنامه وب ما زده شده اند را به ما برمی گرداند، در حالی که کد:

var items = window.performance.getEntriesByType('measure');

فهرستی از تمام اقداماتی که انجام داده‌ایم را به ما برمی‌گرداند.

همچنین می‌توانید با استفاده از نام خاصی که به آنها داده‌اید، فهرستی از ورودی‌ها را دریافت کنید. به عنوان مثال، کد:

var items = window.performance.getEntriesByName('mark_fully_loaded');

لیستی را با یک آیتم به ما برمی‌گرداند که حاوی مهر زمانی «mark_fully_loaded» در ویژگی startTime است.

زمان بندی درخواست XHR (مثال)

اکنون که تصویر مناسبی از User Timing API داریم، می‌توانیم از آن برای تجزیه و تحلیل مدت زمانی که تمام XMLHttpRequests ما در برنامه وب ما طول می‌کشد استفاده کنیم.

ابتدا همه درخواست‌های send() خود را تغییر می‌دهیم تا یک فراخوانی تابعی صادر کنیم که نشانه‌ها را تنظیم می‌کند، و در همان زمان تماس‌های موفقیت آمیز خود را با یک فراخوانی تابعی تغییر می‌دهیم که علامت دیگری تنظیم می‌کند و سپس اندازه‌گیری مدت زمان درخواست را ایجاد می‌کند. گرفت.

بنابراین به طور معمول XMLHttpRequest ما چیزی شبیه به:

var myReq = new XMLHttpRequest();
myReq.open('GET', url, true);
myReq.onload = function(e) {
  do_something(e.responseText);
}
myReq.send();

برای مثال ما یک شمارنده جهانی برای ردیابی تعداد درخواست‌ها و همچنین استفاده از آن برای ذخیره اندازه‌گیری برای هر درخواستی که انجام می‌شود، اضافه می‌کنیم. کد انجام این کار به صورت زیر است:

var reqCnt = 0;

var myReq = new XMLHttpRequest();
myReq.open('GET', url, true);
myReq.onload = function(e) {
  window.performance.mark('mark_end_xhr');
  reqCnt++;
  window.performance.measure('measure_xhr_' + reqCnt, 'mark_start_xhr', 'mark_end_xhr');
  do_something(e.responseText);
}
window.performance.mark('mark_start_xhr');
myReq.send();

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

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

var items = window.performance.getEntriesByType('measure');
for (var i = 0; i < items.length; ++i) {
  var req = items[i];
  console.log('XHR ' + req.name + ' took ' + req.duration + 'ms');
}

نتیجه

User Timing API ابزارهای بسیار خوبی را در اختیار شما قرار می دهد تا در هر جنبه ای از برنامه وب خود اعمال کنید. با پاشیدن تماس‌های API در سراسر برنامه وب و پس پردازش داده‌های زمان‌بندی تولید شده برای ایجاد تصویر واضحی از محل صرف زمان، می‌توان نقاط داغ در برنامه‌تان را محدود کرد. اما اگر مرورگر شما از این API پشتیبانی نکند چه؟ مشکلی نیست، می‌توانید یک polyfill عالی را در اینجا پیدا کنید که API را به خوبی شبیه‌سازی می‌کند و با webpagetest.org نیز به خوبی بازی می‌کند. پس برای چی منتظری؟ اکنون User Timing API را روی برنامه‌های خود امتحان کنید، نحوه افزایش سرعت آن‌ها را بررسی خواهید کرد و کاربرانتان از شما برای بهبود تجربه‌شان تشکر خواهند کرد.