אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פיתוח ב-JavaScript » שימוש במתודות של console למדידת הזמן

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

רן בר-זיק מאי 5, 2019 7:07 am 2 תגובות

דרך קלה ליישום למדידת זמנים בסקריפטים שלכם בג'אווהסקריפט

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

ה-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 ומהיר ליישום ולביצוע.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
JavaScript

2 תגובות

  1. דוד הגב מאי 8, 2019 בשעה 10:41 pm

    פוסט נהדר, השתמשתי בו יום אחרי שקראתי.

    • David D הגב יוני 19, 2019 בשעה 10:10 pm

      אם האפליקציה עושה דברים מסובכים יותר, תמיד יש את
      https://developer.mozilla.org/en-US/docs/Web/API/Performance
      אפשר לעשות mark ואז measure ולהראות את האחרון, ממוצע של duration …
      בנוסף, ה performance monitor של כרום מראה את ה measure וקל לראות איפה "נעלם" זמן הריצה, מאד שימושי אם יש בעיות ביצועים

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
חיפוש

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד