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

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

רן בר-זיק מרץ 18, 2012 7:28 am אין תגובות

כך אנחנו בודקים את זמן הריצה של סקריפט שמאט לנו את הדף ללא שימוש בכלי מפתחים/פרופיילר.

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

במאמר קודם סיפרתי על ה-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.

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

השארת תגובה

ביטול

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

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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