שימוש במתודות של console למדידת הזמן

ה-console שלכם הוא עולם ומלואו ולא חייבים להשתמש בו רק כדי להציג הודעות דיבאגינג (אני רק מזכיר שעדיף לא להציג הודעות דיבאגינג באתר פרודקשן, כן?). שימוש נבון ב-console יכול לסייע לכם למדוד את הזמן בסקריפטים של הג'אווהסקריפט שלכם. איך בדיוק? הכירו את console.time ואת console.timeEnd.

הטריק הוא פשוט, אני מכניס console.time לסקריפט שלי והוא מקבל ארגומנט של מחרוזת טקסט כלשהו. זה צריך להיות משהו תיאורי. מהנקודה הזו, הזמן מתחיל להמדד. המדידה נעצרת כאשר הסקריפט מרנדר את console.timeEnd שמקבל את אותה מחרוזת טקסט ייחודית כארגומנט ואז היא מוצגת בקונסולה (בין אם מדובר בג'אווהסקריפט בסביבת דפדפן או ב-Node.js).

הנה דוגמה שממחישה את הכל. אתם מוזמנים להעתיק אותה ולראות מה קורה:

console.time('My script process time');
const a = 1;
const b = 1;
const c = a + b;
console.timeEnd('My script process time');

מה שאני אראה הוא תצוגה נאה של הזמן שבו התהליך הזה לקח: My script process time: 0.157ms

אבל כמובן שהעניינים מתחילים להסתבך כאשר אנו רוצים לבצע מדידות מסובכות יותר, מה אם למשל יש לי כמה API שאני חושד שאחד מהם יחסית איטי? או פעילות אחרת שאני חושב שהיא איטית?

כן, אפשר להתחכם ולעשות משהו בסגון הזה אם אני רוצה לפרק את התהליך:

console.time('My script process time');
const a = 1;
console.timeEnd('My script process time');
console.time('My script process time');
const b = 1;
console.timeEnd('My script process time');
console.time('My script process time');
const c = a + b;
console.timeEnd('My script process time');

אבל זה מבאס ומסורבל וגם אני מאבד פונקציונליות של החישוב הכללי. אז בואו נעשה את זה בצורה קצת חכמה יותר: הכירו את console.timeLog. המתודה הפשוטה הזו מקבלת כמה ארגומנטים. הארגומנט הראשון הוא מחרוזת הטקסט הייחודית של הטיימר שלי. השני הוא הערת ביניים שתודפס והשלישי הוא מידע נוסף (יכול להיות מחרוזת טקסט, אובייקט, כל דבר). והכל יודפס עם הזמן.

console.time('My script process time');
const a = 1;
console.timeLog('My script process time', 'a was assigned', a);
const b = 1;
console.timeLog('My script process time', 'b was assigned', b);
const c = a + b;
console.timeLog('My script process time', 'c was assigned', c);
console.timeEnd('My script process time');

הפלט יהיה משהו כזה:

My script process time: 0.156ms a was assigned 1
My script process time: 4.385ms b was assigned 1
My script process time: 5.106ms c was assigned 2
My script process time: 6.464ms

דוגמה מעשית יותר אפשר לראות בקוד שלי שקורא גם ל-API של בדיחת צ'אק נוריס וגם ל-API של עוגית מזל ומציג את שתיהן. לקחתי את הקוד הזה מהמאמר שלי שבו אני מסביר על Async-Await. אבל פה הכנסתי טיימרים. אם תריצו את הקוד הזה ותביטו בקונסולה שלכם, תוכלו לראות מדידה מדויקת של הזמנים.

See the Pen Async example – multiple services with timer by Ran Bar-Zik (@barzik) on CodePen.

והנה הקוד המלא:

function jokeService() {
  return new Promise(function(resolve, reject) {
    var request = new XMLHttpRequest();

    request.open('GET', 'https://api.icndb.com/jokes/random');
    request.onload = function() {
      if (request.status == 200) {
        resolve(JSON.parse(request.response)); // we got data here, so resolve the Promise
      } else {
        reject(Error(request.statusText)); // status is not 200 OK, so reject
      }
    };

    request.onerror = function() {
      reject(Error('Error fetching data.')); // error occurred, reject the  Promise
    };

    request.send(); //send the request
  });

}

function fortuneService() {
  return new Promise(function(resolve, reject) {
    var request = new XMLHttpRequest();

    request.open('GET', 'https://helloacm.com/api/fortune/');
    request.onload = function() {
      if (request.status == 200) {
        resolve(request.response); // we got data here, so resolve the Promise
      } else {
        reject(Error(request.statusText)); // status is not 200 OK, so reject
      }
    };

    request.onerror = function() {
      reject(Error('Error fetching data.')); // error occurred, reject the  Promise
    };

    request.send(); //send the request
  });

}

async function main() {  
  console.time('My service process time');
  let joke = await jokeService();
  console.timeLog('My service process time', 'got joke', joke)
  let fortune = await fortuneService();
  console.timeLog('My service process time', 'got fortune', fortune)
  document.write(joke.value.joke + fortune);
  console.timeEnd('My service process time');
}

main();

אם לא הכרתם את זה – זו יופי של דרך מהירה לבדוק בעיות ביצועים. עובד היטב גם בדפדפן וגם ב-Node.js ומהיר ליישום ולביצוע.