עם יציאתו הכל כך מתוקשרת לעולם של Internet Explorer 9 החלטתי לעשות בדיקה קצרה (שכבר זמן רב אני מעוניין לערוך) בהשוואת ביצועים של JavaScript בין הדפדפנים השונים ואולי גם בכלל על התנהגות של השפה (JavaScript) בדפדפן עצמו.

נעשו השוואות רבות בין הדפדפנים, על ידי החברות עצמן ועל ידי אנשים פרטיים, ובלוגים רבים נכתבו על ההבדלים שבין הדפדפנים, אך נראה שרובם התמקדו בהבדלים שבין הדפדפנים הן בממשק החיצוני והן בתמיכה (או אי תמיכה) של הדפדפנים בתקנים החדשים של HTML5 ו – CSS3.

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

בדיקה ראשונה, ספירת סרק
הבדיקה הראשונה שביצעתי היא בדיקת סרק, ספירה פשוטה של משתנה הנע בין 0 ל – 10 מיליון:

אמנם אין הרבה משמעות לבדיקה הנ"ל, הופתעתי לגלות הבדלים בין הדפדפנים:

תוצאות הבדיקה:
אינטרנט אקספלורר 9: 100 מילי-שניות
פיירפוקס 4: 85 מילי-שניות
כרום 10: 200 מילי-שניות

בדיקה שנייה, יצירת אלמנט input
בבדיקה השניה יצרתי 10,000 אלמנטים מסוג input אך עדיין לא הוספתי אותם לדף, יש לשים לב כי יצירת אלמנטים שונים ב – html אורכת זמן שונה, לדוגמה יצירת div תיקח פחות זמן מאשר יצירת input:


תוצאות הבדיקה:
אינטרנט אקספלורר 9: 80 מילי-שניות
פיירפוקס 4: 25 מילי-שניות
כרום 10: 20 מילי-שניות

בדיקה שלישית, יצירת אלמנט input והוספתם לדף באמצעות appendChild
בבדיקה השלישית יצרתי 10,000 אלמנטים מסוג input והפעם הוספתי אותם לדף, השתמשתי בפונקצית appenChild על ה - body:

כאן, הופתעתי מהתוצאות, הוספה של אלמנט ללא display='none' הייתה קצרה יותר מאשר יש display='none' המסקנה היא שכנראה שינוי הפרמטר של ה – display צורך זמן יקר השווה לרמתו כמעט כמו ההוספה לדף.

תוצאות הבדיקה:
אינטרנט אקספלורר 9: 350 מילי-שניות / ללא: 250 מילי-שניות
פיירפוקס 4: 170 מילי-שניות / ללא: 50 מילי-שניות
כרום 10: 130 מילי-שניות / ללא: 50 מילי-שניות

בדיקה רביעית, הוספת תגי input באמצעות innerHTML
בבדיקה הרביעית יצרתי מחרוזת המכילה 10,000 תגים מסוג input והפעם הוספתי אותם לדף באמצעות ה - innerHTML של ה – div אשר יצרתי:

גם כאן, הופתעתי מהתוצאות, הוספה של אלמנט ללא display='none' הייתה קצרה יותר מאשר יש display='none' המסקנה כאן היא שכנראה הפרמטר של ה – display צורך זמן יקר ביצירה (rendering) של הדף.
מה שעוד הפתיע הוא כי הוספת אלמנטים באמצעות appenChild אשר ביצעתי בבדיקה השלישית לקחה פחות זמן מאשר הוספה באמצעות innerHTML.

תוצאות הבדיקה:
אינטרנט אקספלורר 9: 220 מילי-שניות / ללא: 190 מילי-שניות
פיירפוקס 4: 120 מילי-שניות / ללא: 90 מילי-שניות
כרום 10: 320 מילי-שניות / ללא: 640 מילי-שניות

בדיקת Canvas
בבדיקות הבאות התמקדתי באלמנט ה – canvas, אלמנט חדש של html5 אשר מאפשר ציור על המסך באמצעות פקודות JavaScript.
 

בדיקה חמישית, ציור ריבוע
בבדיקה החמישית יצרתי אלמנט של canvas ועליו ציירתי ריבוע 10,000 פעמים:


תוצאות הבדיקה:
אינטרנט אקספלורר 9: 160 מילי-שניות
פיירפוקס 4: 70 מילי-שניות
כרום 10: 140 מילי-שניות


בדיקה שישית, ציור תמונה
בבדיקה השישית השתמשתי להעתקת תמונה על אלמנט ה – canvas  10,000 פעמים:

תוצאות הבדיקה:
אינטרנט אקספלורר 9: 320 מילי-שניות
פיירפוקס 4: 40 מילי-שניות
כרום 10: לא נבדק (עקב שינוי שיש לבצע בקוד ולכן לא יהיה תואם לשאר הדפדפנים)

בדיקה שביעית, ציור תמונה עם סיבוב של ה - canvas
בבדיקה השביעית הרחבתי את הבדיקה הקודמת, שוב ציירתי 10,000 פעם תמונה, אך הפעם סובבתי את ה – canvas במעלה אחת בכל ציור:

תוצאות הבדיקה:
אינטרנט אקספלורר 9: 470 מילי-שניות
פיירפוקס 4: 340 מילי-שניות
כרום 10: לא נבדק (עקב שינוי שיש לבצע בקוד ולכן לא יהיה תואם לשאר הדפדפנים)

אמנם פיירפוקס עדיין זריז יותר מאינטרנט אקספלורר במקרה זה, אך יש לשים לב להבדל הגדול שבין 40 מילי-שניות וההפרש הגדול אל מול אינטרנט האקספלורר בבדיקה השישית לעומת בדיקה זו שלקחה 340 מילי –שניות.
 

בדיקה שמינית, querySelectorAll של html5
בבדיקה השמינית בדקתי את אחת הפונקציות החדשות של ה – DOM ב – html5, פונקציית querySelectorAll אשר מאפשרת לקבל רשימה של אלמנטים מה – DOM אשר עונים על ה – selectors על פי CSS:

תוצאות הבדיקה:
אינטרנט אקספלורר 9: 100 מילי-שניות
פיירפוקס 4: 120 מילי-שניות
כרום 10: 150 מילי-שניות

אמנם פיירפוקס עדיין זריז יותר מאינטרנט אקספלורר במקרה זה, אך יש לשים לב להבדל הגדול שבין 40 מילי-שניות וההפרש הגדול אל מול אינטרנט האקספלורר בבדיקה השישית לעומת בדיקה זו שלקחה 340 מילי –שניות.

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

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

טבלת סיכום

* התוצאות בטבלא הינן במילי-שניות.

מידע על הבדיקה

  •   הבדיקה בוצעה על מכונה וירטואלית הכוללת:
    • 2 CPU  של Intel i3
    • עם 2GB זיכרון
    • מערכת הפעלה Windows 7
  • כל התוצאות הינן תוצאות מעוגלות של הממוצע של 50 הרצות של כל בדיקה על כל אחד מהדפדפנים.
     
  • html5test.html
  • js_html5test_results

קישורים נוספים:

על הכותב
כנען אביב הנו יזם הייטק ובעל בוטיק תכנה  Underdog Projects. קודם לכן ניהל את הפתוח של חברת Applied Cognitive Engineering. כנען מתכנת בכל שפה שמעניינת אותו ברגע זה ונהנה ליצור מערכות Web מתוחכמות.
 

תגובות (0)
< הקודם   הבא >