ביצועים בהרצת JavaScript, שעור ראשון - מחרוזות

מאת: עוזי רפאלי

מאמרים >> בניית אתרים >> ביצועים בהרצת JavaScript, שעור ראשון - מחרוזות

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

הבעיה
מרבית מפתחי שפת JavaScript משתמשים בדרך הקלה לחיבור מחרוזות אשר מכילה את האופרטור +.

var str = "Hello" + " World";

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

הפיתרון
פונקציית join של אובייקט המערך מאפשרת לנו להמיר את כל האלמנטים במערך למחרוזת בודדת כאשר האלמנטים מופרדים ע"י תו מוגדר מראש.
אם נציב בכל תא במערך מחרוזת ונחבר את כולן באמצעות שימוש בפונקציית join עם תו ריק הרי שנקבל מחרוזת אחת גדולה בדיוק כמו שנקבל אם נשתמש באופרטור +.
פונקציה זו דומה מאד למתרחש באובייקט StringBuffer בשפת Java.

var buffer = new Array();

buffer[buffer.length] = "Hello";

buffer[buffer.length] = " World";




buffer.join("");

היתרון
היתרון שבשימוש ב Array.join בכדי לאחד מחרוזות הוא עניין טהור של שיפור בביצועים.
בכדי לראות עד כמה העניין מהותי בואו נריץ 10,000 פעמים לולאה שמחברת מחרוזות בשתי השיטות:

תוצאות הניסוי:
חיבור בשיטה רגילה (+):
 

 

1. IE 6 - זמן ריצה ממוצע 646ms (הערך המקסימלי: 810ms, הערך המינימלי: 460ms)
    
2. FireFox 1.5B1 - זמן ריצה ממוצע 26ms (הערך המקסימלי: 47ms, הערך המינימלי: 15ms)
    

Array.join:
 

 

1. IE 6 - זמן ריצה ממוצע 26ms (הערך המקסימלי: 32ms, הערך המינימלי: 15ms)
    
2. FireFox 1.5B1 - זמן ריצה ממוצע 20ms (הערך המקסימלי: 31ms, הערך המינימלי: 15ms)
    

תוצאות הניסוי מרשימות. Array.join משפר את הביצועים ב 2484% (!!!) לעומת שימוש בחיבור מחרוזות רגיל ב IE.
לעומת זאת, דפדפן FF כמעט ולא מרגיש בהבדל, מה שאומר שהחבר'ה ב Mozilla עשו עבודה טובה :-)

מסקנות
השתמשו ב Array.join ביישומי ה JavaScript שלכם וספקו למשתמש שלכם חווית משתמש חלקה ונעימה יותר, תוך שמירה על ביצועים גבוהים.

פונקציות בדיקה
 

function test1(){

	var cycles = 10000;

	var tp1 = new Date().valueOf();

	var buffer = "";

	

	for (var i = 0; i < cycles; i++)

		buffer += "0123456789";

	

	var tp2 = new Date().valueOf();

	

	alert(tp2 - tp1);

}




function test2(){

	var tp1 = new Date().valueOf();

	var buffer = new Array();

	

	for (var i = 0; i < cycles; i++)

		buffer[buffer.length] = "0123456789";

	

	var str = buffer.join("");

	var tp2 = new Date().valueOf();

	

	alert(tp2 - tp1);

}

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

מקור המאמר: www.Articles.co.il - מאמרים לשימוש חופשי