מדידת ביצועים ב-JavaScript – ללא שימוש בפרופיילר

במאמר קודם סיפרתי על ה-profiler וכמה חשוב להשתמש בו במידה ויש לנו בעית ביצועים בסקריפט שכתבנו ובעקבות בעית הביצועים הזו הדף זז כמו סבתא בת 80 בתור לסופר. הבעיה היא שהפרופיילר החביב עובד אך ורק על פונקציות שיש להן שם. אם אתם מפעילים פונקציות אנונימיות, אז אתם בבעיה – אי אפשר להפעיל פרופיילר.

נכון שמומלץ לא לעבוד עם פונקציות אנונימיות, אבל לפעמים זה מה שכתבנו ועם זה צריך לנצח. חוץ מזה שלפעמים באמת חייבים לכתוב פונקציות אנונימיות. וגם אם לא נכנס לויכוח הזה – עולה השאלה – איך נמדוד את הביצועים של הסקריפט שלנו? איך נבודד את הקטע הבעייתי בלי פרופיילר? מה משמעות החיים?

לפחות בנוגע לשתי השאלות הראשונות – יש לי פתרון בצורת סקריפט נפלא שמשתמש ב-console, שמודד את זמן הריצה של הסקריפט שלנו ואפשר להשתמש בו כמובן בכל פונקציה שהיא. ראשית כל – להלן סקריפט פשוט של JavaScript שרץ ללא פונקציה כלל:

<script>
var i=0;
var m = 0;
for (i = 0; i < 100000000; i++) {
m +=i;
}
console.log('completed : '+m);
</script>

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

<script>
console.time('test number one');
var i=0;
var m = 0;
for (i = 0; i < 100000000; i++) {
m +=i;
}
console.log('completed : '+m);
console.timeEnd('test number one');
</script>

אתם מאד מוזמנים לבדוק את הקונסולה שלכם ולראות את הדוגמה החיה!

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

<script>
var start = new Date().getTime();

var i=0;
var m = 0;
for (i = 0; i < 100000000; i++) {
m +=i;
}

var end = new Date().getTime();
var time = end - start;
alert('Execution time: ' + time);
</script>

הסקריפט הזה יותר דוחה ופחות אלגנטי, וגם משתמש ב-alert, אבל בדפדפנים עתיקי יומין ומתפרקים לפעמים הוא הדרך היחידה שלנו לעבוד. כשאני צריך למדוד ביצועים ואני לא יכול להשתמש בפרופיילר, אני חושב ש-console.time הוא הדרך הטובה ביותר. נסו ותהנו!

במאמר הבא נתחיל לדבר על איך לכתוב JavaScript ו-jQuery באופן יותר יעיל ונתמקד בסלקטורים יעילים ב-jQuery.