5 טיפים לשיפור ביצועים בקוד ב-jQuery

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

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

 

למה כדאי לכתוב קוד יעיל ב- jQuery ?

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

2. תמיד כדאי לכתוב קוד נכון ויעיל, מכיוון שכאשר נרצה לכתוב מקטעי קוד גדולים וכבדים יותר כבר נהיה מתורגלים בדרך הנכונה לכתוב אותו.

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

 

 

הטיפים לשיפור יעילות הקוד ב-jQuery

1. בחירת סלקטור למציאת אלמנט

יש סלקטורים מסויימים שקל יותר ל- jQuery למצוא בדף. למשל, סלקטור של ה- id של אלמנט קל ומהיר יותר למציאה מאשר לפי ה- class שלו.

להלן הרשימה של הסלקטורים לפי סדר יעילות יורד (א' הכי מהיר, ה' הכי איטי)

א. לפי id של האלמנט

$("#myButton")

 

ב. לפי סוג האלמנט 

$("input")

ג. לפי ה- class של האלמנט

$(".redButton")

ד. לפי מאפיין (attribute) של האלמנט 

$("[type=checkbox]")

ה. לפי פסאודו סלקטור (pseudo-selector) של האלמנט

$(":checked")

 

 

2. המעיטו בפירוט הנתיב של האלמנט בסלקטור ככל הניתן

ככל שתכתבו נתיב קצר יותר כך jQuery ימצא אותו מהר יותר.

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

$("#main #container .row");	//Slower
$("#container .row");	//faster
$(".row");	//fastest

 

למה זה קורה? כשאני קראתי על זה לראשונה זה היה נראה לי מוזר מכיוון שחשבתי שאם אני מפרט יותר אז קל יותר ל-jQuery לצמצם את תוצאות החיפוש שלו ולמצוא בקלות את מה שאני צריך, ואם אני רושם נתיב ארוך אז הוא יצמצם אותו, כלומר, על ידי קריאה של האלמנטים בסלקטור משמאל לימין (מהאב לבן), אך מסתבר ש-jQuery לא עובד כך.

כאשר jQuery מחפש אלמנט הוא מתחיל קודם לקרוא את הסלקטור מימין לשמאל (קודם הבן ולאחר מכן האב), ואם ניקח את השורה הראשונה מהדוגמא שלנו אז קודם כל הוא היה מחפש את האלמנט עם ה- class בשם row, לאחר שהוא מצא את כולם הוא עובר לסלקטור הבא (#container), שהוא יהיה אלמנטים עם id של container ויצמצם את השאר, ולבסוף מהרשימה שנשארה לו הוא יחפש את מי שנמצא תחת אלמנט עם id בשם main.

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

לא תמיד נוכל לצמצם את הסלקטורים של האבות אך במידה ואנו חייבים לכתוב אותם תוכלו להשתמש בטיפ הבא:

 

3. השתמשו בפונקציות של jQuery על מנת לסנן בנים בסלקטור

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

בדוגמא זו נשתמש בפונקציה find של jQuery שהיא בעצם מחפשת בתוך רשימה של אלמנטים את האלמנט שנרצה

$("#container").find(".row");

בדוגמא זו ניתן לראות שאני מחפש קודם את האלמנט container ולאחר ש-jQuery מצא אותו אני משתמש בפונקציה find על מנת למצוא בתוך האלמנטים הבנים שלו שיש להם את ה-class בשם row וכך בעצם אני מממש את החיפוש מהכיוון של האב לבן בשונה מצורת החיפוש המובנה של jQuery כמו בסעיף 2.

 

4. הימנעו משימוש בסלקטור אוניברסלי (*)

כאשר משתמשים בסלקטור האונברסלי של jQuery אנו מבזבזים המון משאבים, מכיוון שסלקטור זה הוא הסלקטור הכי לא יעיל מכיוון שהוא מחזיר את כל האלמנטים בדף (כפי שהסברנו בסעיף 2) ולכן מומלץ מאד להימנע משימוש בו.

במידה וחייבים להשתמש בו נחזור לטיפ מספר 3 ונשתמש בפונקציה children של jQuery שתחזיר לנו את כל הילדים של האלמנט שנחפש.

בדוגמא הבא ניתן לראות בשורה הראשונה את השימוש ב-* ולאחר מכן בשורה השניה את הדרך הטובה יותר לעשות זאת:

$(".buttons > *"); 		//Slower
$(".buttons").children(); 	//Faster

 

 

 

5. שימוש ב- Caching

כאשר נרצה להשתמש מספר פעמים באותם אלמנטים שחיפשנו בדף מומלץ לשמור אותם במשתנה. 

לדוגמא, נסתכל על הקוד הבא שמציג ומסתיר אלמנטים מסוג li כאשר לוחצים על שתי כפתורים (hideBlocks ו-showBlocks)

$("#hideBlocks").click(function() {
      $("#blocks").find("li").fadeOut();
});

$("#showBlocks").click(function() {
      $("#blocks").find("li").fadeIn();
});

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

הקוד הבא עושה את אותו הדבר אך הוא יעיל יותר מכיוון שהוא מחפש רק פעם אחת את האלמנטים ושומר אותם במשתנה (blocks) ולאחר מכן עושה עליו את הפעולות שצריך

var blocks = $("#blocks").find("li");

$("#hideBlocks").click(function() {
    blocks.fadeOut();
});
$("#showBlocks").click(function() {
    blocks.fadeIn();
});

 

 

 

 

 

 

 

אשמח אם תשתפו אותי בתגובות בטיפים נוספים שיש לכם

 

תגיות:

הוסף תגובה